/* Collabs — maqueta del Figma (1920x1080).
   El bloque no arranca en el margen: entra corrido a la derecha, a 18.5vw. */

.xfb-collabs {
	padding: 0 var(--xfb-margin) 4vh 18.5vw;
}

.xfb-collabs__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1.4vw;               /* 27px @1920 */
	padding-top: 11.98vw;     /* la foto arranca en y=230 */
	align-items: start;
}

.xfb-collab__cover {
	display: block;
	width: 100%;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
}

/* Sin efecto de hover: la foto es lo que es. El slider igual abre al clickear,
   que es lo que pidió Valentina para esta sección. */
.xfb-collab__cover img {
	display: block;
	width: 100%;
	/* 754 x 497 en el Figma. */
	aspect-ratio: 754 / 497;
	object-fit: cover;
}

.xfb-collab__title {
	margin: 0.83vw 0 0;       /* 16px */
	font-size: clamp(0.85rem, 0.78vw, 1rem);
	font-weight: 400;
	line-height: 1.15;
	letter-spacing: 0.01em;
}

.xfb-collab__subtitle {
	display: block;
}

/* El cuerpo va chico y con interlineado corto, como en el Figma. */
.xfb-collab__text {
	margin-top: 1.56vw;       /* 30px */
	font-size: clamp(0.72rem, 0.6vw, 0.9rem);
	line-height: 1.18;
}

.xfb-collab__text p {
	margin: 0 0 1em;
}

.xfb-collab__text p:last-child {
	margin-bottom: 0;
}

.xfb-collab__text a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 0.22em;
}

/* Slider pop-up ---------------------------------------------------------- */

.xfb-slider {
	position: fixed;
	inset: 0;
	z-index: 15;
	display: grid;
	place-items: center;
	padding: clamp(2.5rem, 5vh, 4rem) var(--xfb-margin);
	background: rgba(255, 255, 255, 0.86);
}

.xfb-slider[hidden] {
	display: none;
}

.xfb-slider__stage {
	display: inline-flex;
	flex-direction: column;
	max-width: 100%;
	max-height: 100%;
}

.xfb-slider__figure {
	display: flex;
	justify-content: center;
	margin: 0;
	min-height: 0;
}

.xfb-slider__figure img {
	max-width: min(64vw, 1320px);
	max-height: 78vh;
	width: auto;
	height: auto;
	object-fit: contain;
}

.xfb-slider__close {
	align-self: flex-end;
	margin-bottom: 0.6rem;
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	font-size: 0.78rem;
	line-height: 1;
	letter-spacing: 0.06em;
	color: var(--xfb-header-ink);
	opacity: 0.85;
	cursor: pointer;
	user-select: none;
	transition: opacity 160ms ease;
}

/* Igual que en el visor de la home: al pasar por encima sólo se ennegrece.
   El :focus de Kadence pinta los botones de blanco, así que se redeclara. */
.xfb-slider__close:hover,
.xfb-slider__close:focus,
.xfb-slider__close:active,
.xfb-slider__nav:hover,
.xfb-slider__nav:focus,
.xfb-slider__nav:active {
	background: none;
	color: var(--xfb-header-ink);
}

.xfb-slider__close:hover,
.xfb-slider__nav:hover {
	opacity: 1;
}

/* El pie del slider: las flechas y el contador juntos en el centro, y debajo
   un punto por foto. Antes eran dos links —"Anterior" y "Siguiente"— repartidos
   a los costados, que se leían como la barra de obra anterior/siguiente y no
   como un slider (feedback del 04/09). Agrupados en el centro, con el contador
   en el medio y los puntos abajo, no hay duda de qué es. */
.xfb-slider__meta {
	display: grid;
	justify-items: center;
	gap: 0.6rem;
	margin-top: 0.6rem;
	font-family: var(--xfb-font-label);
	font-size: 12px;
	line-height: 1;
	letter-spacing: 0;
	color: #000;
}

.xfb-slider__meta[hidden] {
	display: none;
}

.xfb-slider__controls {
	display: flex;
	align-items: center;
	gap: 1.1rem;
}

/* Las flechas reemplazan a los dos rótulos. Sin subrayado: son un glifo, no una
   palabra; lo que marca el hover es que dejan de estar atenuadas. */
.xfb-slider__nav {
	padding: 0 0.2rem;
	border: 0;
	background: none;
	font: inherit;
	font-size: 15px;
	line-height: 1;
	color: #000;
	box-shadow: none;
	opacity: 0.55;
	cursor: pointer;
	transition: opacity 160ms ease;
}

.xfb-slider__counter {
	min-width: 3.5em;
	text-align: center;
	font-variant-numeric: tabular-nums;
}

.xfb-slider__dots {
	display: flex;
	gap: 0.4rem;
}

.xfb-slider__dot {
	width: 5px;
	height: 5px;
	padding: 0;
	border: 1px solid #000;
	border-radius: 50%;
	background: none;
	box-shadow: none;
	color: #000;
	cursor: pointer;
	opacity: 0.45;
	transition: opacity 160ms ease, background-color 160ms ease;
}

.xfb-slider__dot.is-current {
	background: #000;
	opacity: 1;
}

/* Kadence pinta cualquier <button> del theme —gris azulado en reposo, blanco al
   enfocarlo— desde selectores más específicos, así que las flechas y los puntos
   redeclaran color y fondo en todos los estados. Ya mordió tres veces. */
.xfb-slider__nav:hover,
.xfb-slider__nav:focus,
.xfb-slider__nav:active,
.xfb-slider__nav:focus-visible {
	background: none;
	box-shadow: none;
	color: #000;
	opacity: 1;
}

.xfb-slider__dot:hover,
.xfb-slider__dot:focus,
.xfb-slider__dot:active,
.xfb-slider__dot:focus-visible {
	box-shadow: none;
	border-color: #000;
	opacity: 1;
}

.xfb-slider__dot:hover,
.xfb-slider__dot:focus,
.xfb-slider__dot:active {
	background: none;
}

.xfb-slider__dot.is-current:hover,
.xfb-slider__dot.is-current:focus,
.xfb-slider__dot.is-current:active {
	background: #000;
}

/* El foco de teclado sí necesita marca propia: con `opacity: 1` a secas —lo
   mismo que hace el hover, y casi lo mismo que `.is-current`— no había forma de
   saber en qué flecha o en qué punto estaba parado el foco. Es el mismo anillo
   que usan la X y los links de los demás visores. */
.xfb-slider__nav:focus-visible,
.xfb-slider__dot:focus-visible {
	outline: 1px solid #000;
	outline-offset: 3px;
}

.xfb-collabs__empty {
	padding-top: 12vw;
	color: var(--xfb-muted);
}

/* Mobile — frame COLLABS de la página XFB MOBILE. Una collab debajo de la
   otra, la foto de margen a margen y el texto abajo. Del frame: la primera
   foto en y=76 (331.3x218.3, o sea 1.518), el título 13 más abajo, el cuerpo
   14.7 después del título y la segunda collab 13 después del cuerpo. */
@media (max-width: 700px) {
	.xfb-collabs {
		padding: 0 var(--xfb-margin) 13.4vw;
	}

	/* El aire entre una collab y la otra tiene que leerse: con el paso del Figma
	   (13px) el texto de una se pegaba a la foto de la siguiente. */
	.xfb-collabs__grid {
		grid-template-columns: 1fr;
		gap: 13vw;
		padding-top: 21.11vw;
	}

	.xfb-collab__cover img {
		aspect-ratio: 331.3 / 218.3;
	}

	.xfb-collab__title {
		margin-top: 3.61vw;
		font-size: 14px;
	}

	.xfb-collab__text {
		margin-top: 4.08vw;
		font-size: 13px;
		line-height: 1.23;
	}

	/* El slider, como los demás visores: la foto de margen a margen. */
	.xfb-slider {
		padding: var(--xfb-header-height) var(--xfb-margin) 0;
		place-items: start center;
		align-content: start;
	}

	/* Como en el visor de la home: el stage se encoge al ancho de la foto para
	   que los rótulos se alineen a sus bordes, y por eso el tope va en `vw`. */
	.xfb-slider__stage {
		width: auto;
	}

	.xfb-slider__figure img {
		max-width: 92.14vw;
		max-height: 62vh;
	}

	.xfb-slider__close {
		margin-bottom: 3.14vw;
		font-size: 12px;
	}

	.xfb-slider__meta {
		margin-top: 1.75vw;
		font-size: 11px;
	}
}