/* ---- Column count: the single source of truth for breakpoints ---- */
:root {
  --cols: 1;   /* < 530px */
  --rows: 1;   /* set by grid.js */
}
@media (min-width: 530px)  { :root { --cols: 1; } }
@media (min-width: 700px)  { :root { --cols: 2; } }
@media (min-width: 850px)  { :root { --cols: 3; } }
@media (min-width: 1200px)  { :root { --cols: 4; } }
@media (min-width: 1800px) { :root { --cols: 5; } }
@media (min-width: 2100px) { :root { --cols: 6; } }

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: #232323;
}

/* Page = vertical flex: menu (natural height) then grid (fills the rest). No page scroll. */
body {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;   /* dvh accounts for mobile URL bars; vh is the fallback */
  overflow: hidden;
}

/* Menu keeps its natural height */
body > .section-container { flex: 0 0 auto; }

/* Grid fills the remaining height below the menu */
#grid {
  flex: 1 1 auto;
  min-height: 0;                 /* allow the flex child to shrink instead of overflowing */
  display: grid;
  grid-template-columns: repeat(var(--cols), 1fr);
  grid-template-rows: repeat(var(--rows), 1fr);
}

/* ---- Cells ---- */
.cell {
  position: relative;
  overflow: hidden;
  background: #232323;
  border: solid 1px #232323;
}

.cell .flash {
  position: absolute;
  inset: 0;
  background: #eeeeee;
  opacity: 0;
}

.cell .media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;             /* cover the cell, clipping as needed */
  opacity: 0;
  display: block;
}

/* ---- Load animation: flash to #eeeeee (0.5s), then media fades in (0.2s) ----
   Keyframe animations (not transitions): they have an explicit `from` and play
   whenever `.ready` is added, so the fade runs even for cached media that loads
   instantly — a transition would need a painted opacity:0 start frame, which a
   cached/instant load skips (why the fade failed on reload). */
.cell.ready .flash {
  animation: sv-flash 0.5s ease forwards;
}
.cell.ready .media {
  animation: sv-fade 0.2s ease 0.5s forwards;   /* 0.5s delay: starts after the flash */
}
@keyframes sv-flash { from { opacity: 0; } to { opacity: 1; } }
@keyframes sv-fade  { from { opacity: 0; } to { opacity: 1; } }