/**
 * santiana-core · card-modal
 *
 * Popup de las tarjetas del bloque 12, según el mock v12 (página 5 del
 * PDF «Santiana Residential Website v12 2026 05 13», recorte
 * `contexto/v12-paginas/deck/p5-modal-5.png`).
 *
 * ⚠️ APROXIMACIÓN. El mock sólo existe como captura pequeña y de muy bajo
 * contraste dentro de un diagrama; no hay Figma ni versión a tamaño real.
 * Los valores marcados con «≈» se midieron a ojo sobre ese recorte y
 * están pendientes de que Johann los mire. Todo lo que puede salir de la
 * paleta global sale de la paleta global — aquí no se inventan colores.
 */

/* El diálogo se muestra con flex; sin esto, [hidden] no gana. */
.sb-card-modal[hidden] {
	display: none !important;
}

.sb-card-modal {
	position: fixed;
	inset: 0;
	z-index: 9990; /* por debajo de GLightbox (999999): el video del play
	                  del popup se abre ENCIMA del popup, no detrás */
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1.5rem; /* = edge padding global del sitio */
}

/* Velo: verde muy oscuro, no negro puro — la sección de fondo es
   palette1 (#38453d) y el mock la oscurece conservando el tono. ≈ */
.sb-card-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(18, 24, 20, 0.72);
}

/* Bloquea el scroll del fondo mientras el popup está abierto. */
html.sb-card-modal-open,
html.sb-card-modal-open body {
	overflow: hidden;
}

/* --------------------------------------------
   Diálogo
   -------------------------------------------- */

.sb-card-modal__dialog {
	position: relative;
	width: min(1100px, 100%); /* ≈ en el mock ocupa casi todo el ancho */
	max-height: calc(100vh - 3rem);
	overflow-y: auto;
	background: #fbfaf6; /* ≈ crema muy claro, apenas cálido */
	border-radius: 2px;  /* ≈ esquinas casi rectas */
	padding: clamp(2rem, 4vw, 3.5rem) clamp(1.5rem, 4vw, 4rem);
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28);
}

/* Especificidad doble en los controles: los estilos globales de boton
   del theme (fill palette1, texto blanco) ganaban a una sola clase y
   pintaban la X como un circulo verde relleno. Detectado en QA. */
.sb-card-modal .sb-card-modal__close {
	position: absolute;
	top: 0.75rem;
	right: 0.75rem;
	width: 44px; /* área táctil mínima */
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--global-palette1, #38453d);
	opacity: 0.55;
	cursor: pointer;
	transition: opacity 0.2s ease;
}

.sb-card-modal .sb-card-modal__close:hover,
.sb-card-modal .sb-card-modal__close:focus-visible {
	opacity: 1;
}

.sb-card-modal .sb-card-modal__close svg {
	width: 18px;
	height: 18px;
	display: block;
}

/* Etiqueta superior: el título de la tarjeta en versalitas espaciadas,
   gris verdoso apagado y centrado. ≈ tamaño y tracking */
.sb-card-modal__label {
	margin: 0 0 clamp(1.5rem, 3vw, 2.5rem);
	text-align: center;
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: #8b9a86; /* ≈ salvia grisáceo; entre palette7 y palette1 */
}

/* --------------------------------------------
   Cuerpo en dos columnas
   -------------------------------------------- */

.sb-card-modal__body {
	display: grid;
	grid-template-columns: minmax(0, 45fr) minmax(0, 51fr);
	gap: clamp(1.5rem, 4%, 3rem);
	align-items: start;
}

.sb-card-modal__media {
	position: relative;
	border-radius: 8px; /* mismo radio que la foto de la tarjeta */
	overflow: hidden;
	background: var(--global-palette1, #38453d);
}

.sb-card-modal__poster {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 10; /* ≈ apaisado en el mock; la tarjeta es vertical */
	object-fit: cover;
}

/* Play centrado — misma geometría que el icono de marca del sitio
   (círculo fino + triángulo redondeado), aquí en SVG para no depender
   del PNG del child theme. */
.sb-card-modal .sb-card-modal__play {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	text-decoration: none;
}

.sb-card-modal__play svg {
	width: 64px;
	height: 64px;
	display: block;
	transition: transform 0.2s ease;
}

.sb-card-modal__play:hover svg,
.sb-card-modal__play:focus-visible svg {
	transform: scale(1.06);
}

.sb-card-modal__play[hidden] {
	display: none;
}

/* --------------------------------------------
   Columna de texto
   -------------------------------------------- */

.sb-card-modal__title {
	margin: 0 0 1rem;
	font-size: 1.125rem; /* ≈ título corto y pequeño */
	line-height: 1.3;
	font-weight: 700;
	color: var(--global-palette1, #38453d);
}

.sb-card-modal__copy {
	margin: 0 0 clamp(1.5rem, 3vw, 2rem);
	font-size: 0.9375rem;
	line-height: 1.75;
	color: #5b6a5c; /* ≈ gris verdoso de lectura sobre crema */
}

.sb-card-modal__actions {
	margin: 0;
	text-align: center; /* ≈ en el mock queda casi centrado bajo el texto */
}

/* Botón: por defecto el verde de los botones del sitio (palette1).
   El mock parece pedir un verde algo más claro y saturado — se deja en
   una custom property para que cambiarlo sea una línea. */
.sb-card-modal .sb-card-modal__btn {
	--sb-card-modal-btn-bg: var(--global-palette1, #38453d);
	display: inline-block;
	padding: 0.75rem 2rem;
	border: 0;
	border-radius: 4px; /* radio global de botones del sitio */
	background: var(--sb-card-modal-btn-bg);
	color: var(--global-palette9, #fff);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	cursor: pointer;
}

/* --------------------------------------------
   Móvil / tablet
   -------------------------------------------- */

@media (max-width: 767px) {
	.sb-card-modal {
		padding: 1rem;
	}

	.sb-card-modal__dialog {
		max-height: calc(100vh - 2rem);
		padding: 3rem 1.5rem 2rem;
	}

	.sb-card-modal__body {
		grid-template-columns: minmax(0, 1fr);
		gap: 1.5rem;
	}

	.sb-card-modal__poster {
		aspect-ratio: 16 / 11;
	}

	.sb-card-modal__play svg {
		width: 52px;
		height: 52px;
	}

	.sb-card-modal__label {
		margin-bottom: 1.25rem;
	}
}

/* Sin animación para quien la haya desactivado en el sistema. */
@media (prefers-reduced-motion: reduce) {
	.sb-card-modal__play svg,
	.sb-card-modal__close {
		transition: none;
	}
}