/* ============================================================
   hero.css — ONE hero system across every page.
   Loaded LAST, so it settles the disagreement between the two
   hero implementations that grew up in app.css.

   THE PROBLEM THIS FIXES
   Three hero patterns were live at once and they rendered at
   very different heights:

     .chero  (dashboard)  min-height 200px, token-driven, fluid
                          gutters — the good one.
     .hero   (~60 pages)  min-height 380px with hardcoded
                          `padding: 56px 36px 96px` and NO media
                          queries at all. Nearly double the
                          dashboard, and on a 375px phone it ate
                          most of the viewport before content.
     .hero   (4 pages)    same class, no .hero-inner, different
                          again.

   THE FIX
   Both systems now derive their height, gutter and type scale
   from the SAME fluid tokens below, so a hero is the same
   proportion on every page and every screen. Nothing is
   hardcoded in px; everything scales between phone and desktop.

   MOBILE-FIRST. The base rules are the phone layout. Larger
   screens add via min-width, matching how this file is written
   rather than the desktop-first max-width queries in the legacy
   sheet.

   JAPANESE-SAFE. tokens.css states the rule plainly: negative
   letter-spacing is latin-display only, NEVER on ja text, and
   line-height never drops below 1.2. .hero-title carried
   `letter-spacing:-0.025em` unconditionally, which squeezes
   kana and kanji. It is now applied only when the document is
   not Japanese.
   ============================================================ */

:root {
  /* Fluid hero metrics — one source for both systems.
     Phone ~168px → desktop 224px. The dashboard's 200px sits
     inside this range, which is why it felt right; the 380px
     variant never did. */
  /* 12vw + 100px, not plain vw: a pure-vw curve leaves tablets stuck
     on the phone floor (20vw of 768px is only 153px). This gives each
     class its own step — phone 168, tablet ~192, desktop ~208, which
     lands next to the dashboard's original 200px that felt right. */
  --hero-h:       clamp(168px, 12vw + 100px, 208px);
  --hero-gutter:  clamp(20px, 4.2vw, 36px);
  --hero-pad-y:   clamp(20px, 3.2vw, 32px);

  /* Type. Floors chosen for a 375px phone: a 40px headline in a
     168px band leaves no room for the subtitle it sits above. */
  --hero-title-size: clamp(28px, 5.2vw, 60px);
  --hero-sub-size:   clamp(15px, 1.2vw, 17px);
  --hero-eyebrow-size: clamp(11px, 0.9vw, 13px);
}

/* ── Shared shell ──────────────────────────────────────────── */
.hero,
.chero {
  min-height: var(--hero-h);
  padding: var(--hero-pad-y) var(--hero-gutter);
  display: flex;
  align-items: flex-end;
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

/* The legacy rule's asymmetric 96px bottom padding is what made
   the band tall; the flex end-alignment already seats content at
   the base, so it was doing nothing but adding height. */
.hero { padding-bottom: var(--hero-pad-y); }

/* ── Inner ─────────────────────────────────────────────────── */
.hero-inner,
.chero-inner {
  width: 100%;
  max-width: var(--max-page, 1280px);
  position: relative;
  z-index: 1;
}

/* Phone: stack. The legacy `grid-template-columns: 1fr auto` put
   a title and its action side by side at 375px, which squeezed
   the title to a few characters per line. */
.hero-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4, 16px);
  align-items: start;
}

/* Pages that use .hero WITHOUT .hero-inner still need the width
   cap, or their content runs the full monitor width. */
.hero > .content,
.hero > div:only-child {
  width: 100%;
  max-width: var(--max-page, 1280px);
}

/* ── Type ──────────────────────────────────────────────────── */
.hero-title {
  font-size: var(--hero-title-size);
  line-height: 1.05;          /* was 0.92 — clipped ja descenders */
  margin-bottom: clamp(8px, 1.2vw, 18px);
  text-wrap: balance;
}

/* Latin only. See the Japanese-safe note in the header. */
/* -0.055em is the brand's own headline tracking (hayato.html sets its
   display type at weight 400, tracked this tight). It was -0.025em here
   while .chero-club took -0.055em from .hl, so Home and every other page
   spoke in two different voices. This selector outranks .hl, so the value
   has to be corrected here rather than in daylight.css. */
html:not([lang="ja"]) .hero-title { letter-spacing: -0.055em; }
html[lang="ja"] .hero-title { letter-spacing: 0; line-height: 1.28; }

.hero-sub {
  font-size: var(--hero-sub-size);
  line-height: var(--lh-normal, 1.5);
  max-width: 52ch;            /* was 480px — ch tracks the font */
}

.hero-eyebrow {
  font-size: var(--hero-eyebrow-size);
  margin-bottom: clamp(8px, 1.4vw, 18px);
}
/* Uppercase tracking is a latin device; it mangles ja. */
html[lang="ja"] .hero-eyebrow { letter-spacing: 0.04em; text-transform: none; }

/* The decorative rule before the eyebrow costs horizontal space
   that a phone does not have. */
@media (max-width: 480px) {
  .hero-eyebrow::before { display: none; }
  .hero-eyebrow { gap: 6px; }
}

/* ── Tablet and up ─────────────────────────────────────────── */
@media (min-width: 768px) {
  .hero-inner {
    grid-template-columns: 1fr auto;
    gap: var(--space-5, 24px);
    align-items: flex-end;
  }
}

/* ── Motion ────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .hero::before,
  .hero-title,
  .hero-sub,
  .hero-eyebrow { animation: none !important; }
}

/* ============================================================
   THE VISUAL TREATMENT — added after the owner pointed out that
   sizing alone changed nothing they could see.

   The first pass unified height, gutters and type scale. It did
   NOT unify how a hero LOOKS, so Home still read completely
   differently from every other page:

     Home (.chero)   indigo scrim from the club primary, paper
                     ink, seigaiha wave along the bottom edge.
     Others (.hero)  a PAPER wash — rgba(239,233,223,.96) laid
                     over the photo — with dark ink on top. A
                     washed-out light band, not the Broadcast look.

   That paper wash is the whole difference. Replacing it with the
   same indigo scrim .chero-scrim uses makes every hero read as
   one system. No colour literals: the scrim is var(--green),
   which applyBranding sets from club settings, so a different
   club repaints it without touching this file.
   ============================================================ */

.hero {
  /* DAYLIGHT, 30 Aug. This band was a flat club-primary field with
     paper type, painted from var(--green) — a STATUS token that
     applyBranding overwrote with the club colour, so "paid" badges
     and success toasts rendered in the club's brand colour too.
     Daylight gives the band the warm stone ground and dark ink, and
     leaves --green to mean green. Everything below is expressed
     through --hero-ink, so this one line flips the whole band. */
  --hero-ink: var(--text);
  background: var(--stone);
}
[data-theme="dark"] .hero { --hero-ink: var(--text); }

/* NO PHOTO on .hero pages — owner's call, 30 Aug: "only home has the
   photo. Others keep it as original design plain."
   The photo layer is suppressed entirely rather than dimmed, so these
   bands are a flat club-primary field. Home uses .chero and is
   untouched, so it keeps its photo, greeting, date block and LIVE chip.
   If the flat band ever reads too bare, letting the photo back in at
   low opacity is a one-line change here and nowhere else. */
.hero::before {
  background: none !important;
  animation: none !important;
}

/* The scrim itself — the same two gradients as .chero-scrim:
   solid across the lower band where the type sits, washing in
   from the leading edge. */
/* With no photo beneath, the scrim is the band itself: a flat club-primary
   field with a single soft lift from the leading edge so it is not a dead
   rectangle. Still no colour literals — var(--green) is the club primary,
   set by applyBranding from club settings. */
/* No overlay in Daylight: the stone IS the band. Kept as a rule
   (rather than deleted) because the !important above it is what
   suppresses the photo layer, and the pair reads as one decision. */
.hero::after {
  background: none !important;
  opacity: 0;
}

/* Type takes --hero-ink, which Daylight sets to the dark ink. These
   rules are unchanged from the dark-band version — they were always
   written against the token, so they inverted for free. */
.hero .hero-title,
.hero .hero-title em,
.hero .hero-sub strong { color: var(--hero-ink); }
.hero .hero-sub        { color: color-mix(in srgb, var(--hero-ink) 82%, transparent); }
.hero .hero-eyebrow    { color: color-mix(in srgb, var(--hero-ink) 76%, transparent); }
.hero .hero-eyebrow::before { background: currentColor; }

/* Chips and buttons riding on the scrim need the same inversion —
   .bcast-chip--onscrim exists for exactly this on the dashboard. */
.hero .pill,
.hero .bcast-chip {
  background: color-mix(in srgb, var(--hero-ink) 14%, transparent);
  border-color: color-mix(in srgb, var(--hero-ink) 34%, transparent);
  color: var(--hero-ink);
}

/* Seigaiha along the bottom edge, matching .chero-wave. Opt-in via
   the body class the shell sets from club settings, so a club with
   theme_pattern 'none' gets no pattern anywhere. */
body.pattern-seigaiha .hero::before {
  content: '';
}
body.pattern-seigaiha .hero {
  --hero-wave-h: var(--space-5);
}
body.pattern-seigaiha .hero > .hero-inner::after {
  content: '';
  position: absolute;
  left: calc(var(--hero-gutter) * -1);
  right: calc(var(--hero-gutter) * -1);
  bottom: calc(var(--hero-pad-y) * -1);
  height: var(--space-5);
  pointer-events: none;
  background: var(--hero-ink);
  opacity: var(--pattern-opacity, 0.05);
  -webkit-mask-image: var(--seigaiha-tile);
          mask-image: var(--seigaiha-tile);
  -webkit-mask-size: var(--seigaiha-tile-size);
          mask-size: var(--seigaiha-tile-size);
  -webkit-mask-position: 0 100%;
          mask-position: 0 100%;
}