/*
 * Portada: lo propio de las secciones de inicio (patrones portada-* y franja-poder).
 * Las piezas comunes (jl-seccion, jl-tarjetas, jl-fotos, jl-acciones…) están en tema.css.
 * Móvil primero; ordenador desde 782 px, el corte del bloque Columnas. Solo variables de theme.json.
 */

/* ---------- Cabecera de la portada (hero) ---------- */

/* Pegada a la cabecera y a la sección siguiente: el degradado va de borde a borde. */
.wp-block-group.jl-hero {
	margin-block: 0;
	padding-block: 0;
}

/* Las dos columnas sin hueco entre ellas (las Columnas traen 2em de serie). */
.wp-block-columns.jl-hero__columnas {
	gap: 0;
	margin-block: 0;
}

/* Texto: en el móvil va primero y la foto debajo, como el concepto. */
.jl-hero__texto {
	padding: 60px 7%;
}

.jl-hero h1 {
	font-size: var(--wp--preset--font-size--portada);
	margin-block: 25px;
}

.jl-hero .jl-entradilla {
	max-width: 480px;
	margin-inline: 0;
}

.jl-hero .jl-acciones {
	margin-block-start: 32px;
}

/* Foto: la imagen llena la columna; el velo y el sello van encima. */
.jl-hero__foto {
	position: relative;
	min-height: 380px;
	overflow: hidden;
}

.jl-hero__foto .wp-block-image.jl-hero__imagen {
	position: absolute;
	inset: 0;
	margin: 0;
}

.jl-hero__foto .jl-hero__imagen img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: saturate(.75) contrast(1.08);
}

/* Velo del concepto: sombra a la izquierda (une la foto con el texto) y abajo (da contraste al sello).
   Primero sin color-mix(), por si el navegador no lo entiende. No tapa los clics: en el editor se elige la foto. */
.jl-hero__foto::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(90deg, var(--wp--custom--color--sombra) 0%, transparent 35%);
	background:
		linear-gradient(90deg, var(--wp--custom--color--sombra) 0%, transparent 35%),
		linear-gradient(0deg, color-mix(in srgb, var(--wp--custom--color--sombra) 67%, transparent), transparent 40%);
}

/* Sello «The art of beauty»: abajo a la derecha, por encima del velo. */
.jl-hero__foto .is-style-jl-sello {
	position: absolute;
	right: 7%;
	bottom: 5%;
	z-index: 1;
	max-width: 86%;
	margin: 0;
	/* Placa oscura para que se lea también sobre una foto clara (sin ella, unos 2,4:1 sobre blanco). */
	background-color: var(--wp--custom--color--sombra);
	background-color: color-mix(in srgb, var(--wp--custom--color--sombra) 75%, transparent);
}

@media (min-width: 782px) {
	/* Alto fijo en el ordenador: con una foto vertical, el sello quedaría fuera de la primera pantalla. */
	.wp-block-group.jl-hero,
	.wp-block-columns.jl-hero__columnas {
		min-height: min(88vh, 760px);
	}

	/* El concepto pone 8 % y 14 % de media pantalla; aquí el porcentaje es de la pantalla entera. */
	.jl-hero__texto {
		padding: 80px 4% 90px 7%;
	}

	/* La columna de la foto se estira a todo el alto del hero. */
	.wp-block-columns.jl-hero__columnas > .jl-hero__foto {
		align-self: stretch;
		min-height: 0;
	}

	.jl-hero__foto .is-style-jl-sello {
		bottom: 8%;
	}
}

/* ---------- Reseñas y Reserva ---------- */

.jl-resenas .jl-entradilla,
.jl-reserva .jl-entradilla {
	color: var(--wp--custom--color--texto-seccion);
}

/* ---------- Reseñas con tarjetas (patrones resena, resenas-portada y resenas-todas) ---------- */

/* Rejilla: una columna en el móvil, dos en tableta y tres en el ordenador, con el hueco de las tarjetas del concepto.
   Clases encadenadas para ganar a los márgenes del núcleo entre bloques. */
.wp-block-group.jl-resenas__rejilla {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 22px;
	text-align: left;
}

.wp-block-group.jl-resenas__rejilla > * {
	margin: 0;
}

.wp-block-group.jl-resenas__rejilla + .wp-block-buttons.jl-acciones {
	margin-block-start: var(--wp--preset--spacing--50);
}

/* En tableta, con un número impar de tarjetas (las tres de la portada), la última va centrada y no sola a la izquierda. */
@media (min-width: 600px) {
	.wp-block-group.jl-resenas__rejilla {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.wp-block-group.jl-resenas__rejilla > :last-child:nth-child(odd) {
		grid-column: 1 / -1;
		justify-self: center;
		width: calc(50% - 11px);
	}
}

@media (min-width: 782px) {
	.wp-block-group.jl-resenas__rejilla {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.wp-block-group.jl-resenas__rejilla > :last-child:nth-child(odd) {
		grid-column: auto;
		justify-self: stretch;
		width: auto;
	}
}

/* La tarjeta (fondo, borde y colores) viene de is-style-jl-tarjeta; aquí, la forma: el texto crece y el nombre, el
   servicio y «Cita verificada» quedan abajo, alineados entre tarjetas de la misma fila. Las palabras largas (una
   dirección web en una opinión) se parten para no salirse en el móvil. */
.wp-block-group.jl-resena {
	display: flex;
	flex-direction: column;
	padding: 25px;
	text-align: left;
	overflow-wrap: anywhere;
}

.wp-block-group.jl-resena > * {
	margin-block: 0;
}

/* El texto, y los párrafos de más si la opinión tiene varios (Intro dentro del texto crea uno sin clase propia). */
.jl-resena p.jl-resena__texto,
.jl-resena > p:not([class*="jl-resena__"]) {
	margin-block-start: 14px;
	font-size: var(--wp--preset--font-size--pequeno);
	line-height: 1.7;
}

.jl-resena p.jl-resena__texto {
	flex: 1 1 auto;
}

.jl-resena p.jl-resena__nombre {
	margin-block-start: 20px;
	color: var(--wp--preset--color--blanco);
	font-family: var(--wp--preset--font-family--titulares);
	font-size: calc(var(--wp--preset--font-size--texto) * 1.25);
	line-height: 1.3;
}

.jl-resena p.jl-resena__servicio {
	margin-block-start: 4px;
	color: var(--wp--preset--color--gris-rosado);
	font-size: var(--wp--preset--font-size--rotulo);
	letter-spacing: 1px;
	line-height: 1.5;
	text-transform: uppercase;
}

/* «Cita verificada», con una marca de visto dibujada (no es texto: el lector de pantalla no la lee). */
.jl-resena p.jl-resena__verificada {
	display: flex;
	align-items: center;
	gap: 0.6em;
	margin-block-start: 12px;
	color: var(--wp--preset--color--rosa);
	font-size: var(--wp--preset--font-size--rotulo);
	letter-spacing: 2px;
	line-height: 1.5;
	text-transform: uppercase;
}

.jl-resena p.jl-resena__verificada::before {
	content: "";
	flex: none;
	width: 0.45em;
	height: 0.8em;
	margin-block-start: -0.2em;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: rotate(45deg);
}

/* Estrellas: el texto («4 de 5 estrellas») se ve en el editor; en la web, functions.php lo cambia por las estrellas
   y lo deja solo para el lector de pantalla. */
:is(.jl-resena__estrellas, .jl-resenas__nota) {
	color: var(--wp--preset--color--rosa);
	font-size: var(--wp--preset--font-size--pequeno);
	line-height: 1;
}

.jl-estrellas {
	display: inline-flex;
	gap: 3px;
	vertical-align: middle;
}

.jl-estrella {
	width: 1em;
	height: 1em;
	fill: currentColor;
}

/* La que falta, en contorno: se distingue por la forma también en alto contraste (y el borde llega a 4:1). */
.jl-estrella.jl-estrella-apagada {
	color: var(--wp--custom--color--borde-campo);
	fill: none;
	stroke: currentColor;
	stroke-width: 1.5px;
}

@media (forced-colors: active) {
	.jl-estrella.jl-estrella-apagada {
		color: CanvasText;
	}
}

.jl-resena .jl-resena__estrellas {
	font-size: var(--wp--preset--font-size--texto);
}

/* Por si la hoja del núcleo no estuviera: el texto de la nota, solo para el lector de pantalla. */
:is(.jl-resena__estrellas, .jl-resenas__nota) .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	border: 0;
	white-space: nowrap;
}

/* Resumen de la página de reseñas: la media grande en Playfair rosa, las estrellas y cuántas opiniones hay. */
.wp-block-group.jl-resenas__resumen {
	margin-block: 0 var(--wp--preset--spacing--50);
}

.wp-block-group.jl-resenas__resumen > * {
	margin-block: 0;
}

.jl-resenas__resumen p.jl-resenas__nota {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	font-size: var(--wp--preset--font-size--grande);
}

/* La cifra la pinta el CSS (data-cifra, functions.php): así no se repite en los extractos ni al copiar el texto. */
.jl-resenas__cifra::before {
	content: attr(data-cifra);
	font-family: var(--wp--preset--font-family--titulares);
	font-size: var(--wp--preset--font-size--portada);
	line-height: 1;
}

.jl-resenas__resumen p.jl-resenas__total {
	margin-block-start: var(--wp--preset--spacing--30);
	margin-inline: auto;
}

/* ---------- Franja rosa «Tu mirada. Tu esencia. Tu poder.» ---------- */

/* Clases encadenadas para ganar al relleno común de jl-seccion. */
.wp-block-group.jl-seccion.jl-franja {
	padding: 65px 20px;
}

/* Rótulo en ciruela: el rosa sobre la franja rosa no se leería. */
.jl-franja .is-style-jl-rotulo {
	color: var(--wp--preset--color--ciruela-oscuro);
}

.wp-block-group.jl-seccion.jl-franja .wp-block-heading {
	font-size: var(--wp--preset--font-size--franja);
	margin-block: 10px;
}

.wp-block-group.jl-seccion.jl-franja .jl-entradilla {
	color: var(--wp--custom--color--tinta-franja);
	margin-block: 15px 25px;
}

/* Foco oscuro dentro de la franja (un contorno rosa sobre rosa no se ve). */
.jl-franja a:focus-visible,
.jl-franja .wp-element-button:focus-visible {
	outline: 2px solid var(--wp--custom--color--tinta-franja);
	outline-offset: 3px;
}