/* ==========================================================================
   Lumos Design Studio — case-study pages
   Built from the same components as the home page: the 8px gutter, the 25px
   inset panels, the container width and the type scale are all the template's.
   Only the arrangement is new, because the template has no long-form
   project page of this shape.
   ========================================================================== */

/* ---------- hero ---------------------------------------------------------- */

.case-hero {
  /* Dark ground, so it takes the same token flip .panel--dark performs.
     Without this the title inherits body ink and disappears into the image. */
  color: var(--c-white);
  --c-muted-local: rgba(255,255,255,.5);
  --c-rule: rgba(255,255,255,.14);
  position: relative;
  /* header is now flush at the top of the screen and 64px tall; the extra 8px
     matches the page gutter so the panel sits clear of it. */
  margin: 72px 8px 0;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--c-ink);
  min-height: 74vh;
  display: grid;
  align-content: end;
}
.case-hero__media { position: absolute; inset: 0; }
.case-hero__media img { width: 100%; height: 100%; object-fit: cover; }
.case-hero__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,10,10,.5) 0%, rgba(10,10,10,.3) 42%, rgba(10,10,10,.9) 100%);
}
.case-hero__inner { position: relative; padding: 0 40px 48px; max-width: 1100px; }
.case-hero__client {
  margin: 0 0 18px; font-size: var(--fs-base); font-weight: 500;
  letter-spacing: var(--tracking-caps); text-transform: uppercase;
  color: rgba(255,255,255,.6);
}
/* Sahil asked for the display headings in Inter 600 rather than the condensed
   face; the case-page titles follow the same rule as the home page. */
.case-hero__title {
  margin: 0; font-family: var(--font-ui); font-weight: 600;
  text-transform: none; font-size: var(--fs-h1); line-height: .95;
  letter-spacing: -0.035em;
}
.case-hero__lede {
  margin: 26px 0 0; max-width: 540px;
  font-size: var(--fs-lg); font-weight: 500; line-height: 1.3;
  color: rgba(255,255,255,.62);
}

@media (max-width: 1199px) { .case-hero__title { font-size: 9vw; } }
@media (max-width: 809px)  { .case-hero__inner { padding: 0 20px 32px; } }

/* ---------- meta row ------------------------------------------------------ */

.case-meta { padding: 56px 0 0; }
.case-meta__grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px;
  border-top: 1px solid var(--c-rule); padding-top: 26px;
}
.case-meta__k {
  display: block; font-size: 12px; font-weight: 500;
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--c-muted-local); margin-bottom: 10px;
}
.case-meta__v { margin: 0; font-size: var(--fs-md); font-weight: 500; }

@media (max-width: 809px) { .case-meta__grid { grid-template-columns: 1fr 1fr; row-gap: 28px; } }

/* ---------- context ------------------------------------------------------- */

.case-context { padding: 88px 0 0; }
.case-context__grid { display: grid; grid-template-columns: 300px 1fr; gap: 40px; }
.case-context__label { font-size: var(--fs-base); font-weight: 500; margin: 0; }
.case-context__body { display: grid; gap: 22px; max-width: 68ch; }
.case-context__body p {
  margin: 0; font-size: var(--fs-xl); font-weight: 500; line-height: 1.35;
}
.case-context__body p + p { font-size: var(--fs-lg); color: var(--c-muted-local); }

@media (max-width: 1199px) { .case-context__grid { grid-template-columns: 1fr; } }

/* ---------- phases -------------------------------------------------------- */

.phases { padding: 104px 0 112px; }
.phases__head { display: grid; grid-template-columns: 300px 1fr; gap: 40px; }
.phases__label { font-size: var(--fs-base); font-weight: 500; margin: 0; }
.phases__title {
  margin: 0; font-size: var(--fs-h2); font-weight: 500;
  letter-spacing: var(--tracking); max-width: 620px;
}

.phase-list { margin-top: 80px; border-top: 1px solid var(--c-rule); }
.phase {
  display: grid; grid-template-columns: 300px 1fr;
  gap: 40px; padding: 44px 0;
  border-bottom: 1px solid var(--c-rule);
}
.phase__index {
  font-size: 12px; font-weight: 500;
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--c-muted-local);
}
.phase__name {
  margin: 0 0 18px; font-size: var(--fs-h4); font-weight: 500;
  letter-spacing: var(--tracking);
}
.phase__body { display: grid; gap: 16px; max-width: 68ch; }
.phase__body p { margin: 0; font-size: var(--fs-md); font-weight: 500; color: var(--c-ink-90); line-height: 1.55; }
.phase__figure { margin: 30px 0 0; }
.phase__figure img { width: 100%; border-radius: var(--r-md); background: #ededed; }
.phase__figure figcaption {
  margin-top: 12px; font-size: 12px; font-weight: 500;
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--c-muted-local);
}

@media (max-width: 1199px) { .phases__head, .phase { grid-template-columns: 1fr; gap: 20px; } }

/* ---------- impact -------------------------------------------------------- */

.impact { padding: 88px 40px 96px; }
.impact__head { display: grid; grid-template-columns: 300px 1fr; gap: 40px; margin-bottom: 72px; }
.impact__label { font-size: var(--fs-base); font-weight: 500; margin: 0; }
.impact__title {
  margin: 0; font-family: var(--font-ui); font-weight: 600;
  text-transform: none; font-size: var(--fs-h2); line-height: .95;
  letter-spacing: -0.035em;
}
/* `min-width: 0` so a long value can never set the track floor — a grid item
   defaults to min-content, and "Consistency" is one unbreakable word. */
.impact__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.impact__grid > * { min-width: 0; }

/* --fs-stat is 85px and the token says what it is for: big counter numerals.
   Two of these three values are words, and at 85px "Consistency" measures
   501px of ink against a 325-459px column — it ran into "Speed" at every
   desktop width. Fluid, so the numerals still have presence on a wide screen
   and the longest word fits the narrowest three-column cell (43px at the
   1200px end, where the word comes to 255px in a 325px track). */
.impact__v {
  font-family: var(--font-ui); font-size: clamp(38px, 3.6vw, 72px); font-weight: 700;
  line-height: 1.02; letter-spacing: var(--tracking);
  font-variant-numeric: tabular-nums; display: block;
  overflow-wrap: anywhere;
}
.impact__k { display: block; margin: 18px 0 8px; font-size: var(--fs-md); font-weight: 500; }
.impact__n { margin: 0; font-size: var(--fs-sm); font-weight: 500; color: var(--c-muted-local); max-width: 240px; }

@media (max-width: 1199px) { .impact__grid { grid-template-columns: 1fr; row-gap: 44px; } .impact__head { grid-template-columns: 1fr; } }
@media (max-width: 809px)  { .impact { padding: 64px 20px 72px; } }

/* ---------- next ---------------------------------------------------------- */

.case-next { padding: 104px 0 0; }
.case-next__head {
  display: flex; justify-content: space-between; align-items: baseline;
  border-top: 1px solid var(--c-rule); padding-top: 26px; margin-bottom: 28px;
  font-size: var(--fs-base); font-weight: 500;
}
.case-next__card { position: relative; display: block; height: 420px; border-radius: var(--r-md); overflow: hidden; background: #e6e6e6; }
.case-next__card img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.22,1,.36,1); }
.case-next__card:hover img { transform: scale(1.03); }
.case-next__card::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 110px;
  background: linear-gradient(rgba(0,0,0,.42), rgba(0,0,0,0)); z-index: 1;
}
.case-next__tag {
  position: absolute; left: 24px; top: 18px; z-index: 2;
  display: flex; align-items: baseline; gap: 8px; color: var(--c-white);
  text-shadow: 0 1px 14px rgba(0,0,0,.45);
}
.case-next__name { font-size: var(--fs-md); font-weight: 600; letter-spacing: var(--tracking); }
.case-next__meta { font-size: 12px; font-weight: 500; opacity: .8; }

@media (max-width: 809px) { .case-next__card { height: 62vw; } }


/* ---------- mobile ---------------------------------------------------------
   The impact figures are not all numerals: JioBook's are "60%", "Consistency"
   and "Speed". At the desktop 85px a word like "Consistency" is ~500px wide,
   which first blew the page's scroll width out and then, once the track was
   allowed to shrink, simply clipped. Scale with the viewport instead.

   This lives here rather than in brand.css because case.css loads last on
   these pages and would otherwise override it at equal specificity.
   -------------------------------------------------------------------------- */
@media (max-width: 809px) {
  .impact__v      { font-size: clamp(30px, 8.2vw, 85px); }
  .impact__title  { font-size: 12vw; }
  .phases__title  { font-size: 30px; }
  .case-context__body p     { font-size: var(--fs-lg); }
  .case-context__body p + p { font-size: var(--fs-md); }
  .phase__name    { font-size: 26px; }
}


/* ---------- promotional banners ---------------------------------------------
   The hero and the next-project card both carry Sahil's 2.33:1 promotional
   banner for the project. The next card was a fixed 420px against the full
   container width — a 3.4:1 band that would have cut a third off a 2.33 image.
   Matching the source ratio shows it whole; these are composed pieces, and
   cropping one to fit a slot defeats the point of having it.
   -------------------------------------------------------------------------- */
.case-next__card { height: auto; aspect-ratio: 2.33 / 1; }

@media (max-width: 809px) { .case-next__card { aspect-ratio: 16 / 10; } }


/* ---------- next project, label below the image -----------------------------
   The label used to sit over the artwork with a scrim, which worked while these
   were dark crops. Against the promotional banners it fails: measured white-on-
   substrate contrast was 1.94:1 at worst on the Zadinga banner and 4.44:1 on
   JioBook, both under the 4.5:1 minimum for text this size. A scrim heavy
   enough to rescue the near-white banner would need ~63% black across the top
   of the artwork, which defeats the point of showing a promotional piece.

   So the label moves out of the image. It reads on the page ground at full
   contrast, works whatever the banner's tone, and leaves the artwork clean.
   -------------------------------------------------------------------------- */
.case-next__link { display: grid; gap: 18px; }
.case-next__card { display: block; }
.case-next__card::before { content: none; }        /* scrim no longer needed */

.case-next__link .case-next__tag {
  position: static;
  display: flex; align-items: baseline; gap: 8px;
  color: var(--c-ink); text-shadow: none;
}
 /* --c-muted-local is #999, which was fine white-on-dark over the artwork but
    lands at 2.6:1 on the page ground — under the 4.5:1 minimum at this size.
    #6B6B6B measures 4.9:1 and still reads as secondary. */
.case-next__link .case-next__meta { color: #6B6B6B; opacity: 1; }