/* ============================================================
   cedares — Sala · Colección: «Objetos emblemáticos» + «Videos».
   2 columnas desde 1024px (galería carrusel | tarjetas de video);
   apiladas en móvil. Reusa el componente `.sala-galerias__*` para la
   galería. Figma 36:1274 · 133:779 · 136:936.
   ============================================================ */

.sala-obvid {
	position: relative;
	background: var(--ced-bg);
	/* Clip solo en X: evita scroll horizontal por el desborde del glow, pero
	   deja que sangre en vertical hacia la sección de galerías (ver glows). */
	overflow-x: clip;
}

/* Glow azul horneado (alfa incluido; sin `opacity` en CSS) en el borde derecho,
   entre esta sección y la de galerías (Galería 05). Un solo elemento con
   posición responsiva: móvil aquí, desktop en la media query. `left`/`top` son
   el CENTRO del glow (translate -50%). Bleed a la derecha recortado por el
   `overflow-x: clip` de la sección; sangra en vertical hacia las galerías.
   Figma móvil 86:434 (435×425, blur 325) · desktop 36:1116 (527×515). */
.sala-obvid__rglow {
	position: absolute;
	z-index: 0;
	left: calc(100% - 92px);
	top: -64px;
	width: 974px;
	height: 952px;
	transform: translate(-50%, -50%);
	background: url('../img/coleccion/glow-esquina-azul.png') no-repeat center / 100% 100%;
	pointer-events: none;
}

.sala-obvid__grid {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(64px, 12vw, 90px);
	box-sizing: border-box;
	max-width: 1400px;
	margin-inline: auto;
	padding: clamp(48px, 10vw, 60px) clamp(24px, 6vw, 40px);
}

/* La galería de objetos se ancla ARRIBA (no al fondo como en la rejilla
   de 4 galerías): anula el `margin-top:auto` que hereda del componente. */
.sala-obvid__gallery .sala-galerias__frame {
	margin-top: 0;
}

/* Objetos son afiches/documentos: en móvil la tarjeta es más ancha que la
   pieza, así que la imagen se muestra COMPLETA (proporción vertical intacta),
   centrada, con fondo oscuro detrás (Figma #1C2226). En desktop llena (cover,
   ver media query). */
.sala-obvid__gallery .sala-galerias__card {
	background: #1c2226;
}

.sala-obvid__gallery .sala-galerias__pic {
	object-fit: contain;
}

/* --- Columna de videos ------------------------------------- */

.sala-obvid__vcol {
	display: flex;
	flex-direction: column;
	gap: 60px;
	min-width: 0;
}

.sala-obvid__videos {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

/* --- Tarjeta de video -------------------------------------- */
.sala-obvid__video {
	display: flex;
	flex-direction: column;
	border-radius: 20px;
	overflow: hidden;
	background: rgba(17, 17, 50, 0.3); /* --ced-azul-oscuro al 30% */
}

.sala-obvid__media {
	position: relative;
	aspect-ratio: 566 / 272; /* mismo ratio que la imagen: sin recorte raro */
	overflow: hidden;
}

.sala-obvid__media--celeste {
	background: var(--ced-celeste);
}

.sala-obvid__media--amarillo {
	background: var(--ced-amarillo);
}

.sala-obvid__thumb {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Overlay de reproducción: oculto en desktop, aparece al pasar el cursor
   o enfocar. En táctil (sin hover) se muestra siempre como afordancia. */
.sala-obvid__overlay {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, 0.35);
	opacity: 0;
	transition: opacity 0.25s ease;
}

.sala-obvid__video:hover .sala-obvid__overlay,
.sala-obvid__video:focus-within .sala-obvid__overlay {
	opacity: 1;
}

@media (hover: none) {
	.sala-obvid__overlay {
		opacity: 1;
	}
}

.sala-obvid__play {
	display: inline-flex;
	width: 64px;
	height: 64px;
	color: #fff;
}

.sala-obvid__play svg {
	width: 100%;
	height: 100%;
}

/* --- Ficha de la tarjeta ----------------------------------- */
.sala-obvid__body {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 16px;
}

.sala-obvid__year {
	margin: 0;
	font-family: var(--ced-font-base);
	font-weight: 400;
	font-size: 12px;
	line-height: 1.4;
	letter-spacing: 1.2px;
	color: var(--ced-amarillo);
}

.sala-obvid__vtitle {
	margin: 0;
	font-family: var(--ced-font-base);
	font-weight: 700;
	font-size: 22px;
	line-height: 1.3;
	color: #fff;
}

.sala-obvid__cta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	margin: 0;
	margin-top: 4px;
}

.sala-obvid__cta-q {
	font-family: var(--ced-font-base);
	font-weight: 400;
	font-size: 16px;
	line-height: 1.6;
	letter-spacing: 0.16px;
	color: rgba(255, 255, 255, 0.85);
}

.sala-obvid__cta-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--ced-font-base);
	font-weight: 500;
	font-size: 16px;
	line-height: 1.5;
	letter-spacing: 0.16px;
	color: #fff;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.sala-obvid__cta-link svg {
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	color: var(--ced-amarillo); /* flecha amarilla, igual que el carrusel de galería */
}

.sala-obvid__cta-link:hover,
.sala-obvid__cta-link:focus-visible {
	color: var(--ced-amarillo);
}

/* ============================================================
   Desktop (≥1024px): 2 columnas lado a lado, marcos alineados arriba.
   ============================================================ */
@media (min-width: 1024px) {
	.sala-obvid__grid {
		grid-template-columns: repeat(2, 1fr);
		align-items: start;
		column-gap: 45px;
		row-gap: 80px;
		padding: clamp(60px, 9vw, 100px) clamp(48px, 8vw, 112px);
	}

	/* Desktop: centro ≈178px del borde derecho del contenido (anclado a
	   `50% + 522px` para seguir al layout centrado, máx 1400) y ~40px del tope. */
	.sala-obvid__rglow {
		left: calc(50% + 522px);
		top: 40px;
		width: 1180px;
		height: 1153px;
	}

	/* Cabeceras de igual alto para que la galería y el 1.er video arranquen
	   a la misma altura, aunque un título ocupe más líneas (Figma). */
	.sala-obvid .sala-galerias__head {
		min-height: 98px;
		justify-content: flex-start;
	}

	/* Variante de altura de la galería de Objetos: piezas de 338px (afiches
	   verticales, Figma) → tarjetas más altas que la rejilla de 4 galerías,
	   para igualar la altura de la tarjeta de video contigua. */
	.sala-obvid__gallery .sala-galerias__page {
		height: 338px;
	}

	/* En desktop la pieza sí llena la tarjeta (Figma: imagen a sangre). */
	.sala-obvid__gallery .sala-galerias__pic {
		object-fit: cover;
	}

	.sala-obvid__vcol {
		gap: 28px;
	}

	.sala-obvid__play {
		width: 72px;
		height: 72px;
	}
}