/* ============================================================
   Forum · Media — downloadable material for partners.
   One block per collection: title + meta + download-all, a short
   usage line, then the pictures in their own format (masonry).
   ============================================================ */

.media-collection + .media-collection {
  border-top: 1px solid var(--color-border);
}

.media-collection__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-4) var(--sp-6);
  flex-wrap: wrap;
}

.media-collection__meta {
  margin-top: var(--sp-2);
  color: var(--color-text-subtle);
  font-size: var(--fs-sm);
}

.media-collection__usage {
  max-width: 64ch;
  margin-top: var(--sp-4);
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
  line-height: var(--lh-loose);
}

/* --- Editorial grid: varied rhythm with featured wide landscapes ---- */

.media-grid {
  --gap: var(--sp-3);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-flow: dense;
  gap: var(--gap);
  margin: var(--sp-6) 0 0;
  padding: 0;
  list-style: none;
}

.media-tile {
  position: relative;
  height: 100%;
  border-radius: var(--image-border-radii);
  overflow: hidden;
  background: var(--color-surface-muted);
}

.media-tile--landscape {
  grid-column: span 1;
  grid-row: span 1;
}

.media-tile--portrait {
  grid-column: span 1;
  grid-row: span 2;
}

.media-tile--wide {
  grid-column: span 2;
  grid-row: span 2;
}

.media-tile--hero {
  grid-column: 1 / -1;
}

.media-tile__open {
  display: block;
  height: 100%;
  cursor: zoom-in;
}

.media-tile__open img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 25%;
  transition: transform var(--dur-slow) var(--ease-out), opacity var(--dur-med) var(--ease-out);
}

.media-tile__open:hover img {
  transform: scale(1.02);
}

.media-tile__open:focus-visible {
  outline: 2px solid var(--color-text);
  outline-offset: -2px;
}

/* Download straight from the grid: shows on hover/focus, always on touch */
.media-tile__download {
  position: absolute;
  right: var(--sp-3);
  bottom: var(--sp-3);
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.94);
  color: var(--c-black);
  box-shadow: var(--shadow-md);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out),
    background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}

.media-tile:hover .media-tile__download,
.media-tile__download:focus-visible,
.media-tile__open:focus-visible + .media-tile__download {
  opacity: 1;
  transform: none;
}

.media-tile__download:hover {
  background: var(--c-black);
  color: #fff;
}

@media (hover: none) {
  .media-tile__download {
    opacity: 1;
    transform: none;
    width: 36px;
    height: 36px;
    right: var(--sp-2);
    bottom: var(--sp-2);
  }

  .media-tile__open:hover img {
    transform: none;
  }
}

@media (max-width: 980px) {
  .media-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .media-tile--wide {
    grid-column: 1 / -1;
  }
}

@media (max-width: 520px) {
  .media-grid {
    --gap: var(--sp-2);
    grid-template-columns: 1fr;
  }

  .media-tile--landscape,
  .media-tile--portrait,
  .media-tile--wide,
  .media-tile--hero {
    grid-column: auto;
    grid-row: auto;
  }

  .media-collection__head .btn {
    width: 100%;
  }
}

/* --- Lightbox ------------------------------------------------------ */

.media-lightbox {
  --bar: 68px;
  width: 100vw;
  max-width: none;
  height: 100vh;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: 0 0 var(--sp-5);
  border: 0;
  background: transparent;
  color: #fff;
}

.media-lightbox[open] {
  display: grid;
  grid-template-rows: var(--bar) minmax(0, 1fr);
  animation: media-lightbox-in var(--dur-med) var(--ease-out);
}

.media-lightbox::backdrop {
  background: rgba(0, 0, 0, 0.9);
  backdrop-filter: blur(6px);
}

@keyframes media-lightbox-in {
  from { opacity: 0; transform: scale(0.98); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .media-lightbox[open] {
    animation: none;
  }

  .media-tile__open img,
  .media-tile__download {
    transition: none;
  }
}

html:has(.media-lightbox[open]) {
  overflow: hidden;
}

.media-lightbox__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-inline: var(--sp-4);
}

.media-lightbox__count {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-sm);
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
}

.media-lightbox__actions {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}

.media-lightbox__download {
  height: 44px;
  padding-inline: 18px;
  color: #fff;
}

.media-lightbox__download:hover {
  background: #fff;
  color: var(--c-black);
  border-color: #fff;
}

.media-lightbox__btn {
  flex: none;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: #fff;
  color: var(--c-black);
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}

.media-lightbox__btn:hover {
  background: var(--accent-forum);
  color: #fff;
}

.media-lightbox__main {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-4);
  min-height: 0;
  padding-inline: var(--sp-4);
}

/* As large as the space allows, in the picture's own format */
.media-lightbox__stage {
  --avail-h: calc(100dvh - var(--bar) - var(--sp-5));
  --avail-w: calc(100vw - 2 * 44px - 4 * var(--sp-4));
  width: min(var(--avail-w), var(--avail-h) * var(--ratio, 1.5), 1920px);
  aspect-ratio: var(--ratio, 1.5);
  margin: 0;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: #111;
  box-shadow: var(--shadow-lg);
}

.media-lightbox__stage img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background-size: cover;
  background-position: center;
  user-select: none;
}

.media-lightbox--single .media-lightbox__nav,
.media-lightbox--single .media-lightbox__count {
  visibility: hidden;
}

/* Phones: full width for the picture, arrows on its edges, swipe does the rest */
@media (max-width: 700px) {
  .media-lightbox__main {
    position: relative;
    padding-inline: var(--sp-2);
  }

  .media-lightbox__stage {
    --avail-w: calc(100vw - 2 * var(--sp-2));
    border-radius: var(--radius-sm);
  }

  .media-lightbox__nav {
    position: absolute;
    top: 50%;
    z-index: 1;
    width: 40px;
    height: 40px;
    margin-top: -20px;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: var(--shadow-md);
  }

  .media-lightbox__nav[data-lightbox-prev] {
    left: var(--sp-3);
  }

  .media-lightbox__nav[data-lightbox-next] {
    right: var(--sp-3);
  }
}