/* Marinova shared hero extension (UI-02-HERO, fixture-only candidate). Loaded only by pages of the registered
   "hero" page type, after the shared stylesheet; the shared tokens, shell, buttons and sections are unchanged.
   Typography roles are the resolved styles of the pinned 296abbf homepage (layout "home") and Fleet Hub (layout
   "fleet"), measured at 390 and 1366 in Light and Dark (docs/ui-system/evidence/UI-02-HERO/measure/). Colours come
   from the shared tokens, so both themes follow the shell.

   UI-02-HERO-OWNER-R2 — ONE COMMON HERO RECIPE (docs/ui-system/evidence/UI-02-HERO-OWNER-R2/OWNER-DIRECTION.md).
   Every hero shares, through the named roles on .ui-hero below, the header (the clear over-hero header with the R1
   header-attached readability layer, C9), the geometry (the homepage's photograph height, media origin, copy column,
   spacing and desktop minimum height; content may only make a hero taller, never shorter, nothing is cropped), the
   photograph's edges, the action group and the cue position. A layout ("home" | "fleet") may set only its type roles
   (C10), its copy/facts arrangement and the photograph's focal point. The hero browser and unit tests compare the two
   fixtures directly. The "tint" header option remains registered (legacy, unused by the common recipe).
   UI-02-HERO-OWNER-R3 (docs/ui-system/evidence/UI-02-HERO-OWNER-R3/OWNER-DIRECTION.md): Ahmed rejected the R2
   appearance. The photographs' lower edges stay clear (no lower fade on desktop; at most a 24px transition on phones
   and tablets, the heading entirely on the page surface), the copy-side fade and header layer stay; "Explore" sits in
   its own full-width row at the foot of the hero, centred on the page; both action groups follow one rule (desktop:
   at the copy edge; phones and tablets: centred in the full content width; a row when the pair fits, otherwise an
   equal-width stack).

   C9: the over-hero header. The hero runtime sets data-ui-hero-top on the shared header while the page is scrolled
   50px or less: no surface, blur or rule, so the photograph and the header layer show through; the controls keep
   the theme's ink (navy in Light, light in Dark). An open header popover restores the solid header. Without
   scripting the attribute is never set and the standard shell header stays.
   C10: named hero roles --ui-hero-h1 (heading size), --ui-hero-lead and --ui-hero-lead-line (lead). */

/* ── Header over the hero (common) ── */
.ui-hdr--hero-clear[data-ui-hero-top]:not(:has(.ui-pop[open])){background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;border-bottom-color:transparent}
/* UI-02-HERO-R1: the clear header's readability protection travels WITH the header. On the reference it was painted
   into the photograph, so it scrolled away while the header stayed pinned, and between 1 and 50px the controls
   fell as low as 1:1 against the photograph (docs/ui-system/evidence/UI-02-HERO-R1/). This layer sits behind the
   controls (z-index -1 in the header's own stacking context), holds the page surface strongly through the control
   rows and eases out below the header, so it is identical at every scroll position of the transparent interval,
   and it is also the soft top edge of the photograph. From 901px it starts where the common photograph starts
   (the heading side is already the plain page surface), so it never veils the hero heading. It exists only in the
   over-hero state; an open popover, scroll past 50px or no scripting give the ordinary solid header. A deliberate
   readability departure from the legacy reference.
   UI-02-HERO-OWNER-R2: with the Fleet photograph now under the clear header, its dark overhead structure showed
   through the R1 layer (.9 -> .86 across the control rows) behind the gold "F1 GP Abu Dhabi" link at 901-1024 in
   Light (4.46:1; docs/ui-system/evidence/UI-02-HERO-OWNER-R2/logs/hero-spec-run1-FAIL-fleet-nav-contrast.txt). The
   control rows now hold .96 -> .93; the ease-out below the header is unchanged. */
.ui-hdr--hero-clear[data-ui-hero-top]:not(:has(.ui-pop[open]))::before{content:"";position:absolute;z-index:-1;top:0;left:0;right:0;height:calc(100% + 54px);pointer-events:none;
  background:linear-gradient(rgba(var(--ui-surface-rgb),.96) 0,rgba(var(--ui-surface-rgb),.93) calc(100% - 74px),rgba(var(--ui-surface-rgb),.62) calc(100% - 54px),rgba(var(--ui-surface-rgb),.34) calc(100% - 36px),rgba(var(--ui-surface-rgb),.14) calc(100% - 18px),rgba(var(--ui-surface-rgb),.04) calc(100% - 6px),rgba(var(--ui-surface-rgb),0) 100%)}
/* The mask starts at the common photograph edge (77px = --ui-hero-media-x, which the header cannot read). */
@media (min-width:901px){
  .ui-hdr--hero-clear[data-ui-hero-top]:not(:has(.ui-pop[open]))::before{-webkit-mask-image:linear-gradient(to right,transparent calc(50% - 77px),#000 calc(50% + 43px));mask-image:linear-gradient(to right,transparent calc(50% - 77px),#000 calc(50% + 43px))}
}
/* Legacy option, not part of the common recipe (see above). */
.ui-hdr--hero-tint[data-ui-hero-top]{background:rgba(var(--ui-surface-rgb),.92);border-bottom-color:transparent}

/* ── Common roles ──
   --ui-hero-ph       phones/tablets: photograph height below the header
   --ui-hero-hoff     phones/tablets: how far the heading starts above the photograph's lower edge (0: the heading
                      starts where the photograph ends, entirely on the page surface)
   --ui-hero-pb       phones/tablets: section spacing below the hero
   --ui-hero-min      desktop: minimum hero height, the homepage's: its 530px cap from 1293px, 41vw below that,
                      never under 471px, the homepage's lowest measured desktop height (990px, both engines), so the
                      homepage keeps its existing height at every width; content may only add to it
   --ui-hero-pt       desktop: space between the header and the heading
   --ui-hero-pbd      desktop: space below the copy (or below the cue row)
   --ui-hero-media-x  desktop: the photograph starts this far left of the viewport centre
   --ui-hero-copy     desktop: copy column width
   --ui-hero-fade-x   desktop: copy-side fade length (share of the photograph's width)
   --ui-hero-fade-y   phones/tablets: lower-edge transition length, at most 24px (none on desktop)
   --ui-hero-gap      gap between the two actions, in a row or a stack
   The fade profile is the same on every faded edge: solid surface for the first 18% of the fade length, .88 at 32%,
   .5 at 55%, clear at 100%. */
.ui-hero{--ui-hero-h1:clamp(2.0625rem,3.7vw,3.375rem);--ui-hero-lead:.96875rem;--ui-hero-lead-line:1.55;--ui-hero-lead-weight:400;--ui-hero-hh:var(--ui-header-mobile);
  --ui-hero-ph:clamp(272px,70vw,376px);--ui-hero-hoff:0px;--ui-hero-pb:clamp(24px,4vw,34px);
  --ui-hero-min:clamp(471px,41vw,530px);--ui-hero-pt:clamp(28px,3.2vw,48px);--ui-hero-pbd:clamp(24px,3vw,40px);
  --ui-hero-media-x:77px;--ui-hero-copy:46%;--ui-hero-fade-x:50%;--ui-hero-fade-y:24px;--ui-hero-gap:12px;
  position:relative;overflow:hidden;background:var(--ui-surface);margin-top:calc(-1 * var(--ui-hero-hh));color:var(--ui-ink-2)}
.ui-hero--fleet{--ui-hero-h1:clamp(2rem,4.2vw,3.25rem);--ui-hero-lead-line:1.7;--ui-hero-lead-weight:300}
@media (min-width:901px){.ui-hero{--ui-hero-hh:var(--ui-header)}}
.ui-hero__media{position:absolute;top:0;left:0;right:0;line-height:0}
.ui-hero__media picture{display:block;height:100%}
/* .ui-hero__media .ui-hero__img outranks the shared .ui-page img (height:auto), so the photograph fills its box. */
.ui-hero__media .ui-hero__img{display:block;width:100%;max-width:none;height:100%;object-fit:cover}
/* Phones and tablets: a short lower-edge transition (the common profile over at most 24px), surface colour from the
   theme. Desktop replaces this with the copy-side fade only: the photograph stays crisp down to its lower edge. */
.ui-hero__shade{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,var(--ui-surface) 0,var(--ui-surface) calc(var(--ui-hero-fade-y) * .18),rgba(var(--ui-surface-rgb),.88) calc(var(--ui-hero-fade-y) * .32),rgba(var(--ui-surface-rgb),.5) calc(var(--ui-hero-fade-y) * .55),rgba(var(--ui-surface-rgb),0) var(--ui-hero-fade-y))}
.ui-hero__shell{position:relative;z-index:1;max-width:var(--ui-container-page);margin-inline:auto}
/* The copy column is the container for the action group's fit rule. */
.ui-hero__in{container-type:inline-size}
.ui-hero__h1{margin:0 0 14px;font-family:var(--ui-font-serif);font-weight:400;font-size:var(--ui-hero-h1);line-height:1.1;letter-spacing:-.015em;color:var(--ui-ink)}
.ui-hero__h1 em{display:block;font-style:italic;font-weight:400;color:var(--ui-gold-text)}
.ui-hero__lead{margin:0 0 20px;max-width:46ch;font-size:var(--ui-hero-lead);font-weight:var(--ui-hero-lead-weight);line-height:var(--ui-hero-lead-line);color:var(--ui-ink-2)}
/* ── Action group (common; UI-02-HERO-OWNER-R3) ──
   One rule for every hero. The group is a grid: an equal-width, equal-height vertical stack (one column as wide as
   the widest button, never wider than the copy area) until the copy area is at least 27.5rem wide (440px at the
   default text size: the fit width of the widest current pair, the homepage's 427px), then a row of the two buttons
   at their natural widths. The rem unit scales the threshold with enlarged text. The same gap in both directions;
   buttons keep their shared styles, labels and heights. Desktop: the group starts at the copy edge (the heading and
   lead edge). Phones and tablets: the group is centred in the full content width. */
.ui-hero__actions{display:grid;grid-template-columns:fit-content(100%);grid-auto-rows:1fr;gap:var(--ui-hero-gap);justify-content:start;margin:0 0 20px}
.ui-hero__actions .ui-btn{width:100%}
@container (min-width:27.5rem){
  .ui-hero__actions{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:max-content}
}
.ui-hero__actions .ui-btn svg.ui-hero__ic{fill:currentColor;stroke:none}
.ui-hero__facts{list-style:none;margin:0;padding:16px 0 0;border-top:1px solid var(--ui-border);display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;font-size:.65625rem;font-weight:500;letter-spacing:1.4px;line-height:1.55;text-transform:uppercase;color:var(--ui-ink-2)}
.ui-hero__facts li:not(:last-child)::after{content:"\00B7";margin-inline-start:10px;color:var(--ui-gold)}
.ui-hero__facts strong{font-weight:500;color:var(--ui-gold-text)}

/* Fleet copy arrangement: lead then a single price line, then the actions. */
.ui-hero--fleet .ui-hero__h1{margin-bottom:16px}
.ui-hero--fleet .ui-hero__lead{max-width:52ch;margin-bottom:22px}
.ui-hero--fleet .ui-hero__facts{padding:0;border:0;margin:0 0 24px;gap:18px;font-size:.78125rem;font-weight:300;letter-spacing:.25px;text-transform:none;line-height:1.65}
@media (max-width:480px){
  .ui-hero--fleet .ui-hero__facts{font-size:.75rem;gap:10px}
}
/* ── "Explore" cue (common; UI-02-HERO-OWNER-R3): its own row at the foot of the hero, after the copy and the
   actions, centred on the page (the hero spans the viewport). It takes its own height, so it can never overlap text,
   including at enlarged text sizes. The label uses the theme's heading ink: gold and the body ink read below 4.5:1
   over the photograph's faded edge at 901-1024px in Light. ── */
.ui-hero__cue{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:8px;width:max-content;min-width:var(--ui-target);min-height:var(--ui-target);margin:4px auto 0;text-decoration:none}
.ui-hero__cue span{font-size:.5625rem;letter-spacing:2.4px;line-height:1.6;text-transform:uppercase;color:var(--ui-ink)}
.ui-hero__cue i{display:block;width:1px;height:24px;background:linear-gradient(to bottom,var(--ui-gold),transparent)}

/* ── Phones and tablets (through 900px, common): the photograph on top, its lower edge easing into the page surface
   over at most 24px; the heading starts where the photograph ends. A short landscape screen caps the photograph at
   about half the screen so the heading starts on the first screen (a deliberate fit rule). ── */
@media (max-width:900px){
  .ui-hero{padding-bottom:var(--ui-hero-pb)}
  .ui-hero__media{height:calc(var(--ui-hero-ph) + var(--ui-hero-hh))}
  .ui-hero--home .ui-hero__img{object-position:58% 62%}
  .ui-hero--fleet .ui-hero__img{object-position:50% 50%}
  .ui-hero__shell{padding:calc(var(--ui-hero-ph) + var(--ui-hero-hh) - var(--ui-hero-hoff)) var(--ui-gutter) 0}
  .ui-hero__actions{justify-content:center}
}
@media (max-width:900px) and (max-height:500px) and (orientation:landscape){
  .ui-hero{--ui-hero-ph:48svh}
}

/* ── Desktop (from 901px, common): copy on the page surface at the left of the rail, the photograph to the right,
   its copy-side edge dissolving into the surface, its top blending through the header layer and its lower edge
   left crisp. The hero is a two-row grid: the copy, then the cue row when there is a cue. The minimum height belongs
   to the hero, so the homepage (no cue) keeps its height and the cue row uses the minimum's spare space first. ── */
@media (min-width:901px){
  .ui-hero{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:1fr auto;min-height:var(--ui-hero-min)}
  .ui-hero__media{bottom:0;left:calc(50% - var(--ui-hero-media-x))}
  .ui-hero__img{object-position:50% 50%}
  /* UI-02-HERO-R1: when 50% minus the offset lands on a half pixel (901px), WebKit left a 1px sliver of the
     photograph uncovered at its left edge, a visible hairline that also sat under a nav link. The shade starts 2px
     earlier, on the page surface, so its solid start always covers the photograph's edge. */
  .ui-hero__shade{left:-2px;
    background:linear-gradient(to right,var(--ui-surface) 0,var(--ui-surface) calc(var(--ui-hero-fade-x) * .18),rgba(var(--ui-surface-rgb),.88) calc(var(--ui-hero-fade-x) * .32),rgba(var(--ui-surface-rgb),.5) calc(var(--ui-hero-fade-x) * .55),rgba(var(--ui-surface-rgb),0) var(--ui-hero-fade-x))}
  .ui-hero__shell{width:100%;padding:calc(var(--ui-hero-hh) + var(--ui-hero-pt)) var(--ui-gutter) var(--ui-hero-pbd)}
  .ui-hero__shell:has(+ .ui-hero__cue){padding-bottom:0}
  .ui-hero__in{max-width:var(--ui-hero-copy)}
  .ui-hero__cue{grid-row:2;margin:16px auto var(--ui-hero-pbd);gap:10px}
  .ui-hero__cue span{font-size:.59375rem;letter-spacing:2.6px}
  .ui-hero__cue i{height:32px}
}