/* ============================================================================
   sections.css — PLW COMPOSED SECTIONS (Foundation 06)
   Loads AFTER primitives.css + content.css + layout.css + cards.css.
   The remaining 4 hero variants (editorial lives in cards.css) plus services
   grid, CTA section, and case-study tease. All read tokens.
   ============================================================================ */

/* surface inside the stage gets generous block padding for these full sections */
.sec-pad { padding-block: clamp(var(--space-12), 7vw, var(--space-20)); }
.sec-inner { width: 100%; max-width: var(--container-default); margin-inline: auto; padding-inline: clamp(var(--space-4), 4vw, var(--space-8)); }

/* shared hero bits reused across variants */
.h-eyebrow { display: inline-flex; align-items: center; gap: var(--space-3); font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: .16em; text-transform: uppercase; color: var(--color-muted); }
.h-eyebrow .rule { width: var(--space-10); height: var(--border-default); background: var(--color-accent); }
.h-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }

/* ============================================================================
   HERO VARIANT 2 · CENTERED  — symmetric, big statement, dual CTA
   ============================================================================ */
.hero-center { text-align: center; display: flex; flex-direction: column; align-items: center; gap: var(--space-6); }
.hero-center .h-eyebrow { justify-content: center; }
.hero-center__title { font-family: var(--font-display); font-weight: 700; font-size: clamp(var(--text-4xl), 6vw, var(--text-6xl)); line-height: 1.0; letter-spacing: -0.02em; color: var(--color-fg); margin: 0; max-width: 16ch; text-wrap: balance; }
[data-type="anton"] .hero-center__title, [data-type="archivo"] .hero-center__title { text-transform: uppercase; font-weight: 400; }
[data-type="dmserif"] .hero-center__title { font-weight: 400; }
.hero-center__lede { font-family: var(--font-body); font-size: var(--text-xl); line-height: var(--leading-snug); color: var(--color-muted); margin: 0; max-width: 52ch; }
.hero-center__trust { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); justify-content: center; align-items: center; margin-top: var(--space-2); font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: .08em; text-transform: uppercase; color: var(--color-muted); }
.hero-center__trust span { display: inline-flex; align-items: center; gap: var(--space-2); }
.hero-center__trust b { color: var(--color-fg); font-weight: 600; }

/* ============================================================================
   HERO VARIANT 3 · SPLIT  — copy left, framed media right
   ============================================================================ */
.hero-split { display: grid; grid-template-columns: 1fr; gap: clamp(var(--space-8), 5vw, var(--space-12)); align-items: center; }
@media (min-width: 860px) { .hero-split { grid-template-columns: 1.05fr 0.95fr; } }
.stagewrap[data-vp="mobile"] .hero-split { grid-template-columns: 1fr; }
.hero-split__title { font-family: var(--font-display); font-weight: 700; font-size: clamp(var(--text-4xl), 5vw, var(--text-6xl)); line-height: 1.0; letter-spacing: -0.02em; color: var(--color-fg); margin: var(--space-5) 0 var(--space-5); text-wrap: balance; }
[data-type="anton"] .hero-split__title, [data-type="archivo"] .hero-split__title { text-transform: uppercase; font-weight: 400; }
[data-type="dmserif"] .hero-split__title { font-weight: 400; }
.hero-split__lede { font-family: var(--font-body); font-size: var(--text-lg); line-height: var(--leading-normal); color: var(--color-muted); margin: 0 0 var(--space-7); max-width: 44ch; }
.hero-media { position: relative; aspect-ratio: 4 / 5; border-radius: var(--radius-lg); overflow: hidden; background: linear-gradient(150deg, color-mix(in srgb, var(--color-accent) 22%, var(--color-surface)), var(--color-surface)); border: var(--border-thin) solid var(--color-border); display: grid; place-items: center; }
[data-shape="brutalist"] .hero-media { border-width: var(--border-default); }
.hero-media__ph { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: .12em; text-transform: uppercase; color: var(--color-muted); display: flex; flex-direction: column; align-items: center; gap: var(--space-3); }
.hero-media__ph svg { width: 40px; height: 40px; opacity: .5; }
.hero-media__badge { position: absolute; left: var(--space-5); bottom: var(--space-5); background: var(--color-bg); border: var(--border-thin) solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); box-shadow: var(--shadow-md); display: flex; align-items: center; gap: var(--space-3); }
.hero-media__badge b { font-family: var(--font-display); font-size: var(--text-xl); color: var(--color-fg); line-height: 1; }
.hero-media__badge span { font-family: var(--font-body); font-size: var(--text-xs); color: var(--color-muted); }

/* ============================================================================
   HERO VARIANT 4 · MAGAZINE  — overline number, full-width display, columns
   ============================================================================ */
.hero-mag__top { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-4); padding-bottom: var(--space-5); border-bottom: var(--border-heavy) solid var(--color-fg); flex-wrap: wrap; }
.hero-mag__issue { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: .14em; text-transform: uppercase; color: var(--color-muted); }
.hero-mag__title { font-family: var(--font-display); font-weight: 700; font-size: clamp(var(--text-5xl), 9vw, 7rem); line-height: 0.92; letter-spacing: -0.03em; color: var(--color-fg); margin: var(--space-8) 0; text-wrap: balance; }
[data-type="anton"] .hero-mag__title, [data-type="archivo"] .hero-mag__title { text-transform: uppercase; font-weight: 400; letter-spacing: 0; }
[data-type="dmserif"] .hero-mag__title { font-weight: 400; }
.hero-mag__cols { display: grid; grid-template-columns: 1fr; gap: var(--space-6); align-items: start; }
@media (min-width: 760px) { .hero-mag__cols { grid-template-columns: 1.4fr 1fr 1fr; } }
.stagewrap[data-vp="mobile"] .hero-mag__cols { grid-template-columns: 1fr; }
.hero-mag__lede { font-family: var(--font-body); font-size: var(--text-lg); line-height: var(--leading-normal); color: var(--color-fg); margin: 0; }
.hero-mag__meta { font-family: var(--font-body); font-size: var(--text-sm); color: var(--color-muted); line-height: var(--leading-normal); }
.hero-mag__meta b { color: var(--color-fg); display: block; font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: .1em; text-transform: uppercase; margin-bottom: var(--space-2); }

/* ============================================================================
   HERO VARIANT 5 · LISTING-STYLE  — directory / search-led header
   ============================================================================ */
.hero-list { display: flex; flex-direction: column; gap: var(--space-6); align-items: center; text-align: center; }
.hero-list__title { font-family: var(--font-display); font-weight: 700; font-size: clamp(var(--text-3xl), 4.5vw, var(--text-5xl)); line-height: 1.05; letter-spacing: -0.015em; color: var(--color-fg); margin: 0; max-width: 20ch; text-wrap: balance; }
[data-type="anton"] .hero-list__title, [data-type="archivo"] .hero-list__title { text-transform: uppercase; font-weight: 400; }
[data-type="dmserif"] .hero-list__title { font-weight: 400; }
.hero-list__search { display: flex; flex-wrap: wrap; gap: var(--space-2); width: 100%; max-width: 540px; background: var(--color-surface); border: var(--border-default) solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-2); }
[data-shape="pill"] .hero-list__search { border-radius: var(--radius-pill); }
.hero-list__search input { flex: 1; min-width: 140px; border: 0; background: transparent; font-family: var(--font-body); font-size: var(--text-base); color: var(--color-fg); padding: var(--space-3) var(--space-4); }
.hero-list__search input:focus-visible { outline: 0; }
.hero-list__search input::placeholder { color: var(--color-muted); }
.hero-list__chips { display: flex; flex-wrap: wrap; gap: var(--space-2); justify-content: center; }
.hero-list__chip { font-family: var(--font-body); font-size: var(--text-sm); color: var(--color-fg); background: var(--color-surface); border: var(--border-thin) solid var(--color-border); border-radius: var(--radius-pill); padding: var(--space-2) var(--space-4); cursor: pointer; text-decoration: none; }
.hero-list__chip:hover { border-color: var(--color-accent); color: var(--color-accent); }

/* ============================================================================
   SECTION · SERVICES GRID  — eyebrow header + responsive feature grid
   ============================================================================ */
.svc-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-5); }
@media (min-width: 680px) { .svc-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .svc-grid { grid-template-columns: repeat(3, 1fr); } }
.stagewrap[data-vp="mobile"] .svc-grid { grid-template-columns: 1fr; }
.svc-grid > * { height: 100%; }

/* ============================================================================
   SECTION · CASE-STUDY TEASE  — big split, label + outcome + link
   ============================================================================ */
.tease { display: grid; grid-template-columns: 1fr; gap: clamp(var(--space-6), 4vw, var(--space-10)); align-items: center; padding: clamp(var(--space-6), 4vw, var(--space-10)); border: var(--border-thin) solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); }
[data-shape="brutalist"] .tease { border-width: var(--border-default); }
@media (min-width: 820px) { .tease { grid-template-columns: 1fr 1.2fr; } }
.stagewrap[data-vp="mobile"] .tease { grid-template-columns: 1fr; }
.tease__media { aspect-ratio: 5 / 4; border-radius: var(--radius-md); background: linear-gradient(150deg, color-mix(in srgb, var(--color-accent) 26%, var(--color-bg)), color-mix(in srgb, var(--color-fg) 8%, var(--color-bg))); border: var(--border-thin) solid var(--color-border); display: grid; place-items: center; }
.tease__media span { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: .12em; text-transform: uppercase; color: var(--color-muted); }
.tease__label { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: .12em; text-transform: uppercase; color: var(--color-accent); margin: 0 0 var(--space-4); }
.tease__title { font-family: var(--font-display); font-weight: 700; font-size: clamp(var(--text-2xl), 3.5vw, var(--text-4xl)); line-height: var(--leading-snug); color: var(--color-fg); margin: 0 0 var(--space-4); letter-spacing: -0.01em; }
[data-type="anton"] .tease__title, [data-type="archivo"] .tease__title { text-transform: uppercase; font-weight: 400; }
[data-type="dmserif"] .tease__title { font-weight: 400; }
.tease__body { font-family: var(--font-body); font-size: var(--text-base); line-height: var(--leading-normal); color: var(--color-muted); margin: 0 0 var(--space-5); max-width: 48ch; }
.tease__metrics { display: flex; gap: var(--space-8); margin-bottom: var(--space-6); flex-wrap: wrap; }
.tease__metric b { font-family: var(--font-display); font-size: var(--text-3xl); color: var(--color-fg); line-height: 1; display: block; }
[data-type="anton"] .tease__metric b, [data-type="archivo"] .tease__metric b { font-weight: 400; }
.tease__metric span { font-family: var(--font-body); font-size: var(--text-xs); color: var(--color-muted); margin-top: var(--space-2); display: block; }

/* ============================================================================
   SECTION · CTA  — centered call to action band (also usable inverted)
   ============================================================================ */
.cta { text-align: center; display: flex; flex-direction: column; align-items: center; gap: var(--space-6); max-width: 64ch; margin-inline: auto; }
.cta__title { font-family: var(--font-display); font-weight: 700; font-size: clamp(var(--text-3xl), 4.5vw, var(--text-5xl)); line-height: 1.05; letter-spacing: -0.015em; color: var(--color-fg); margin: 0; text-wrap: balance; }
[data-type="anton"] .cta__title, [data-type="archivo"] .cta__title { text-transform: uppercase; font-weight: 400; }
[data-type="dmserif"] .cta__title { font-weight: 400; }
.cta__lede { font-family: var(--font-body); font-size: var(--text-lg); line-height: var(--leading-normal); color: var(--color-muted); margin: 0; }

/* inverted band helper local to sections (mirrors home.css logic) */
.band-inverted { background: var(--color-fg); --color-bg: color-mix(in srgb, var(--color-fg) 86%, #fff); --color-surface: color-mix(in srgb, var(--color-fg) 78%, #fff); --color-muted: color-mix(in srgb, #fff 76%, transparent); --color-border: color-mix(in srgb, #fff 18%, transparent); border-radius: var(--radius-lg); }
.band-inverted .shell-pad { --color-fg: #fff; }
.band-inverted .cta__title { color: #fff; }
.band-inverted .h-eyebrow { color: var(--color-accent); }
.shell-pad { padding: clamp(var(--space-10), 6vw, var(--space-16)) clamp(var(--space-5), 4vw, var(--space-12)); }