/* Project case study (Figma 179:1823 / 191:480 / 191:612). */

.project {
  display: flex;
  flex-direction: column;
}

/* ---------- 01 Hero ---------- */

.project-hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  height: calc(100svh - var(--layout-frame) * 2);
  overflow: hidden;
  background: var(--color-base-black);
  color: var(--color-base-white);
}

.project-hero__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Figma: ink gradient, clear to 45%, 72% black at the bottom */
.project-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 45%, color-mix(in srgb, var(--color-base-black) 72%, transparent));
}

.project-hero__title {
  position: relative;
  z-index: 1;
  display: grid;
  gap: var(--space-24);
  padding: 0 var(--page-inset) var(--layout-inset); /* bottom: the design inset, not the wide-screen margin */
}

.project-hero__title h1 {
  max-width: 8em;
}

/* ---------- 02 Overview ---------- */

.project-overview {
  --story-cols: 7;
  display: grid;
  grid-template-columns: repeat(var(--layout-columns), minmax(0, 1fr));
  column-gap: var(--layout-gutter);
  align-items: start;
}

/* The client logo as it is, no plate (a transparent PNG shows no box). On
   desktop it stays put while the story beside it scrolls, and leaves with
   the end of the story (review; DESIGN-NOTES 64). */
.project-overview__logo {
  grid-column: 1 / span 4;
  position: sticky;
  top: var(--below-header); /* with the side titles (DESIGN-NOTES 75) */
  aspect-ratio: 1;
}

.project-overview__logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.project-overview__story {
  grid-column: 6 / -1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-48);
}

.project-overview__intro {
  display: grid;
  gap: var(--space-24);
}

.project-overview__more {
  color: var(--text-secondary);
}

.facts {
  width: 100%;
  margin: 0;
}

.fact {
  display: grid;
  /* label = two columns of the story column */
  grid-template-columns: calc((100% - (var(--story-cols) - 1) * var(--layout-gutter)) / var(--story-cols) * 2 + var(--layout-gutter)) 1fr;
  gap: var(--space-24);
  align-items: start;
  padding: var(--space-24) 0;
  border-top: var(--stroke-hairline) solid var(--border-default);
}

.fact dd {
  margin: 0;
}

/* ---------- 03 Gallery · three squares (continues the overview panel) ---------- */

.project-squares {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--layout-gutter);
  padding-top: 0;
}

.project-squares img,
.project-wides img {
  display: block;
  width: 100%;
  height: auto;
}

/* ---------- 06 Film ---------- */

/* Holds while the film plays. On the gallery's three columns: FILM, the
   caption and the text in the first, bottom-aligned with the film in the
   other two (review sketch; DESIGN-NOTES 65). The whole player fits the
   screen below the header at every size (site.js narrows it when the screen
   is short), starting 64 under the header with 64 below (DESIGN-NOTES 75). */
.project-film {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100svh;
  padding-top: var(--below-header);
  padding-bottom: var(--space-64);
}

.project-film .grid {
  align-items: end;
}

.project-film__text {
  grid-column: 1 / span 4;
  display: grid;
  gap: var(--space-24);
}

.project-film__more {
  color: var(--text-secondary);
}

.project-film__player {
  grid-column: 5 / -1;
}

/* ---------- 05 Gallery · two wides ---------- */

.project-wides {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--layout-gutter);
}

/* ---------- 04 Full frame (red, frame padding above and below) ---------- */

.project-full {
  padding: var(--layout-frame) 0;
  /* The image drifts at 112% (motion.js): keep it inside its own frame, so it
     never spills sideways (the page scrolled 64 sideways) or over the red edges. */
  overflow: clip;
  clip-path: inset(var(--layout-frame) 0);
}

.project-full img {
  display: block;
  width: 100%;
  height: calc(100svh - var(--layout-frame) * 2);
  object-fit: cover;
}

/* ---------- 07 Next project ---------- */

.project-next {
  display: grid;
  grid-template-columns: repeat(var(--layout-columns), minmax(0, 1fr));
  column-gap: var(--layout-gutter);
}

.project-next__card {
  grid-column: 1 / span 5;
}

.project-next__text {
  grid-column: 7 / -1;
  align-self: end;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-24);
  padding-bottom: var(--space-24);
}

.project-next__actions {
  display: flex;
  align-items: center;
  gap: var(--space-24);
}

/* ---------- Tablet ---------- */

@media (max-width: 1199px) {
  .project-hero {
    height: 70svh;
  }

  .project-film .media-player {
    gap: var(--space-48);
  }

  .project-overview {
    --story-cols: 8;
    row-gap: var(--space-48);
  }

  .project-overview__logo {
    grid-column: 1 / span 4;
    position: static;
  }

  .project-overview__story {
    grid-column: 1 / -1;
  }

  .fact {
    gap: var(--space-16);
  }

  .project-squares {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-16);
  }

  .project-squares img:first-child {
    grid-column: 1 / -1;
  }

  .project-wides {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-16);
  }

  .project-full img {
    height: auto;
  }

  .project-film {
    min-height: 100svh;
    padding-top: calc(var(--header-h) + var(--layout-frame) + var(--space-48));
  }

  .project-film .grid {
    row-gap: var(--space-48);
  }

  .project-film__text,
  .project-film__player {
    grid-column: 1 / -1;
  }

  .project-film .play-button {
    width: var(--space-96);
    height: var(--space-96);
  }

  /* Tablet and mobile order: full frame and wides before the film */
  .project-full { order: 4; }
  .project-wides { order: 5; }
  .project-film { order: 6; }
  .project-next { order: 7; }

  .project-next__card {
    grid-column: 1 / span 4;
  }

  .project-next__text {
    grid-column: 5 / -1;
    align-self: stretch;
    padding-bottom: 0;
  }

  .project-next__actions {
    margin-top: auto;
  }
}

/* ---------- Mobile ---------- */

@media (max-width: 767px) {
  .project-overview {
    row-gap: var(--space-32);
  }

  .project-overview__logo {
    grid-column: 1 / -1;
  }

  .project-overview__story {
    gap: var(--space-32);
  }

  .fact {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }

  .project-squares,
  .project-wides {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--layout-gutter);
  }

  .project-film {
    min-height: 0;
    padding: var(--layout-section-y) var(--page-inset);
  }

  .project-film .grid {
    row-gap: var(--space-32);
  }

  .project-film .media-player {
    gap: var(--space-32);
  }

  .project-next {
    display: flex;
    flex-direction: column;
    gap: var(--space-24);
  }

  .project-next__text {
    display: contents;
  }

  .project-next__eyebrow {
    order: -1;
  }

  .project-next__title {
    margin-top: var(--space-24);
  }
}