/* ============================================================================
   service.css — chapters 04-08, the five service chapters
   One layout serves all five: copy column + media stage, then a wide proof
   block underneath when the chapter has one.
   ========================================================================== */

.svc__grid {
  display: grid;
  gap: var(--chapter-gap);
  align-items: center;
}

@media (min-width: 960px) {
  .svc__grid { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }

  /* Alternate which side the media sits on so five chapters do not read as
     five copies of the same slide. */
  .svc--mirror .svc__copy { order: 2; }
  .svc--mirror .svc__stage { order: 1; }
}

.svc__copy > * + * { margin-top: var(--space-5); }

.svc__title { max-width: 17ch; }

.svc__sub {
  font-family: var(--font-sans);
  font-size: var(--fs-h4);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  color: var(--page-fg);
  max-width: 34ch;
}

.svc__body { max-width: 56ch; }

.svc__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  padding-top: var(--space-2);
}

.svc__stage {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.svc__proof {
  margin-top: calc(var(--chapter-gap) + var(--space-4));
  padding-top: var(--chapter-gap);
  border-top: 1px solid var(--page-border);
}

.svc__proof + .svc__proof {
  margin-top: var(--chapter-gap);
}

/* -- 04 · Affiliate: the Cetaphil gamification block ---------------------- */

/* A wide navy band. The demo footage itself lives in the laptop above, so this
   block carries the explanation and the way in, not a second copy of the clip. */
.gamify {
  display: grid;
  gap: var(--space-6);
  padding: clamp(var(--space-8), 4vw, var(--space-12));
  border-radius: var(--radius-xl);
  background: var(--navy-900);
  color: var(--white);
  box-shadow: var(--shadow-lg);
}

@media (min-width: 900px) {
  .gamify {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    align-items: center;
    column-gap: var(--chapter-gap);
  }
}

/* The block is navy inside a light chapter, so its own contents need the
   navy palette rather than the chapter's. */
.gamify {
  --page-fg: var(--white);
  --page-body: rgba(255, 255, 255, 0.74);
  --page-muted: rgba(255, 255, 255, 0.56);
  --page-border: rgba(255, 255, 255, 0.14);
  --page-surface: rgba(255, 255, 255, 0.05);
  --page-accent-text: var(--yellow-500);
}

.gamify__copy > * + * { margin-top: var(--space-4); }

.gamify__title {
  font-family: var(--font-sans);
  font-size: var(--fs-h3);
  font-weight: var(--weight-extrabold);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--white);
  max-width: 24ch;
}

.gamify .phone { max-width: 260px; }

/* -- 05 · Human Livestream: ten-up showcase grid -------------------------- */

.live-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}

@media (min-width: 560px) {
  .live-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 960px) {
  .live-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* -- 06 · AI Livestream: three-up showcase grid ---------------------------
   Three clips, not ten — the fourth AI session is the one in the phone above.
   Three across the full container would make each tile taller than a laptop
   screen, so the row is capped and stays left-aligned with the rail label
   rather than centred, which would float it off the column edge. */

@media (min-width: 560px) {
  .live-grid--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* 08 · Video Production: four clips — 2×2 on phones, one row from there up,
   so the base grid's three-across never strands a single tile on row two. */
@media (min-width: 560px) {
  .live-grid--four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Three 9:16 tiles across the full container would each stand taller than the
   phone beside the copy above, inverting the hierarchy. The cap lands each
   tile at roughly the phone's own width, and it covers the label as well as
   the tiles so the block reads as one column rather than as a grid with a
   hole in its right-hand side. */
@media (min-width: 960px) {
  .svc__proof--narrow .rail-label,
  .svc__proof--narrow .live-grid { max-width: 1000px; }
}

/* -- 07 · AI Video: six-up grid ------------------------------------------- */

.aiv-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}

@media (min-width: 560px) {
  .aiv-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 960px) {
  .aiv-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

/* -- Pull quote (08 · Video Production) ----------------------------------- */

.pullquote {
  font-family: var(--font-sans);
  font-size: var(--fs-h3);
  font-weight: var(--weight-bold);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--page-fg);
  padding-left: var(--space-6);
  border-left: 3px solid var(--yellow-500);
  max-width: 26ch;
}