/* ============================================================
   keshin.work — Case study (project detail) pages
   ------------------------------------------------------------
   The template behind project-*.html. Colours and the responsive
   type ramp come from css/tokens.css, the back link and the
   "Design link" are .cta-link from css/components.css, and the
   12 columns from css/grid.css.

   Loaded only by the project pages, after style.css (fonts and
   base live there) — every class name is new, so the legacy
   rules in style.css stay inert here.

   Written as a TEMPLATE, not as one page: the only per-project
   things are the copy, the image `src`s and the number of
   .case-figure blocks. Porting the next project needs no new CSS.

   Two numbers here are deliberately NOT on the --spacing-*
   ladder, because the ladder has no entry for them: the 22px the
   back link measures (a .cta-link--sm is a 16px row + its 4px
   column gap + the 2px ::after underline), which only appears in
   the arithmetic below, and min(24px, var(--page-gutter)), which
   is copied verbatim from .proj-wrapper in style.css.
   ============================================================ */


/* ============================================================
   0.0 — PAGE GROUND
   ------------------------------------------------------------
   The case studies run on white, where the rest of the site runs
   on Surface 10 (#F7F5F2). The artwork panels keep their warm
   cream, so the relationship is the one the old site had: cream
   plates inset on a white page, rather than a warm page with
   slightly warmer plates on it.

   A bare `body` selector rather than a `body.case` class: this
   sheet is linked only from the project pages, so it is already
   scoped, and it loads after style.css so it wins on order. Same
   reasoning as the `main + .site-footer` rule further down.
   ============================================================ */

body {
  background: var(--color-surface-white);
}


/* ============================================================
   1.0 — HERO
   ------------------------------------------------------------
   Back link, project title, one supporting line.
   ============================================================ */

/* The site puts its interior heroes on one clearance ramp —
   .work-hero, .contact-hero and .approach-title-section all land
   their title 160 / 120 / 64 below the header (style.css:1310
   documents the decision). This hero has to fit a back link into
   that same space, so the padding is the ramp minus the link's
   own 22px and the margin under it:

       desktop   96 + 22 + 40  = 158   (ramp 160)
       <=1024    64 + 22 + 32  = 118   (ramp 120)
       <=767.98  32 + 22 + 24  =  78   (ramp  64)

   Mobile is the one step that does not land: exact parity needs
   16px of padding, which crowds the back link against the sticky
   bar. 32 is the smallest value that still reads as clearance,
   so the title sits 14px lower there than on the Work page.
   The horizontal inset is the token, so it steps 80 / 40 / 16
   with every other section on the site. */
.case-hero {
  padding: var(--spacing-96) var(--page-gutter) var(--spacing-40);
}

.case-hero-inner {
  display: flex;
  flex-direction: column;
  /* .cta-link is inline-flex and draws its underline at width:100%,
     so a stretch alignment would run the rule the whole column. */
  align-items: flex-start;
}

.case-hero-back {
  margin-bottom: var(--spacing-40);
}

/* Rides the --text-h1 ramp (112 / 72 / 56). Note .work-hero-title
   hardcodes 112 with only a mobile override, so the two heroes do
   not match between 768 and 1024 — the token is the correct
   behaviour and work.html is the one that should migrate. */
.case-hero-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  font-size: var(--text-h1);
  line-height: var(--lh-h1);
  letter-spacing: var(--ls-h1);
  color: var(--color-text-heading);
}

/* The brand full stop the display titles carry site-wide. The
   three existing rules (.caps-title, .home-work-title, .exp-title)
   use the legacy --color-brand alias; this uses the semantic
   token, which tokens.css asks new code to prefer. Same hex. */
.case-hero-title .dot {
  color: var(--color-text-brand);
}

.case-hero-subtitle {
  margin: var(--spacing-8) 0 0;
  font-family: var(--font-body);
  font-weight: var(--weight-semibold);
  font-size: var(--text-body-l);
  line-height: var(--lh-body-l);
  letter-spacing: var(--ls-body-l);
  color: var(--color-text-body-secondary);
}


/* ── Back link ─────────────────────────────────────────────────
   The site's tertiary button with its arrow mirrored. The shipped
   glyph points NE and .cta-link:hover rotates it +45° to E.
   scaleX(-1) turns NE into NW, and because the rotate renders
   inside the mirror it reads as −45° on screen: NW → W. Mirroring
   rather than re-drawing keeps the component's own travel, easing
   and colour change untouched.

   `.cta-link:hover .cta-link-arrow svg` is (0,3,1) — :hover counts
   in the class column — and `.case-back:hover .cta-link-arrow svg`
   is (0,3,1) too, so it ties and wins on source order. That holds
   only because this file loads after components.css.            */
.case-back .cta-link-arrow svg {
  transform: scaleX(-1);
}

.case-back:hover .cta-link-arrow svg {
  transform: scaleX(-1) rotate(45deg);
}


/* ============================================================
   2.0 — IMAGE BANDS (cover, style guide, screens)
   ------------------------------------------------------------
   Deliberately off the 12-column grid, exactly the way
   work.html's project cards are: inset from the VIEWPORT by 24px
   rather than by the 80px page gutter, so the imagery runs wider
   than the 1280 content box the copy sits in — 1392 inside the
   1440 frame.

   min() because the page gutter is 80 / 40 / 16: on a phone a
   flat 24 would make the images narrower than the copy above
   them. Uncapped on purpose — a max-width here strands the block
   in empty margin on a wide monitor (see .proj-wrapper). The
   cost of leaving it uncapped is that the 1920px sources fall
   below 1x past a ~1970px viewport.
   ============================================================ */

.case-bleed {
  padding-inline: min(24px, var(--page-gutter));
}

/* The ground behind the artwork. This is not decorative: the
   cover export carries an alpha channel (26% of its pixels are
   fully transparent and 20% partial, where the mockups fade out),
   so this colour IS the cover's background rather than something
   hidden under it. It also shows while a lazy image is still in
   flight, which is why it is a warm cream and not white.

   The old site used #F5EDDC here. Milky Way (#FFF9EF) is a touch
   lighter, and is used instead because it is the system's warm
   surface — the point of this rebuild. */
.case-figure {
  background: var(--color-surface-accent-milky-way);
  overflow: hidden;
}

.case-figure img {
  display: block;
  width: 100%;
  height: auto;
}

/* The stack of full-width mockups. 8px between them, the same
   gutter .proj-row uses between two cards — and the same 8px
   trailing seam across to the thank-you band, which is the last
   band on the page and owns the closing padding. */
.case-gallery {
  padding-bottom: var(--spacing-8);
}

.case-gallery-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-8);
}

/* Style-guide pair — colour palette and type sheet, two up. The
   trailing 8px is what carries the seam between this band and the
   gallery below it; .case-gallery has no padding-top, so without
   this the two bands butt together at 0 while every other figure
   junction on the page is 8. */
.case-styleguide {
  padding-bottom: var(--spacing-8);
}

.case-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-8);
  /* Each figure sizes to its own image. The default `stretch` makes both
     cells as tall as the taller one, and since .case-figure paints a
     ground, the shorter one trails a block of empty cream below its
     image — 364px and 598px on the Mindriser pairs, measured. Only
     matters where a pair holds images of different heights; the style
     guide pairs are matched, so it is a no-op there. */
  align-items: start;
}


/* ============================================================
   3.0 — PROJECT DETAILS
   ------------------------------------------------------------
   The one band on the page that sits ON the grid: the expertise
   / platform / industry row, the design link, and the overview +
   services pair. Its padding-top is also what separates the copy
   from the cover image above it.
   ============================================================ */

.case-details {
  padding: var(--spacing-96) var(--page-gutter);
}

/* Shared eyebrow for every label in this section — the three
   metadata terms and the two block headings. Hairline-13 is the
   site's label style (.sf-label in the footer is the same thing).
   Note the two hairline steps share one line-height and tracking
   token; there is no --lh-hairline-13. */
.case-label {
  margin: 0;
  font-family: var(--font-body);
  font-weight: var(--weight-bold);
  font-size: var(--text-hairline-13);
  line-height: var(--lh-hairline);
  letter-spacing: var(--ls-hairline);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

/* .case-meta is a <dl> AND a .row. Set the block margins
   individually — the `margin` shorthand would also zero the
   -12px inline margins the grid puts on .row, which is what
   aligns column 1 with the container edge. */
.case-meta {
  margin-top: var(--spacing-56);
  margin-bottom: 0;
}

.case-meta-cell {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-8);
}

.case-meta-value {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  font-size: var(--text-h7);
  line-height: var(--lh-h7);
  letter-spacing: var(--ls-h7);
  color: var(--color-text-heading);
}

.case-design-link {
  margin-top: var(--spacing-32);
}

.case-body {
  margin-top: var(--spacing-56);
}

.case-block {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-16);
}

.case-copy {
  margin: 0;
  font-family: var(--font-body);
  font-weight: var(--weight-regular);
  font-size: var(--text-body-m);
  line-height: var(--lh-body-m);
  letter-spacing: var(--ls-body-m);
  color: var(--color-text-body-secondary);
}

.case-list {
  margin: 0;
  padding: 0;
  /* Safari drops the list role when list-style computes to none,
     so the markup carries an explicit role="list". */
  list-style: none;
}

.case-list li {
  font-family: var(--font-body);
  font-weight: var(--weight-regular);
  font-size: var(--text-body-m);
  line-height: var(--lh-body-m);
  letter-spacing: var(--ls-body-m);
  color: var(--color-text-body-secondary);
}


/* ============================================================
   4.0 — THANK YOU
   ------------------------------------------------------------
   The sign-off the old page closed on. It is the last band, so it
   carries the page's closing padding rather than .case-gallery.
   ============================================================ */

.case-thanks {
  padding-bottom: var(--spacing-96);
}

/* A cool grey, where every other band on this page is warm cream —
   which is what separates the sign-off from the mockups above it
   without needing a bigger gap than the 8px the rest of the stack
   uses. The old site used #F2F4F5 here; --color-surface-subtle is
   #F3F4F6, the system's nearest equivalent. */
.case-thanks-band {
  display: flex;
  justify-content: center;
  background: var(--color-surface-subtle);
  padding-block: var(--spacing-80);
}

/* min(), not `width` plus `max-width: 60%`: the image is the flex item,
   and a max-width percentage on a shrink-to-fit flex item resolves
   against its own content width rather than the band — a feedback loop
   that settled the sticker at 192px instead of 320. */
.case-thanks-sticker {
  display: block;
  width: min(320px, 60%);
  height: auto;
}


/* .site-footer carries a 128px top margin that only the home page
   zeroes, so a section closing on its own 96 stacked to 224 — the
   gulf home.css:554 and experience.css:26 both document. Cancelled
   the same way .exp does it, which puts this page on the same 96
   before the footer as the other four, and lets the 72 / 56 steps
   below govern it at tablet and mobile.

   Keyed to `main`, NOT to `.case-gallery`: the sections sit inside
   the <main> landmark, so the footer's previous sibling is <main>
   and a `.case-gallery + .site-footer` rule silently stops matching.
   This sheet is loaded only by the project pages, so the bare
   element selector stays scoped. */
main + .site-footer {
  margin-top: 0;
}


/* ============================================================
   RESPONSIVE — Tablet (≤1024, mirrors the 1024 frame)
   ------------------------------------------------------------
   Only what actually has to move. The type ramp is NOT here:
   tokens.css re-declares --text-* inside the same query, so every
   font-size above is already responsive. H1 and H3 ride that
   ramp; H7, Body L/M and Hairline-13 are flat at every breakpoint
   by design. Re-stating a size here would step it twice.
   ============================================================ */

@media (max-width: 1024px) {
  .case-hero {
    padding: var(--spacing-64) var(--page-gutter) var(--spacing-32);
  }

  .case-hero-back {
    margin-bottom: var(--spacing-32);
  }

  .case-details {
    padding: var(--spacing-72) var(--page-gutter);
  }

  .case-thanks {
    padding-bottom: var(--spacing-72);
  }

  .case-thanks-band {
    padding-block: var(--spacing-64);
  }

  .case-meta,
  .case-body {
    margin-top: var(--spacing-40);
  }
}


/* ============================================================
   RESPONSIVE — Mobile (≤767.98, mirrors the 375 frame)
   ------------------------------------------------------------
   767.98 rather than 767: Bootstrap's col-md-* turns on at
   min-width 768, so a flat 767 leaves a real gap at fractional
   widths. The whole project is normalised to 1024 / 767.98 —
   see the note at the top of the responsive section in tokens.css.

   Below 768 every col-md-* has already collapsed to full width,
   so the meta row and the overview pair stack on their own; all
   that is left is to give them their vertical gaps back and drop
   the style-guide pair to one column.
   ============================================================ */

@media (max-width: 767.98px) {
  .case-hero {
    padding: var(--spacing-32) var(--page-gutter) var(--spacing-24);
  }

  .case-hero-back {
    margin-bottom: var(--spacing-24);
  }

  .case-details {
    padding: var(--spacing-56) var(--page-gutter);
  }

  .case-thanks {
    padding-bottom: var(--spacing-56);
  }

  .case-thanks-band {
    padding-block: var(--spacing-48);
  }

  /* Stacked columns have no gutter of their own — Bootstrap's
     12px inline padding is horizontal only. */
  .case-meta-cell + .case-meta-cell,
  .case-block + .case-block {
    margin-top: var(--spacing-32);
  }

  .case-pair {
    grid-template-columns: 1fr;
  }
}