/* =================================================================
   INTERPLAY — CUERPO FLEXIBLE (contenido de Gutenberg)
   -----------------------------------------------------------------
   El cuerpo se dispone en una COLUMNA CENTRADA (no a todo el ancho),
   para que el texto sea legible y las imágenes no salgan gigantes.
   El editor puede ensanchar bloques puntuales con "ancho amplio"
   (alignwide) o "ancho completo" (alignfull).
   ================================================================= */

/* --- Anchos por bloque de primer nivel --- */
/* Por defecto, cada sección llena el ancho común de la ficha (el de project-body). */
.project-content > * {
	margin-inline: auto;
}

/* El texto, algo más estrecho, para una lectura cómoda */
.project-content > p,
.project-content > ul,
.project-content > ol,
.project-content > h2,
.project-content > h3,
.project-content > h4 {
	max-width: var(--content-measure);
}

/* Anchos opcionales del editor */
.project-content > .alignwide { max-width: var(--content-wide); }

/* "Ancho completo": de verdad a sangre (borde a borde de la pantalla).
   Rompe el ancho del contenedor centrado con márgenes negativos. */
.project-content > .alignfull {
	max-width: none;
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

/* Dentro de un grupo a sangre (p. ej. la banda gris del vídeo), el CONTENIDO
   (el vídeo) se queda centrado al ancho común, mientras el fondo llena la pantalla.
   Se contemplan las dos estructuras posibles del bloque Grupo. */
.project-content > .alignfull.wp-block-group > *,
.project-content > .alignfull.wp-block-group > .wp-block-group__inner-container > * {
	max-width: var(--content-max);
	margin-inline: auto;
}

/* "Ancho medio" (estilo de bloque aplicable a mano): limita el bloque y lo
   centra. Va DESPUÉS de las reglas de alineación a propósito, para ganarles
   si se combinan; "width: auto" y "margin-inline: auto" neutralizan además
   los márgenes negativos de "ancho completo". Sirve para imágenes sueltas,
   carruseles, el comparador antes/después y grupos enteros. */
.project-content .is-style-width-medium {
	max-width: var(--width-medium);
	width: auto;
	margin-inline: auto;
}

/* Ritmo vertical CONSISTENTE entre secciones de primer nivel */
.project-content > * + * {
	margin-top: var(--section-gap);
}

/* Dentro de un grupo (una sección), los elementos van más juntos */
.project-content .wp-block-group > * + * {
	margin-top: var(--space-4);
}

/* --- Texto --- */
.project-content p,
.project-content li {
	font: var(--font-body);
	letter-spacing: var(--ls-default);
	color: var(--color-black);
}
.project-content strong { font-weight: var(--fw-semibold); }

/* --- "Texto destacado" (estilo de bloque aplicable a mano) ---
   Mismo tamaño y peso que el bloque destacado del inicio de la ficha
   (.u-highlight → --font-highlight, 32/40 regular). Se puede aplicar a un
   párrafo suelto o a un grupo entero desde el panel de Estilos. */
.project-content p.is-style-highlight,
.project-content .is-style-highlight p,
.project-content .is-style-highlight li {
	font: var(--font-highlight);
	letter-spacing: var(--ls-default);
	color: var(--color-black);
}
.project-content .has-text-align-center { text-align: center; }
.project-content a {
	text-decoration: underline;
	text-underline-offset: 4px;
	text-decoration-thickness: 1px;
}

/* --- Imágenes y vídeo: ocupan el ancho de su bloque --- */
.project-content figure { margin: 0; }
.project-content .wp-block-image img,
.project-content .wp-block-video video {
	width: 100%;
	height: auto;
	display: block;
}

/* --- Columnas (p. ej. texto a la izquierda / imagen a la derecha) --- */
.project-content .wp-block-columns {
	gap: var(--space-7);
	align-items: center;
}
.project-content .wp-block-column p,
.project-content .wp-block-column li {
	max-width: none; /* dentro de una columna, el texto llena la columna */
}

/* --- Grupos con fondo (p. ej. la sección del vídeo o del index en gris) --- */
.project-content .wp-block-group.has-background {
	padding: var(--space-9) var(--gutter);   /* aire arriba y abajo para enfatizar la banda */
}

/* --- Colores de la paleta de la marca --- */
.has-black-background-color          { background-color: var(--color-black); }
.has-white-background-color          { background-color: var(--color-white); }
.has-interplay-grey-background-color { background-color: var(--color-grey); }
.has-pale-grey-background-color      { background-color: var(--color-pale-grey); }
.has-black-color          { color: var(--color-black); }
.has-white-color          { color: var(--color-white); }
.has-interplay-grey-color { color: var(--color-grey); }
.has-pale-grey-color      { color: var(--color-pale-grey); }

/* --- Galería normal (ni carrusel ni index) --- */
.project-content .wp-block-gallery:not(.is-style-carousel):not(.is-style-carousel-arrows):not(.is-style-carousel-counter):not(.is-style-index):not(.is-style-before-after) {
	gap: var(--space-2);
}

/* =================================================================
   CARRUSELES  (galería con estilo "Carrusel", "Carrusel (flechas)"
   o "Carrusel (numerado)")
   ================================================================= */
.project-content .wp-block-gallery.is-style-carousel,
.project-content .wp-block-gallery.is-style-carousel-arrows,
.project-content .wp-block-gallery.is-style-carousel-counter {
	display: block;                 /* anula la cuadrícula flex del bloque galería */
	width: 100%;
	margin-inline: auto;
	position: relative;

	/* Puntos de navegación */
	--swiper-pagination-color: var(--color-black);
	--swiper-pagination-bullet-inactive-color: var(--color-grey);
	--swiper-pagination-bullet-inactive-opacity: 0.4;
	--swiper-pagination-bullet-size: 8px;
	--swiper-pagination-bullet-horizontal-gap: 5px;

	/* Flechas de navegación */
	--swiper-navigation-color: var(--color-black);
	--swiper-navigation-size: 28px;
}

.is-style-carousel .swiper-slide,
.is-style-carousel-arrows .swiper-slide,
.is-style-carousel-counter .swiper-slide { display: block; }

.is-style-carousel .swiper-slide figure,
.is-style-carousel .swiper-slide .wp-block-image,
.is-style-carousel-arrows .swiper-slide figure,
.is-style-carousel-arrows .swiper-slide .wp-block-image,
.is-style-carousel-counter .swiper-slide figure,
.is-style-carousel-counter .swiper-slide .wp-block-image { margin: 0; }

/* Sin recorte: la imagen se muestra entera (importante para los planos) */
.is-style-carousel .swiper-slide img,
.is-style-carousel-arrows .swiper-slide img,
.is-style-carousel-counter .swiper-slide img {
	width: 100%;
	height: auto;
	display: block;
}

/* Por debajo de 600px, WordPress deja las figuras de galería al 50% de
   ancho, y las imágenes del carrusel salían a media pantalla en el móvil.
   La regla de WordPress usa el truco ":not(#individual-image)", que tiene
   especificidad de nivel ID: hace falta !important para poder ganarla. */
.wp-block-gallery.is-style-carousel .swiper-slide figure.wp-block-image,
.wp-block-gallery.is-style-carousel-arrows .swiper-slide figure.wp-block-image,
.wp-block-gallery.is-style-carousel-counter .swiper-slide figure.wp-block-image {
	width: 100% !important;
	max-width: 100% !important;
}

/* Estilo con PUNTOS: debajo de la imagen, no superpuestos */
.is-style-carousel .swiper-pagination {
	position: static;
	margin-top: var(--space-2);
}

/* Estilo con FLECHAS (carrusel de planos):
   Tamaño fijo y recogido POR SÍ MISMO, sin depender de la alineación que se
   ponga en el editor (aunque esté en "ancho completo", se centra y se limita). */
.project-content .wp-block-gallery.is-style-carousel-arrows {
	max-width: var(--plans-width);
	width: auto;
	margin-left: auto;
	margin-right: auto;
}
.is-style-carousel-arrows .swiper-slide { text-align: center; }
.is-style-carousel-arrows .swiper-slide img {
	max-width: 78%;          /* [AJUSTABLE] deja hueco a los lados para las flechas */
	margin-inline: auto;
}
.is-style-carousel-arrows .swiper-button-prev { left: 0; }
.is-style-carousel-arrows .swiper-button-next { right: 0; }

/* =================================================================
   CARRUSEL NUMERADO — indicador "1 —— 5" con barra de progreso
   ================================================================= */
.carousel-counter {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);               /* [AJUSTABLE] separación entre piezas (antes 24px) */
}

/* El aire respecto a la imagen va en un selector más específico a propósito:
   WordPress genera ".wp-block-gallery-is-layout-flex > :is(*, div) { margin: 0 }",
   y su propio código comenta que usa ":is(*, div)" en vez de "*" precisamente
   para subir la especificidad. Con ".carousel-counter" a secas perdíamos y el
   margen se quedaba en 0. */
.wp-block-gallery.is-style-carousel-counter > .carousel-counter {
	margin-top: var(--space-3);        /* [AJUSTABLE] aire respecto a la imagen */
}

.carousel-counter__current,
.carousel-counter__total {
	font: var(--font-pub-text);
	font-size: 14px;                   /* [AJUSTABLE] tamaño de los números (antes 16px) */
	letter-spacing: var(--ls-default);
	color: var(--color-black);
	font-variant-numeric: tabular-nums; /* el número no "baila" al cambiar */
	min-width: 1.5em;
	text-align: center;
}

.carousel-counter__total { color: var(--color-grey); }

/* Carril + barra de progreso del avance automático.
   El carril NO usa "opacity": la opacidad se hereda a los hijos y dejaba
   la barra de progreso casi invisible. Se usa un color translúcido. */
.carousel-counter__track {
	position: relative;
	width: min(240px, 26vw);           /* [AJUSTABLE] largo de la barra (antes 280px / 30vw) */
	height: 1px;
	background: rgba(95, 98, 105, 0.35);
	overflow: hidden;
}
.carousel-counter__bar {
	position: absolute;
	inset: 0;
	background: var(--color-black);
	transform: scaleX(0);
	transform-origin: left center;
	will-change: transform;
}

.carousel-counter__arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;                       /* [AJUSTABLE] antes 32px */
	height: 28px;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	color: var(--color-black);
	font-size: 17px;                   /* [AJUSTABLE] tamaño de la flecha (antes 20px) */
	cursor: pointer;
	transition: opacity 0.2s ease;
}
.carousel-counter__arrow:hover { opacity: 0.55; }
.carousel-counter__arrow:focus-visible {
	outline: 2px solid var(--color-black);
	outline-offset: 2px;
}
/* Con loop activo Swiper no deshabilita las flechas, pero por si acaso. */
.carousel-counter__arrow.swiper-button-disabled {
	opacity: 0.25;
	cursor: default;
}

/* Aviso solo para lectores de pantalla */
.carousel-counter__live {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

@media (max-width: 600px) {
	.carousel-counter { gap: var(--space-1); }
	.wp-block-gallery.is-style-carousel-counter > .carousel-counter { margin-top: var(--space-4); }
	.carousel-counter__track { width: min(140px, 36vw); }
}

/* --- Responsive --- */
@media (max-width: 768px) {
	.project-content .wp-block-columns { gap: var(--space-4); }
}

/* =================================================================
   INDEX  (galería con estilo "Index")
   -----------------------------------------------------------------
   Cuadrícula de miniaturas con numeración automática (nº 01, nº 02…)
   mediante contadores CSS, y plegado "view more / view less" con JS.
   Para ampliar al hacer clic, activa el lightbox nativo del bloque
   Galería ("Ampliar al hacer clic").
   ================================================================= */
.project-content h2 {
	font: var(--font-section-heading);   /* encabezado "index" al mismo tamaño que las demás secciones */
	letter-spacing: var(--ls-default);
	color: var(--color-black);
	text-align: center;
}

.project-content .wp-block-gallery.is-style-index {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: var(--space-3);
	counter-reset: idx;
}
.is-style-index .wp-block-image {
	counter-increment: idx;
	margin: 0;
	display: block;
}
.is-style-index .wp-block-image img {
	width: 100%;
	height: auto;
	display: block;
	aspect-ratio: 3 / 4;
	object-fit: cover;
}
.is-style-index .wp-block-image::after {
	content: "nº " counter(idx, decimal-leading-zero);
	display: block;
	margin-top: var(--space-1);
	font: var(--font-collapse);
	letter-spacing: var(--ls-default);
	color: var(--color-black);
}

/* Plegado (con JS): en estado colapsado se ve solo la primera fila */
.is-style-index.is-enhanced.is-collapsed .wp-block-image:nth-child(n+7) {
	display: none;
}

/* Botón "view more / view less" del index */
.project-index-toggle {
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
	margin-top: var(--space-3);
	padding: 0;
	border: 0;
	background: none;
	color: var(--color-black);
	font: var(--font-little-button);
	letter-spacing: var(--ls-default);
	cursor: pointer;
}
.project-index-toggle:hover { text-decoration: underline; text-underline-offset: 4px; }

@media (max-width: 1024px) {
	.project-content .wp-block-gallery.is-style-index { grid-template-columns: repeat(4, 1fr); }
	.is-style-index.is-enhanced.is-collapsed .wp-block-image:nth-child(n+7) { display: block; }
	.is-style-index.is-enhanced.is-collapsed .wp-block-image:nth-child(n+5) { display: none; }
}
@media (max-width: 768px) {
	.project-content .wp-block-gallery.is-style-index { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 480px) {
	.project-content .wp-block-gallery.is-style-index { grid-template-columns: repeat(2, 1fr); }
}