/* ==========================================================================
   Modal de aviso — imagen emergente (Inicio / Clima)
   Markup: inc/acf-modal.php · Comportamiento: assets/js/modal.js
   ========================================================================== */

.skiportillo-modal {
	position: fixed;
	inset: 0;
	z-index: 100000; /* por encima del header y overlays de reserva del tema */
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
}

/* El atributo [hidden] mantiene la modal fuera hasta que el JS la activa. */
.skiportillo-modal[hidden] {
	display: none;
}

.skiportillo-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(7, 29, 73, 0.82);
	-webkit-backdrop-filter: blur(2px);
	backdrop-filter: blur(2px);
	cursor: pointer;
}

.skiportillo-modal__dialog {
	position: relative;
	z-index: 2;
	max-width: min(92vw, 520px);
	max-height: 90vh;
	display: flex;
	animation: skiportilloModalIn 0.28s ease;
}

.skiportillo-modal__link,
.skiportillo-modal__img {
	display: block;
	max-width: 100%;
	max-height: 90vh;
	margin: 0 auto;
}

.skiportillo-modal__img {
	width: auto;
	height: auto;
	object-fit: contain;
	border-radius: 10px;
	box-shadow: 0 24px 80px rgba(0, 0, 0, 0.45);
}

.skiportillo-modal__link {
	cursor: pointer;
}

/* Botón de cierre */
.skiportillo-modal__close {
	position: absolute;
	top: -14px;
	right: -14px;
	z-index: 3;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	border: 2px solid #fff;
	background: #c0282d; /* rojo de aviso, coherente con la pieza */
	color: #fff;
	font-size: 26px;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
	transition: transform 0.18s ease, background 0.18s ease;
}

.skiportillo-modal__close:hover,
.skiportillo-modal__close:focus-visible {
	background: #9c1f23;
	transform: scale(1.06);
	outline: none;
}

@keyframes skiportilloModalIn {
	from { opacity: 0; transform: translateY(14px) scale(0.98); }
	to   { opacity: 1; transform: translateY(0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
	.skiportillo-modal__dialog { animation: none; }
}

/* En móviles el botón queda dentro para que no se corte en los bordes. */
@media (max-width: 480px) {
	.skiportillo-modal {
		padding: 16px;
	}
	.skiportillo-modal__close {
		top: 8px;
		right: 8px;
	}
}