/* =====================================================================
   Instagram reels section (2026-09-09)

   A separate file, not an addition to style.css, for the same reason
   lang-switch.css is separate: style.css is held byte-for-byte identical
   to website/css/style.css by
   tests/parity/test_page_parity.py::test_the_served_stylesheet_is_the_original_byte_for_byte,
   because the markup diff compares asset *references* and would never
   notice an edited rule inside the file. Anything the static v1 design
   did not have belongs in its own stylesheet.
   ===================================================================== */

/* Reels are 9:16. `.frame` in style.css is hardcoded 16:9 for YouTube, so
   a reel rendered in the base class alone letterboxes into a sliver — this
   modifier is the whole reason public/sections/reels.html does not simply
   reuse video_grid.html's markup. */
.frame--reel { aspect-ratio: 9/16; }

.reel-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; }

/* Four vertical cards need to break earlier than the 3-across video grid:
   at 900px each card is already under 200px wide, which is narrower than
   Instagram's own embed chrome renders comfortably. */
@media (max-width: 900px) { .reel-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .reel-grid { grid-template-columns: 1fr; } }

.reel-cap { margin-top: 12px; color: var(--muted); font-weight: 300; font-size: .9rem; }