/**
 * Javier Torices — aspecto de los bloques de Gutenberg en las entradas de
 * La mirada (child v2.78.0).
 *
 * El MISMO archivo se carga en la web (single de post, ver functions.php) y en
 * el editor de bloques (add_editor_style), para que lo que Javier maqueta se
 * vea igual en los dos sitios. Por eso cada regla lleva dos selectores:
 *   .jt-mirada-single-body …  → la entrada publicada (single.php)
 *   .is-root-container …      → el lienzo del editor (WordPress le antepone
 *                               .editor-styles-wrapper solo)
 * Los anchos (medida de 800, ancho amplio, a sangre) NO van aquí: en la web los
 * pone custom.css §28b y en el editor los resuelve el propio Gutenberg con el
 * contentSize/wideSize de theme.json.
 *
 * Los colores salen de las variables de la paleta de theme.json, que existen
 * tanto en la web como en el editor.
 */

/* -------------------------------------------------------------------------
 * Texto dentro de bloques con color propio. Los párrafos y títulos de la
 * entrada llevan el azul fijado (custom.css §28): sin esto, un grupo con texto
 * blanco seguiría pintando los párrafos en azul.
 * ---------------------------------------------------------------------- */
.jt-mirada-single-body .has-text-color p,
.jt-mirada-single-body .has-text-color h2,
.jt-mirada-single-body .has-text-color h3,
.jt-mirada-single-body .has-text-color h4,
.jt-mirada-single-body .has-text-color li,
.jt-mirada-single-body .wp-block-cover p,
.jt-mirada-single-body .wp-block-cover h2,
.jt-mirada-single-body .wp-block-cover h3,
.jt-mirada-single-body .wp-block-cover h4,
.is-root-container .has-text-color p,
.is-root-container .has-text-color h2,
.is-root-container .has-text-color h3,
.is-root-container .has-text-color h4,
.is-root-container .has-text-color li,
.is-root-container .wp-block-cover p,
.is-root-container .wp-block-cover h2,
.is-root-container .wp-block-cover h3,
.is-root-container .wp-block-cover h4 {
	color: inherit;
}

/* Fondos OSCUROS de la paleta sin color de texto elegido: texto espuma, para
 * que no quede azul sobre azul (AA: espuma sobre turquesa 4.97, sobre azul
 * 13.7). Si Javier elige un color de texto, manda el suyo. */
.jt-mirada-single-body .has-azul-background-color:not(.has-text-color),
.jt-mirada-single-body .has-verde-oscuro-background-color:not(.has-text-color),
.jt-mirada-single-body .has-verde-mar-background-color:not(.has-text-color),
.jt-mirada-single-body .has-turquesa-background-color:not(.has-text-color),
.is-root-container .has-azul-background-color:not(.has-text-color),
.is-root-container .has-verde-oscuro-background-color:not(.has-text-color),
.is-root-container .has-verde-mar-background-color:not(.has-text-color),
.is-root-container .has-turquesa-background-color:not(.has-text-color) {
	color: var(--wp--preset--color--espuma);
}
.jt-mirada-single-body .has-azul-background-color:not(.has-text-color) :is(p, h2, h3, h4, li),
.jt-mirada-single-body .has-verde-oscuro-background-color:not(.has-text-color) :is(p, h2, h3, h4, li),
.jt-mirada-single-body .has-verde-mar-background-color:not(.has-text-color) :is(p, h2, h3, h4, li),
.jt-mirada-single-body .has-turquesa-background-color:not(.has-text-color) :is(p, h2, h3, h4, li),
.is-root-container .has-azul-background-color:not(.has-text-color) :is(p, h2, h3, h4, li),
.is-root-container .has-verde-oscuro-background-color:not(.has-text-color) :is(p, h2, h3, h4, li),
.is-root-container .has-verde-mar-background-color:not(.has-text-color) :is(p, h2, h3, h4, li),
.is-root-container .has-turquesa-background-color:not(.has-text-color) :is(p, h2, h3, h4, li) {
	color: inherit;
}
/* Enlaces sobre fondo de color: el turquesa de los enlaces no cumple AA sobre
 * oscuro, así que heredan el color del texto y van subrayados. */
.jt-mirada-single-body .has-background a:not(.wp-block-button__link),
.jt-mirada-single-body .wp-block-cover a:not(.wp-block-button__link),
.is-root-container .has-background a:not(.wp-block-button__link),
.is-root-container .wp-block-cover a:not(.wp-block-button__link) {
	color: inherit !important;
	text-decoration: underline;
}

/* -------------------------------------------------------------------------
 * Tamaños de theme.json. Los párrafos de la entrada llevan el interlineado de
 * lectura (1.85), que en un texto grande abre huecos enormes entre líneas.
 * Con un tamaño a mano (va en línea), un término medio. Si Javier fija el
 * interlineado en el bloque, el suyo va en línea y manda.
 * ---------------------------------------------------------------------- */
.jt-mirada-single-body p.has-entradilla-font-size,
.is-root-container p.has-entradilla-font-size {
	line-height: 1.55;
}
.jt-mirada-single-body :is(p, h2, h3, h4):is(.has-titular-font-size, .has-gran-titular-font-size),
.is-root-container :is(p, h2, h3, h4):is(.has-titular-font-size, .has-gran-titular-font-size) {
	line-height: 1.1;
}
.jt-mirada-single-body p[style*="font-size"],
.is-root-container p[style*="font-size"] {
	line-height: 1.3;
}

/* -------------------------------------------------------------------------
 * Grupos con fondo: aire generoso (el de serie de WordPress es de 1.25em).
 * Si Javier fija el relleno en el bloque, su valor va en línea y manda.
 * ---------------------------------------------------------------------- */
.jt-mirada-single-body .wp-block-group.has-background,
.is-root-container .wp-block-group.has-background {
	padding: 56px;
}
.jt-mirada-single-body .wp-block-group.alignfull.has-background,
.is-root-container .wp-block-group.alignfull.has-background {
	padding: 88px 56px;
}
/* El margen del último párrafo no debe sumarse al relleno del grupo. */
.jt-mirada-single-body .wp-block-group > :last-child,
.jt-mirada-single-body .wp-block-cover__inner-container > :last-child,
.jt-mirada-single-body .wp-block-media-text__content > :last-child,
.is-root-container .wp-block-group > :last-child,
.is-root-container .wp-block-cover__inner-container > :last-child,
.is-root-container .wp-block-media-text__content > :last-child {
	margin-bottom: 0;
}

/* -------------------------------------------------------------------------
 * Cita y cita destacada.
 * ---------------------------------------------------------------------- */
.jt-mirada-single-body .wp-block-quote,
.is-root-container .wp-block-quote {
	margin-left: auto;
	margin-right: auto;
	padding: 4px 0 4px 32px;
	border-left: 2px solid var(--wp--preset--color--turquesa);
	font-style: normal;
}
.jt-mirada-single-body .wp-block-quote p,
.is-root-container .wp-block-quote p {
	margin: 0 0 0.5em;
	font-family: 'Instrument Serif', serif;
	font-size: 30px;
	font-weight: 400;
	line-height: 1.3;
}
.jt-mirada-single-body .wp-block-pullquote,
.is-root-container .wp-block-pullquote {
	padding: 48px 0;
	border-top: 1px solid var(--wp--preset--color--gris);
	border-bottom: 1px solid var(--wp--preset--color--gris);
	text-align: center;
}
.jt-mirada-single-body .wp-block-pullquote blockquote,
.is-root-container .wp-block-pullquote blockquote {
	margin: 0;
}
/* Dentro de una banda de color (patrón «Banda a sangre con cita») sobran las
 * líneas y el relleno: ya los pone el grupo. */
.jt-mirada-single-body .has-background .wp-block-pullquote,
.is-root-container .has-background .wp-block-pullquote {
	padding: 0;
	border-top: 0;
	border-bottom: 0;
}
.jt-mirada-single-body .wp-block-pullquote p,
.is-root-container .wp-block-pullquote p {
	margin: 0 0 0.4em;
	font-family: 'Instrument Serif', serif;
	font-size: clamp(32px, 4vw, 44px);
	font-weight: 400;
	line-height: 1.15;
}
.jt-mirada-single-body .wp-block-quote cite,
.jt-mirada-single-body .wp-block-pullquote cite,
.is-root-container .wp-block-quote cite,
.is-root-container .wp-block-pullquote cite {
	display: block;
	font-family: 'Open Sans', sans-serif;
	font-size: 11px;
	font-style: normal;
	font-weight: 600;
	letter-spacing: 0.16em;
	line-height: 1.5;
	text-transform: uppercase;
	color: var(--wp--preset--color--verde-mar);
}
.jt-mirada-single-body .has-text-color cite,
.jt-mirada-single-body .has-background cite,
.is-root-container .has-text-color cite,
.is-root-container .has-background cite {
	color: inherit;
}

/* -------------------------------------------------------------------------
 * Pies de foto, separador y botones.
 * ---------------------------------------------------------------------- */
.jt-mirada-single-body figcaption,
.is-root-container figcaption {
	margin-top: 12px;
	font-family: 'Open Sans', sans-serif;
	font-size: 13px;
	font-style: italic;
	font-weight: 300;
	line-height: 1.5;
	text-align: center;
	color: var(--wp--preset--color--verde-mar);
}
/* Estilos «Leyenda a la izquierda / a la derecha» del bloque Imagen (v2.78.3). */
.jt-mirada-single-body .is-style-leyenda-izquierda figcaption,
.is-root-container .is-style-leyenda-izquierda figcaption {
	text-align: left;
}
.jt-mirada-single-body .is-style-leyenda-derecha figcaption,
.is-root-container .is-style-leyenda-derecha figcaption {
	text-align: right;
}
.jt-mirada-single-body .wp-block-separator:not(.has-background),
.is-root-container .wp-block-separator:not(.has-background) {
	border: 0;
	border-top: 1px solid var(--wp--preset--color--gris);
	opacity: 1;
}
/* Botón: el mismo de «Comprar» en la ficha de libro (verde mar, texto espuma,
 * esquinas rectas). El color lleva !important porque el kit de Elementor pisa
 * el de los enlaces; si Javier elige otro, la clase has-text-color lo libera. */
.jt-mirada-single-body .wp-block-button__link,
.is-root-container .wp-block-button__link {
	padding: 19px 32px;
	border-radius: 0;
	background-color: var(--wp--preset--color--verde-mar);
	font-family: 'Open Sans', sans-serif;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.02em;
	line-height: 1;
	text-decoration: none;
	transition: background-color 0.25s cubic-bezier(.2, .7, .2, 1);
}
.jt-mirada-single-body .wp-block-button__link:not(.has-text-color),
.jt-mirada-single-body .wp-block-button__link:not(.has-text-color):hover,
.jt-mirada-single-body .wp-block-button__link:not(.has-text-color):focus,
.jt-mirada-single-body .wp-block-button__link:not(.has-text-color):visited,
.is-root-container .wp-block-button__link:not(.has-text-color) {
	color: var(--wp--preset--color--espuma) !important;
}
.jt-mirada-single-body .wp-block-button__link:not(.has-background):hover {
	background-color: #2f4d58;
}
/* Estilo «Contorno»: sin relleno y con el texto y el borde en verde mar. */
.jt-mirada-single-body .is-style-outline > .wp-block-button__link:not(.has-background),
.is-root-container .is-style-outline > .wp-block-button__link:not(.has-background) {
	background-color: transparent;
	border: 1px solid currentColor;
}
.jt-mirada-single-body .is-style-outline > .wp-block-button__link:not(.has-text-color),
.jt-mirada-single-body .is-style-outline > .wp-block-button__link:not(.has-text-color):hover,
.jt-mirada-single-body .is-style-outline > .wp-block-button__link:not(.has-text-color):visited,
.is-root-container .is-style-outline > .wp-block-button__link:not(.has-text-color) {
	color: var(--wp--preset--color--verde-mar) !important;
}
.jt-mirada-single-body .is-style-outline > .wp-block-button__link:not(.has-background):hover {
	background-color: var(--wp--preset--color--arena);
}

/* -------------------------------------------------------------------------
 * Móvil: el relleno de los grupos baja al mismo paso que el del cuerpo de la
 * entrada (56 → 40 → 22, custom.css §28).
 * ---------------------------------------------------------------------- */
@media (max-width: 980px) {
	.jt-mirada-single-body .wp-block-group.has-background,
	.is-root-container .wp-block-group.has-background {
		padding: 44px 40px;
	}
	.jt-mirada-single-body .wp-block-group.alignfull.has-background,
	.is-root-container .wp-block-group.alignfull.has-background {
		padding: 72px 40px;
	}
}
@media (max-width: 680px) {
	.jt-mirada-single-body .wp-block-group.has-background,
	.is-root-container .wp-block-group.has-background {
		padding: 32px 22px;
	}
	.jt-mirada-single-body .wp-block-group.alignfull.has-background,
	.is-root-container .wp-block-group.alignfull.has-background {
		padding: 56px 22px;
	}
	.jt-mirada-single-body .wp-block-quote p,
	.is-root-container .wp-block-quote p {
		font-size: 24px;
	}
}