/*
 * Páginas interiores: servicios (Lash Studio), academia, galería completa, contacto y textos legales.
 * Las piezas comunes (jl-seccion, jl-tarjetas, jl-fotos, jl-dato, jl-etiqueta…) están en tema.css.
 * Móvil primero; tableta desde 600 px y ordenador desde 782 px. Solo variables de theme.json.
 * Las reglas llevan dos clases para ganar a los márgenes del núcleo (:root :where(.is-layout-…) > *).
 */

/* ---------- Servicio (pieza repetible de Lash Studio) ---------- */

/* Aire tras la cabecera de la página, entre servicios y antes de la sección siguiente. */
:not(.jl-servicio) + .wp-block-group.jl-servicio {
	margin-block-start: var(--wp--preset--spacing--60);
}

.wp-block-group.jl-servicio + .wp-block-group.jl-servicio {
	margin-block-start: var(--wp--preset--spacing--40);
}

.wp-block-group.jl-servicio + :not(.jl-servicio) {
	margin-block-start: var(--wp--preset--spacing--40);
}

.wp-block-group.jl-servicio:last-child {
	margin-block-end: var(--wp--preset--spacing--60);
}

/* La tarjeta (fondo, borde y colores) viene de is-style-jl-tarjeta; aquí, la forma. */
.wp-block-group.jl-servicio {
	padding: 0;
	overflow: hidden; /* la foto no se sale del borde */
	text-align: left;
}

.jl-servicio > .jl-servicio__foto,
.jl-servicio > .jl-servicio__cuerpo {
	margin: 0;
}

.jl-servicio .jl-servicio__foto img {
	display: block;
	width: 100%;
	height: 220px;
	object-fit: cover;
}

.jl-servicio .jl-servicio__cuerpo {
	padding: var(--wp--preset--spacing--40);
}

.jl-servicio .jl-servicio__cuerpo h2 {
	margin: 0;
	font-size: var(--wp--preset--font-size--grande);
	line-height: 1.2;
}

/* Duración y precio: línea pequeña en rosa, como los enlaces de las tarjetas. */
.jl-servicio .jl-servicio__datos {
	margin-block-start: var(--wp--preset--spacing--20);
	font-size: var(--wp--preset--font-size--pequeno);
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--wp--preset--color--rosa);
}

.jl-servicio .jl-servicio__cuerpo > p:not(.jl-servicio__datos) {
	margin-block-start: var(--wp--preset--spacing--30);
	line-height: 1.7;
}

.jl-servicio .jl-servicio__cuerpo > .jl-acciones {
	margin-block-start: var(--wp--preset--spacing--40);
	justify-content: flex-start;
}

/* Ordenador: foto a la izquierda y texto a la derecha. */
@media (min-width: 782px) {
	.wp-block-group.jl-servicio {
		display: grid;
		grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
	}

	.jl-servicio .jl-servicio__foto img {
		height: 100%;
		min-height: 260px;
	}

	.jl-servicio .jl-servicio__cuerpo {
		align-self: center;
		padding: var(--wp--preset--spacing--50);
	}
}

/* ---------- Academia ---------- */

/* Etiqueta centrada bajo el texto de cada nivel y en la sección de cursos. */
.jl-academia-niveles .jl-etiqueta,
.jl-academia-cursos .jl-etiqueta {
	width: fit-content;
	margin-inline: auto;
}

.jl-academia .jl-academia-niveles {
	margin-block-start: var(--wp--preset--spacing--50);
}

/* Lo que incluye cada curso: recuadro estrecho con la lista alineada a la izquierda. */
.jl-academia .jl-academia-incluye {
	max-width: 640px;
	margin-block-start: var(--wp--preset--spacing--60);
	padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40);
	border: 1px solid var(--wp--preset--color--borde);
	text-align: left;
}

.jl-academia .jl-academia-incluye h3 {
	margin-block: 0 var(--wp--preset--spacing--30);
	text-align: center;
}

.jl-academia .jl-academia-incluye .jl-lista {
	margin-block-end: 0;
}

.jl-academia-incluye .jl-lista li + li {
	margin-block-start: var(--wp--preset--spacing--20);
}

/* Lista de cursos (patrón academia-cursos): las tarjetas jl-tarjeta de tema.css en rejilla, una columna en el móvil
   y tres en el ordenador, con la última fila centrada, igual de altas y con «Ver curso» abajo. El bucle es una lista (<ul>): sin la raya ni el
   hueco entre entradas de los listados del blog (tema.css). */
.jl-academia-cursos .wp-block-post-template {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--wp--preset--spacing--40);
	padding: 0;
	list-style: none;
}

.jl-academia-cursos .wp-block-post-template > .wp-block-post {
	margin: 0;
	padding: 0;
	border: 0;
}

.jl-academia-cursos .wp-block-post > .wp-block-group.jl-tarjeta {
	height: 100%;
}

/* La portada del curso, como las fotos de las tarjetas (.jl-tarjeta__foto de tema.css es para el bloque Imagen). */
.jl-academia-cursos .wp-block-post-featured-image.jl-tarjeta__foto {
	margin: 0;
}

.jl-academia-cursos .wp-block-post-featured-image.jl-tarjeta__foto img {
	display: block;
	width: 100%;
	height: 275px;
	object-fit: cover;
}

.jl-academia-cursos .wp-block-group.jl-tarjeta__cuerpo {
	display: flex;
	flex-direction: column;
}

/* Nivel · duración: línea pequeña en gris rosado; el punto lo pone el estilo y el lector de pantalla no lo lee. */
.jl-academia-cursos .wp-block-group.jl-curso__datos {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	column-gap: 0.6em;
	color: var(--wp--preset--color--gris-rosado);
	font-size: var(--wp--preset--font-size--rotulo);
	letter-spacing: 2px;
	line-height: 1.5;
	text-transform: uppercase;
}

.jl-academia-cursos .jl-curso__datos > p {
	margin: 0;
	font-size: inherit;
	line-height: inherit;
}

.jl-academia-cursos .jl-curso__datos > p + p::before {
	content: "·";
	content: "·" / "";
	margin-inline-end: 0.6em;
}

/* Precio en rosa, como en la tienda. */
.jl-academia-cursos p.jl-curso__precio {
	color: var(--wp--preset--color--rosa);
	font-family: var(--wp--preset--font-family--titulares);
	font-size: var(--wp--preset--font-size--texto);
	line-height: 1.4;
}

.jl-academia-cursos .wp-block-group.jl-tarjeta__cuerpo > .wp-block-buttons.jl-acciones {
	margin-block-start: auto;
	padding-block-start: var(--wp--preset--spacing--30);
}

@media (min-width: 782px) {
	.jl-academia-cursos .wp-block-post-template {
		grid-template-columns: repeat(6, minmax(0, 1fr));
	}

	.jl-academia-cursos .wp-block-post-template > .wp-block-post {
		grid-column: span 2;
	}

	/* Misma anchura de tarjeta; una o dos en la última fila quedan centradas, también al añadir cursos. */
	.jl-academia-cursos .wp-block-post-template > .wp-block-post:nth-child(3n + 1):last-child {
		grid-column: 3 / span 2;
	}

	.jl-academia-cursos .wp-block-post-template > .wp-block-post:nth-child(3n + 1):nth-last-child(2) {
		grid-column: 2 / span 2;
	}
}

/* Sin cursos, el «Próximamente» queda dentro del bucle, donde la maquetación de la sección ya no reparte el aire
   ni centra la entradilla: el mismo hueco entre piezas que antes, y la entradilla centrada. */
.jl-academia-cursos .wp-block-query-no-results > * {
	margin-block: 0;
}

.jl-academia-cursos .wp-block-query-no-results > * + * {
	margin-block-start: var(--wp--style--block-gap);
}

.jl-academia-cursos .wp-block-query-no-results > .jl-entradilla {
	margin-inline: auto;
}

.jl-academia-cursos .jl-acciones {
	margin-block-start: var(--wp--preset--spacing--40);
}

/* ---------- Galería completa ---------- */

/* Va en la raíz de la página, fuera de una sección: se separa de la cabecera; abajo la siguiente sección ya trae relleno. */
.wp-block-gallery.jl-galeria-completa {
	margin-block: var(--wp--preset--spacing--60) 0;
}

.wp-block-gallery.jl-galeria-completa:last-child {
	margin-block-end: var(--wp--preset--spacing--60);
}

/*
 * Móvil: dos fotos por fila en vez de una larga columna. :not(#individual-image) es el mismo truco del núcleo
 * para el ancho de las fotos de una galería; sin él no se le gana. Desde 600 px manda jl-fotos de tema.css
 * (2 por fila en la tableta y 3 en el ordenador, con el alto fijo de 370 px).
 */
@media (max-width: 599.98px) {
	.wp-block-gallery.has-nested-images.jl-fotos.jl-galeria-completa figure.wp-block-image:not(#individual-image) {
		width: calc(50% - var(--wp--style--unstable-gallery-gap, 16px) / 2);
	}

	.wp-block-gallery.has-nested-images.jl-fotos.jl-galeria-completa figure.wp-block-image:not(#individual-image) img {
		flex: none;
		width: 100%;
		height: auto;
		aspect-ratio: 3 / 4;
		object-fit: cover;
	}
}

/* ---------- Contacto ---------- */

/* Rejilla de datos: una columna en el móvil y hasta tres en el ordenador; la última fila, centrada. */
.jl-contacto .jl-contacto__datos {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--wp--preset--spacing--40);
}

.jl-contacto__datos > .jl-dato {
	flex: 1 1 16rem;
	max-width: 24rem;
	margin: 0;
	padding: var(--wp--preset--spacing--40);
	background: var(--wp--preset--color--ciruela);
	border: 1px solid var(--wp--preset--color--borde);
}

.jl-contacto__datos .jl-dato > * + * {
	margin-block-start: var(--wp--preset--spacing--20);
}

.jl-contacto__datos .jl-dato .wp-block-buttons {
	justify-content: center;
}

/* Correo y teléfono: enlace con zona táctil de 44 px; las direcciones largas parten línea. */
.jl-contacto__datos .jl-dato__valor,
.jl-legal__titular .jl-dato__valor {
	overflow-wrap: anywhere;
}

.jl-contacto__datos p.jl-dato__valor a,
.jl-legal__titular p.jl-dato__valor a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
}

/* ---------- Textos legales (plantilla «Página») ---------- */

.jl-legal {
	text-align: left;
}

/* Títulos de apartado más pequeños que los de las secciones de diseño. */
.jl-legal h2 {
	margin-block: var(--wp--preset--spacing--50) var(--wp--preset--spacing--20);
	font-size: var(--wp--preset--font-size--grande);
	line-height: 1.2;
}

/* Aviso de borrador, con una línea rosa a la izquierda. */
.jl-legal > .jl-nota:first-child {
	padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
	border-inline-start: 2px solid var(--wp--preset--color--rosa);
}

.jl-legal .jl-legal__titular {
	margin-block-start: var(--wp--preset--spacing--40);
	padding: var(--wp--preset--spacing--40);
	background: var(--wp--preset--color--ciruela);
	border: 1px solid var(--wp--preset--color--borde);
}

.jl-legal .jl-legal__titular h2 {
	margin-block-start: 0;
}

.jl-legal .jl-legal__titular > * + * {
	margin-block-start: var(--wp--preset--spacing--20);
}

/* Tableta y ordenador: etiqueta a la izquierda y dato a la derecha. */
@media (min-width: 600px) {
	.jl-legal__titular .jl-dato {
		display: grid;
		grid-template-columns: 9rem minmax(0, 1fr);
		column-gap: var(--wp--preset--spacing--30);
		align-items: baseline;
	}

	.jl-legal__titular .jl-dato > * {
		margin: 0;
	}
}

/* Tablas sueltas de los textos legales (pegados como bloque «Clásico»): bordes suaves, y en el móvil
   se desplazan dentro de su caja en vez de ensanchar la página. */
.wp-block-post-content > table {
	display: block;
	max-width: 100%;
	overflow-x: auto;
	border-collapse: collapse;
	margin-block: var(--wp--preset--spacing--40);
	font-size: var(--wp--preset--font-size--pequeno);
}

.wp-block-post-content > table :is(th, td) {
	min-width: 9rem;
	padding: 0.6em 0.8em;
	border: 1px solid var(--wp--preset--color--borde);
	text-align: left;
	vertical-align: top;
}

.wp-block-post-content > table th {
	color: var(--wp--preset--color--rosa);
}