/* Shared Work components */

.work-meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: var(--spacing-grid-column-gap);
  row-gap: var(--spacing-work-details-gap);
}

.work-meta > div {
  min-width: 0;
  overflow-wrap: anywhere;
}

.work-hero--cinematic {
  position: relative;
  isolation: isolate;
  min-height: min(80vh, 56.25vw);
  overflow: hidden;
  color: white;
  background: #070707;
  /* The full-bleed cover would otherwise sit behind the 80px fixed top nav and
     look clipped. The standard hero clears the nav with its copy padding; the
     cinematic hero measures from page top, so it adds the nav height itself. */
  margin-top: 80px;
}

.work-hero--cinematic .work-hero__copy {
  /* Nav is now cleared by the hero margin, so drop that clearance from the copy
     top padding — the headline keeps its original position. */
  padding-top: calc(var(--spacing-hero-top) - 80px);
}

.work-hero__media,
.work-hero__shade {
  position: absolute;
  inset: 0;
}

.work-hero__media img,
.work-hero__media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.work-hero__shade {
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgb(0 0 0 / 45%) 0%, transparent 42%),
    linear-gradient(0deg, rgb(0 0 0 / 72%) 0%, transparent 55%);
}

.work-hero__copy {
  position: relative;
  z-index: 2;
  display: grid;
  min-height: min(80vh, 56.25vw);
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: auto 1fr auto;
  column-gap: var(--spacing-grid-column-gap);
  padding: var(--spacing-hero-top) var(--spacing-page-gutter) var(--spacing-page-gutter);
}

.work-hero__copy .headline {
  grid-column: 1 / -1;
  max-width: 100%;
  font-size: clamp(3.25rem, 7vw, 5.5rem);
  line-height: 0.9;
  overflow-wrap: break-word;
  text-transform: uppercase;
}

.work-hero__copy .subheadline {
  grid-column: 8 / -1;
  grid-row: 3;
  max-width: 38rem;
  font-size: clamp(1.25rem, 2vw, 2rem);
  line-height: 1.15;
}

.work-hero__copy p {
  margin: 0;
}

.work-hero__meta {
  padding: var(--spacing-work-details-gap) var(--spacing-page-gutter);
  border-bottom: 1px solid rgb(0 0 0 / 20%);
}

@media (min-width: 1024px) {
  .work-hero__copy .headline {
    font-size: 5.5rem;
  }
}

@media (max-width: 767px) {
  .work-hero--cinematic {
    /* The video must fully back the mobile browser's bottom address bar. lvh alone
       lands mid-bar on iOS (its lower half then shows the section behind it), so
       give the hero a full 100lvh below the 80px nav margin — ~80px of deliberate
       overshoot that the cover video crops and overflow clips, reading as a clean
       full-bleed behind the bar. */
    min-height: 100lvh;
  }

  .work-hero__media img,
  .work-hero__media video {
    object-position: var(--work-hero-object-position-mobile, center);
  }

  .work-hero__copy {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    /* Text overlay is only as tall as the currently visible viewport (dvh), while
       the video behind it runs the full large viewport. So the bottom subheadline
       always sits just above the address bar instead of behind it, and still hugs
       the bottom once the bar retracts. */
    min-height: calc(100dvh - 80px);
    padding-bottom: var(--spacing-page-gutter);
  }

  .work-hero__copy .headline {
    font-size: clamp(2.65rem, 13vw, 4.5rem);
  }

  .work-hero__copy .subheadline {
    max-width: 28rem;
    font-size: 1.5rem;
  }
}