/* ============================================================
   rey_ — media grid
   every medium (photo, clip, sequence) is the same square tile.
   hovering one widens its column and heightens its row; the grid
   tracks animate, so the neighbours rearrange around it.
   ============================================================ */
.mg{
  --cols:6;                       /* both set by media-grid.js */
  --rows:1;
  --min-cols:3;
  --max-cols:10;
  --fit:.92;                      /* share of the viewport height the grid takes */
  --gap:clamp(3px,.4vw,8px);
  --grow:3;                       /* fr of the active track vs 1fr */
  --dur:.62s;
  /* full-bleed: break out of the article column and span the viewport.
     --vw is the client width (no scrollbar), set by media-grid.js */
  width:var(--vw,100vw);
  max-width:var(--vw,100vw);
  margin:clamp(28px,7vh,90px) 0 0;
  margin-inline:calc(50% - var(--vw,100vw) / 2);
}

/* fills the viewport in both directions; media-grid.js picks the column
   count that keeps the tiles closest to square at this size */
.mg__grid{
  display:grid;
  gap:var(--gap);
  grid-template-columns:repeat(var(--cols),1fr);
  grid-template-rows:repeat(var(--rows),1fr);
  width:100%;
  height:calc(var(--fit) * 100vh);
  height:calc(var(--fit) * 100svh);
  transition:grid-template-columns var(--dur) var(--ease),
             grid-template-rows var(--dur) var(--ease);
}

.mg__cell{
  position:relative;
  margin:0;padding:0;border:0;
  min-width:0;min-height:0;        /* let the track, not the content, size it */
  overflow:hidden;
  background:var(--bg-2);
  cursor:pointer;
  display:block;
  outline-offset:-2px;
}
.mg__cell::after{                  /* hairline, in place of a border that would shift layout */
  content:"";position:absolute;inset:0;
  border:1px solid var(--hair);
  pointer-events:none;
  transition:border-color .35s var(--ease);
}
.mg__cell img,
.mg__cell video{
  width:100%;height:100%;
  object-fit:cover;
  display:block;
  transform:scale(1.02);           /* hides the sub-pixel seam while tracks animate */
  transition:transform var(--dur) var(--ease),opacity .3s ease;
}

/* active tile */
.mg__cell.is-on::after,
.mg__cell:hover::after{border-color:var(--line);}
.mg__cell.is-on img,.mg__cell.is-on video,
.mg__cell:hover img,.mg__cell:hover video{transform:scale(1);}
.mg__grid:hover .mg__cell:not(:hover) img,
.mg__grid:hover .mg__cell:not(:hover) video{opacity:.5;}

/* the poster stays under a video until it actually starts */
.mg__cell video{background:var(--bg-2);}

/* ---- footage marker --------------------------------------------------
   only tiles holding real footage carry it; GIFs and frame sequences
   stay unmarked, they read as stills that happen to move. */
.mg__cell--video::after{border-color:rgba(244,244,242,.30);}
.mg__cell--video:hover::after,
.mg__cell--video.is-on::after{border-color:var(--fg);}

.mg__film{
  position:absolute;left:0;bottom:0;z-index:2;
  display:flex;align-items:center;gap:6px;
  padding:5px 9px 5px 7px;
  font-family:var(--mono);font-size:.58rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--fg);
  background:rgba(0,0,0,.68);
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
  pointer-events:none;
  transition:opacity .3s ease;
}
.mg__film::before{                 /* play triangle, drawn with borders */
  content:"";
  width:0;height:0;
  border-style:solid;
  border-width:4px 0 4px 6px;
  border-color:transparent transparent transparent var(--fg);
}
.mg__cell.is-playing .mg__film{opacity:0;}

/* on the smallest tiles the duration would not be legible: keep the mark */
@media (max-width:560px){
  .mg__film{padding:3px 5px 3px 4px;font-size:0;gap:0;}
  .mg__film::before{border-width:5px 0 5px 7px;}
}

/* readout under the grid */
.mg__meta{
  display:flex;justify-content:space-between;align-items:baseline;gap:20px;
  margin-top:14px;padding:14px var(--pad) 0;border-top:1px solid var(--hair);
  font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--fg-mute);
}
.mg__now{color:var(--fg-dim);}

@media (max-width:1100px){.mg{--max-cols:8;}}
@media (max-width:820px){.mg{--max-cols:6;--grow:2.6;}}
@media (max-width:560px){.mg{--min-cols:2;--max-cols:5;--grow:2.2;--gap:2px;--fit:.84;}}

@media (prefers-reduced-motion:reduce){
  .mg__grid,.mg__cell img,.mg__cell video{transition:none;}
}

/* a full piece takes a bigger share of the grid while it plays */
.mg.is-filming{--grow:6;}
.mg.is-filming .mg__cell:not(.is-playing) img,
.mg.is-filming .mg__cell:not(.is-playing) video{opacity:.32;}
.mg__cell.is-playing{z-index:3;}
.mg__cell.is-playing video{object-fit:contain;background:#000;}

/* the tile is a <button>, so clicks on the native controls bubble to it;
   closing therefore needs its own target */
.mg__close{
  position:absolute;top:0;right:0;z-index:4;
  display:grid;place-items:center;
  width:32px;height:32px;
  font-size:1.05rem;line-height:1;color:var(--fg);
  background:rgba(0,0,0,.68);
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
  cursor:pointer;pointer-events:auto;
  transition:background .25s var(--ease);
}
.mg__close:hover{background:var(--fg);color:#000;}