/* ============================================================
   GAZZINI STUDIO — HERO LAYOUT CATALOGUE
   30 ways to frame the same promise. Each is a composition skin
   applied via html[data-herolay="<id>"], restyling the hero
   (.hero / .hero__inner / .hero__meta / .hero__title / .hero__bottom
   / .hero__lead / .hero__cta) without touching copy or the 3D scene.

   Brand type stays (Bricolage Grotesque + JetBrains Mono); the
   #heroScrim + headline shadows keep everything legible. Radical
   compositions are gated to ≥861px so mobile falls back to the
   clean stacked base.
   ============================================================ */

/* 01 · STUDIO — baseline (no overrides; the default composition) */

/* 02 · CENTERED — cinematic, everything on the centre axis */
html[data-herolay="centered"] .hero__inner{justify-content:center;align-items:center;text-align:center;gap:clamp(26px,5vh,52px)}
html[data-herolay="centered"] .hero__meta{justify-content:center}
html[data-herolay="centered"] .hero__title{margin:0}
html[data-herolay="centered"] .hero__bottom{flex-direction:column;align-items:center;justify-content:center}
html[data-herolay="centered"] .hero__lead{margin:0 auto;text-align:center}
html[data-herolay="centered"] .hero__cta{justify-content:center}

/* 03 · RIGHT — mirrored, right-hung */
html[data-herolay="right"] .hero__inner{align-items:flex-end;text-align:right}
html[data-herolay="right"] .hero__meta{justify-content:flex-end}
html[data-herolay="right"] .hero__bottom{flex-direction:column;align-items:flex-end}
html[data-herolay="right"] .hero__lead{margin-left:auto;text-align:right}
html[data-herolay="right"] .hero__cta{justify-content:flex-end}

/* 04 · ANCHOR — content pinned to the bottom, scene breathes above */
html[data-herolay="bottom"] .hero__inner{justify-content:flex-end;gap:clamp(20px,3vh,34px)}
html[data-herolay="bottom"] .hero__meta{order:-1}
html[data-herolay="bottom"] .hero__title{margin:0}

/* 05 · RAISED — content at the top, scene fills below */
html[data-herolay="top"] .hero__inner{justify-content:flex-start;gap:clamp(18px,3vh,30px)}
html[data-herolay="top"] .hero__title{margin:14px 0 0}
html[data-herolay="top"] .hero__bottom{justify-content:flex-start}

/* 06 · SPLIT — headline left, supporting column right, centre line */
@media(min-width:861px){
  html[data-herolay="split"] .hero__inner{flex-direction:row;align-items:center;justify-content:space-between;gap:64px}
  html[data-herolay="split"] .hero__meta{position:absolute;top:0;left:0}
  html[data-herolay="split"] .hero__title{margin:0;flex:1 1 60%;font-size:clamp(40px,6.6vw,108px)}
  html[data-herolay="split"] .hero__bottom{flex:0 0 32ch;flex-direction:column;align-items:flex-start}
}

/* 07 · COLOSSAL — the headline is the whole page */
html[data-herolay="colossal"] .hero__title{font-size:clamp(54px,12.5vw,150px);letter-spacing:-.05em;line-height:.84;margin:auto 0}
html[data-herolay="colossal"] .hero__meta,html[data-herolay="colossal"] .hero__lead{display:none}

/* 08 · WHISPER — restrained, small, generous air */
html[data-herolay="whisper"] .hero__inner{justify-content:flex-start;gap:clamp(20px,4vh,40px);padding-top:clamp(60px,14vh,150px)}
html[data-herolay="whisper"] .hero__title{font-size:clamp(28px,4vw,58px);font-weight:500;letter-spacing:-.02em;text-transform:none;line-height:1.05;margin:0;max-width:20ch}
html[data-herolay="whisper"] .hero__title em{font-weight:600}

/* 09 · STAIRCASE — lines step across the fold */
html[data-herolay="staircase"] .hero__title{font-size:clamp(40px,8.6vw,128px);line-height:.92;margin:auto 0}
@media(min-width:861px){
  html[data-herolay="staircase"] .hero__title .r:nth-child(2){padding-left:1.4em}
  html[data-herolay="staircase"] .hero__title .r:nth-child(3){padding-left:2.8em}
}

/* 10 · INLINE — headline flows like a sentence, not a stack */
html[data-herolay="inline"] .hero__title{font-size:clamp(26px,4.6vw,72px);line-height:1.08;text-transform:none;letter-spacing:-.02em;font-weight:600;max-width:20ch;margin:auto 0}
html[data-herolay="inline"] .hero__title .r{display:inline}

/* 11 · LOWERCASE — softer, mixed case */
html[data-herolay="lowercase"] .hero__title{text-transform:none;font-weight:600;letter-spacing:-.03em}

/* 12 · CONDENSED — squeezed, dense, urgent */
html[data-herolay="condensed"] .hero__title{letter-spacing:-.06em;font-weight:800;line-height:.84;transform:scaleX(.9);transform-origin:left}

/* 13 · OUTLINE — headline drawn as stroke over the scene */
html[data-herolay="outline"] .hero__title{color:transparent;-webkit-text-stroke:1.4px var(--text);text-shadow:none}
html[data-herolay="outline"] .hero__title em{color:transparent;-webkit-text-stroke-color:var(--accent)}

/* 14 · MONO — set in the technical face */
html[data-herolay="mono"] .hero__title{font-family:var(--m);font-weight:500;letter-spacing:-.02em;line-height:1.0;font-size:clamp(30px,5.6vw,86px)}

/* 15 · EDITORIAL — lighter weight, italic emphasis, mixed case */
html[data-herolay="editorial"] .hero__title{text-transform:none;font-weight:400;letter-spacing:-.02em;line-height:1.02}
html[data-herolay="editorial"] .hero__title em{font-style:italic;font-weight:500}

/* 16 · FRAMED — content inside a ruled frame */
@media(min-width:861px){
  html[data-herolay="framed"] .hero{padding:clamp(16px,2.4vw,30px)}
  html[data-herolay="framed"] .hero__inner{border:1px solid rgba(244,242,236,.22);padding:clamp(36px,5vw,68px);min-height:calc(100svh - clamp(32px,4.8vw,60px))}
}

/* 17 · CARD — content on a quiet glass slab */
@media(min-width:861px){
  html[data-herolay="card"] .hero{align-items:center}
  html[data-herolay="card"] .hero__inner{flex:0 1 760px;background:rgba(11,11,12,.42);backdrop-filter:blur(10px);border:1px solid rgba(244,242,236,.12);border-radius:20px;padding:clamp(36px,4vw,56px);min-width:0;box-shadow:0 30px 90px -30px rgba(0,0,0,.7)}
}

/* 18 · MASTHEAD — newspaper plate: rule, label row, then the title */
html[data-herolay="masthead"] .hero__inner{justify-content:flex-start;gap:clamp(20px,4vh,40px)}
html[data-herolay="masthead"] .hero__meta{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:14px 0;justify-content:space-between;width:100%}
html[data-herolay="masthead"] .hero__title{margin:clamp(20px,5vh,60px) 0 0}
html[data-herolay="masthead"] .hero__bottom{margin-top:auto}

/* 19 · LOWER THIRD — broadcast chyron band at the base */
html[data-herolay="lowerthird"] .hero__inner{justify-content:flex-end}
html[data-herolay="lowerthird"] .hero__meta{display:none}
html[data-herolay="lowerthird"] .hero__title{font-size:clamp(30px,5.2vw,76px);line-height:.95;margin:0;padding:clamp(20px,3vh,34px) 0;border-top:2px solid var(--accent)}
html[data-herolay="lowerthird"] .hero__bottom{align-items:center}

/* 20 · SIDEBAR — vertical meta rail down the left edge */
@media(min-width:861px){
  html[data-herolay="sidebar"] .hero__meta{position:absolute;left:0;top:50%;transform:translateY(-50%) rotate(180deg);writing-mode:vertical-rl;gap:34px;flex-wrap:nowrap;height:auto}
  html[data-herolay="sidebar"] .hero__inner{padding-left:46px}
}

/* 21 · RULED — hairlines above and below the headline */
html[data-herolay="ruled"] .hero__title{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:clamp(20px,4vh,46px) 0;margin:auto 0}

/* 22 · INDEXED — an oversized coordinate marks the fold */
html[data-herolay="indexed"] .hero__inner{position:relative}
html[data-herolay="indexed"] .hero__inner::before{content:"N 47.37° · E 8.54°";position:absolute;top:0;right:0;font-family:var(--m);font-size:12px;color:var(--muted);letter-spacing:.04em}
html[data-herolay="indexed"] .hero__title::before{content:"↳";color:var(--accent);font-weight:400;margin-right:.2em}

/* 23 · KICKER — one deliberate named label above the title */
html[data-herolay="kicker"] .hero__title{position:relative}
html[data-herolay="kicker"] .hero__title::before{content:"Swiss craft · AI speed";display:block;font-family:var(--m);font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:clamp(14px,2vh,22px)}

/* 24 · DIAGONAL — title and action pull to opposite corners */
@media(min-width:861px){
  html[data-herolay="diagonal"] .hero__inner{justify-content:center}
  html[data-herolay="diagonal"] .hero__meta{position:absolute;top:0;left:0}
  html[data-herolay="diagonal"] .hero__title{margin:0;align-self:flex-start;max-width:16ch}
  html[data-herolay="diagonal"] .hero__bottom{position:absolute;right:0;bottom:0;flex-direction:column;align-items:flex-end;max-width:34ch;text-align:right}
  html[data-herolay="diagonal"] .hero__lead{text-align:right}
  html[data-herolay="diagonal"] .hero__cta{justify-content:flex-end}
}

/* 25 · CORNERS — meta top-left, action bottom-right, title centred */
@media(min-width:861px){
  html[data-herolay="corners"] .hero__inner{justify-content:center;align-items:center;text-align:center}
  html[data-herolay="corners"] .hero__meta{position:absolute;top:0;left:0}
  html[data-herolay="corners"] .hero__title{margin:0}
  html[data-herolay="corners"] .hero__bottom{position:absolute;right:0;bottom:0;flex-direction:column;align-items:flex-end}
  html[data-herolay="corners"] .hero__lead{display:none}
}

/* 26 · SPLIT META — the three meta items fly to the page edges */
@media(min-width:861px){
  html[data-herolay="splitmeta"] .hero__meta{position:absolute;top:0;left:0;right:0;justify-content:space-between;width:100%}
  html[data-herolay="splitmeta"] .hero__inner{justify-content:center;text-align:center;align-items:center}
  html[data-herolay="splitmeta"] .hero__title{margin:0}
  html[data-herolay="splitmeta"] .hero__bottom{flex-direction:column;align-items:center;justify-content:center;margin-top:clamp(24px,4vh,44px)}
  html[data-herolay="splitmeta"] .hero__lead{text-align:center;margin:0 auto}
  html[data-herolay="splitmeta"] .hero__cta{justify-content:center}
}

/* 27 · JUSTIFIED — the headline stretches edge to edge */
@media(min-width:861px){
  html[data-herolay="justified"] .hero__title{font-size:clamp(40px,7.6vw,116px);line-height:.96}
  html[data-herolay="justified"] .hero__title .r{display:flex;justify-content:space-between}
  html[data-herolay="justified"] .hero__title .r::after{content:"";flex:0}
}

/* 28 · SPOTLIGHT — a soft glow lifts the headline off the scene */
html[data-herolay="spotlight"] .hero::after{content:"";position:absolute;left:0;top:50%;width:min(70%,720px);height:60%;transform:translateY(-50%);pointer-events:none;
  background:radial-gradient(60% 60% at 30% 50%, rgba(11,11,12,.7), rgba(11,11,12,0) 70%)}
html[data-herolay="spotlight"] .hero__inner{position:relative;z-index:1}

/* 29 · MINIMAL — title and one action, nothing else */
html[data-herolay="minimal"] .hero__inner{justify-content:center;gap:clamp(28px,5vh,52px)}
html[data-herolay="minimal"] .hero__meta,html[data-herolay="minimal"] .hero__lead{display:none}
html[data-herolay="minimal"] .hero__title{margin:0}
html[data-herolay="minimal"] .hero__bottom{justify-content:flex-start}

/* 30 · UNDERSCORE — a lime rule grows under the headline */
html[data-herolay="underline"] .hero__title{position:relative;display:inline-block;padding-bottom:.18em;margin:auto 0}
html[data-herolay="underline"] .hero__title::after{content:"";position:absolute;left:0;bottom:0;height:4px;width:42%;background:var(--accent)}