/**
 * Section: Life in Nashville
 *
 * Desktop (Figma 207:1041): three columns on an ink ground —
 * copy + image left, tall video centre, image + copy right.
 */

.vu-section--life-in-nashville {
  padding-block: var(--vu-space-30);
}

.vu-nashville {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 3.3%;
  row-gap: var(--vu-space-10);
  align-items: start;
}

/* Explicit placement: the design's composition is deliberate, not a
   natural document flow, and auto-placement would not reproduce it. */
.vu-nashville__intro   { grid-column: 1; grid-row: 1; }
.vu-nashville__media--a { grid-column: 1; grid-row: 2; align-self: end; }
.vu-nashville__video   { grid-column: 2; grid-row: 1 / span 2; }
.vu-nashville__media--b { grid-column: 3; grid-row: 1; justify-self: end; }
.vu-nashville__body    { grid-column: 3; grid-row: 2; align-self: end; }

.vu-nashville__title {
  font-family: var(--vu-font-sans);
  font-weight: 400;
  font-size: var(--vu-display-size);
  line-height: var(--vu-display-lh);
  letter-spacing: var(--vu-display-track);
  margin-block-end: 42px;
}

.vu-nashville__copy,
.vu-nashville__body {
  font-size: 18px;
  line-height: 28px;
  letter-spacing: -0.01em;
}

.vu-nashville__copy p + p,
.vu-nashville__body p + p {
  margin-block-start: var(--vu-space-5);
}

.vu-nashville__media {
  width: 100%;
  max-width: 193px;
}

.vu-nashville__image {
  width: 100%;
  height: auto;
  aspect-ratio: 193 / 260;
  object-fit: cover;
}

/* The centre video is portrait, 426×587 in the design. */
.vu-nashville__video .vu-video {
  aspect-ratio: 426 / 587;
}

/* ================================================================
 * Mobile
 * ============================================================== */
@media (max-width: 1023px) {
  .vu-nashville {
    grid-template-columns: 1fr;
    row-gap: var(--vu-space-8);
  }

  /* Reading order: title and copy, video, second paragraph, then the
     two decorative images last. */
  .vu-nashville__intro    { grid-column: 1; grid-row: auto; }
  .vu-nashville__video    { grid-column: 1; grid-row: auto; }
  .vu-nashville__body     { grid-column: 1; grid-row: auto; }
  .vu-nashville__media--a,
  .vu-nashville__media--b { grid-column: 1; grid-row: auto; justify-self: start; order: 2; }

  .vu-nashville__title {
    margin-block-end: var(--vu-space-7);
  }

  .vu-nashville__video .vu-video {
    aspect-ratio: 4 / 5;
  }
}