/* home-uitslagen.css — homepage "Laatste uitslagen" (sc07), option D "De avond in beeld" (scoped under .page-home).
   Head (title + ghost "Alle uitslagen" + text "Foto’s →") over a photo mosaic: one tile per bout, result in the corner.
   Phones/tablets: main event large, then two columns (an odd side tile goes full width first).
   Desktop ≥1024: 12-col mosaic — main 7 cols × 2 rows, two tiles in the right column, the rest share the bottom row. */

/* ---- head ---- */
.page-home .home-uitslagen__top { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--s-5) var(--s-6); }
.page-home .home-uitslagen__title { line-height: .88; font-size: min(var(--fs-d2), 9.4vw); margin: 0; }
.page-home .home-uitslagen__title .line { white-space: nowrap; }
.page-home .home-uitslagen__title .stencil { font-weight: 800; }
.page-home .home-uitslagen__ctas { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-6); }

/* ---- mosaic ---- */
.page-home .home-uitslagen__mosaic {
  list-style: none; margin: var(--s-6) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3);
}
.page-home .home-uitslagen__tile { position: relative; min-width: 0; }
.page-home .home-uitslagen__tile.is-main,
.page-home .home-uitslagen__tile.is-wide-m { grid-column: 1 / -1; }

.page-home .home-uitslagen__fig {
  position: relative; margin: 0; height: 100%; aspect-ratio: 4 / 5;
  overflow: hidden; border-radius: var(--r-card); background: var(--doek, #111116);
  isolation: isolate;
}
.page-home .is-main .home-uitslagen__fig { aspect-ratio: 1 / 1; border-radius: var(--r-screen); }
.page-home .is-wide-m .home-uitslagen__fig { aspect-ratio: 4 / 3; }
.page-home .home-uitslagen__fig .media,
.page-home .home-uitslagen__fig picture { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.page-home .home-uitslagen__fig img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .9s var(--ease-out, cubic-bezier(.16, 1, .3, 1));
}
.page-home .home-uitslagen__tile:hover .home-uitslagen__fig img,
.page-home .home-uitslagen__tile:focus-within .home-uitslagen__fig img { transform: scale(1.035); }
.page-home .home-uitslagen__shade {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(to top, rgba(7, 7, 10, .94) 0%, rgba(7, 7, 10, .72) 26%, rgba(7, 7, 10, .25) 50%, rgba(7, 7, 10, 0) 66%);
}

@media (max-width: 1023.98px) {
  /* captions wrap to more lines on phones/tablets: the shade climbs higher */
  .page-home .home-uitslagen__shade { background: linear-gradient(to top, rgba(7, 7, 10, .95) 0%, rgba(7, 7, 10, .78) 30%, rgba(7, 7, 10, .3) 56%, rgba(7, 7, 10, 0) 74%); }
}

/* ---- the result caption in the corner ---- */
.page-home .home-uitslagen__cap { position: absolute; z-index: 2; left: var(--s-4); right: var(--s-4); bottom: var(--s-4); }
.page-home .home-uitslagen__label { margin: 0; color: var(--bot-80); font-size: 10px; }
.page-home .home-uitslagen__bout { margin: 6px 0 0; }
.page-home .home-uitslagen__w {
  display: block; font: 900 26px/.9 var(--font-display); text-transform: uppercase; color: var(--bot);
  overflow-wrap: anywhere;
}
.page-home .home-uitslagen__w a { color: inherit; text-decoration: none; }
.page-home .home-uitslagen__w a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.page-home .home-uitslagen__w a:focus-visible { outline: 2px solid var(--bot); outline-offset: 3px; border-radius: 2px; }
.page-home .home-uitslagen__l { display: inline; margin-top: 4px; font: 400 13px/1.25 var(--font-body); color: var(--rook); }
.page-home .home-uitslagen__def { font-family: var(--font-serif); font-style: italic; font-size: 1.15em; color: var(--rook); }
.page-home .home-uitslagen__chip { margin-top: var(--s-2); vertical-align: middle; }
.page-home .home-uitslagen__tile:not(.is-main):not(.is-wide-m) .home-uitslagen__l { display: block; }
.page-home .home-uitslagen__tile:not(.is-main):not(.is-wide-m) .home-uitslagen__chip { display: table; margin-top: var(--s-2); }

/* main event: big name, loser inline */
.page-home .is-main .home-uitslagen__cap { left: var(--s-5); right: var(--s-5); bottom: var(--s-5); }
.page-home .is-main .home-uitslagen__label { font-size: 11px; }
.page-home .is-main .home-uitslagen__w { display: inline; font-size: clamp(44px, 12vw, 80px); margin-right: 8px; }
.page-home .is-main .home-uitslagen__l { font-size: 15px; white-space: nowrap; }
.page-home .is-wide-m .home-uitslagen__w { display: inline; margin-right: 6px; }

/* ---- tablet ---- */
@media (min-width: 768px) {
  .page-home .home-uitslagen__mosaic { gap: var(--s-4); margin-top: var(--s-7); }
  .page-home .home-uitslagen__fig { aspect-ratio: 4 / 3; }
  .page-home .is-main .home-uitslagen__fig { aspect-ratio: 16 / 9; }
  .page-home .is-wide-m .home-uitslagen__fig { aspect-ratio: 21 / 9; }
  .page-home .home-uitslagen__cap { left: 20px; right: 20px; bottom: 18px; }
  .page-home .home-uitslagen__label { font-size: 11px; }
  .page-home .home-uitslagen__w { font-size: 30px; }
  .page-home .home-uitslagen__l { font-size: 15px; }
  .page-home .is-main .home-uitslagen__cap { left: 32px; right: 32px; bottom: 28px; }
  .page-home .is-main .home-uitslagen__l { font-size: 19px; }
}

/* ---- desktop mosaic ---- */
@media (min-width: 1024px) {
  .page-home .home-uitslagen__mosaic {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-auto-rows: clamp(196px, 17vw, 268px);
  }
  .page-home .home-uitslagen__fig,
  .page-home .is-main .home-uitslagen__fig,
  .page-home .is-wide-m .home-uitslagen__fig { aspect-ratio: auto; }
  .page-home .home-uitslagen__tile.is-wide-m { grid-column: auto; }
  .page-home .home-uitslagen__tile.is-main { grid-column: 1 / 8; grid-row: 1 / 3; }
  .page-home .home-uitslagen__tile.is-side { grid-column: 8 / 13; }
  .page-home .home-uitslagen__tile.is-side--tall { grid-row: 1 / 3; }
  .page-home .home-uitslagen__tile.is-row { grid-column: span var(--span, 4); }
  .page-home .home-uitslagen__mosaic--n1 .home-uitslagen__tile.is-main { grid-column: 1 / -1; }
  /* side + row tiles: loser back inline after the name, like the artboard */
  .page-home .home-uitslagen__tile:not(.is-main) .home-uitslagen__w { display: inline; margin-right: 6px; }
  .page-home .home-uitslagen__tile:not(.is-main):not(.is-wide-m) .home-uitslagen__l { display: inline; }
  .page-home .home-uitslagen__tile:not(.is-main):not(.is-wide-m) .home-uitslagen__chip { display: inline-flex; margin: 0 0 0 var(--s-2); }
  .page-home .home-uitslagen__cap { left: 22px; right: 22px; bottom: 20px; }
  .page-home .home-uitslagen__l { white-space: nowrap; }
  .page-home .is-main .home-uitslagen__cap { left: 36px; right: 36px; bottom: 32px; }
  .page-home .is-main .home-uitslagen__w { font-size: clamp(56px, 5.6vw, 88px); margin-right: 12px; }
  .page-home .is-main .home-uitslagen__l { font-size: 19px; }
}

@media (prefers-reduced-motion: reduce) {
  .page-home .home-uitslagen__fig img { transition: none; }
  .page-home .home-uitslagen__tile:hover .home-uitslagen__fig img,
  .page-home .home-uitslagen__tile:focus-within .home-uitslagen__fig img { transform: none; }
}