.fast-ph {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Mosaic */
.fast-mosaic {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-m);
  width: 100%;
  grid-template-areas:
    "main main ma"
    "main main mb"
    "mc md me"
    "mf mw mw"
    "mh mw mw";
}

.fast-mosaic figure {
  margin: 0;
  aspect-ratio: 3277 / 4096;
}

.fast-mosaic-main {
  grid-area: main;
  min-height: min(50vh, 420px);
}

.fast-m-a { grid-area: ma; }
.fast-m-b { grid-area: mb; }
.fast-m-c { grid-area: mc; }
.fast-m-d { grid-area: md; }
.fast-m-e { grid-area: me; }
.fast-m-f { grid-area: mf; }
.fast-m-wide {
  grid-area: mw;
  aspect-ratio: 2550 / 1650;
  min-height: 200px;
}
.fast-m-h { grid-area: mh; }

.fast-stack-2 {
  display: flex;
  flex-direction: row;
  gap: var(--spacing-m);
  flex: 0 1 451px;
  max-width: 100%;
}

.fast-stack-2 figure {
  margin: 0;
  height: 125px;
  overflow: hidden;
}

.fast-split-stack .card {
  flex: 1 1 280px;
}

/* Magazine spreads */
.fast-mag-spread,
.fast-mag-grid figure {
  margin: 0;
}

.fast-mag-grid {
  display: grid;
  gap: var(--spacing-m);
  width: 100%;
}

.fast-mag-a {
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: auto;
  grid-template-areas:
    "hero hero"
    "hero hero"
    "s1 s2"
    "s3 s4"
    "s5 .";
}

.fast-mag-a > figure:nth-child(1) { grid-area: hero; min-height: clamp(200px, 45vw, 596px); }
.fast-mag-a > figure:nth-child(2) { grid-area: s1; aspect-ratio: 2550 / 1650; }
.fast-mag-a > figure:nth-child(3) { grid-area: s2; aspect-ratio: 2550 / 1650; }
.fast-mag-a > figure:nth-child(4) { grid-area: s3; aspect-ratio: 2550 / 1650; }
.fast-mag-a > figure:nth-child(5) { grid-area: s4; aspect-ratio: 2550 / 1650; }
.fast-mag-a > figure:nth-child(6) { grid-area: s5; aspect-ratio: 2550 / 1650; }

.fast-mag-b {
  grid-template-columns: repeat(2, 1fr);
  grid-template-areas:
    "hero hero"
    "a b"
    "c d";
}

.fast-mag-b > figure:nth-child(1) { grid-area: hero; min-height: clamp(200px, 40vw, 596px); }
.fast-mag-b > figure:nth-child(2) { grid-area: a; aspect-ratio: 2550 / 1650; }
.fast-mag-b > figure:nth-child(3) { grid-area: b; aspect-ratio: 2550 / 1650; }
.fast-mag-b > figure:nth-child(4) { grid-area: c; aspect-ratio: 2550 / 1650; }
.fast-mag-b > figure:nth-child(5) { grid-area: d; aspect-ratio: 2550 / 1650; }

.fast-mag-c {
  grid-template-columns: repeat(2, 1fr);
  grid-template-areas:
    "hero hero"
    "a b"
    "c d";
}

.fast-mag-c > figure:nth-child(1) { grid-area: hero; min-height: clamp(200px, 40vw, 596px); }
.fast-mag-c > figure:nth-child(2) { grid-area: c; aspect-ratio: 2550 / 1650; }
.fast-mag-c > figure:nth-child(3) { grid-area: a; min-height: 240px; }
.fast-mag-c > figure:nth-child(4) { grid-area: b; min-height: 240px; }

.fast-mag-d {
  grid-template-columns: repeat(2, 1fr);
  grid-template-areas:
    "hero hero"
    "a b"
    "c c";
}

.fast-mag-d > figure:nth-child(1) { grid-area: hero; min-height: clamp(200px, 40vw, 596px); }
.fast-mag-d > figure:nth-child(2) { grid-area: a; aspect-ratio: 2550 / 1650; }
.fast-mag-d > figure:nth-child(3) { grid-area: b; aspect-ratio: 2550 / 1650; }
.fast-mag-d > figure:nth-child(4) { grid-area: c; aspect-ratio: 2550 / 1650; }

.fast-mag-hero {
  overflow: hidden;
  min-height: 200px;
}

.fast-interlude {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
  width: 100%;
  align-items: stretch;
}

.fast-caption {
  font-family: var(--font-family-body);
  font-size: var(--font-size-body);
  color: var(--color-text-primary);
  margin: var(--spacing-s) 0 0 var(--spacing-m);
}

.fast-lookbook-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-m);
  width: 100%;
}

.fast-lb-wide {
  grid-column: 1 / -1;
  margin: 0;
  aspect-ratio: 2400 / 1400;
  min-height: 200px;
}

.fast-lb-pair {
  margin: 0;
  aspect-ratio: 4096 / 2560;
  min-height: 160px;
}

/* Phone / versions block */
.fast-phone-block {
  width: 100%;
  margin-top: var(--spacing-m);
}

.fast-phone-red {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 0;
  align-items: flex-end;
  justify-content: flex-end;
  box-sizing: border-box;
}

.fast-phone-mock {
  /* flex: 0 0 auto;
  width: clamp(200px, 38%, 420px); */
  margin: 0;
  /* aspect-ratio: 388 / 607; */
  overflow: hidden;
  position: relative;
  z-index: 2;
}

.fast-phone-copy {
  flex: 1 1 auto;
  min-width: 0;
  margin-left: -50%;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-end;
  align-items: flex-end;
  gap: var(--spacing-m);
  text-align: left;
  background: var(--color-primary);
  padding: var(--spacing-l) 0px;
  box-sizing: border-box;
  position: relative;
  z-index: 1;
}

.fast-phone-copy-text {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-m);
  flex-shrink: 0;
  max-width: 70ch;
}

.fast-phone-title {
  font-family: var(--font-family-title);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-subtitle);
  color: var(--color-bg);
  text-transform: uppercase;
  line-height: var(--line-height);
  letter-spacing: var(--line-spacing);
  margin: 0;
}

.fast-phone-lead {
  font-family: var(--font-family-body);
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-body);
  color: var(--color-bg);
  line-height: 1.35;
  letter-spacing: var(--line-spacing);
  margin: 0;
}

.fast-version-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-s);
  margin-top: var(--spacing-s);
}

.fast-version {
  font-family: var(--font-family-body);
  font-size: var(--font-size-body);
  color: var(--color-bg);
  background: transparent;
  border: 1px solid var(--color-bg);
  border-radius: var(--corner-radius-s);
  padding: var(--spacing-xs) var(--spacing-m);
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.fast-version:hover {
  opacity: 0.9;
  transform: scale(1.02);
}

.fast-version.is-active {
  background: var(--color-bg);
  color: var(--color-primary);
  border-color: var(--color-bg);
  font-weight: var(--font-weight-bold);
}

.fast-version-shots {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-m);
  margin-top: var(--spacing-m);
  align-items: flex-start;
}

/* Unselected thumbnail: lower transparency (disabled look) — ~2× size, same ratio */
.fast-version-shot {
  width: min(25%, 240px);
  min-width: 100px;
  aspect-ratio: 1698 / 2123;
  margin: 0;
  overflow: hidden;
  opacity: 0.45;
  transition: opacity 0.35s ease;
}

.fast-version-shot.is-active {
  opacity: 1;
  transform: scale(1.05);
}

/* Lightbox */
.fast-lightbox {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(100, 12, 12, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-m);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s ease, visibility 0.35s ease;
}

.fast-lightbox.is-open {
  opacity: 1;
  visibility: visible;
}

.fast-lightbox img {
  max-width: min(95vw, 1400px);
  max-height: 90vh;
  object-fit: contain;
  border-radius: var(--corner-radius-s);
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.35);
}

.fast-lightbox-close {
  position: absolute;
  top: var(--spacing-m);
  right: var(--spacing-m);
  width: 44px;
  height: 44px;
  border: 1px solid var(--color-bg);
  background: transparent;
  color: var(--color-bg);
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  border-radius: var(--corner-radius-s);
  transition: background 0.2s ease, color 0.2s ease;
}

.fast-lightbox-close:hover {
  background: var(--color-bg);
  color: var(--color-primary);
}

@media screen and (max-width: 900px) {
  .fast-mosaic {
    grid-template-columns: repeat(2, 1fr);
    grid-template-areas:
      "main main"
      "main main"
      "ma mb"
      "mc md"
      "me mf"
      "mw mw"
      "mh mh";
  }

  .fast-m-wide {
    aspect-ratio: 16 / 10;
  }

  .fast-mag-a,
  .fast-mag-b,
  .fast-mag-c,
  .fast-mag-d {
    grid-template-columns: 1fr;
    grid-template-areas:
      "hero"
      "s1"
      "s2"
      "s3"
      "s4"
      "s5";
  }

  .fast-mag-a > figure:nth-child(n) {
    grid-area: auto;
  }

  .fast-mag-a > figure:nth-child(1) { grid-area: hero; }
  .fast-mag-a > figure:nth-child(2) { grid-area: s1; }
  .fast-mag-a > figure:nth-child(3) { grid-area: s2; }
  .fast-mag-a > figure:nth-child(4) { grid-area: s3; }
  .fast-mag-a > figure:nth-child(5) { grid-area: s4; }
  .fast-mag-a > figure:nth-child(6) { grid-area: s5; }

  .fast-mag-b > figure:nth-child(n),
  .fast-mag-c > figure:nth-child(n),
  .fast-mag-d > figure:nth-child(n) {
    grid-area: auto;
    min-height: 180px;
  }

  .fast-mag-b > figure:nth-child(1),
  .fast-mag-c > figure:nth-child(1),
  .fast-mag-d > figure:nth-child(1) {
    grid-area: hero;
  }

  .fast-phone-red {
    flex-wrap: wrap;
  }

  .fast-phone-copy {
    max-width: 100%;
    margin-left: 0;
    flex-direction: column;
  }

  .fast-phone-mock {
    flex: 1 1 100%;
    max-width: 100%;
    width: 100%;
  }

  .fast-version-shot {
    width: 28%;
  }
}

@media screen and (max-width: 640px) {
  .main-content .graphic-design.fast-forward {
    padding-left: 0;
    padding-right: 0;
  }

  .fast-mosaic {
    grid-template-columns: 1fr;
    grid-template-areas:
      "main"
      "ma"
      "mb"
      "mc"
      "md"
      "me"
      "mf"
      "mw"
      "mh";
  }

  .fast-mosaic-main {
    min-height: 280px;
  }

  .fast-subtitle {
    font-size: clamp(14px, 4.5vw, 22px);
  }
}