/* ==========================================================================
   Sección 10 · «Publicaciones cuentos Mindfulness» (bloque_texto 153385, ancla #publicaciones)
   Original: .bg.bloque-texto con fondo #f2f2f2 y fila a sangre:
     col-lg-4 portada del libro (background-size: cover, centrada) + col-lg-8 texto
     (padding 75px 6%, título centrado #137592, texto #8c765f 20px/30px).
   Móvil (<992px): portada a todo el ancho con su proporción y el texto debajo.
   Medidas tomadas de ref/desktop/10.png (1440) y ref/mobile/10.png (390).
   ========================================================================== */
.vf-s10 {
	--vf-s10-title: var(--wp--preset--color--primary);
	--vf-s10-text: var(--wp--preset--color--contrast);
	/* Hueco bajo la última línea = margen inferior del último <p> (20px) + padding 6% de la columna,
	   como en el original (86,39px a 1440, 61,44px a 1024, 23,39px a 390). */
	--vf-s10-pb: calc(6% + 20px);
	background-color: var(--vf-gray-2);
	color: var(--vf-s10-text);
}

/* --- Columna de la imagen: la portada cubre la columna (cover centrado) --- */
.vf-s10 .vf-s10__media {
	min-height: 1px;
}

.vf-s10 .vf-s10__media .vf-cover-img img {
	object-position: 50% 50%;
}

/* --- Columna de texto --- */
.vf-s10 .wp-block-column.vf-textcol {
	padding: 75px 6% var(--vf-s10-pb);
	text-align: left;
}

/* El core pone flex-grow:0 a las columnas con flex-basis (0,4,0): sin esto la fila se queda en
   1439,83px en vez de 1440 (33,33% + 66,66%). La columna de texto absorbe el resto, como col-lg-8. */
:root .vf-s10 .wp-block-columns > .wp-block-column.vf-textcol {
	flex-grow: 1;
}

.vf-s10 .vf-textcol > * {
	margin-top: 0;
	margin-bottom: 0;
	text-wrap: wrap;                  /* TT25 pone «pretty» en h1-h6 y p; el original corta normal */
}

/* Título del bloque (h2.bloque-title): 47px/1.1, centrado, margen 10 0 45 */
.vf-s10 .vf-textcol > .vf-title {
	margin: 10px 0 45px;
	font-size: 47px;
	color: var(--vf-s10-title);
}

/* Títulos del texto libre: h1 47px y h3 28px, ambos con el color de título del bloque.
   Márgenes del navegador del original: h1 0,67em (31,49px) que colapsa con el h3 (1em = 28px). */
.vf-s10 .vf-textcol > h1,
.vf-s10 .vf-textcol > h3 {
	color: var(--vf-s10-title);
	font-weight: 700;
	line-height: 1.1;
	text-align: left;
}

.vf-s10 .vf-textcol > h1 {
	font-size: 47px;
}

.vf-s10 .vf-textcol > h3 {
	font-size: 28px;
	margin: calc(47px * 0.67) 0 28px;
}

.vf-s10 .vf-textcol > p {
	margin-top: 20px;
	font-size: var(--wp--preset--font-size--medium);
	line-height: 30px;
	color: var(--vf-s10-text);
}

.vf-s10 .vf-textcol > h3 + p {
	margin-top: 28px;                 /* 20px del <p> colapsado con los 28px del h3 */
}

.vf-s10 .vf-textcol a:where(:not(.wp-element-button)) {
	color: var(--vf-s10-text);
}

/* --- Aparición (WOW fadeIn 2s del original). La clase .vf-anim solo la pone el JS --- */
.vf-s10.vf-anim .vf-s10__media,
.vf-s10.vf-anim .vf-textcol {
	opacity: 0;
	transition: opacity 2s ease;
}

.vf-s10.vf-anim .is-in {
	opacity: 1;
}

/* --- Tableta y móvil: apilado (col-12), imagen a todo el ancho con su proporción --- */
@media (max-width: 991.98px) {
	:root .vf-s10 .vf-s10__media .vf-cover-img,
	:root .vf-s10 .vf-s10__media .vf-cover-img img {
		height: auto;
	}

	/* El original mantiene padding 75px 6% en la columna de texto también en móvil */
	:root .vf-s10 .wp-block-column.vf-textcol {
		padding: 75px 6% var(--vf-s10-pb);
	}
}

@media (max-width: 768px) {
	.vf-s10 .vf-textcol > .vf-title {
		margin-bottom: 60px;
		padding-inline: 15px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.vf-s10.vf-anim .vf-s10__media,
	.vf-s10.vf-anim .vf-textcol {
		opacity: 1;
		transition: none;
	}
}