/*
 * Homepage highlights – "Stacked landscapes" layout
 * Used when the "Highlights layout" ACF field is set to "stacked".
 * The original mosaic layout (.custom-grid.grid-with-N in main.css) is untouched.
 *
 * Mobile (< 768px):   one column, every video stacked, all 16:9
 * Tablet + desktop:   Big landscape / Landscape | Landscape, repeating
 */

.grid.highlights-stacked {
  grid-template-columns: minmax(0, 1fr);
}

.grid.highlights-stacked > .archive-item .attach-aspect {
  aspect-ratio: 16 / 9;
}

@media (min-width: 768px) {
  .grid.highlights-stacked {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* 1st, 4th, 7th… item = Big Landscape (full width) */
  .grid.highlights-stacked > .archive-item:nth-child(3n + 1),
  /* if a pair row only has one video in it (e.g. 5 selected), let it go full width instead of leaving a gap */
  .grid.highlights-stacked > .archive-item:nth-child(3n + 2):last-child {
    grid-column: 1 / -1;
  }
}