/* ==========================================================================
   Project detail template
   ========================================================================== */

/* Header — the standard Project Detail header (components/project-header.css).
   On the page: 110px above the breadcrumbs (90px tablet, 70px phone), and 120px
   of the page dark under it (70px on phones) — the light settles into that
   space, right down to the light story section. */
.project-header.ph {
  padding-top: 110px;               /* header bar → breadcrumbs: 110px desktop · 90px tablet · 70px phone (as the Work page) */
  padding-bottom: 120px;
}

/* Story — "01/ Overview" … "06/ Result". Label in column 1; the content sits
   in a box over columns 3–4 (Result: 2–4) — no frame (no decorative lines),
   just its 50px padding on the section's own background. */
.project-story {
  --story-gap: 96px;                /* one rhythm between all major blocks */
  position: relative;
  z-index: 1;
  margin-top: 120px;
}

.story {
  align-items: start;
}

/* 96px between major blocks only: section ↔ section and section ↔ image group.
   Images never have a gap: rows inside an image group sit directly on each
   other (0px), on every project. */
.story + .story,
.project-images + .story,
.story + .project-images {
  margin-top: var(--story-gap);
}

.project-images__row + .project-images__row {
  margin-top: 0;
}

/* Left-side section labels ("01/ OVERVIEW" …): title-md size, medium weight
   for readability (was 13px / 400 from .t-mono) */
.story__label {
  display: flex;
  align-items: baseline;            /* number and label share one baseline */
  gap: 14px;
  padding-top: 50px;                /* lines up with the box's first line of text (box padding) */
  font-size: var(--fs-title-md);
  font-weight: 500;
  line-height: 1.3;
}

/* the number ("01/") stays light and subtle: one step smaller, regular weight */
.story__label .t-muted {
  font-size: var(--fs-body-lg);     /* 16px */
  font-weight: 400;
}

/* the section name ("OVERVIEW") is a headline: headline-lg in Host Grotesk
   700 (Plex Mono has no 700 weight) */
.story__name {
  font-family: var(--font-sans);
  font-size: var(--fs-headline-lg);
  font-weight: 700;
  line-height: 0.9;
  letter-spacing: -0.03em;
}

.story__box {
  grid-column: 3 / span 2;
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 50px;                    /* DEFAULT: 50px on all sides for every content box */
  background: var(--c-inverse);
}

.story__box p {
  max-width: 560px;
}

.story__box ul {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* bullet lists (e.g. Process) one step up from the 13px mono default */
.story__box .t-mono {
  font-size: var(--fs-mono-md);
}

.story__box li {
  display: flex;
  gap: 12px;
}

.story__box li::before {
  content: "—";
  color: var(--c-muted);
}

/* Result: three statistic blocks in the first row (columns 2–4), a fourth
   beneath the first, 10px apart. Each block is one flat light fill in the
   project's header colour (--ph-glow, set on the page by project-header.js)
   mixed into the light section's background — no glow, gradient or other
   light effect. Inside: the statistic (the focus), its mono label, then a
   short paragraph. */
.story__box--result {
  grid-column: 2 / span 3;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-sm);
  padding: 50px var(--col-pad) 0;   /* right edge on the content edge (as the images); top level with the label */
}

/* statistic · label · paragraph share three rows with the blocks beside
   them (subgrid), so the labels and paragraphs line up across a row even
   when one label wraps */
.outcome {
  display: grid;
  grid-row: span 3;
  grid-template-rows: subgrid;
  row-gap: 0;
  align-content: start;
  padding: 40px;
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--ph-glow, var(--c-surface-container)) 22%, var(--c-surface-container));
}

.outcome__value {
  font-size: var(--fs-display-md);
  font-weight: 700;
  line-height: 0.85;
  letter-spacing: -0.03em;
}

.outcome__label {
  margin-top: 24px;
}

/* the supporting paragraph: quieter than the statistic and label (ink at
   65%, still 5:1+ on the block) */
.outcome__text {
  margin-top: 24px;
  font-size: var(--fs-body-lg);
  line-height: 1.5;
  color: color-mix(in srgb, var(--c-ink) 65%, transparent);
}

/* Image rows between sections (placeholders until each project has its own).
   Rows in a group stack edge to edge; cells share one row height. */
.project-images__row {
  display: grid;
}

.project-images__row--pair  { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.project-images__row--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* DEFAULT RULE: only the cover has a fixed shape (the header thumbnail,
   800 × 465 — components/project-header.css). Every image below it —
   single, pair or three in a row — takes its height
   from its own aspect ratio, uncropped. Rows still decide the widths; in a
   row of mixed shapes each image keeps its shape and sits at the top of its
   frame, and the frames stretch to the row height so their lines align. */
.project-images .media__frame {
  aspect-ratio: auto;
}

.project-images .media__frame img,
.project-images .media__frame video {
  display: block;
  height: auto;
  object-fit: initial;
}

/* RULE: videos follow the images of their own project. Square images →
   square videos (the default). When a project's images carry rounded
   corners in their files, the project sets the same radius in projects.js
   (videoRadius, e.g. PAUS "1.72cqw" = 1.72% of the frame's width, so it
   scales like the image corners do). */
.project-images .media__frame:has(> video) {
  container-type: inline-size;
}

.project-images .media__frame video {
  border-radius: var(--video-radius, 0);
}

/* Equal row ({ images: [2, 3], equal: true } in images.layout): every image
   takes the size of the tallest one; the others fill it, trimmed at the
   sides, so the row reads as one even band */
.project-images__row--equal > .media {
  display: flex;
  flex-direction: column;
}

.project-images__row--equal .media__frame {
  flex: 1;
}

.project-images__row--equal .media__frame img,
.project-images__row--equal .media__frame video {
  height: 100%;
  object-fit: cover;
}

/* Before / after ({ compare: [before, after] } in images.layout): the after
   image lies on the before and is revealed left to right behind a thin
   diagonal line as the row scrolls by. --p (0 → 1) is set by project.js; the
   edge runs 20% of the width across, so it travels to 120% to clear it. */
.ba {
  position: relative;
  overflow: hidden;
  border-radius: var(--video-radius, 0);
  --x: calc(var(--p) * 120%);
}

.ba img {
  display: block;
  width: 100%;
  height: auto;
}

.project-images .media__frame .ba__after {
  position: absolute;
  inset: 0;
  height: 100%;
  object-fit: cover;
  clip-path: polygon(0 0, var(--x) 0, calc(var(--x) - 20%) 100%, 0 100%);
}

.ba__line {
  position: absolute;
  inset: 0;
  background: #fff;
  pointer-events: none;
  clip-path: polygon(calc(var(--x) - 1px) 0, calc(var(--x) + 1px) 0, calc(var(--x) - 20% + 1px) 100%, calc(var(--x) - 20% - 1px) 100%);
}

.ba__tag {
  position: absolute;
  top: 16px;
  padding: 6px 10px;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(18, 18, 18, 0.7);
  border-radius: 999px;
  pointer-events: none;
}

.ba__tag--before { left: 16px; }
.ba__tag--after { right: 16px; }

@media (max-width: 809px) {
  .ba__tag { top: 10px; padding: 4px 8px; font-size: 10px; }
  .ba__tag--before { left: 10px; }
  .ba__tag--after { right: 10px; }
}

/* Next project */
.next-project {
  margin-top: var(--section-gap);
}

.next-project__head {
  align-items: end;
  margin-bottom: 40px;
}

.next-project__title {
  margin-top: 20px;
}

/* Explore all work: the site's outlined pill (layout/site-ui.css › buttons)
   under the next-project card, from column 3, at its own size */
.next-project__cta {
  position: relative;
  z-index: 1;
  margin-top: 40px;
}

.next-project__cta .footer-cta-box {
  grid-column: 3 / span 2;
  justify-self: start;
  margin-left: var(--col-pad);      /* level with the card's left edge */
}

@media (max-width: 1199px) {
  .project-header.ph { padding-top: 90px; }
  .story { row-gap: 16px; }
  .story__label { grid-column: 1 / -1; padding-top: 0; }
  .story__box,
  .story__box--result { grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); }   /* tablet: two per row */
  .next-project__cta .footer-cta-box { grid-column: 1 / -1; }
}

@media (max-width: 809px) {
  .project-header.ph { padding-top: 70px; padding-bottom: 70px; }   /* phones: breadcrumbs 70px under the header bar, as on the Work page */
  /* phones: "Explore all work" as the homepage's "Explore Our Work" —
     the 60px pill (18px label, 20px ↗), centred under the card */
  .next-project__cta .footer-cta-box {
    justify-self: center;
    height: 60px;
    margin-left: 0;
    padding: 0 28px;
    font-size: var(--fs-title-md);
  }
  .next-project__cta .footer-cta-box .cta-arrow { width: 20px; height: 20px; }
  .story__box--result { grid-template-columns: 1fr; }
  .outcome { padding: 32px 24px; }   /* phones: the blocks' inner padding a step smaller, so the text has room */
  /* phones: one rhythm built on the 24px title → text gap:
     · the text ~24px under its section title (8px here + the 16px row gap)
     · 56px between blocks — text → next title, text → images, images → next
       title (the box adds nothing below; image frames carry 12px above and
       below, so the margin next to an image group is 56 − 12)
     · 24px between images in a group (12 + 12) */
  .story__box { padding: 8px var(--col-pad) 0; }
  .project-story { --story-gap: 56px; }
  .project-images + .story,
  .story + .project-images { margin-top: calc(var(--story-gap) - 12px); }
  .project-images .media { padding-block: 12px; }
  /* the story's last text → "Next project" stays as before (the box no
     longer adds its 28px below) */
  .next-project { margin-top: calc(var(--section-gap) + 28px); }
  .project-images__row--pair,
  .project-images__row--three { grid-template-columns: 1fr; }
  .project-images__empty { display: none; }   /* a blank cell (layout 0) takes no row once stacked */
  .project-images__row--equal .media__frame img,
  .project-images__row--equal .media__frame video { height: auto; object-fit: initial; }   /* stacked: each keeps its own shape */
}