/* =============================================================
   Peak Body Coach · archive.css
   Articles index + category archive styles. Depends on main.css.
   ============================================================= */


/* =============================================================
   IDX HERO — text-only, cream surface
   ============================================================= */
.idx-hero {
	padding: var(--space-13) 0 var(--space-10);
}
.idx-hero .pill { margin-bottom: var(--rhythm-eyebrow-h1); display: inline-block; }
.idx-hero .type-h1 {
	margin-top: var(--rhythm-eyebrow-h1);
	font-size: clamp(64px, 8vw, 140px);
}
@media (max-width: 640px) {
	.idx-hero          { padding: var(--space-11) 0 var(--space-9); }
	.idx-hero .type-h1 { font-size: clamp(48px, 12vw, 80px); }
}


/* =============================================================
   FILTER CHIPS
   ============================================================= */
.idx-filters { padding-bottom: var(--space-11); }
.chip-row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
	align-items: center;
}
.chip {
	display: inline-flex;
	align-items: center;
	font-family: var(--font-mono);
	font-size: 11px;
	font-weight: var(--weight-medium);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	line-height: 1;
	padding: 11px 16px 10px;
	color: rgba(23, 23, 23, 0.7);
	background: transparent;
	border: 1px solid rgba(23, 23, 23, 0.2);
	text-decoration: none;
	transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.chip:hover                { color: var(--color-ink); border-color: var(--color-ink); }
.chip--active              { background: var(--color-ink); color: var(--color-cream); border-color: var(--color-ink); }
.chip--active:hover        { color: var(--color-cream); border-color: var(--color-ink); }


/* =============================================================
   FEATURED ARTICLE CARD — full-width
   ============================================================= */
.idx-featured { padding: var(--space-12) 0 var(--space-10); }
.featured-card {
	display: block;
	text-decoration: none;
	color: inherit;
}
.featured-img-wrap {
	overflow: hidden;
	width: 100%;
	aspect-ratio: 1200 / 630;
	background: var(--color-cream);
}
.featured-img-wrap img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s ease;
}
.featured-card:hover .featured-img-wrap img { transform: scale(1.015); }
.featured-meta {
	display: block;
	margin-top: var(--space-7);
	color: var(--color-red);
}
.featured-excerpt {
	margin-top: var(--space-5);
	max-width: 780px;
	color: rgba(23, 23, 23, 0.85);
}
.featured-cta {
	display: inline-block;
	margin-top: var(--space-6);
	font-family: var(--font-body);
	font-weight: var(--weight-medium);
	font-size: 16px;
	color: var(--color-ink);
	text-decoration: underline;
	text-underline-offset: 4px;
	text-decoration-thickness: 1px;
	transition: text-decoration-thickness 0.15s;
}
.featured-card:hover .featured-cta { text-decoration-thickness: 2px; }


/* =============================================================
   SECONDARY ARTICLES GRID — 3-col
   ============================================================= */
.idx-grid-sec {
	padding: var(--space-9) 0 var(--space-13);
	border-top: 1px solid rgba(23, 23, 23, 0.08);
}
.idx-more-label {
	display: block;
	color: rgba(23, 23, 23, 0.45);
	margin-bottom: var(--space-9);
}
.art-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-10) var(--space-7);
}
@media (min-width: 640px)  { .art-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .art-grid { grid-template-columns: repeat(3, 1fr); } }

.art-card a {
	display: flex;
	flex-direction: column;
	text-decoration: none;
	color: inherit;
	height: 100%;
}
.art-card-img-wrap {
	overflow: hidden;
	width: 100%;
	aspect-ratio: 16 / 9;
	background: var(--color-cream);
}
.art-card-img-wrap img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: saturate(0.7) contrast(1.02);
	transition: transform 0.4s ease, filter 0.3s ease;
}
.art-card:hover .art-card-img-wrap img {
	transform: scale(1.02);
	filter: saturate(0.95) contrast(1.05);
}
.art-card-meta {
	padding-top: var(--space-5);
	display: flex;
	flex-direction: column;
	flex: 1;
}
.art-card-cat { color: var(--color-red); }
.art-card-title {
	font-family: var(--font-body);
	font-weight: var(--weight-bold);
	font-size: clamp(19px, 1.5vw, 22px);
	line-height: 1.3;
	margin-top: var(--space-4);
	letter-spacing: -0.005em;
}
.art-card:hover .art-card-title {
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
}
.art-card-excerpt {
	font-family: var(--font-body);
	font-weight: var(--weight-regular);
	font-size: 15px;
	line-height: 1.55;
	color: rgba(23, 23, 23, 0.7);
	margin-top: var(--space-3);
}

/* Empty state */
.idx-empty { padding: var(--space-13) 0; }