/* =========================================================
   Blog index (/guias) — magazine veterinario
   ========================================================= */

/* ============= Hero ============= */
.blog-hero {
	padding-block: var(--space-7) var(--space-6);
	background:
		radial-gradient(70% 50% at 0% 0%, rgba(46, 90, 69, 0.06) 0%, transparent 60%),
		var(--color-bg-base);
}

.blog-hero__intro,
.blog-hero__header { max-width: 60ch; margin-bottom: var(--space-7); }

/* Stats inline en el intro */
.blog-hero__stats {
	display: flex;
	gap: var(--space-5);
	margin: var(--space-4) 0 0;
	padding: var(--space-3) var(--space-5);
	background: var(--color-bg-surface);
	border: 1px solid var(--color-border-default);
	border-radius: var(--radius-pill);
	list-style: none;
	width: fit-content;
}
.blog-hero__stats li {
	display: flex;
	flex-direction: column;
	gap: 1px;
	margin: 0;
}
.blog-hero__stats strong {
	font-family: var(--font-display);
	font-size: 1.0625rem;
	font-weight: 600;
	color: var(--color-ink-primary);
	font-variant-numeric: tabular-nums;
	line-height: 1.1;
}
.blog-hero__stats span {
	font-size: 11px;
	color: var(--color-ink-muted);
	letter-spacing: 0.02em;
}
@media (max-width: 540px) {
	.blog-hero__stats { gap: var(--space-3); padding: var(--space-2) var(--space-3); }
	.blog-hero__stats strong { font-size: 0.9375rem; }
}
.blog-hero__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--color-brand-primary);
	margin: 0 0 var(--space-3);
}
.blog-hero__title {
	font-family: var(--font-display);
	font-size: clamp(2rem, 4vw, 3.25rem);
	font-weight: 500;
	color: var(--color-ink-primary);
	letter-spacing: -0.02em;
	line-height: 1.1;
	margin: 0 0 var(--space-3);
	max-width: 22ch;
}
.blog-hero__sub {
	font-size: var(--fs-body-l);
	color: var(--color-ink-secondary);
	line-height: 1.55;
	margin: 0;
	max-width: 56ch;
}

/* Featured post */
.blog-hero__featured {
	background: var(--color-bg-surface);
	border: 1px solid var(--color-border-default);
	border-radius: var(--radius-lg);
	overflow: hidden;
	transition: transform var(--duration-base) var(--easing-default),
	            box-shadow var(--duration-base) var(--easing-default),
	            border-color var(--duration-base) var(--easing-default);
}
.blog-hero__featured:hover {
	border-color: transparent;
	box-shadow: var(--shadow-lg);
	transform: translateY(-3px);
}
.blog-hero__featured-link {
	display: grid;
	grid-template-columns: 1.1fr 1fr;
	color: inherit;
	text-decoration: none;
	min-height: 360px;
}
@media (max-width: 900px) {
	.blog-hero__featured-link { grid-template-columns: 1fr; }
}
.blog-hero__featured-link:focus-visible {
	outline: none;
	box-shadow: var(--shadow-focus);
}

.blog-hero__featured-media {
	position: relative;
	overflow: hidden;
	min-height: 280px;
}
.blog-hero__featured-placeholder { position: absolute; inset: 0; }
.blog-hero__featured-cat {
	position: absolute;
	top: 18px; left: 18px;
	display: inline-flex;
	align-items: center;
	padding: 6px 12px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.02em;
	border-radius: var(--radius-pill);
	box-shadow: var(--shadow-sm);
}
.blog-hero__featured-cat--primary { background: var(--color-brand-primary); color: var(--color-bg-base); }
.blog-hero__featured-cat--dark    { background: var(--color-ink-primary);   color: var(--color-bg-base); }
.blog-hero__featured-cat--accent  { background: var(--color-accent);        color: var(--color-bg-surface); }
.blog-hero__featured-cat--neutral { background: var(--color-bg-surface);    color: var(--color-ink-primary); }

.blog-hero__featured-badge {
	position: absolute;
	top: 18px; right: 18px;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 4px 10px;
	background: rgba(28, 38, 32, 0.7);
	color: var(--color-bg-base);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.02em;
	border-radius: var(--radius-pill);
	backdrop-filter: blur(6px);
}
.blog-hero__featured-badge svg { color: var(--color-secondary); }

.blog-hero__featured-body {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	padding: var(--space-6);
}
.blog-hero__featured-meta {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--color-ink-muted);
	margin: 0;
	flex-wrap: wrap;
}
.blog-hero__featured-title {
	font-family: var(--font-display);
	font-size: clamp(1.5rem, 2.6vw, 2rem);
	font-weight: 500;
	color: var(--color-ink-primary);
	letter-spacing: -0.015em;
	line-height: 1.2;
	margin: 0;
}
.blog-hero__featured-lede {
	font-size: var(--fs-body);
	color: var(--color-ink-secondary);
	line-height: 1.55;
	margin: 0;
	flex: 1;
}
.blog-hero__featured-author {
	display: grid;
	grid-template-columns: auto 1fr auto;
	gap: 12px;
	align-items: center;
	padding-top: var(--space-3);
	border-top: 1px solid var(--color-border-default);
}
.blog-hero__featured-avatar {
	display: inline-flex;
	width: 40px; height: 40px;
	background: var(--color-brand-primary);
	color: var(--color-bg-base);
	border-radius: 50%;
	align-items: center;
	justify-content: center;
	font-family: var(--font-display);
	font-size: 1.0625rem;
	font-weight: 500;
	flex: 0 0 auto;
}
.blog-hero__featured-author-name {
	margin: 0;
	font-weight: 600;
	font-size: var(--fs-body-s);
	color: var(--color-ink-primary);
}
.blog-hero__featured-author-role {
	margin: 2px 0 0;
	font-size: 11px;
	color: var(--color-ink-muted);
}
.blog-hero__featured-cta {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: var(--fs-body-s);
	font-weight: 600;
	color: var(--color-brand-primary);
	transition: gap var(--duration-fast) var(--easing-default);
}
.blog-hero__featured:hover .blog-hero__featured-cta { gap: 10px; }
@media (max-width: 540px) {
	.blog-hero__featured-cta span:not(svg) { display: none; }
}

/* ============= Filters ============= */
.blog-filters {
	padding-block: var(--space-3);
	background: var(--color-bg-base);
	border-bottom: 1px solid var(--color-border-default);
	position: sticky;
	top: 80px;
	z-index: var(--z-sticky);
}
.blog-filters__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4);
	flex-wrap: wrap;
}

.blog-filters__tabs {
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
	overflow-x: auto;
	scrollbar-width: none;
}
.blog-filters__tabs::-webkit-scrollbar { display: none; }
.blog-filters__tab,
.blog-filters__btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 14px;
	background: var(--color-bg-surface);
	color: var(--color-ink-secondary);
	border: 1px solid var(--color-border-default);
	border-radius: var(--radius-pill);
	font-size: var(--fs-body-s);
	font-weight: 500;
	white-space: nowrap;
	cursor: pointer;
	transition: background var(--duration-fast) var(--easing-default),
	            color var(--duration-fast) var(--easing-default),
	            border-color var(--duration-fast) var(--easing-default);
}

/* Count badge inside filter pill */
.blog-filters__count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 22px;
	height: 18px;
	padding: 0 6px;
	background: var(--color-bg-subtle);
	color: var(--color-ink-muted);
	border-radius: var(--radius-pill);
	font-size: 10px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.02em;
	transition: background var(--duration-fast) var(--easing-default), color var(--duration-fast) var(--easing-default);
}
.blog-filters__btn:hover .blog-filters__count {
	background: var(--color-bg-base);
	color: var(--color-ink-secondary);
}
.blog-filters__btn.is-active .blog-filters__count {
	background: rgba(250, 244, 232, 0.20);
	color: var(--color-bg-base);
}
.blog-filters__tab:hover,
.blog-filters__btn:hover { background: var(--color-bg-subtle); color: var(--color-ink-primary); border-color: var(--color-ink-muted); }
.blog-filters__tab.is-active,
.blog-filters__btn.is-active {
	background: var(--color-brand-primary);
	color: var(--color-bg-base);
	border-color: var(--color-brand-primary);
}
.blog-filters__tab:focus-visible,
.blog-filters__btn:focus-visible { outline: none; box-shadow: var(--shadow-focus); }

.blog-filters__search {
	position: relative;
	max-width: 320px;
	flex: 1;
	min-width: 200px;
}
.blog-filters__search svg {
	position: absolute;
	left: 12px; top: 50%;
	transform: translateY(-50%);
	color: var(--color-ink-muted);
	pointer-events: none;
}
.blog-filters__search input {
	width: 100%;
	height: 40px;
	padding: 0 12px 0 38px;
	background: var(--color-bg-surface);
	border: 1px solid var(--color-border-default);
	border-radius: var(--radius-pill);
	color: var(--color-ink-primary);
	font-family: var(--font-body);
	font-size: var(--fs-body-s);
}
.blog-filters__search input:focus {
	outline: none;
	border-color: var(--color-brand-primary);
	box-shadow: var(--shadow-focus);
}

/* ============= Grid ============= */
.blog-grid { padding-block: var(--space-7) var(--space-9); }

.blog-grid__empty {
	background: var(--color-bg-surface);
	border: 1px dashed var(--color-border-default);
	border-radius: var(--radius-md);
	padding: var(--space-6);
	text-align: center;
	color: var(--color-ink-secondary);
	font-size: var(--fs-body-s);
	margin: 0 0 var(--space-5);
	max-width: 56ch;
	margin-inline: auto;
}
.blog-grid__empty[hidden] { display: none; }

.blog-grid__list {
	list-style: none;
	padding: 0;
	margin: 0 0 var(--space-7);
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-5);
}
@media (max-width: 1000px) { .blog-grid__list { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .blog-grid__list { grid-template-columns: 1fr; } }

.blog-grid__item {
	margin: 0;
	opacity: 0;
	transform: translateY(8px);
	animation: blogStagger var(--duration-base) var(--easing-default) forwards;
	animation-delay: calc(var(--stagger-i, 0) * 40ms);
}
.blog-grid__item[hidden] { display: none; }

/* Magazine pattern: every 5th card spans 2 columns on desktop */
.blog-grid__item--wide {
	grid-column: span 2;
}
.blog-grid__item--wide .post-card__link {
	display: grid;
	grid-template-columns: 1.2fr 1fr;
	min-height: 320px;
}
.blog-grid__item--wide .post-card__media {
	aspect-ratio: auto;
	height: 100%;
	min-height: 240px;
}
.blog-grid__item--wide .post-card__body {
	gap: 12px;
	padding: var(--space-5) var(--space-6);
}
.blog-grid__item--wide .post-card__title {
	font-size: clamp(1.25rem, 1.8vw, 1.5rem);
	line-height: 1.2;
}
.blog-grid__item--wide .post-card__lede {
	font-size: var(--fs-body);
	line-clamp: 3;
	-webkit-line-clamp: 3;
}

@media (max-width: 1000px) {
	.blog-grid__item--wide { grid-column: span 2; }
	.blog-grid__item--wide .post-card__link { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
	.blog-grid__item--wide { grid-column: auto; }
	.blog-grid__item--wide .post-card__link { grid-template-columns: 1fr; }
	.blog-grid__item--wide .post-card__media { aspect-ratio: 4/3; min-height: 0; }
}
@keyframes blogStagger {
	to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
	.blog-grid__item { opacity: 1; transform: none; animation: none; }
}

.blog-grid .post-card {
	background: var(--color-bg-surface);
	border: 1px solid var(--color-border-default);
	border-radius: var(--radius-md);
	overflow: hidden;
	transition: transform var(--duration-base) var(--easing-default),
	            box-shadow var(--duration-base) var(--easing-default),
	            border-color var(--duration-base) var(--easing-default);
	height: 100%;
}
.blog-grid .post-card:hover {
	transform: translateY(-3px);
	box-shadow: var(--shadow-md);
	border-color: transparent;
}
.blog-grid .post-card .post-card__link {
	display: flex;
	flex-direction: column;
	height: 100%;
	text-decoration: none;
	color: inherit;
}
.blog-grid .post-card__body {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: var(--space-4) var(--space-5);
	flex: 1;
}
.blog-grid .post-card__author {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: auto;
	padding-top: var(--space-3);
	border-top: 1px solid var(--color-border-default);
}
.blog-grid .post-card__author-avatar {
	display: inline-flex;
	width: 32px; height: 32px;
	background: var(--color-brand-primary);
	color: var(--color-bg-base);
	border-radius: 50%;
	align-items: center;
	justify-content: center;
	font-family: var(--font-display);
	font-size: 0.875rem;
	font-weight: 500;
	flex: 0 0 auto;
}
.blog-grid .post-card__author-text { display: flex; flex-direction: column; line-height: 1.2; flex: 1; min-width: 0; }
.blog-grid .post-card__author-name { font-size: var(--fs-caption); font-weight: 600; color: var(--color-ink-primary); }
.blog-grid .post-card__author-role { font-size: 11px; color: var(--color-ink-muted); }
.blog-grid .post-card__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px; height: 28px;
	background: var(--color-bg-subtle);
	color: var(--color-brand-primary);
	border-radius: 50%;
	transition: background var(--duration-fast) var(--easing-default),
	            color var(--duration-fast) var(--easing-default),
	            transform var(--duration-fast) var(--easing-default);
}
.blog-grid .post-card:hover .post-card__cta {
	background: var(--color-brand-primary);
	color: var(--color-bg-base);
	transform: translateX(2px);
}
.blog-grid .post-card:hover .post-card__title { color: var(--color-brand-primary); }

.blog-grid__more-wrap { text-align: center; }