/* case.css — the work case page.
 *
 * The hero, the sticky Description rail and the photo column are the Omnera
 * template's own project-page components (.hero-main.inner, .case-details,
 * .case-sticky, .case-picture), already in styles.css because paak-v3 is built
 * on that template. Nothing here re-implements those.
 *
 * What IS here: the three blocks our cases carry and Atlas has no equivalent
 * for — the measured numbers, the problem, and what we did — plus the two
 * places the template's defaults were tuned for portrait art photography and
 * we are showing landscape screenshots instead.
 *
 * Every value reads from the same custom properties styles.css uses, so a
 * token change moves the case pages with the rest of the site.
 */

/* --- vertical rhythm -------------------------------------------------------
   styles.css sets `.section { padding: 300px 2% }` above 991px. That is the
   template's homepage measure, written for bands that are full-bleed photography
   and pinned runs 1400-1900px tall. Only the first band on a case page is that
   size. Measured at 1440 across all eight: the Numbers band fills 23% of its own
   box, the problem band 23%, the More-work grid 29% — three-quarters of each of
   those bands is padding, and there are 600px of white between one and the next.

   Space between two blocks has to be read against the blocks. These pages get a
   measure proportional to what they hold: ~260px between bands at 1440 instead of
   600. The clamp resolves to 104px at 992px, where styles.css's own ≤991 rule
   sets 100px, so nothing jumps at the breakpoint.

   This file is loaded by the case pages, the service pages and /partners/ — the
   pages built out of these components — and by nothing else, so the homepage and
   the Insights pages keep their own measure. */
@media screen and (min-width: 992px) {
  .section {
    padding-top: clamp(104px, 9vw, 148px);
    padding-bottom: clamp(104px, 9vw, 148px);
  }

  /* The template's rail reserves nav clearance with `padding-top: 102px` while
     sticking at `top: 0`, so the left column starts 102px below the top of the
     artwork beside it — two columns beginning at different heights for a reason
     the reader cannot see. Moving the clearance onto `top` keeps the behaviour
     and fixes the alignment: level with the artwork at rest, and still stopping
     102px down — clear of the navbar — once it sticks. The max-height comes down
     by the same amount so a long rail cannot run past the bottom of the screen.

     Above 991px only. Below it styles.css drops the rail to `position: relative`
     and stacks it above the artwork, and `top` on a relatively positioned box
     moves what is painted without moving the space it reserves — the rail would
     slide down over the artwork it is meant to sit above. */
  .case-sticky {
    padding-top: 0;
    top: 102px;
    max-height: calc(100vh - 102px);
  }
}

/* --- hero ------------------------------------------------------------------
   Type on the page ground, no image. It is shorter than a full-bleed photo band
   because there is nothing to look at — just enough air above and below the
   name that it lands as a title page and the first screenshot starts to show. */
.hero-main.inner.for-case {
  /* .main-content is dark; every band below paints its own white over it, and
     the hero used to be covered by the photograph. With the photo gone it has to
     paint its own ground or dark type sets on a dark page. */
  background-color: var(--colors--second-color);
  color: var(--colors--first-color);
  height: auto;
  min-height: 0;
  padding-top: clamp(150px, 20vh, 260px);
  padding-bottom: clamp(24px, 4vh, 56px);
  padding-left: 0;
  padding-right: 0;
  overflow: visible;
}

/* .container.for-hero is nudged up 70px by styles.css to centre inside a
   full-height photo hero. There is no photo to centre in any more. */
.case-hero-plain {
  top: 0;
  text-align: left;
  /* Every band below the hero indents 2% of the viewport. Matching it exactly —
     rather than inheriting the hero's own fixed 20px gutter — is what keeps one
     left edge running from the name down through Description and the numbers. */
  max-width: 100%;
  padding-left: 2%;
  padding-right: 2%;
}

/* The project name is the loudest thing on the page. The homepage's --hero-title
   is 10rem, which is set for the single word "PAAK" — at that size "Solar
   Estimator" wraps to two lines and the second line climbs into the navbar.
   This scales with the viewport instead, sized so the longest name we have
   (15 characters) still sets on one line inside the container. */
.case-hero-title {
  /* .logo-big centres, which is right for the one-word homepage hero and wrong
     here — the name has to hang on the same left edge as the services line. */
  text-align: left;
  /* .logo-big is the PAAK wordmark: Mona Sans at 900, the only weight of that
     face we load. At title size next to Switzer-600 body copy it read as a
     different, much heavier typeface. The client name is a heading, not a
     wordmark, so it sets in the page's own display face at the page's own
     heaviest weight — same as every other heading here. */
  font-family: var(--font--third-font);
  font-weight: var(--font-weight--600);
  font-size: clamp(38px, 8.4vw, 128px);
  line-height: var(--line-height--page-line-height-2);
  letter-spacing: -0.03em;
  margin: 0;
}

/* Services, set as the subheading directly under the name. Small, spaced and
   muted so it reads as a label under the title rather than a second headline. */
.case-hero-sub {
  margin: 18px 0 0;
  font-size: clamp(13px, 1.05vw, 16px);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  opacity: 0.6;
}

/* --- the sticky rail -------------------------------------------------------
   Atlas sets its description at full .h2 display size because it is one short
   sentence. Ours are the real ledes off the live case pages — around fifty
   words — and at 2.9rem that runs eleven lines and swamps the column. Stepped
   down so the rail reads as a rail. */
.case-sticky .margin-20px .h2 {
  font-size: clamp(19px, 1.75vw, 27px);
  line-height: 1.28;
  letter-spacing: -0.02em;
}

/* One extra row under Client / Year / Services for the live-site link. Cases
   with no public URL (internal tools) simply omit it.

   Was an underlined text link (2026-08-13); it read as body copy in a column of
   body copy, so nobody clicked it. It is now the site's one button — the same
   ink pill as buttons.css, values mirrored with fallbacks because case pages do
   not load buttons.css. */
.case-visit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  box-sizing: border-box;
  width: auto;
  height: var(--btn-h, 46px);
  padding: 0 var(--btn-pad-x, 22px);
  margin-top: var(--page-margin--divider-small);

  border: 0;
  border-radius: var(--btn-radius, 999px);
  box-shadow: inset 0 0 0 1px transparent;

  background-color: var(--btn-ink, #1a1a1a);
  color: var(--btn-paper, #ffffff);

  font-family: var(--font--third-font, "Switzer Variable", Arial, sans-serif);
  font-size: var(--btn-size, 15px);
  font-weight: 500;
  letter-spacing: -0.15px;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;

  transition: background-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
}

.case-visit:hover,
.case-visit:focus-visible {
  background-color: transparent;
  color: var(--btn-ink, #1a1a1a);
  box-shadow: inset 0 0 0 1px rgba(26, 26, 26, 0.4);
}

@media screen and (max-width: 991px) {
  .case-visit { height: var(--btn-h, 44px); padding: 0 var(--btn-pad-x, 20px); }
}

/* --- the shell's CTA pill --------------------------------------------------
   Was: a settle block that reproduced the homepage's GSAP resting state for the
   template's three-layer button (overlay up, plate scaled 0.88, text inverted),
   because case pages carry no GSAP. The plate and the overlay are gone as of
   2026-08-13 — the anchor carries its own fill now, and its light/dark state is
   driven by nav-contrast.css. See buttons.css for why. */

/* --- the photo column ------------------------------------------------------
   The template's .work-photo-first is aspect-ratio 1/1.2 and pre-scaled 1.15
   for a parallax that only runs on its own pages. Both are wrong for website
   screenshots: the portrait crop cuts the layout in half and the scale silently
   throws away 15% of a shot whose whole job is to show the work. */
.case-picture .work-photo-first {
  aspect-ratio: 16 / 10;
  transform: none;
}

/* --- shared section furniture ---------------------------------------------
   .h2._03 is the template's eyebrow — "Description©", "Insights©". Reusing it
   for our own block labels is what keeps a case page reading as the same site. */
.case-block {
  display: grid;
  grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
  gap: var(--page-margin--divider-large);
  align-items: start;
}

/* No max-width here — it would also constrain the numbers row and the work grid,
   which are meant to use the full column. Reading width is set on the prose. */
.case-block__body {
  min-width: 0;
}

/* --- the numbers -----------------------------------------------------------
   Four measured facts. Mono for the values because these are readings, not
   marketing — the same reason the live pages set them in a monospace face. */
.case-numbers {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--page-margin--divider-medium);
}

/* The two-up step below already existed at ≤991, with the note "at this width four
   mono values wrap mid-number". It was one breakpoint too late. This row does not
   sit in the full page width — it sits in .case-block__body, which is what is left
   after the 320px label column and a 60px gutter, so at a 1024 viewport the four
   cells are 113px each. On /partners/ that is 50px narrower than the longest row
   needs, and the shortfall pushed the whole document 29px wide: a page that scrolls
   sideways on a small laptop. Same rule, applied at the width the problem starts. */
@media screen and (max-width: 1199px) {
  .case-numbers {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* --counter-title is 3rem, which is set for short counters like "15" — these
   values are readings such as "97/100", "192.8 m²" and "2025–26", and a
   six-character mono string at 48px is wider than a quarter of the column.
   Scaled to the viewport instead, so four cells never collide. */
.case-num__value {
  display: block;
  font-family: var(--font--second-font);
  font-size: clamp(26px, 2.35vw, 42px);
  line-height: 1.05;
  letter-spacing: -0.03em;
}

.case-num__label {
  display: block;
  margin-top: 14px;
  font-family: var(--font--second-font);
  font-size: var(--font--work-title);
  letter-spacing: 0.06em;
  opacity: 0.55;
}

.case-num__note {
  margin: 14px 0 0;
  font-size: var(--font--h6);
  line-height: var(--line-height--paragraph-line-height);
  opacity: 0.72;
}

/* A hairline over each cell, drawn once, so the four read as one measured row
   rather than four floating statistics. */
.case-num {
  border-top: 1px solid currentColor;
  padding-top: 18px;
}

/* --- the problem -----------------------------------------------------------
   Body copy at reading size, not display size. This is the only place on the
   page a visitor is asked to read two full paragraphs. */
.case-prose {
  max-width: 62ch;
  margin: 0 0 1.1em;
  font-size: var(--font--h5);
  line-height: var(--line-height--paragraph-line-height);
}

.case-prose:last-child {
  margin-bottom: 0;
}

/* --- what we did -----------------------------------------------------------
   Numbered rows, each a hairline-separated band: index and title on one line,
   the explanation under it. */
.case-did {
  display: flex;
  flex-direction: column;
}

.case-did__row {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 24px;
  padding: 32px 0;
  border-top: 1px solid var(--c-text-2);
}

.case-did__row:last-child {
  border-bottom: 1px solid var(--c-text-2);
}

.case-did__n {
  font-family: var(--font--second-font);
  font-size: var(--font--work-title);
  font-style: normal;
  opacity: 0.55;
  padding-top: 0.35em;
}

.case-did__title {
  margin: 0 0 10px;
  font-size: var(--font--h4);
  font-weight: var(--font-weight--600);
  letter-spacing: -0.4px;
}

.case-did__body {
  margin: 0;
  max-width: 68ch;
  font-size: var(--font--h6);
  line-height: var(--line-height--paragraph-line-height);
  opacity: 0.78;
}

/* --- the methodology footnote ---------------------------------------------
   Deliberately quiet. It exists so every number above it can be checked. */
.case-note {
  max-width: 78ch;
  margin: 0;
  font-family: var(--font--second-font);
  font-size: var(--font--work-title);
  line-height: 1.6;
  opacity: 0.5;
}

/* --- more work -------------------------------------------------------------
   The homepage's own card language at a smaller size. Reusing .pk-work__meta
   keeps the title/tags row identical to the roll on the homepage. */
.case-more {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--page-margin--divider-large) var(--page-margin--divider-medium);
}

.case-more__card {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: var(--radius-1);
  overflow: hidden;
  background: var(--c-text);
  text-decoration: none;
}

.case-more__media {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.case-more__item:hover .case-more__media {
  transform: scale(1.04);
}

/* Title, then tags beneath it on the same left edge. The row used to run
   title-left / tags-hard-right on one line, which is the homepage roll's caption
   at full card width. This grid is three columns inside the 1002px body, so each
   caption gets ~300px: "Roof Estimator" plus "Product Design + Web Development"
   needs 310, so that title broke to two lines and its right-aligned tags broke
   under it — one caption two lines tall between two that were one line tall, and
   nothing sharing a baseline. Stacked, all three are the same height and the tags
   stay legible instead of taking whatever the title leaves. */
.case-more__meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  margin-top: 16px;
}

.case-more__title {
  font-size: var(--font--h5);
  font-weight: var(--font-weight--600);
  letter-spacing: -0.3px;
}

.case-more__tags {
  font-size: var(--font--work-title);
  opacity: 0.55;
}

/* --- tablet ---------------------------------------------------------------- */
@media screen and (max-width: 991px) {
  .hero-main.inner.for-case {
    height: auto;
    min-height: 0;
    padding-top: 150px;
    padding-bottom: 48px;
  }

  .case-block {
    grid-template-columns: 1fr;
    gap: var(--page-margin--divider-medium);
  }

  /* Two-up rather than four-up: at this width four mono values wrap mid-number. */
  .case-numbers {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .case-more {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* --- phone ----------------------------------------------------------------- */
@media screen and (max-width: 767px) {
  .case-hero-title {
    letter-spacing: -1px;
  }

  .case-hero-sub {
    margin-top: 14px;
    letter-spacing: 0.1em;
  }

  .case-numbers {
    grid-template-columns: 1fr;
    gap: var(--page-margin--divider-small);
  }

  .case-did__row {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 24px 0;
  }

  .case-did__n {
    padding-top: 0;
  }

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