/* ==========================================================================
   CASE STUDY
   Layout for a case-study page. Currently one exists — work/alaska-boarding.html.
   Anything that a second case study would also want lives in components.css.

   Design source : Figma "PORTFOLIO_CASE-STUDY-LAYOUT"
                   frame 628:4576 "ALASKA AIRLINES BOARDING - PRODUCTION"
                   1920 x 6205, reference width 1920px

   Depends on: tokens.css, base.css, components.css
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. PAGE
   A case study is a light page on a dark site. Rather than redefine the
   shared --color-* tokens (which would drag the dark header down with them),
   the body opts in to the --cs-* set and the chrome is left alone.
   -------------------------------------------------------------------------- */

.case-study body {
  background-color: var(--cs-bg);
  color: var(--cs-ink);
  /* The header now carries a second bar, so the offset that replaces it in
     the flow grows to match. */
  padding-top: calc(var(--header-height) + var(--cs-subnav-h));
}

/* Anchors must clear both bars. */
.case-study {
  scroll-padding-top: calc(var(--header-height) + var(--cs-subnav-h) + 1rem);
}

/* The frame's gradient panel begins immediately under the header — there is
   no opening gap here, unlike the home page. */
.case-study .page { padding-top: 0; }

/* The frame's rhythm is a flat 110 between every band, matching the home
   page. (home.css is not loaded here, so the rule is restated.) The case
   study's sections are wrapped in an <article>, so the rhythm is applied to
   that element's children rather than to .page's. */
.case-study .page > article > * + * { margin-top: var(--gap-band); }

/* Section eyebrows inherit --color-text-muted (#8A857F) from base.css, which
   is exactly the frame's colour for them. Only the one on the dark IMPACT
   band needs overriding — see section 8. */


/* --------------------------------------------------------------------------
   2. HERO
   Frame: a 1516 x 1591 gradient panel starting at the content column and
   running off the right edge of the artboard, with the ROLE / TEAM / SHIPPED
   rail beside it in the label column.

   The panel is bled by keeping the hero OUTSIDE .shell and giving its inner
   wrapper only a left inset — the same measure .shell would have applied —
   so the right side runs to the viewport edge at any width, the way the
   full-bleed bands further down the page do.
   -------------------------------------------------------------------------- */

.cs-hero__inner {
  /* Left half of .shell: centre the 1760 measure, but never less than the
     page gutter. At 1920 this resolves to exactly 80px. */
  padding-inline-start: max(
    var(--page-gutter),
    calc((100% - var(--layout-max)) / 2)
  );
}

.cs-hero__panel {
  background-image: var(--cs-gradient-hero);
  padding: var(--cs-hero-pad-top) var(--page-gutter) var(--cs-hero-pad-bottom);
}

/* --- Rail: ROLE / TEAM / SHIPPED ---------------------------------------- */

.cs-hero__meta {
  display: grid;
  gap: var(--space-24);
  /* Below 1024 the rail sits under the panel, clear of its edge. */
  padding-block-start: var(--space-32);
}

.cs-hero__meta dt {
  color: var(--cs-ink-label);
  font-size: var(--fs-cs-meta-label);
  font-weight: var(--fw-bold);
  line-height: var(--lh-normal);
  letter-spacing: var(--ls-cs-meta);
  text-transform: uppercase;
}

/* The frame sets "Role" at 14/-0.44 and the other two at 12/+0.12. Kept as
   drawn rather than levelled — worth a look on review. */
.cs-hero__meta dt:first-of-type {
  font-size: var(--fs-cs-meta-label-lg);
  letter-spacing: var(--ls-cs-meta-label-lg);
}

.cs-hero__meta dd {
  margin: 0;
  padding-block-start: var(--space-8);
  color: var(--color-text-muted);
  font-size: var(--fs-cs-meta);
  line-height: var(--lh-cs-meta);
  letter-spacing: var(--ls-cs-meta);
}
/* The frame sets the two single-line values in Medium and the team list
   in Regular. */
.cs-hero__meta dd        { font-weight: var(--fw-medium); }
.cs-hero__meta dd--list,
.cs-hero__meta .is-list  { font-weight: var(--fw-regular); }

/* --- Panel copy ---------------------------------------------------------- */

.cs-hero__kicker {
  color: var(--cs-brand-75);
  font-size: var(--fs-cs-kicker);
  font-weight: var(--fw-bold);
  line-height: var(--lh-normal);
  letter-spacing: var(--ls-cs-kicker);
  text-transform: uppercase;
}

.cs-hero__headline {
  margin-block-start: var(--space-8);
  color: var(--cs-brand);
  font-size: var(--fs-cs-display);
  font-weight: var(--fw-extrabold);
  line-height: var(--lh-cs-display);
  letter-spacing: var(--ls-cs-display);
}
/* The frame sets the second line of the headline in Regular. */
.cs-hero__headline-sub {
  display: block;
  font-weight: var(--fw-regular);
}

.cs-hero__lede {
  margin-block-start: var(--space-8);
  color: var(--cs-brand-88);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

/* --- Device cluster ------------------------------------------------------
   Two overlapping shots: a 689 x 501 photograph with a 321 x 480 tablet
   sitting across its left edge. Sized as one 898 x 501 stage with both
   children placed in percentages of it, so the composition holds at any
   width instead of only at 1920.
   ------------------------------------------------------------------------ */

.cs-hero__devices {
  position: relative;
  aspect-ratio: 898 / 501;
  margin-block-start: var(--space-32);
}

.cs-hero__device { position: absolute; }

.cs-hero__device--photo {          /* 1151,301  689 x 501 */
  left: 23.27%;
  top: 0;
  width: 76.73%;
  height: 100%;
}
.cs-hero__device--tablet {         /*  942,311  321 x 480 — sits on top */
  left: 0;
  top: 2%;
  width: 35.75%;
  height: 95.81%;
}

/* --- Hero photograph + caption ------------------------------------------ */

.cs-hero__figure { margin-block-start: var(--cs-hero-collage-gap); }
.cs-hero__collage { aspect-ratio: 1356 / 763; }


@media (min-width: 1024px) {
  .cs-hero__inner {
    display: grid;
    grid-template-columns: var(--layout-rail) minmax(0, 1fr);
    column-gap: var(--layout-rail-gap);
    align-items: start;
  }
  /* The panel carries the <h1>, so it leads in the DOM; the rail is placed
     back into the first column here. */
  .cs-hero__panel { grid-column: 2; grid-row: 1; }
  /* The rail's first label sits level with the top of the panel. The Alaska
     frame drops it 64px (207 - 143); the WayFinder frame does not, and the
     two pages share a nav, so they share the alignment. */
  .cs-hero__meta  { grid-column: 1; grid-row: 1;
                    padding-block-start: 0; }
}

/* The frame's 458 / 898 split across the panel only has room for the headline
   at the top of its range: "Fast Flexible Service" measures 429px at the
   frame's 46px, against a 446px column at 1920 — 17px of slack. The copy
   track is therefore floored at min-content with the headline set nowrap, so
   as the viewport narrows the copy takes exactly what the title needs and the
   devices give it up, rather than the title breaking mid-phrase. At 1920
   min-content (429) is under the share (446), so the frame's proportions are
   exact.

   That floor is what lets the two-up composition start at 1024 rather than
   1440. It was held to 1440 when this page stood alone; the WayFinder hero
   goes two-up at 1024, and the two pages share a nav, so this one follows.
   The cost is a smaller device cluster at the bottom of the range — 318 x 177
   at 1024 — which is still larger than the WayFinder cluster at the same
   width. */
@media (min-width: 1024px) {
  .cs-hero__top {
    display: grid;
    grid-template-columns: minmax(min-content, 458fr) minmax(0, 898fr);
    align-items: start;
  }
  /* Makes each line's width the track's min-content floor. */
  .cs-hero__headline { white-space: nowrap; }

  /* Shared with the WayFinder hero — see the note on the token. */
  .cs-hero__copy    { margin-block-start: var(--cs-hero-copy-offset); }
  .cs-hero__devices { margin-block-start: 0; }
}

/* Below the two-column breakpoint the panel bleeds left as well, so the hero
   reads edge to edge on a phone instead of as a floating slab. */
@media (max-width: 1023px) {
  .cs-hero__panel { margin-inline-start: calc(-1 * var(--page-gutter)); }
}


/* --------------------------------------------------------------------------
   3. SITUATION
   A 433 x 434 screenshot of the legacy software beside 963px of 40/56 copy,
   the copy centred against the image.
   -------------------------------------------------------------------------- */

/* The frame starts this section's copy 10px below its rail label. */
.cs-situation { --eyebrow-offset: 10px; }

.cs-situation__body {
  display: grid;
  gap: var(--cs-situation-gap);
}

.cs-situation__shot {
  aspect-ratio: 433 / 434;
  /* Stacked, the shot would otherwise run the full content column and tower
     over the copy. The frame's own 433px is the natural ceiling. */
  max-width: 433px;
}

.cs-situation__copy {
  color: var(--color-text-muted);
  font-size: var(--fs-cs-situation);
  line-height: var(--lh-cs-situation);
  letter-spacing: var(--ls-cs-situation);
}

/* Side by side only from 1024. The frame's 433 : 963 split leaves the shot
   at 208px on a 768 tablet, which is nothing for a screenshot of a dense
   text terminal — so through tablet it stacks at its full 433 instead. */
@media (min-width: 1024px) {
  .cs-situation__body {
    grid-template-columns: 433fr 963fr;
    align-items: center;
  }
  .cs-situation__shot { max-width: none; }
}


/* --------------------------------------------------------------------------
   4. ROLE  —  tinted full-bleed band
   -------------------------------------------------------------------------- */

.cs-band--role {
  background-color: var(--cs-band);
  padding-block: var(--gap-band);           /* the frame's 110 inset */
}

.cs-process {
  margin-block-start: var(--cs-quote-gap);
  aspect-ratio: 1434 / 411;
}


/* --------------------------------------------------------------------------
   5. BOARDING APP
   Four device screens in a row, then the task wheel.
   -------------------------------------------------------------------------- */

.cs-screens {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--cs-row-gap);
  margin-block-start: var(--cs-quote-gap);
}

.cs-screen--control      { aspect-ratio: 231 / 346; }
.cs-screen--luggage      { aspect-ratio: 223 / 338; }
.cs-screen--manifest     { aspect-ratio: 222 / 339; }
.cs-screen--announcements{ aspect-ratio: 227 / 333; }

@media (min-width: 768px) {
  /* Column widths are each shot's share of the content column, and the free
     space is dealt out between them — which reproduces the frame's rhythm
     (four ~226px shots, three ~178px gaps, flush to both edges) at any width.

     Two shared rows carried into each figure by subgrid: the shots sit on the
     bottom of row 1 and every caption starts on row 2. Without it the row
     would be bottom-aligned on the figures instead, and a caption that wraps
     to three lines (which "Primary boarding control screen" does from 1024
     down) would shove its shot a line higher than its neighbours'. */
  .cs-screens {
    grid-template-columns: 16.07% 15.52% 15.45% 15.80%;
    grid-template-rows: auto auto;
    justify-content: space-between;
    gap: 0;
  }
  .cs-screens > .cs-figure {
    display: grid;
    grid-row: span 2;
    grid-template-rows: subgrid;
  }
  /* Shots sit on the floor of row 1; captions hang from the ceiling of row 2,
     so a two-line caption starts level with a three-line one. */
  .cs-screens > .cs-figure > .media       { align-self: end; }
  .cs-screens > .cs-figure > figcaption   { align-self: start; }

  .cs-screens .cs-figure__caption { text-align: center; }
}

/* The frame butts the wheel straight up against the captions. */
.cs-wheel { aspect-ratio: 1437 / 692; }


/* --------------------------------------------------------------------------
   6. IPAD STAND & TARGET
   Three photographs, all 402 tall in the frame.
   -------------------------------------------------------------------------- */

.cs-stands {
  display: grid;
  gap: var(--cs-row-gap);
  margin-block-start: var(--cs-quote-gap);
}

.cs-stand--1 { aspect-ratio: 446 / 402; }
.cs-stand--2 { aspect-ratio: 473 / 402; }
.cs-stand--3 { aspect-ratio: 424 / 402; }

@media (min-width: 768px) {
  .cs-stands {
    display: flex;
    justify-content: space-between;
    gap: 0;
  }
  .cs-stands > * { flex: 0 0 30.99%; }
  .cs-stands > *:nth-child(2) { flex-basis: 32.87%; }
  .cs-stands > *:nth-child(3) { flex-basis: 29.46%; }
}


/* --------------------------------------------------------------------------
   7. CLOSING PHOTOGRAPH + IMPACT
   The frame runs a full-bleed 1920 x 935 photograph and drops the IMPACT
   band over its bottom 312px.
   -------------------------------------------------------------------------- */

.cs-closing { position: relative; }

.cs-closing__media {
  /* On a phone the frame's 2.05:1 crop is only ~180px tall and the band would
     cover all of it, so the photograph is given a taller crop and the band
     drops beneath it. The frame's exact image box (100% x 136.9%, showing the
     top 73% of the source) only carries the right aspect at 1920:935, so
     below 1024 it falls back to a top-anchored cover. */
  aspect-ratio: 4 / 3;
  --crop-h: 100%;
  --crop-fit: cover;
  --crop-pos: 50% 0;
}

.cs-impact {
  background-color: var(--cs-band-deep);
  padding-block: var(--cs-impact-pad) var(--cs-impact-pad-b);
}

@media (min-width: 1024px) {
  .cs-closing__media {
    aspect-ratio: 1920 / 935;
    --crop-h: 136.9%;
    --crop-fit: fill;
    --crop-pos: center;
  }
  .cs-impact {
    position: absolute;
    inset-inline: 0;
    bottom: 0;
  }
}


/* --------------------------------------------------------------------------
   8. IMPACT figures
   -------------------------------------------------------------------------- */

/* The one eyebrow that sits on a dark ground. The frame drops it 19px below
   the figure's cap line rather than aligning the two tops. */
.cs-impact .section__eyebrow { color: var(--color-text); }
@media (min-width: 1024px) {
  .cs-impact { --eyebrow-offset: 19px; }
}

.cs-impact__figure {
  color: var(--color-text);
  font-size: var(--fs-cs-stat);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-cs-stat);
}

/* The frame sets the subtitle straight under the figure with no gap — its box
   starts exactly where the figure's ends. */
.cs-impact__detail {
  color: var(--cs-on-deep);
  font-size: var(--fs-cs-stat-sub);
  line-height: var(--lh-cs-stat-sub);
  letter-spacing: var(--ls-cs-stat-sub);
}

.cs-impact__body {
  margin-block-start: var(--cs-impact-gap);
  /* The frame runs this paragraph to 1291 in a 1438 column, so it stops short
     of the figure above it rather than filling the measure. */
  max-width: var(--cs-impact-measure);
  color: var(--cs-on-deep-body);
  font-size: var(--fs-cs-impact-body);
  line-height: var(--lh-cs-impact-body);
  letter-spacing: var(--ls-cs-impact-body);
}