/* ==========================================================================
   12 · Psicoblog (#psicoblog) — bloque_blog del original (.bloque-150092)
   Título + descripción a todo el ancho (container-fluid), rejilla en mosaico
   (core/query + core/post-template) a 1110px y paginación debajo.
   ========================================================================== */
.vf-s12 {
	--vf-s12-desc-gap: 156px;          /* hueco vacío del original sobre la descripción: 6 líneas de   de 26px */
	--vf-s12-card-shadow: 0 0 2px 0 rgba(0, 0, 0, .2);
	--vf-s12-card-shadow-hover: 0 10px 15px rgba(0, 0, 0, .1);
	--vf-s12-pag-bg: #c0c0c0;          /* botones de paginación desactivados */
	--vf-s12-pag-text: #808080;
	--vf-s12-pag-current-bg: #808080;  /* página actual */
	--vf-s12-pag-link-bg: #e7e7e7;     /* página enlazable */
	--vf-s12-pag-link-text: #484848;
	background-color: var(--wp--preset--color--base);
}

/* Título (h2.bloque-title-small): 0 0 15px; en móvil el original deja 60px debajo */
@media (max-width: 768px) {
	:root .vf-s12 .vf-title--sm { margin-bottom: 60px; }
}

/* --- Descripción ---------------------------------------------------------- */
:root .vf-s12 .vf-s12__desc {
	margin-block: 0;
	padding-top: var(--vf-s12-desc-gap);
	padding-bottom: 26px;              /* + 20px del último párrafo = 46px hasta la rejilla (472px en total, como el original) */
	text-align: center;
	color: var(--wp--preset--color--neutral);
}

:root .vf-s12 .vf-s12__desc > p {
	margin: 20px 0;
	font-size: var(--wp--preset--font-size--medium);
	line-height: 35px;
	color: var(--wp--preset--color--neutral);
	text-wrap: wrap;                   /* el original no usa «pretty» */
}

/* --- Rejilla de entradas ---------------------------------------------------- */
:root .vf-s12 .vf-s12__query {
	margin-block: 0;
}

/* Columnas de Bootstrap: .col con max-width 33% (50% < 992px, 100% < 768px) y 15px de padding */
:root .vf-s12 .wp-block-post-template.vf-s12__grid {
	display: grid;
	grid-template-columns: repeat(3, calc((100% + 30px) * .33 - 30px));
	justify-content: start;
	align-items: start;                /* cada tarjeta con su alto, como el original */
	gap: 0 30px;
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (max-width: 991px) {
	:root .vf-s12 .wp-block-post-template.vf-s12__grid {
		grid-template-columns: repeat(2, calc((100% + 30px) * .5 - 30px));
	}
}

@media (max-width: 767px) {
	:root .vf-s12 .wp-block-post-template.vf-s12__grid {
		grid-template-columns: minmax(0, 1fr);
		padding-inline: 15px;
	}
}

/* Tarjeta (.slide-element) */
:root .vf-s12 .vf-s12__grid > .wp-block-post {
	position: relative;
	min-width: 0;
	min-height: 500px;
	margin: 15px 0;
	background: var(--wp--preset--color--base);
	box-shadow: var(--vf-s12-card-shadow);
	transition: box-shadow .3s;
}

:root .vf-s12 .vf-s12__grid > .wp-block-post:hover {
	box-shadow: var(--vf-s12-card-shadow-hover);
}

:root .vf-s12 .vf-s12__grid > .wp-block-post:focus-within {
	outline: 3px solid #005fcc;
	outline-offset: 2px;
}

:root .vf-s12 .vf-s12__grid > .wp-block-post:focus-within a:focus-visible {
	outline: none;
}

/* Imagen cuadrada recortada al centro (.blog-img: padding-top 100%, background cover) */
:root .vf-s12 .wp-block-post-featured-image {
	margin: 0;
	aspect-ratio: 1;
	overflow: hidden;
}

:root .vf-s12 .wp-block-post-featured-image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 50%;
}

/* Texto (.blog-content) */
:root .vf-s12 .vf-s12__content {
	margin: 0;
	padding: 0 30px 20px;
	text-align: left;
}

:root .vf-s12 .vf-s12__content > * {
	margin-block: 0;
}

/* Título (.blog-title): 20px/26px, normal, mayúsculas, rosa */
:root .vf-s12 .wp-block-post-title {
	margin: 0;
	padding: 25px 0;
	font-family: inherit;
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 400;
	line-height: 26px;
	text-transform: uppercase;
	text-align: left;
	text-wrap: wrap;
	color: var(--wp--preset--color--accent);
}

:root .vf-s12 .wp-block-post-title a,
:root .vf-s12 .wp-block-post-title a:hover,
:root .vf-s12 .wp-block-post-title a:focus {
	color: var(--wp--preset--color--accent);
	text-decoration: none;
}

/* Toda la tarjeta enlaza a la entrada, como el <a> que la envuelve en el original */
:root .vf-s12 .wp-block-post-title a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

/* Extracto (.blog-desc): justificado, #333, 20px/22px */
:root .vf-s12 .wp-block-post-excerpt {
	margin: 0;
}

:root .vf-s12 .wp-block-post-excerpt__excerpt {
	margin: 0;
	font-size: var(--wp--preset--font-size--medium);
	line-height: 22px;
	text-align: justify;
	text-wrap: wrap;
	color: var(--vf-dark);
}

/* --- Paginación (.pagination-buttons) ------------------------------------- */
:root .vf-s12 .vf-s12__pagination,
:root .vf-s12 .vf-s12__pages {
	margin: 50px 0 0;
	gap: 10px;
	flex-wrap: wrap;
}

:root .vf-s12 .vf-s12__pagination > p,
:root .vf-s12 .vf-s12__pages a,
:root .vf-s12 .vf-s12__pages .page-numbers {
	margin: 0;
	padding: 10px 20px;
	border-radius: 5px;
	font-size: var(--wp--preset--font-size--medium);
	line-height: 26px;
	text-decoration: none;
	background: var(--vf-s12-pag-link-bg);
	color: var(--vf-s12-pag-link-text);
}

:root .vf-s12 .vf-s12__pagination > .is-disabled {
	background: var(--vf-s12-pag-bg);
	color: var(--vf-s12-pag-text);
	cursor: not-allowed;
}

:root .vf-s12 .vf-s12__pagination > .is-current,
:root .vf-s12 .vf-s12__pages .page-numbers.current {
	background: var(--vf-s12-pag-current-bg);
	color: var(--wp--preset--color--base);
	cursor: not-allowed;
}

:root .vf-s12 .vf-s12__pages .wp-block-query-pagination-numbers {
	display: flex;
	gap: 10px;
	margin: 0;
}

/* Con más de una página se pinta la paginación real y sobra la réplica estática */
:root .vf-s12 .vf-s12__pages ~ .vf-s12__pagination {
	display: none;
}