/* ============================================================
   strands.css — the Strands hero.
   Sibling of quiet-atlas.css and deliberately dimension-for-dimension
   identical to it: the same min-heights, the same navbar offset, the same
   content column and type scale. Only the graphic changes, so swapping the
   two partials is a like-for-like swap and any layout regression is the
   swap's fault rather than a new stylesheet's.
   Engine: assets/js/mvp/strands.js.
   ============================================================ */

/* Full-height landing hero: content vertically centred in the viewport, below
   the fixed floating navbar. padding-top matches the site's im-navbar-offset
   (8.5rem) so the content never slips under the bar; the larger top than bottom
   padding nudges the optical centre down so it reads as centred-below-the-nav. */
.st-hero { position: relative; min-height: 100vh; overflow: hidden; background: var(--im-paper);
  display: flex; align-items: center; padding-top: 8.5rem; padding-bottom: 4rem; box-sizing: border-box; }

.st-hero__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block;
  pointer-events: auto; touch-action: pan-y; }

/* The strands' own left-to-right veil is baked into each stroke, so unlike the
   atlas hero this needs no scrim to hold the composition together. What it DOES
   need is a legibility floor: hairlines crossing body text add visual noise for
   low-vision readers even though they barely move measured contrast. So this is
   far lighter than the atlas scrim and clears entirely by the mid-point — an
   accessibility measure, not a design layer. */
.st-hero__scrim { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--im-paper) 48%, transparent) 0%,
    color-mix(in srgb, var(--im-paper) 32%, transparent) 30%,
    color-mix(in srgb, var(--im-paper) 7%, transparent) 52%,
    transparent 62%); }

/* content column sits over the canvas; pointer-events:none lets the pointer
   reach the strands through the text area, so hovering a journey works even
   where it passes behind the copy — re-enabled on the CTAs, which are real links */
/* Every strands hero — the full-viewport fan/home hero AND the compact
   inner-masthead heroes — sits its copy on the SAME centred content spine as the
   page body (.im-wrap: max-width var(--im-wrap-max), centred, var(--im-space-8)
   gutter), so the H1 shares one left edge with the breadcrumb and every section
   below it. margin-left reproduces .im-wrap's left content edge at any width — 100%
   (the flex container's inline size, scrollbar-safe) not 100vw; max() clamps it to
   the flat gutter below the 1280 column. The strands canvas still bleeds edge to
   edge behind it; only the text column is contained. Reference: Harvey/Exa contain
   the hero copy while the background bleeds full width. */
.st-hero__content { position: relative; z-index: 2; max-width: 640px;
  margin-left: max(var(--im-space-8), calc((100% - var(--im-wrap-max)) / 2 + var(--im-space-8)));
  pointer-events: none; }

.st-hero__kicker { font-family: var(--im-font-display); font-size: 11px; letter-spacing: .22em;
  text-transform: uppercase; color: var(--im-accent-200); margin: 0 0 16px; }

/* margins zeroed explicitly: h1/p carry Bootstrap defaults in the platform stack */
.st-hero__title { font-family: var(--im-font-serif); font-weight: 400;
  font-size: clamp(40px, 4.4vw, 64px); line-height: 1.02; letter-spacing: var(--im-track-display);
  color: var(--im-ink); margin: 0; text-wrap: balance; }
/* teal underline under the final word — a painted background stroke, not
   text-decoration, so it sits below the baseline cleanly.
   box-decoration-break: clone so that when the marked text wraps, EACH line
   fragment gets its own full-width stroke. Under the default (slice) the stroke
   is painted against the unbroken box and then cut up, which leaves partial
   strokes on some engines. */
.st-hero__title u { text-decoration: none;
  background-image: linear-gradient(var(--im-accent-200), var(--im-accent-200));
  background-repeat: no-repeat; background-position: 0 94%; background-size: 100% 5px;
  padding-bottom: 2px;
  -webkit-box-decoration-break: clone; box-decoration-break: clone; }
/* Two-sentence headline ("The world is connected. Moving through it still
   isn't."): give the marked sentence its own line so the break lands on the full
   stop instead of mid-clause.
   THE BREAK IS PUT ON THE PRE-TEXT, NOT ON THE MARK, and that is the whole fix.
   This rule used to read `.st-hero__title--stack u { display: block; width:
   fit-content }`, which is correct only while the marked sentence fits on one
   line. It does not: at the clamp's top end (64px) it is far wider than the hero
   column, so it wraps — and `fit-content` on a wrapped block resolves to the
   AVAILABLE width, not the text width. The box became the full column and painted
   one 640px stroke under a much shorter last line, running way past "isn't."
   Blocking the pre-text instead forces the same line break while leaving the mark
   inline, so the stroke tracks the text however it wraps, at any size. */
.st-hero__title-pre { display: inline; }
@media (min-width: 700px) {
  .st-hero__title--stack .st-hero__title-pre { display: block; }
}

.st-hero__lede { font-family: var(--im-font-body); font-size: 18px; line-height: 1.5;
  color: var(--im-text-200); max-width: 44ch; margin: 18px 0 0; }

/* Wraps because the row now holds two buttons (the jump link plus the
   cross-audience door). Unwrapped, "Explore visas & routes" beside "For
   employers" overflows the content spine at 320px and at 200% zoom, which is a
   WCAG 1.4.10 reflow failure. The sibling .st-hero__creds below already wraps
   for the same reason. */
.st-hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px;
  pointer-events: auto; }

/* Credential strip. Sits below the CTAs deliberately: it is corroboration for a
   reader who has already read the promise, not a competing headline. Small,
   uppercase, muted — the hero's one job is the sentence, and a second bold
   element next to it would split the eye. Items are separated by a rule rather
   than a bullet glyph so nothing has to be read aloud between them. */
/* No max-width. The 44ch cap the lede above uses is a reading measure and is
   wrong for a metadata row: it is narrower than the three credentials plus their
   dividers, so it wrapped the last item onto its own line and broke the row it
   exists to be. This tracks the hero content width instead. */
.st-hero__creds { display: flex; flex-wrap: wrap; align-items: center;
  gap: 10px 18px; margin-top: 28px; padding-top: 18px;
  border-top: 1px solid var(--im-hairline);
  pointer-events: auto; list-style: none; padding-left: 0; margin-bottom: 0; }
.st-hero__cred { font-family: var(--im-font-display); font-size: 11.5px;
  font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--im-text-muted); display: inline-flex; align-items: baseline; gap: 7px; }
.st-hero__cred + .st-hero__cred { border-left: 1px solid var(--im-hairline);
  padding-left: 18px; }
/* The figure keeps the body face at tabular widths so a count-up (or a swapped
   figure) cannot reflow the row. */
.st-hero__cred-fig { font-size: 13.5px; letter-spacing: .02em; color: var(--im-ink);
  font-variant-numeric: tabular-nums; }
@media (max-width: 575.98px) {
  /* Below the fold-width the rules read as clutter; stack and drop them. */
  .st-hero__creds { flex-direction: column; align-items: flex-start; gap: 8px; }
  .st-hero__cred + .st-hero__cred { border-left: 0; padding-left: 0; }
}

/* Badge slot in a country hero. Only `/uk/` reaches this now: the worldwide
   home's badge moved out to its own band below the hero (the masthead was
   saying "regulated" three ways at once — credential strip, badge and scoping
   sentence — which reads as anxiety rather than authority). A UK page needs no
   scoping sentence beside the badge, so this is a plain block holding one mark,
   not the two-column shelf it used to be. */
.st-hero__reg { margin-top: var(--im-space-6); pointer-events: auto; }

/* Hero base — the logo strip sitting on the floor of the 100vh hero.
   Absolutely positioned rather than restructuring .st-hero into a column flex:
   this partial renders on eleven surfaces and only one has a base, so changing
   the flex axis would change how the copy centres on the other ten for no
   reason. The strip brings its own opaque background and hairlines. */
.st-hero__base { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; }
/* Reserve the strip's height (~70px) plus clearance, so the vertically-centred
   copy cannot run into it on a short viewport. Replaces the base 4rem. */
.st-hero--withbase { padding-bottom: 8rem; }
@media (max-width: 991.98px) {
  /* The hero releases its min-height here and the canvas is hidden, so there is
     no floor for the strip to sit on and it returns to normal flow, under the
     copy. `.st-hero` has to become a COLUMN to make "under" true: it is a row
     flex by default, so a statically-positioned base is a second flex item and
     lands BESIDE the copy, squeezing both. align-items goes to stretch so the
     strip keeps its full-bleed hairlines rather than shrink-wrapping its logos. */
  .st-hero { flex-direction: column; align-items: stretch; }
  .st-hero__base { position: static; }
  /* The copy already carries 48px of bottom padding at this width, so the strip
     needs no margin of its own; adding one double-spaces the two. */
  .st-hero--withbase { padding-bottom: 0; }
}

@media (max-width: 991.98px) {
  /* Tablet and below: the veil runs left-to-right, but at this width the copy
     spans the full column, so there is no quiet side for it to hide behind.
     Matching the atlas hero's treatment — hide the graphic, release the
     min-height, keep a clean text-only hero. A vertical-ramp mobile variant is
     a deliberate follow-up, not an oversight. */
  .st-hero { min-height: auto; padding-top: 6.5rem; }
  .st-hero__canvas, .st-hero__scrim { display: none; }
  /* Match the page body's flat .im-wrap gutter (var(--im-space-8)); release the
     desktop spine offset so the copy fills the column edge to edge. */
  .st-hero__content { margin-left: 0; padding: 0 var(--im-space-8) 48px; max-width: none; }
}


/* ============================================================
   Converge mode — country pages (/uk/, /portugal/ …).
   Journeys resolve to zero spread on one line; a single shared path carries on.
   Additive over .st-hero; the fan-mode rules above are untouched.
   ============================================================ */

/* Not full-viewport: shorter than the home hero so the first category cards sit
   one short scroll below — protects the routes-first intent. Matches
   .qa-hero--region exactly so the swap changes nothing but the drawing. */
.st-hero--converge { min-height: min(72vh, 660px); }

@media (max-width: 991.98px) {
  .st-hero--converge { min-height: auto; }
}

/* ============================================================
   Compact tier — the shared inner-page masthead (country home, About,
   destinations hub). Same engine, ink and underlined mark as the cinematic
   home hero; the ONLY differences are a shorter height (~60vh, not 100vh),
   content top-aligned below the nav (not vertically centred), and converge
   strands. Formalises the sizing so the three inner pages read as one family
   at one height, rather than each approximating it. Additive over .st-hero and
   .st-hero--converge; the fan-mode (home) hero never carries it and is
   untouched. Placed AFTER --converge so its min-height wins.
   ============================================================ */
.st-hero--compact { min-height: clamp(440px, 64vh, 600px);
  align-items: center; padding-top: calc(var(--im-nav-h) + var(--im-space-10)); }

/* Spine containment now lives on the base .st-hero__content (shared by every
   strands hero), so the compact tier inherits it — no per-tier override needed.
   A touch more leading than the fan hero: the compact headline is often two lines,
   and 1.05 reads as composed rather than cramped at 1.02. */
.st-hero--compact .st-hero__title { line-height: 1.05; }

@media (max-width: 991.98px) {
  .st-hero--compact { min-height: auto; }
}

/* Country home only: a breadcrumb bar above (im-navbar-offset) has already
   cleared the fixed nav, so the hero must NOT clear it a second time or the gap
   doubles. Drops the nav clearance to a plain internal top pad. Placed AFTER
   --compact so it wins the padding-top. */
.st-hero--flush { padding-top: var(--im-space-8); }