/**
 * cedares — Sistema de modales (base + variante video).
 *
 * Adaptado del patrón unificado de Idiomas PUCP: shell `.modal` con overlay +
 * dialog, se activa con la clase `.is-open` (la pone modal.js). Aquí solo van
 * el shell base y la variante `.modal--video` (embed 16:9 sobre panel negro).
 */

.modal {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: none;
	align-items: center;
	justify-content: center;
	padding: 16px;
	overflow-y: auto;
	overscroll-behavior: contain;
}

.modal.is-open {
	display: flex;
	animation: cedModalFadeIn 0.2s ease-out both;
}

.modal[aria-hidden="true"]:not(.is-open) {
	display: none;
}

.modal__overlay {
	position: fixed;
	inset: 0;
	background: rgba(6, 9, 25, 0.82);
	-webkit-backdrop-filter: blur(2px);
	backdrop-filter: blur(2px);
	cursor: pointer;
}

.modal__dialog {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 920px;
}

.modal__close {
	position: absolute;
	top: -44px;
	right: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 0;
	border: 0;
	border-radius: 8px;
	background: rgba(255, 255, 255, 0.1);
	color: #fff;
	cursor: pointer;
	transition: background-color 0.15s ease;
}

.modal__close:hover {
	background: #e41069;
}

.modal__close:focus-visible {
	outline: 2px solid #f7ac03;
	outline-offset: 2px;
}

.modal__close svg {
	width: 20px;
	height: 20px;
}

/* ---- Variante video: panel transparente, embed 16:9, overlay negro ---- */
.modal--video .modal__overlay {
	background: rgba(0, 0, 0, 0.85);
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
}

.modal--video .modal__dialog {
	max-width: 960px;
}

.modal--video__embed {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	background: #000;
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.7);
}

.modal--video__embed iframe,
.modal--video__embed video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	object-fit: contain;
	background: #000;
}

/* ---- Reel vertical (YouTube Shorts o archivo subido en 9:16) ----
   El marco pasa a 9:16. El diálogo se estrecha, y el ancho se topa además a
   ~0.47×alto de viewport para que el reel entre COMPLETO en vertical (con aire
   arriba/abajo y sitio para el botón cerrar), manteniendo la proporción. */
.modal--video--vertical .modal__dialog {
	max-width: min(430px, 47vh, 92vw);
}

.modal--video--vertical .modal--video__embed {
	aspect-ratio: 9 / 16;
}

/* La superposición «play» de la tarjeta, como botón, conserva el look. */
.sala-obvid__overlay--btn {
	display: block;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	cursor: pointer;
}

@media (max-width: 1023.98px) {
	.modal--video .modal__close {
		top: 8px;
		right: 8px;
		background: rgba(0, 0, 0, 0.6);
	}
}

@keyframes cedModalFadeIn {
	from { opacity: 0; }
	to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
	.modal.is-open {
		animation: none;
	}
}

/* Bloqueo de scroll del fondo mientras hay un modal abierto. */
html.has-modal-open,
body.has-modal-open {
	overflow: hidden;
}