/* ==========================================================================
   Blog · índice (home.php) y artículo (single.php)
   Consume los tokens del sistema de diseño. Se auto-encola vía glob.
   ========================================================================== */

/* --- Índice: hero del último artículo ------------------------------------- */
.vv-blog-hero {
	padding-block: var(--space-12) var(--space-10);
}

.vv-blog-hero__inner {
	display: grid;
	grid-template-columns: 1.5fr 1fr;
	align-items: stretch;
	min-height: 360px;
}

.vv-blog-hero__media {
	position: relative;
	display: flex;
	align-items: flex-end;
	padding: var(--space-8);
	border-radius: var(--radius-lg) 0 0 var(--radius-lg);
	background-size: cover;
	background-position: center;
	overflow: hidden;
	color: #fff;
	min-height: 360px;
}

.vv-blog-hero__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(40, 34, 28, 0.15) 0%, rgba(40, 34, 28, 0.7) 100%);
}

.vv-blog-hero__media--placeholder {
	background: linear-gradient(135deg, var(--terra-600), var(--gold-800));
}

.vv-blog-hero__title {
	position: relative;
	z-index: 1;
	font-family: var(--font-display);
	font-weight: var(--fw-semibold);
	font-size: var(--text-2xl);
	line-height: 1.1;
	color: #fff;
	margin: 0;
	max-width: 520px;
}

.vv-blog-hero__card {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: var(--space-3);
	background: var(--white);
	border: 1px solid var(--line-warm);
	border-left: 0;
	border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
	padding: var(--space-10);
}

.vv-blog-hero__eyebrow {
	font-family: var(--font-sans);
	font-size: var(--text-xs);
	letter-spacing: var(--tracking-label);
	text-transform: uppercase;
	color: var(--terra-600);
}

.vv-blog-hero__cardtitle {
	font-family: var(--font-display);
	font-weight: var(--fw-semibold);
	font-size: var(--text-xl);
	color: var(--ink-900);
	margin: 0;
}

.vv-blog-hero__excerpt {
	font-family: var(--font-body);
	font-size: var(--text-sm);
	line-height: var(--leading-relaxed);
	color: var(--ink-600);
	margin: 0;
}

.vv-blog-hero__more {
	font-family: var(--font-sans);
	font-weight: var(--fw-semibold);
	font-size: var(--text-sm);
	color: var(--terra-600);
}

/* --- Índice: filtros + grid ----------------------------------------------- */
.vv-blog-list {
	padding-block: var(--space-8) var(--space-16);
}

.vv-blog-list__filters {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
	margin-bottom: var(--space-10);
}

.vv-postgrid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-8);
}

.vv-blog-list__empty {
	text-align: center;
	color: var(--ink-500);
	padding-block: var(--space-12);
}

/* --- Tarjeta de artículo (overlay sobre foto) ----------------------------- */
.vv-postcard { margin: 0; }
.vv-postcard__link { display: block; }

.vv-postcard__media {
	position: relative;
	display: flex;
	align-items: flex-end;
	aspect-ratio: 3 / 4;
	border-radius: var(--radius-lg);
	overflow: hidden;
	background-size: cover;
	background-position: center;
	box-shadow: var(--shadow-photo);
	transition: transform var(--dur) var(--ease-out);
}

.vv-postcard__link:hover .vv-postcard__media { transform: var(--hover-lift); }

.vv-postcard__media--placeholder {
	background: linear-gradient(135deg, var(--terra-500), var(--gold-700));
}

.vv-postcard__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(40, 34, 28, 0) 40%, rgba(40, 34, 28, 0.78) 100%);
}

.vv-postcard__overlay {
	position: relative;
	z-index: 1;
	padding: var(--space-6);
	color: #fff;
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
}

.vv-postcard__cat {
	font-family: var(--font-sans);
	font-size: var(--text-xs);
	letter-spacing: var(--tracking-label);
	text-transform: uppercase;
	opacity: 0.9;
}

.vv-postcard__title {
	font-family: var(--font-display);
	font-weight: var(--fw-semibold);
	font-size: var(--text-lg);
	line-height: 1.15;
	color: #fff;
	margin: 0;
}

.vv-postcard__more {
	font-family: var(--font-sans);
	font-weight: var(--fw-medium);
	font-size: var(--text-sm);
	margin-top: var(--space-1);
}

/* --- Paginación ----------------------------------------------------------- */
.navigation.pagination { margin-top: var(--space-12); }

.navigation.pagination .nav-links {
	display: flex;
	justify-content: center;
	gap: var(--space-2);
}

.navigation.pagination a,
.navigation.pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	border-radius: var(--radius-pill);
	font-family: var(--font-sans);
	font-size: var(--text-sm);
	color: var(--ink-700);
}

.navigation.pagination .page-numbers.current { background: var(--terra-600); color: #fff; }
.navigation.pagination a:hover { background: var(--gold-100); }

/* --- Artículo: hero ------------------------------------------------------- */
.vv-article-hero {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 360px;
	background-size: cover;
	background-position: center;
	color: #fff;
}

.vv-article-hero--placeholder { background: linear-gradient(135deg, #2C2620, var(--gold-800)); }

.vv-article-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(40, 34, 28, 0.25), rgba(40, 34, 28, 0.6));
}

.vv-article-hero__inner {
	position: relative;
	z-index: 1;
	padding-block: var(--space-16);
}

.vv-article-hero__title {
	font-family: var(--font-display);
	font-weight: var(--fw-semibold);
	font-size: var(--text-3xl);
	line-height: 1.08;
	color: #fff;
	margin: 0;
	max-width: 760px;
}

.vv-article-hero__cta {
	position: absolute;
	z-index: 2;
	right: max(var(--space-8), calc((100% - var(--container)) / 2 + var(--space-8)));
	bottom: calc(var(--space-6) * -1);
	display: inline-flex;
	align-items: center;
	gap: var(--space-3);
	background: var(--camel);
	color: var(--ink-900);
	font-family: var(--font-sans);
	font-weight: var(--fw-semibold);
	font-size: var(--text-sm);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	padding: var(--space-4) var(--space-6);
	border-radius: var(--radius-pill);
	box-shadow: var(--shadow-md);
}

/* --- Artículo: meta ------------------------------------------------------- */
.vv-article__meta {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-6);
	padding-top: var(--space-12);
	padding-bottom: var(--space-8);
	border-bottom: 1px solid var(--line);
	text-align: center;
}

.vv-article__meta-item { display: flex; flex-direction: column; gap: var(--space-1); }

.vv-article__meta-label {
	font-family: var(--font-display);
	font-size: var(--text-md);
	color: var(--ink-900);
}

.vv-article__meta-value {
	font-family: var(--font-body);
	font-size: var(--text-sm);
	color: var(--ink-500);
}

/* --- Artículo: cuerpo ----------------------------------------------------- */
.vv-article__body {
	max-width: var(--post);
	padding-top: var(--space-10);
	font-family: var(--font-body);
	font-size: var(--text-md);
	line-height: var(--leading-relaxed);
	color: var(--ink-700);
}

.vv-article__body h2 {
	font-family: var(--font-display);
	font-size: var(--text-xl);
	color: var(--ink-900);
	margin: var(--space-10) 0 var(--space-4);
}

.vv-article__body h3 {
	font-family: var(--font-display);
	font-size: var(--text-lg);
	color: var(--ink-900);
	margin: var(--space-8) 0 var(--space-3);
}

.vv-article__body p { margin: 0 0 var(--space-5); }
.vv-article__body ul,
.vv-article__body ol { margin: 0 0 var(--space-5) var(--space-6); }
.vv-article__body li { margin-bottom: var(--space-2); }

/* --- Artículo: autor ------------------------------------------------------ */
.vv-article__author {
	display: flex;
	align-items: center;
	gap: var(--space-4);
	max-width: var(--post);
	padding-block: var(--space-8);
	border-bottom: 1px solid var(--line);
}

.vv-article__avatar { border-radius: var(--radius-pill); }
.vv-article__author-info { display: flex; flex-direction: column; }
.vv-article__author-name { font-family: var(--font-display); font-size: var(--text-lg); color: var(--ink-900); }
.vv-article__author-role { font-family: var(--font-body); font-size: var(--text-sm); color: var(--ink-500); }

/* --- FAQ (acordeón) ------------------------------------------------------- */
.vv-faq { padding-block: var(--space-12) var(--space-16); }
.vv-faq__inner { max-width: var(--post); }
.vv-faq .vv-section-pill { margin-bottom: var(--space-8); }
.vv-faq__list { display: flex; flex-direction: column; gap: var(--space-3); }

.vv-faq__item {
	border: 1px solid var(--line-warm);
	border-radius: var(--radius-md);
	background: var(--white);
	padding: 0 var(--space-5);
}

.vv-faq__q {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4);
	padding-block: var(--space-4);
	cursor: pointer;
	list-style: none;
	font-family: var(--font-sans);
	font-weight: var(--fw-medium);
	font-size: var(--text-base);
	color: var(--ink-900);
}

.vv-faq__q::-webkit-details-marker { display: none; }

.vv-faq__sign { position: relative; width: 16px; height: 16px; flex: 0 0 auto; }

.vv-faq__sign::before,
.vv-faq__sign::after {
	content: "";
	position: absolute;
	background: var(--terra-600);
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}

.vv-faq__sign::before { width: 14px; height: 2px; }
.vv-faq__sign::after { width: 2px; height: 14px; transition: transform var(--dur) var(--ease-out); }
.vv-faq__item[open] .vv-faq__sign::after { transform: translate(-50%, -50%) scaleY(0); }

.vv-faq__a {
	padding: 0 0 var(--space-5);
	font-family: var(--font-body);
	font-size: var(--text-sm);
	line-height: var(--leading-relaxed);
	color: var(--ink-600);
}

/* --- "Artículos de interés" (relacionados) -------------------------------- */
.vv-related { padding-block: var(--space-8) var(--space-16); }
.vv-related__head { text-align: center; margin-bottom: var(--space-8); }
.vv-related__title { font-family: var(--font-display); font-size: var(--text-2xl); color: var(--ink-900); margin: 0; }
.vv-related__sub {
	font-family: var(--font-sans);
	font-size: var(--text-xs);
	letter-spacing: var(--tracking-eyebrow);
	text-transform: uppercase;
	color: var(--ink-500);
}

.vv-related__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-8); }
.vv-related__card { display: flex; flex-direction: column; gap: var(--space-3); }

.vv-related__media {
	display: block;
	aspect-ratio: 4 / 3;
	border-radius: var(--radius-md);
	background-size: cover;
	background-position: center;
	box-shadow: var(--shadow-sm);
}

.vv-related__media--placeholder { background: linear-gradient(135deg, var(--gold-200), var(--terra-200)); }
.vv-related__name { font-family: var(--font-display); font-size: var(--text-md); color: var(--ink-900); }

/* --- Responsive ----------------------------------------------------------- */
@media (max-width: 860px) {
	.vv-blog-hero__inner { grid-template-columns: 1fr; min-height: 0; }
	.vv-blog-hero__media { border-radius: var(--radius-lg) var(--radius-lg) 0 0; min-height: 280px; }
	.vv-blog-hero__card {
		border-left: 1px solid var(--line-warm);
		border-top: 0;
		border-radius: 0 0 var(--radius-lg) var(--radius-lg);
	}
	.vv-postgrid,
	.vv-related__grid { grid-template-columns: repeat(2, 1fr); }
	.vv-article-hero__cta { right: var(--space-6); }
}

@media (max-width: 560px) {
	.vv-postgrid,
	.vv-related__grid { grid-template-columns: 1fr; }
	.vv-article__meta { grid-template-columns: 1fr; gap: var(--space-4); }
	.vv-article-hero__title { font-size: var(--text-2xl); }
}