/* Videos module: YouTube cards, collection groups and the player modal. */

.video-card__media { aspect-ratio: 16 / 9; background: #111; }
.video-card__play { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.video-card__play svg { width: 64px; height: auto; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .35)); transition: transform .2s; }
.video-card__play-bg { fill: rgba(33, 33, 33, .8); transition: fill .2s; }
.video-card__media:hover .video-card__play-bg,
.video-card__media:focus-visible .video-card__play-bg { fill: var(--maroon); }
.video-card__media:hover .video-card__play svg { transform: scale(1.08); }
.video-card__media:focus-visible { outline: 3px solid var(--gold); outline-offset: -3px; }

.video-group + .video-group { margin-top: 56px; }
.video-group__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; margin-bottom: 20px; padding-bottom: 10px; border-bottom: 2px solid rgba(127, 9, 9, .25); }
.video-group__title { margin: 0; font-size: clamp(20px, 2.4vw, 26px); font-weight: 600; color: var(--maroon); }
.video-group__title a { text-decoration: none; }
.video-group__title a:hover { text-decoration: underline; }
.video-group__count { font-size: 14px; color: var(--muted); }
.video-group__more { margin: 24px 0 0; text-align: center; }

.empty p { margin: 0 0 16px; }

.video-modal { width: min(1000px, calc(100vw - 32px)); max-width: none; padding: 0; border: 0; border-radius: var(--radius); background: #000; color: var(--white); box-shadow: 0 20px 60px rgba(0, 0, 0, .5); }
.video-modal::backdrop { background: rgba(0, 0, 0, .8); }
.video-modal__head { display: flex; align-items: center; gap: 12px; padding: 8px 8px 8px 16px; background: var(--maroon-dark); }
.video-modal__title { flex: 1; margin: 0; font-size: 15px; font-weight: 500; line-height: 1.4; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.video-modal__close { flex: none; width: 40px; height: 40px; border: 0; border-radius: 50%; background: transparent; color: var(--white); font-size: 30px; line-height: 1; cursor: pointer; }
.video-modal__close:hover, .video-modal__close:focus-visible { background: rgba(255, 255, 255, .15); }
.video-modal__frame { position: relative; aspect-ratio: 16 / 9; }
.video-modal__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
body.has-video-modal { overflow: hidden; }