/* Media tile grid — site-wide 16:9 / 9:16 layout. The JS packer in
   media-tile-grid.js reads --tile-gap and --tile-max-row-height off the
   container, computes a row partition that fills the container width
   exactly, and absolutely-positions each tile.

   The CSS here is intentionally minimal: it only carries the visual
   skin (background, border-radius) and the fallback aspect-ratio so
   the page doesn't flash a zero-height block during the brief window
   before the JS runs. Width and height are owned entirely by JS — no
   `width:` or `max-width:` rules on items, because they would clamp
   the JS-set dimensions and break the rectangle. */

.media-tile-grid {
  /* Sizing knobs — overridable per call via `style="--tile-xxx: …"` on the
     widget container. The JS packer reads each one with getComputedStyle.
       --tile-gap                Pixel gap between adjacent tiles.
       --tile-target-row-height  Preferred per-row height. The packer biases
                                 row splits toward this value so the grid
                                 renders as a multi-row mosaic instead of a
                                 single tiny-tile row.
       --tile-max-row-height     Hard cap on per-row height. Pathological
                                 cases (e.g. lone portrait in a wide column)
                                 cap here instead of stretching to 2000+ px.
       --tile-lone-item-penalty  Cost added to single-item rows, biasing
                                 the packer to prefer mixed-orientation
                                 rows over "lone landscape stretched to
                                 full width" splits. */
  --tile-gap: 16px;
  --tile-target-row-height: 500px;
  --tile-max-row-height: 700px;
  --tile-lone-item-penalty: 15000;
  position: relative;
  margin: 0;
  /* Keep the section from collapsing before the JS runs so the rest of
     the page doesn't reflow when the videos pop in. */
  min-height: 200px;
}

.media-tile-grid__sizer,
.media-tile-grid__gutter-sizer {
  display: none;
}

/* Each tile carries only colour + aspect-ratio. Dimensions arrive from
   the JS packer as inline `width:`, `height:`, `top:`, `left:`. */
.media-tile-grid__item {
  background: #000;
  border-radius: 8px;
  overflow: hidden;
  box-sizing: border-box;
}

.media-tile-grid__item--portrait {
  aspect-ratio: 9 / 16;
}

.media-tile-grid__item--landscape {
  aspect-ratio: 16 / 9;
}

.media-tile-grid__frame {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.media-tile-grid__frame > iframe,
.media-tile-grid__frame > img,
.media-tile-grid__frame > video {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.media-tile-grid__frame > img,
.media-tile-grid__frame > video {
  /* iframes don't honour object-fit, but images and videos do — keep
     the content edge-flush with the tile without distortion. */
  object-fit: cover;
}