/* ============================================================================
   tiles.css — the square media tile + grid that replaces the reference
   carousels (case, index) and the season cubeboxes (fashion week).

   Language: 1:1 squares, 3 across on desktop, 2 across on mobile, hard-capped
   at 6 tiles (enforced in the markup). A tile holds ONE looping video or ONE
   still, metadata never sits on the tile. Loops are driven by js/tiles.js:
   they play only in view and stay on their poster under reduced motion.
   ========================================================================== */

.ol-tilegrid {
  list-style: none;
  margin: clamp(1.6rem, 3vw, 2.4rem) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  border: 1px dotted var(--client-line);
  background: var(--client-line);
}

.ol-tile {
  margin: 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: var(--bg);
}

/* The square. object-fit: cover keeps any source ratio filling a 1:1 frame. */
.ol-tile__media {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: #ededea;
}

.ol-tile__media > :is(img, video) {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--dur-ui) var(--ease-spring);
}

.ol-tile:hover .ol-tile__media > :is(img, video) {
  transform: scale(1.03);
}

/* Tiles that open the lightbox keep the zoom affordance. */
.ol-tile__media video[data-zoom] {
  cursor: zoom-in;
}

/* Metadata, when a tile carries any, sits BELOW the square. */
.ol-tile__meta {
  padding: var(--client-row-pad);
  font-family: var(--font-client-mono);
  font-size: 0.56rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Flipped season block keeps its media on the right (mirrors the old cubebox
   rule now that the cubebox is a tile grid). */
.ol-pitch .otto-direction-head--flip .ol-tilegrid {
  order: 2;
}

/* --- Event recaps grid adopts the same square language --------------------- */
.ol-projects {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.ol-project__media {
  aspect-ratio: 1 / 1;
}

/* Emilio, 04.09.26: "recaps sowie Musikvideos fuer Mobile bitte so machen,
   dass die drei in einer Zeile sind". The recap and music rows keep their three
   columns all the way down; only the tile grid still halves. The type inside
   the card is re-cut for that width in client-ottolinger.css section 23. */
@media (max-width: 700px) {
  .ol-tilegrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}