/* case.css -- FAMILY stylesheet for the three case-study pages
   (work-jackson-roofing.html [template/owner], work-renewal-health.html, work-heros-junk-removal.html).
   Built by the work-jackson-roofing worker. Tokens only (--step-*, --space-*, --measure, --radius-*,
   colours from style.css). style.css / index.html / assets/site.js / piece-engine.js stay read-only.
   Later case-study pages reuse every class below as-is; add a tiny page-only override ONLY if a real
   layout need shows up, never new colours or raw px sizes. */

/* ============================================================
   1. PAGE HEAD -- mono breadcrumb + h1 + lead, piece performs
      small beside it (orbit state, PAGES-BRIEF: "head beside orbit").
   ============================================================ */
.case-head{
  min-height:100vh; min-height:100svh;
  display:flex; align-items:center;
  position:relative; z-index:1;
  padding:calc(var(--nav-h) + var(--space-8)) 0 var(--space-8);
}
.case-head .band-rule{
  display:flex; justify-content:space-between; gap:var(--space-4);
  margin-bottom:var(--space-4);
}
.case-head h1{margin-top:var(--space-2); max-width:18ch}
.case-head .lead{margin-top:var(--space-5)}

/* finale interlude before the closing CTA, mirrors index.html's interlude--contact:
   a slim band so the piece can come together whole ahead of the close. */
.interlude--case-close{--ih:100vh}

/* ============================================================
   2. FACTS LEDGER -- the "case file" up top. Reuses style.css's
      .ledger dt/dd exactly (fig = big number, term = mono label,
      dd = the real v3 sentence backing the number). Nothing new
      needed here besides a small label above it.
   ============================================================ */
.case-facts{margin-top:var(--space-2)}
.case-facts .lbl{color:var(--blue-light)}

/* ============================================================
   3. SCREENSHOT VARIANTS -- three different rhythms so the three
      case studies do not read as clones. Pick ONE per screenshot,
      mix variants within a single page for internal rhythm too.
   ------------------------------------------------------------
   3a. .case-shot            FULL: the screenshot is the whole
       width of the column, caption below it. Use for the primary
       "here is the live site" reveal near the top of the story.
   ============================================================ */
.case-shot{margin:var(--space-8) 0}
.case-shot .frame{margin:0}

/* ============================================================
   3b. .case-shot--phone     PHONE: a narrow, centred capture
       (mobile screenshots run tall) so it reads as an object on
       a shelf, not a stretched blur. Use for a phone screenshot.
   ============================================================ */
.case-shot--phone{
  max-width:min(22rem, 76vw);
  margin-left:auto; margin-right:auto;
}
.case-shot--phone .frame img{width:100%; height:auto; display:block}

/* ============================================================
   3c. .case-shot--annotated ANNOTATED: the screenshot sits beside
       (desktop) or above (mobile) a short callout list pulled from
       the same real caption/figures, for a proof/dashboard moment.
   ============================================================ */
.case-shot--annotated{margin:var(--space-8) 0}
.case-shot--annotated .annot-grid{display:flex; flex-direction:column; gap:var(--space-6)}
.case-shot--annotated .annot-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:var(--space-3)}
.case-shot--annotated .annot-list li{
  padding-left:var(--space-5); position:relative; color:var(--muted); max-width:var(--measure);
}
.case-shot--annotated .annot-list li::before{content:''; position:absolute; left:0; top:.75em; width:var(--space-3); height:1px; background:var(--blue-light)}
@media (min-width:821px){
  .case-shot--annotated .annot-grid{flex-direction:row; align-items:flex-start; gap:var(--space-8)}
  .case-shot--annotated .annot-grid > .frame{flex:1.4 1 0; margin:0}
  .case-shot--annotated .annot-grid > .annot-side{flex:1 1 0; padding-top:var(--space-3)}
}

/* ============================================================
   4. STORY -- plain reading blocks between screenshots use the
      homepage's own h2/p rules verbatim; no overrides needed.
      Keep every heading + paragraph the real v3 sentence, cut
      only from the start or end (copy_check.py rule 9).
   ============================================================ */

/* ============================================================
   5. CTA ROW -- the two v3 buttons ("Request a free consultation"
      + the external "Visit the live site" link) side by side on
      desktop, stacked on phones.
   ============================================================ */
.case-cta-row{display:flex; flex-wrap:wrap; gap:var(--space-4); margin-top:var(--space-6)}

/* ============================================================
   6. NEXT-BUILD LINK -- "Read the next build", a bigger sibling
      of .tlink so it reads as a section-ending signpost, not an
      inline text link.
   ============================================================ */
.case-next{
  display:flex; align-items:center; justify-content:space-between; gap:var(--space-4);
  margin-top:var(--space-8); padding:var(--space-6) 0 0; border-top:1px solid var(--hair);
}
.case-next .lbl{color:var(--muted)}
.case-next .tlink{margin-top:var(--space-2); font-size:var(--step-2)}

@media (prefers-reduced-motion: reduce){ .case-head{min-height:auto} }

/* closing call to action IS the finale chapter (2026-09-20): the piece re-forms and stays whole beside the ask, to the
   end of the page. A separate empty finale interlude dissolved the piece just as the CTA arrived. */
.chapter-cta--finale{min-height:100svh; display:flex; align-items:center}
.chapter-cta--finale .column{width:100%}
.chapter-cta--finale h2,.chapter-cta--finale .lead{max-width:22ch}
.chapter-cta--finale .lead{max-width:34ch}
@media (max-width:820px){ .chapter-cta--finale{min-height:88svh; align-items:flex-end; padding-bottom:var(--space-8)} }