/* Multimedia gallery (/multimedia): album grid, photo grid, lite YouTube players and the <dialog> lightbox. */
.media-albums { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-bottom: 8px; }
.media-album:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.media-album__count { display: flex; flex-wrap: wrap; gap: 6px 14px; }

.media-intro { max-width: 760px; margin: 0 0 24px; color: var(--ink-2); }
.media-intro time { display: block; font: 600 13px var(--font-sans); color: var(--muted); margin-bottom: 6px; }
.media-intro p { margin: 0; font-size: 16px; line-height: 1.6; }

.media-section { margin: 0 0 32px; }
.media-section h2 { font: 700 20px/1.3 var(--font-display, var(--font-sans)); color: var(--ink); margin: 0 0 14px; }

.media-photos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.media-photos li { display: flex; flex-direction: column; gap: 6px; }
.media-photo { display: block; aspect-ratio: 4/3; border-radius: var(--radius-lg); overflow: hidden; background: var(--surface-sunk, #eef2f6); }
.media-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .25s; }
.media-photo:hover img { transform: scale(1.04); }
.media-photo:focus-visible { outline: 3px solid var(--link); outline-offset: 2px; }
.media-photo__caption { font-size: 13px; line-height: 1.4; color: var(--muted); overflow-wrap: anywhere; }

.media-videos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.media-video { margin: 0; display: flex; flex-direction: column; gap: 8px; }
.media-video__frame { position: relative; aspect-ratio: 16/9; border-radius: var(--radius-lg); overflow: hidden; background: #000; }
.media-video__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.media-video__play { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; background: #000; cursor: pointer; }
.media-video__play img { width: 100%; height: 100%; object-fit: cover; opacity: .9; transition: opacity .2s; }
.media-video__play:hover img, .media-video__play:focus-visible img { opacity: 1; }
.media-video__play:focus-visible { outline: 3px solid var(--link); outline-offset: -3px; }
.media-video__icon { position: absolute; left: 50%; top: 50%; width: 68px; height: 48px; transform: translate(-50%, -50%); border-radius: 12px; background: rgba(198, 40, 50, .92); }
.media-video__icon::after { content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-35%, -50%); border-style: solid; border-width: 10px 0 10px 17px; border-color: transparent transparent transparent #fff; }
.media-video figcaption { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 14px; font-size: 14px; color: var(--ink-2); }
.media-video figcaption a { color: var(--link); font-weight: 600; }

.media-channel { margin: 0 0 24px; }
.media-back a { color: var(--link); font-weight: 600; }

.media-lightbox { width: 100vw; height: 100vh; max-width: 100vw; max-height: 100vh; margin: 0; padding: 0; border: 0; background: rgba(5, 14, 24, .94); color: #fff; }
.media-lightbox::backdrop { background: rgba(5, 14, 24, .94); }
.media-lightbox[open] { display: flex; align-items: center; justify-content: center; }
.media-lightbox__figure { margin: 0; max-width: calc(100vw - 140px); max-height: calc(100vh - 100px); display: flex; flex-direction: column; align-items: center; gap: 10px; }
.media-lightbox__img { max-width: 100%; max-height: calc(100vh - 140px); object-fit: contain; border-radius: 6px; }
.media-lightbox__caption { font-size: 15px; line-height: 1.4; text-align: center; color: #e6edf3; }
.media-lightbox__caption:empty { display: none; }
.media-lightbox__counter { position: absolute; top: 18px; left: 20px; margin: 0; font: 600 14px var(--font-sans); color: #c9d4de; }
.media-lightbox__btn { position: absolute; width: 48px; height: 48px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .12); color: #fff; font: 400 32px/1 var(--font-sans); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.media-lightbox__btn:hover { background: rgba(255, 255, 255, .24); }
.media-lightbox__btn:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.media-lightbox__close { top: 12px; right: 14px; }
.media-lightbox__prev { left: 14px; top: 50%; transform: translateY(-50%); }
.media-lightbox__next { right: 14px; top: 50%; transform: translateY(-50%); }
.media-lightbox--single .media-lightbox__prev, .media-lightbox--single .media-lightbox__next, .media-lightbox--single .media-lightbox__counter { display: none; }
html.media-lightbox-open { overflow: hidden; }

@media (max-width: 900px) {
    .media-albums { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
    .media-albums, .media-videos { grid-template-columns: minmax(0, 1fr); }
    .media-photos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .media-lightbox__figure { max-width: calc(100vw - 24px); }
    .media-lightbox__prev, .media-lightbox__next { top: auto; bottom: 16px; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    .media-photo img, .media-video__play img { transition: none; }
    .media-photo:hover img { transform: none; }
}