/* ============================================================
   P1 — RUNNING ON EMPTY
   Art direction overrides — this page only.
   Loads after style.css.
   Nav, type, colors, and footer are never touched here.
   ============================================================ */


/* -- FLATS — editorial layout -------------------------------- */
/*
  Rows:
    1–3  [ LOGO (left, spans all 3 ticket rows) ] [ T1 / T2 / T3 (right, stacked) ]
    4    [ LP Front ——————————— ] [ LP Back ——————————— ]  (equal halves)
    5    [ PB1 ——— ] [ PB2 ——— ] [ PB3 ——— ]               (equal thirds)
*/

.flats-grid {
  grid-template-columns: repeat(6, 1fr);
  grid-template-areas:
    "logo logo logo t1  t1  t1 "
    "logo logo logo t2  t2  t2 "
    "logo logo logo t3  t3  t3 "
    "lpf  lpf  lpf  lpb lpb lpb"
    "pb1  pb1  pb2  pb2 pb3 pb3";
  gap: clamp(16px, 2.5vw, 32px);
  align-items: start;
}

/* Natural sizing — no forced boxes */
.flats-grid img {
  width: 100%;
  height: auto;
  aspect-ratio: unset;
  object-fit: unset;
  display: block;
}

/* Named placements */
.flats-grid img:nth-child(1) { grid-area: logo; align-self: center; }
.flats-grid img:nth-child(2) { grid-area: t1; }
.flats-grid img:nth-child(3) { grid-area: t2; }
.flats-grid img:nth-child(4) { grid-area: t3; }
.flats-grid img:nth-child(5) { grid-area: lpf; }
.flats-grid img:nth-child(6) { grid-area: lpb; }
.flats-grid img:nth-child(7) { grid-area: pb1; }
.flats-grid img:nth-child(8) { grid-area: pb2; }
.flats-grid img:nth-child(9) { grid-area: pb3; }


/* -- MOCKUPS — 6-col alternating grid ------------------------ */

.mockups-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: clamp(16px, 2.5vw, 32px);
  align-items: start;
}

/* Keep mockups filled — they're lifestyle shots */
.mockups-grid img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
}

/* Tickets — big left, small right, then flip */
.mockups-grid img:nth-child(1) { grid-column: span 4; }
.mockups-grid img:nth-child(2) { grid-column: span 2; }
.mockups-grid img:nth-child(3) { grid-column: span 2; }
.mockups-grid img:nth-child(4) { grid-column: span 4; }

/* LP 2 — full-width cinematic strip */
.mockups-grid img:nth-child(5) { grid-column: span 6; aspect-ratio: 16/6; }

/* Pole Banners — big left, small right */
.mockups-grid img:nth-child(6) { grid-column: span 4; }
.mockups-grid img:nth-child(7) { grid-column: span 2; }


/* -- RESPONSIVE ---------------------------------------------- */

@media (max-width: 900px) {
  /* Flats — drop to 2-col, release area assignments */
  .flats-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-template-areas: none;
    align-items: start;
  }

  .flats-grid img:nth-child(n) {
    grid-area: unset;
    grid-column: span 1;
    align-self: auto;
  }

  /* Logo still spans full width at tablet */
  .flats-grid img:nth-child(1) { grid-column: span 2; }

  /* Mockups — drop to 2-col */
  .mockups-grid { grid-template-columns: repeat(2, 1fr); }
  .mockups-grid img:nth-child(n)  { grid-column: span 1; }
  .mockups-grid img:nth-child(5)  { grid-column: span 2; aspect-ratio: 16/6; }
}

@media (max-width: 600px) {
  .flats-grid,
  .mockups-grid {
    grid-template-columns: 1fr;
  }

  .flats-grid img:nth-child(n),
  .mockups-grid img:nth-child(n) { grid-column: span 1; }

  .mockups-grid img:nth-child(5) { aspect-ratio: 4/3; }
}