/* =================================================================
   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;
}

/* 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); }
.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-index) {
	gap: var(--space-2);
}

/* =================================================================
   CARRUSELES  (galería con estilo "Carrusel" o "Carrusel (flechas)")
   ================================================================= */
.project-content .wp-block-gallery.is-style-carousel,
.project-content .wp-block-gallery.is-style-carousel-arrows {
	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 { 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 { 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 {
	width: 100%;
	height: auto;
	display: block;
}

/* 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; }

/* --- 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); }
}