/**
 * Fluid Theme - Hero Component
 * @layer components
 *
 * Plain background, start-aligned, content-tall. Order: eyebrow → display
 * headline → lede → actions; the default media is the plate, a full-bleed
 * figure under the text at its natural ratio (data-aspect crops it).
 * The headline is the base .display rule: it fills the hero's column, and
 * hand breaks (<br>) hold as the screen grows (src/core/base.css).
 *
 * Usage:
 *   <section class="hero">
 *     <p class="eyebrow">Studio</p>
 *     <h1 class="hero__headline" data-fit>Make the<br>quiet thing<br>loud.</h1>
 *     <p class="lede">One or two sentences.</p>
 *     <div class="hero__actions"><a class="button" href="#">Start</a></div>
 *     <figure class="hero__plate"><img src="..." alt="..." width="1600" height="900"></figure>
 *   </section>
 *
 * Themes: data-theme="dark" (a dark band: the role scope, tokens.css),
 * "accent" (solid accent, shared with data-bg="accent-strong"), "gradient",
 * "subtle"; data-overlay over a .hero__background image.
 */

@layer components {

  /* ========================================
     BASE HERO
     A full-width section ready for content
     ======================================== */

  /* The inline padding puts the content on the .container edges while the
     background runs full width. */
  .hero {
    --hero-min-height: auto;
    --hero-background: var(--color-background);
    --hero-text-color: var(--color-text);

    position: relative;
    min-block-size: var(--hero-min-height);
    background-color: var(--hero-background);
    color: var(--hero-text-color);
    overflow: hidden;
    container-type: inline-size;
    padding-inline: max(var(--page-edge), (100% - var(--container-content)) / 2);
  }

  /* An inner .container owns the edge, as in every .section; padding here
     too would inset the content twice. */
  .hero:has(> .container) { padding-inline: 0; }

  /* Generous space goes between sections, not above the first line: at
     1440 × 900 the old 160px top pushed the actions onto the fold. It
     follows --space-section, so a tight look keeps a tight hero. The
     data-padding scale (layouts layer) wins whenever the author sets it. */
  .hero:not([data-padding]) {
    padding-block: min(var(--space-xl), var(--space-section));
  }

  /* Ensure content stays above backgrounds/overlays */
  .hero > * {
    position: relative;
    z-index: var(--z-raised);
  }


  /* ========================================
     HERO SIZES
     Control the visual impact
     ======================================== */

  .hero[data-size="compact"] {
    --hero-min-height: 40vh;
  }

  .hero[data-size="full"] {
    --hero-min-height: 100svh;
  }

  /* data-size="auto" is the default: no rule. */


  /* ========================================
     HERO CONTENT
     Structured content within the hero
     ======================================== */

  .hero__content {
    max-inline-size: var(--content-width, var(--container-md));
  }

  /* The headline's face, size, leading and balance are the base .display
     rule; here only its overflow safety (it is not always a heading; a long
     word breaks, never with an automatic hyphen) and the space to the lede.
     The space grows with the headline (0.18em), so a display face with a
     long descender (a Didone at 190px) never inks into the lede. */
  .hero__headline {
    margin-block: 0 max(var(--space-m), 0.18em);
    overflow-wrap: break-word;
    hyphens: manual;
  }

  .hero .eyebrow { margin-block-end: var(--space-m); }

  /* The label over a display headline: the trimmed cap height sat 24px
     under it at 160px type, glued on. The gap grows with the headline
     (about 48px at 160px, 20px on a phone); margins collapse with the
     eyebrow's own. */
  .eyebrow + :is(.hero__headline, .display) { margin-block-start: max(var(--space-m), 0.3em); }

  /* In a gap layout (the stack's <div class="container stack"> inside the
     hero) the gap is the rhythm; margins would add to it. */
  :is(.stack, .cluster, .grid) > :is(.hero__headline, .hero__subheadline, .lede, .eyebrow) {
    margin-block: 0;
  }

  :is(.hero__subheadline, .hero .lede) {
    font-family: var(--font-heading);
    font-weight: calc(var(--weight-light) + var(--_dark-weight));
    font-size: var(--step-1);
    line-height: 1.4;
    letter-spacing: -0.005em;
    color: var(--hero-text-muted, var(--hero-text-color));
    max-inline-size: 30em;
    margin-block: 0 var(--space-l);
  }

  .hero__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-s) var(--space-m);
    justify-content: inherit;
  }

  /* The plate: a full-bleed figure under the text, natural ratio. Its
     negative margin is the hero's inline padding measured on the viewport;
     a scrollbar's few extra pixels are clipped by the hero. */
  .hero__plate {
    margin-block: var(--space-xl) calc(-1 * var(--space-xl));
    margin-inline: calc(-1 * max(var(--page-edge), (100vi - var(--container-content)) / 2));
  }

  /* An uncaptioned plate runs to the hero's bottom edge; a caption keeps
     --space-m above that edge, so its text never sits flush on a dark or
     tinted hero band (visual-scan SEAM, 2026-10-29). */
  .hero__plate:has(> figcaption) {
    margin-block-end: calc(var(--space-m) - var(--space-xl));
  }

  .hero__plate :is(img, video) {
    inline-size: 100%;
    border-radius: 0;
  }

  .hero__plate :is(img, video)[data-aspect] { max-block-size: 88svh; }

  /* The caption returns to the content edge. */
  .hero__plate figcaption {
    margin-inline: max(var(--page-edge), (100vi - var(--container-content)) / 2);
  }


  /* ========================================
     HERO BACKGROUNDS
     Image and gradient backgrounds
     ======================================== */

  .hero__background {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    /* data-layout="left" (and the other layouts) cap each child's width; the
       background is not content and always fills the hero (#72). */
    max-inline-size: none;
  }

  .hero__background img,
  .hero__background video {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
  }

  /* data-focus on the wrapper sets --focus (base.css), which the img reads. */
  /* Custom focal point via CSS custom properties */
  .hero__background[style*="--focus"] img {
    object-position: var(--focus-x, 50%) var(--focus-y, 50%);
  }


  /* ========================================
     HERO OVERLAY
     Darken backgrounds for text readability
     ======================================== */

  .hero[data-overlay]::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background: var(--hero-overlay, oklch(0% 0 0 / 0.4));
    pointer-events: none;
  }

  /* Overlay intensity */
  .hero[data-overlay="light"]::before {
    --hero-overlay: oklch(0% 0 0 / 0.2);
  }

  .hero[data-overlay="medium"]::before {
    --hero-overlay: oklch(0% 0 0 / 0.4);
  }

  .hero[data-overlay="heavy"]::before {
    --hero-overlay: oklch(0% 0 0 / 0.6);
  }

  /* Gradient overlays - subtle fade from bottom */
  .hero[data-overlay="gradient"]::before {
    --hero-overlay: linear-gradient(
      to top,
      oklch(0% 0 0 / 0.6) 0%,
      oklch(0% 0 0 / 0.3) 40%,
      oklch(0% 0 0 / 0) 100%
    );
  }


  /* ========================================
     HERO THEMES
     Pre-designed color schemes
     ======================================== */

  /* Dark hero: a dark band. Its roles re-resolve dark (tokens.css role scope). */
  .hero[data-theme="dark"] {
    --hero-background: var(--band-inverse);
    --hero-text-color: var(--color-text);
    --hero-text-muted: var(--color-text-muted);
  }

  /* Accent hero: the solid accent band, shared with data-bg="accent-strong"
     (src/fluid.css re-points the roles and button hooks). */
  .hero[data-theme="accent"] {
    --hero-background: var(--accent);
    --hero-text-color: var(--on-accent);
    --hero-text-muted: var(--on-accent);
  }

  /* Headings in a themed hero take the hero's text colour, not the page's. */
  .hero[data-theme] :is(h1, h2, h3, h4, h5, h6, .hero__headline) {
    color: var(--hero-text-color);
  }

  /* Section bands (data-bg, src/fluid.css) on a hero */
  .hero:is([data-bg="tinted"], [data-bg="alt"]) {
    --hero-background: var(--color-surface);
  }

  .hero[data-bg="accent"] {
    --hero-background: var(--accent-subtle);
  }

  /* Subtle: the default hero with a muted lede. */
  .hero[data-theme="subtle"] { --hero-text-muted: var(--color-text-muted); }

  /* Gradient hero: derives from the accent. Not a role band, so its ink
     and focus are lifted here. */
  .hero[data-theme="gradient"] {
    --accent-ink: oklch(from var(--accent) max(l, 0.76) c h);
    --color-focus: var(--accent-ink);
    --hero-background: linear-gradient(
      135deg,
      color-mix(in oklch, var(--accent) 30%, oklch(from var(--neutral-tint) 0.15 calc(c * 3) h)) 0%,
      color-mix(in oklch, var(--accent) 20%, oklch(from var(--neutral-tint) 0.25 calc(c * 3) h)) 50%,
      color-mix(in oklch, var(--accent) 15%, oklch(from var(--neutral-tint) 0.35 calc(c * 3) h)) 100%
    );
    --hero-text-color: oklch(95% 0.01 0);
    --hero-text-muted: oklch(80% 0.01 0);
    background: var(--hero-background);
  }


  /* Legacy floor (see tokens.css): without relative colour the roles are
     plain light values, so the dark hero goes light like every other dark
     band (its text is the floor's dark text). The gradient keeps fixed
     light text, so its paint is computed here from the default tint. */
  @supports not (color: oklch(from red min(l, 0.5) c h)) {
    .hero[data-theme="dark"] {
      --hero-background: var(--color-background);
    }

    .hero[data-theme="gradient"] {
      --hero-background: linear-gradient(
        135deg,
        color-mix(in oklch, var(--accent) 30%, oklch(15% 0.03 75)) 0%,
        color-mix(in oklch, var(--accent) 20%, oklch(25% 0.03 75)) 50%,
        color-mix(in oklch, var(--accent) 15%, oklch(35% 0.03 75)) 100%
      );
    }
  }


  /* ========================================
     SPLIT HERO
     Content + media side by side
     ======================================== */

  .hero[data-layout="split"] .hero__media,
  .hero[data-layout="split-reverse"] .hero__media {
    block-size: 100%;
    min-block-size: 40vh;
  }

  .hero[data-layout="split"] .hero__media img,
  .hero[data-layout="split-reverse"] .hero__media img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    border-radius: var(--radius-card);
  }


  /* ========================================
     DATA-ARRANGE="auto": the centered stack

     Lays out flat hero markup as a centered grid: headline,
     subheadline, actions, media. (The per-preset arrangements it
     used to choose between went with the presets.)

     Requires the flat hero markup (hero__headline, hero__subheadline,
     hero__actions, optional hero__media as direct children). Markup
     using a hero__content wrapper keeps its data-layout behavior —
     the :has() guard leaves it untouched. data-arrange wins over
     data-layout because components layer beats layouts layer.
     ======================================== */

  .hero[data-arrange="auto"]:not(:has(> .hero__content)) {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "headline"
      "subheadline"
      "actions"
      "media";
    align-content: center;
    justify-items: start;
    column-gap: var(--space-10);
  }

  .hero[data-arrange="auto"] > .hero__headline { grid-area: headline; }
  .hero[data-arrange="auto"] > .hero__subheadline { grid-area: subheadline; }
  .hero[data-arrange="auto"] > .hero__actions { grid-area: actions; }
  .hero[data-arrange="auto"] > .hero__media { grid-area: media; }

  /* On narrow viewports the media moves above the actions. */
  @media (max-width: 48rem) {
    .hero[data-arrange="auto"]:not(:has(> .hero__content)) {
      grid-template-columns: minmax(0, 1fr);
      grid-template-areas:
        "headline"
        "subheadline"
        "media"
        "actions";
    }
  }


  /* ========================================
     RESPONSIVE BEHAVIOR
     Font sizes use fluid clamp() - no breakpoints needed
     ======================================== */

  @container (max-width: 40rem) {
    /* Actions stack vertically on narrow containers */
    .hero__actions {
      flex-direction: column;
      align-items: stretch;
    }

    .hero__actions > * {
      justify-content: center;
    }
  }


  /* ========================================
     HERO BUTTON CONTRAST
     Dark and accent heroes re-point the roles, so their buttons follow on
     their own. The gradient hero is not a role band: its outline buttons
     go white. `.button` too, so a link matches a <button> (#72).
     ======================================== */

  .hero[data-theme="gradient"] :is(button, .button)[data-variant="outline"] {
    --_btn-color: var(--white);
    --_btn-border: var(--white);
    --_btn-bg-hover: var(--white);
    --_btn-color-hover: var(--black);
  }

  .hero:is([data-theme="gradient"], [data-overlay]) :is(button, .button)[data-variant="ghost"] {
    --_btn-color: var(--hero-text-color);
  }


  /* Reduced motion: the reset shortens every transition and animation. */
}