/* AEKE .sg — media-grid section: the mosaic of looping video tiles.
 *
 * A port of the theme's `media-grid.css`. Reduced to the parts our markup uses; the
 * manual-swipe navigation in the theme's JS is not ported, and the live page's grid
 * does not use it either.
 *
 * MEASURED AGAINST THE LIVE SITE (the "Real Training. Smarter Results." grid):
 *   four columns of `minmax(0, 1fr)` with a fixed 300px row, 20px gap, inner padding
 *   50px, tiles at 25/35px padding and 4px radius. Eight tiles: one at 2x2, one at
 *   2x1, six at 1x1 — placed by `grid-auto-flow: dense`, so the spans and not the
 *   source order decide where each one lands.
 *
 * `--mobile-height` / `--desktop-height` come from the content. They are the row
 * height, not the tile height: a 2-row tile is twice it plus one gap.
 */

.media-grid--inner {
  display: grid;
  grid-auto-flow: dense;
  width: 100%;
  max-width: var(--grid-width-row);
  align-items: start;
  margin-right: auto;
  margin-left: auto;
  padding: 0 15px;
}

@media (min-width: 48em) {
  .media-grid--inner {
    padding: 0 50px;
  }
}

/* Two columns on a phone, four from 768. `minmax(0, 1fr)` rather than `1fr` matters:
   a grid track's default minimum is its content, and one wide tile would otherwise
   push the whole grid wider than the page. */
.media-grid--inner {
  grid: auto-flow dense var(--mobile-height, 250px) / repeat(2, minmax(0, 1fr));
}

@media (min-width: 48em) {
  .media-grid--inner {
    grid: auto-flow dense var(--desktop-height, 300px) / repeat(4, minmax(0, 1fr));
  }
}

/* ---------------------------------------------------------------- the tile */

.media-grid--item {
  position: relative;
  display: flex;
  isolation: isolate;
  overflow: hidden;
  width: 100%;
  height: 100%;
  padding: 25px;
  border-radius: var(--block-border-radius);
  background: var(--tile-bg, var(--color-surface));
  color: var(--tile-text, var(--color-body));
  grid-area: span var(--row-span, 1) / span var(--column-span--mobile, 1);
}

@media (min-width: 48em) {
  .media-grid--item {
    padding: 35px;
    grid-area: span var(--row-span, 1) / span var(--column-span, 1);
  }
}

/* Below 768 the grid becomes a horizontal, snapping strip — same treatment as the
   gallery's and the workout strip's. `grid-template-rows` is pinned to the desktop
   height so the strip keeps a row to sit in once `grid-area: auto` releases the
   spans. */
@media (max-width: 47.99em) {
  .media-grid--inner.swipe-on-mobile {
    grid-auto-flow: column;
    grid-auto-columns: minmax(var(--mobile-swipe-width), 1fr);
    grid-template-columns: repeat(auto-fill, minmax(var(--mobile-swipe-width), 1fr));
    grid-template-rows: var(--desktop-height, 300px);
    overflow-x: auto;
    padding-bottom: 10px;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  .media-grid--inner.swipe-on-mobile::-webkit-scrollbar {
    display: none;
  }

  .media-grid--inner.swipe-on-mobile .media-grid--item {
    grid-area: auto;
    scroll-snap-align: center;
  }
}

/* Nine positions, same as the slideshow's and the gallery's. */
.media-grid--item.content-top-left      { justify-content: flex-start; align-items: flex-start; }
.media-grid--item.content-top-center    { justify-content: center;     align-items: flex-start; }
.media-grid--item.content-top-right     { justify-content: flex-end;   align-items: flex-start; }
.media-grid--item.content-middle-left   { justify-content: flex-start; align-items: center; }
.media-grid--item.content-middle-center { justify-content: center;     align-items: center; }
.media-grid--item.content-middle-right  { justify-content: flex-end;   align-items: center; }
.media-grid--item.content-bottom-left   { justify-content: flex-start; align-items: flex-end; }
.media-grid--item.content-bottom-center { justify-content: center;     align-items: flex-end; }
.media-grid--item.content-bottom-right  { justify-content: flex-end;   align-items: flex-end; }

.media-grid--content {
  z-index: 2;
}

.media-grid--content > *:last-child {
  margin-bottom: 0;
}

/* ----------------------------------------------------------- the media layer */

.media-grid--bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--tile-bg, var(--color-surface));
  pointer-events: none;
}

.media-grid--bg img,
.media-grid--bg video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

/* The tinted wash over the artwork. Opacity 0 on every tile we ship, so this is
   invisible today — kept because it is upstream's and a section setting may want it. */
.media-grid--bg::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(var(--overlay-color-rgb), var(--overlay-opacity));
  pointer-events: none;
}

/* A tile that links somewhere gets a whole-tile target above the artwork and below
   any CTA, and lifts its artwork on hover. A tile that does not is inert to the
   mouse whatever its cursor says. */
.media-grid--link {
  position: absolute;
  inset: 0;
  z-index: 21;
}

.media-grid--item.has-link--true .media-grid--bg img,
.media-grid--item.has-link--true .media-grid--bg video {
  transition: transform 1s var(--ease-theme);
}

.media-grid--item.has-link--true:hover .media-grid--bg img,
.media-grid--item.has-link--true:hover .media-grid--bg video {
  transform: scale(1.07);
}

.media-grid--item.has-link--true .text-button {
  position: relative;
  z-index: 22;
}

/* -------------------------------------------------------- reduced motion */

/* These tiles autoplay. Anyone who has asked for less motion should not be handed
   eight moving backgrounds, so the videos are hidden and their posters — already the
   video's first visible frame — take their place. `display: none` is what stops
   playback; a paused video would still decode. */
@media (prefers-reduced-motion: reduce) {
  .media-grid--bg video {
    display: none;
  }

  .media-grid--item.has-link--true:hover .media-grid--bg img {
    transform: none;
  }
}