/* ============================================================
   Visuala Studio — Case Study page
   Long-form editorial layout used by /casos/<slug>/.

   Built entirely on the global token layer. Section-local rhythm
   lives in --cs-* custom properties scoped to .case-study so we
   don't inflate /tokens with case-study-only knobs (same pattern
   the FAQ uses for its locally-scoped variables).

   Layout map (top → bottom):
   · hero       — full-bleed cinematic image (12px radius) + caption
   · intro      — service pills + editorial headline
   · 01 / 02    — split (text + media) grids
   · 03         — wide video + supporting pair (8fr 4fr)
   · 04         — warm-surface impact panel (2-col: main editorial · sub-stats)
   · 05         — large quote + 2-col body paragraphs
   · cta-banner — closing CTA banner (.cta-banner--case-study variant)
   · footer     — global footer (reused .footer primitive)
   ============================================================ */

.case-study {
  /* Section rhythm — vertical pad between numbered blocks. Scaled to
     0.8 × --section-y so the gap BETWEEN two stacked sections lands at
     ~200px desktop — a touch tighter than the global landing cadence
     (which uses the full 2 × --section-y ≈ 250px). Same fluid behaviour
     as the global token; just compressed for the long-form editorial
     reading flow. */
  --cs-block-y:   calc(var(--section-y) * 0.8);
  /* Gap between content columns inside a 2-col grid (text + media). */
  --cs-grid-gap:  var(--space-8);             /* 64px */
  /* Pair gap (Section 03 supporting wide + tall) uses the global
     card gap so it matches the rest of the page. */
  --cs-pair-gap:  var(--gap-cards);           /* 18px */
  /* Media heights — fluid clamp anchored to existing breakpoints.
     One token controls hero, the second sizes the editorial frames. */
  --cs-hero-h:    clamp(18.75rem, 30vw, 27.5rem);   /* 300 → 440 */
  --cs-frame-h:   clamp(16.875rem, 26vw, 29.375rem); /* 270 → 470 */
}

.case-study main { display: block; }


/* ============================================================
   HERO — cinematic full-bleed image
   Padding-top mirrors the landing .hero so the nav → hero air
   reads identically across the two page types.
   ============================================================ */
.cs-hero {
  padding-top: 3.5rem;
}
.cs-hero__frame {
  border-radius: var(--radius-surface);
  overflow: hidden;
  height: var(--cs-hero-h);
  background: var(--green-900);
}
.cs-hero__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Tight editorial caption sitting directly under the hero frame.
   Small gap above pins it visually to the image (image + caption =
   one block); the .cs-intro padding-top below provides the deliberate
   break between this caption-block and the intro headline-block. */
.cs-hero__caption {
  margin-top: var(--space-3);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--fg-muted);
  letter-spacing: var(--ls-normal);
}


/* ============================================================
   INTRO — pills + editorial headline
   Sits between the hero (with its caption) and the first numbered
   block. The hero caption above provides the small "image meta"
   moment; this section opens the editorial narrative.
   ============================================================ */
.cs-intro {
  padding-top: var(--cs-block-y);
  padding-bottom: var(--cs-block-y);
}

.cs-intro__pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* Page H1. Mirrors the landing .hero__title sizing so both pages
   open with the same display-weight headline at the top of their
   type hierarchy. No max-width — text-wrap: balance distributes
   the long copy across two wide lines on desktop. */
.cs-intro__title {
  margin-top: var(--space-5);
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
  font-size: clamp(2.35rem, 1.05rem + 5.3vw, 3.1rem);
  line-height: 1.04;
  letter-spacing: -0.04em;
  color: var(--fg-1);
  text-wrap: balance;
}


/* ============================================================
   NUMBERED SECTIONS — shared scaffolding
   .cs-section provides vertical rhythm. Each block is composed
   of an .eyebrow tag + a lead paragraph + (optional) media.
   ============================================================ */
.cs-section {
  padding-top: var(--cs-block-y);
  padding-bottom: var(--cs-block-y);
}
.cs-section--tight { padding-block: var(--space-7); }
.cs-section--no-top    { padding-top: 0; }
.cs-section--no-bottom { padding-bottom: 0; }

/* Paired sections — two sequential sections that read as one narrative
   beat (e.g., Setup + Solution = Situación + Propuesta). Apply --paired
   to the SECOND section only; the :has() rule auto-tightens the
   preceding section's bottom so the pair reads as one connected unit
   instead of two isolated beats. Halves the standard transition gap. */
.cs-section--paired { padding-top: calc(var(--cs-block-y) * 0.5); }
.cs-section:has(+ .cs-section--paired) {
  padding-bottom: calc(var(--cs-block-y) * 0.5);
}

.cs-section__eyebrow {
  /* .eyebrow utility supplies typography; add a colour + bottom space.
     Tight gap (12px) binds the eyebrow to its lead as a single label-
     and-content unit, not two stacked elements. */
  color: var(--fg-muted);
  margin-bottom: var(--space-3);
}
.cs-section__lead {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: var(--text-h3);
  line-height: 1.18;
  letter-spacing: var(--ls-tight);
  color: var(--fg-1);
  text-wrap: balance;
}
.cs-section__lead--lg {
  /* 03 Ejecución intro reads a touch larger than 01/02 leads.
     No max-width — it inherits the wider .cs-execute__header
     measure so the long statement breaks into ~2 wide lines. */
  font-size: var(--text-h2);
  line-height: 1.12;
}
.cs-section__sub {
  margin-top: var(--space-4);
  font-family: var(--font-sans);
  font-size: var(--text-lead);
  line-height: var(--lh-body);
  color: var(--fg-muted);
}

/* Editorial media frame (cards inside .cs-section grids) */
.cs-frame {
  border-radius: var(--radius-surface);
  overflow: hidden;
  height: var(--cs-frame-h);
  background: var(--green-900);
}
.cs-frame__media {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}


/* ============================================================
   SECTIONS 01 / 02 — split layout (text + image)
   Mobile: stacked (text first, media below).
   Desktop: 2-col, vertically centred, with a configurable
            order via .cs-split--reverse.
   ============================================================ */
.cs-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-7);
  align-items: center;
}


/* ============================================================
   SECTION 03 — wide media + supporting pair
   Mobile: header → video → portrait frame (all full width).
   Desktop: header → wide video, then 8fr 4fr pair below.
   ============================================================ */
/* Wider than the 01/02 lead because the section 03 statement is
   longer (4-clause sentence) and reads better spanning ~2 lines
   across the full editorial column instead of 4 lines in a tight
   measure. */
.cs-execute__header { max-width: 56rem; }
.cs-execute__hero {
  margin-top: var(--space-7);
  height: var(--cs-frame-h);
  border-radius: var(--radius-surface);
  overflow: hidden;
  background: var(--green-900);
}
.cs-execute__hero > img,
.cs-execute__hero > video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.cs-pair {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--cs-pair-gap);
  margin-top: var(--cs-pair-gap);
}
/* Mobile: the wide cinematic frame in the supporting pair is dropped
   (it doubles up with the video above). The portrait frame carries the
   editorial weight on its own. Desktop @media restores both. */
.cs-pair__item--desktop-only { display: none; }


/* ============================================================
   SECTION 04 — Impact panel
   Warm card surface (--surface-warm) with hairline + soft radius.
   Mobile: main editorial column (eyebrow → big numeral → copy)
           stacked above a 3-up sub-stat row with hairline above.
   Desktop: 2-col grid — main editorial left, sub-stats stacked
            vertically on the right, divided by a vertical hairline.
   ============================================================ */
.cs-impact {
  background: var(--surface-warm);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-surface);
  padding: var(--space-6);
  color: var(--fg-1);
}
.cs-impact__primary {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-7);
}
.cs-impact__main {
  display: flex;
  flex-direction: column;
}
.cs-impact__eyebrow {
  color: var(--fg-muted);
  letter-spacing: var(--ls-eyebrow);
  margin-bottom: var(--space-5);
}
.cs-impact__num {
  font-family: var(--font-sans);
  font-size: calc(var(--text-display) * 1.1);
  font-weight: var(--fw-light);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
  color: var(--fg-1);
}
.cs-impact__copy {
  margin-top: var(--space-3);
}
.cs-impact__copy-lead {
  font-family: var(--font-sans);
  font-size: var(--text-h3);
  font-weight: var(--fw-regular);
  line-height: 1.25;
  letter-spacing: var(--ls-normal);
  color: var(--fg-1);
  text-wrap: balance;
}
.cs-impact__copy-sub {
  margin-top: var(--space-4);
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: var(--lh-body);
  color: var(--fg-muted);
}
.cs-impact__substats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
  padding-top: var(--space-6);
  border-top: 1px solid var(--border-soft);
}
.cs-impact__substat-num {
  font-family: var(--font-sans);
  font-size: var(--text-h2);
  font-weight: var(--fw-regular);
  line-height: 1;
  letter-spacing: var(--ls-display);
  color: var(--fg-1);
}
.cs-impact__substat-label {
  margin-top: var(--space-2);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  line-height: 1.4;
  color: var(--fg-muted);
}


/* ============================================================
   SECTION 05 — Lo que aprendimos
   Editorial closer: large balanced statement (with serif accent)
   followed by a 2-col body block.
   ============================================================ */
/* Editorial closer headline. No max-width — text-wrap: balance
   distributes it across ~2 wide lines that fill the section. */
.cs-learn__statement {
  font-family: var(--font-sans);
  font-weight: var(--weight-section-head);
  font-size: var(--text-h1);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-display);
  color: var(--fg-1);
  text-wrap: balance;
}
/* 2-col body fills the editorial width below the headline (mirrors
   the design's full-bleed body block, not a 60rem-capped column). */
.cs-learn__body {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-7);
  margin-top: var(--space-7);
}
.cs-learn__p {
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: var(--lh-body);
  color: var(--fg-2);
  text-wrap: pretty;
}


/* ============================================================
   DESKTOP — split grids, pair grid, impact layout
   Same breakpoint the rest of the site uses for its desktop morph.
   ============================================================ */
@media (min-width: 880px) {

  /* Match the landing .hero desktop padding-top exactly. */
  .cs-hero {
    padding-top: 2.75rem;
  }

  /* Page H1 — matches the landing .hero__title desktop clamp. */
  .cs-intro__title {
    font-size: clamp(2.4rem, 1.1rem + 3.4vw, 4rem);
    letter-spacing: -0.035em;
  }

  .cs-split {
    grid-template-columns: 1fr 1fr;
    gap: var(--cs-grid-gap);
  }
  .cs-split--reverse .cs-split__copy { order: 2; }
  .cs-split--reverse .cs-split__media { order: 1; }

  .cs-pair {
    grid-template-columns: 8fr 4fr;
  }
  .cs-pair__item--desktop-only { display: block; }

  .cs-impact {
    padding: var(--space-8);
  }
  .cs-impact__primary {
    grid-template-columns: 3fr 2fr;
    gap: var(--cs-grid-gap);
  }
  .cs-impact__substats {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--space-6);
    border-top: none;
    border-left: 1px solid var(--border-soft);
    padding-top: 0;
    padding-left: var(--space-8);
  }

  .cs-learn__body {
    grid-template-columns: 1fr 1fr;
    gap: var(--cs-grid-gap);
  }
}