/*
=========================================================
BLOG INDEX STYLESHEET - Joshua Dalton Media
=========================================================

Purpose
-------
This file contains the page-specific archive styles for the /blog/ index page on joshuadaltonmedia.com. It layers on top of the shared blog card system in blog-embed.css and should stay focused on archive-only layout, hero, filters, and section presentation.

What belongs in this file
-------------------------
- Blog archive hero layout and copy spacing
- Blog archive filter rail styling
- Archive section spacing and section headers
- Archive-only card density and strip layout variants
- Archive page breakpoint rules

Asset path usage
----------------
This stylesheet is intended to be referenced from pages with:

<link rel="stylesheet" href="/assets/css/blog-index.css">

Relationship to page files
--------------------------
Page files should:
1. load this stylesheet after global.css and blog-embed.css
2. use it only for the /blog/ archive page
3. keep shared blog card and hero-card styling in blog-embed.css

Maintenance rule
----------------
If a selector would also be useful on homepage blog previews, commercial blog previews, or reusable blog cards, it should live in blog-embed.css instead. Keep this file focused on archive-only structure and page skin decisions.
*/

/* ================= HERO ================= */
.blog-hero{padding:clamp(18px,5vw,30px) 0 clamp(18px,5vw,28px);border-bottom:1px solid var(--line)}
.blog-hero-shell{display:grid;gap:14px}
.blog-hero-copy{display:grid;gap:12px}
.blog-hero h1{margin:0;font-size:1.1rem;line-height:1.02;letter-spacing:-.03em}
.blog-hero .lead{margin:0;max-width:62ch;color:var(--muted)}
.hero-meta{margin:0;max-width:75ch;color:var(--muted);font-size:.86rem}
.blog-hero-actions{display:flex;flex-wrap:wrap;gap:10px}
.blog-hero-actions .btn{font-size:.8rem;min-width:0}

/* ================= FILTERS ================= */
.blog-filters{padding:18px 0 14px}
.filter-rail{display:flex;gap:6px;overflow:hidden}
.filter-pill{flex:1 1 0;min-width:0;display:inline-flex;align-items:center;justify-content:center;padding:9px 10px;border-radius:999px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);color:var(--ink);font-size:.78rem;font-weight:700;line-height:1;text-decoration:none;white-space:nowrap;text-align:center}
.filter-pill:first-child{flex:0 0 auto}
.filter-pill:hover{text-decoration:none;background:rgba(255,255,255,.08)}
.filter-pill.is-active{background:var(--accent);border-color:var(--accent);color:#fff}

/* ================= SECTIONS ================= */
.blog-sections{padding:10px 0 8px}
.blog-block{display:grid;gap:14px;margin:0 0 clamp(26px,5vw,40px);transition:opacity .22s ease}

/* ================= GRID ================= */
.posts-grid{display:grid;grid-template-columns:1fr;gap:14px}
.archive-card.compact{
	--blog-card-body-gap:7px;
	--blog-card-copy-size:.84rem;
}

/* ================= STORY STRIP ================= */
.story-strip{display:grid;grid-template-columns:1fr;gap:14px}
.story-strip .archive-card{--blog-card-media-aspect:16/10}

/* ================= RESPONSIVE BREAKPOINTS ================= */

@media(min-width:360px){
	/* ================= HERO ================= */
	.blog-hero h1{font-size:1.6rem}
}

@media(min-width:700px){
	/* ================= FILTERS ================= */
	.filter-rail{overflow:visible}
	.filter-pill{flex:0 0 auto;padding:10px 14px;font-size:.84rem}
	/* ================= HERO ================= */
	.blog-hero{padding:26px 0 26px}
	.blog-hero-shell{grid-template-columns:minmax(0,1.15fr) minmax(320px,.85fr);align-items:end;gap:20px}
	.blog-hero h1{font-size:1.8rem}
	.blog-hero .lead{font-size:1rem}
	/* ================= GRID ================= */
	.posts-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
	/* ================= STORY STRIP ================= */
	.story-strip{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
}

@media(min-width:1024px){
	/* ================= HERO ================= */
	.blog-hero{padding:34px 0 30px}
	.blog-hero-shell{grid-template-columns:minmax(0,1.15fr) minmax(360px,.85fr);gap:26px}
	.blog-hero h1{font-size:2.5rem}
	/* ================= SECTIONS ================= */
	.blog-block{gap:18px;margin-bottom:44px}
	/* ================= GRID ================= */
	.posts-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
	.posts-grid .archive-card{--blog-card-media-aspect:16/9;--blog-card-body-gap:6px;--blog-card-body-padding:10px 12px 12px}
	.posts-grid .archive-card .blog-embed-title{margin-top:-3px}
	/* ================= STORY STRIP ================= */
	.story-strip{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
	.story-strip .archive-card:first-child{grid-row:span 2;align-self:start;--blog-card-min-height:0;--blog-card-media-aspect:3/4}
	.story-strip .archive-card:not(:first-child){--blog-card-media-aspect:16/9;--blog-card-body-gap:4px;--blog-card-body-padding:8px 12px 10px}
	.story-strip .archive-card:not(:first-child) .blog-embed-title{margin-top:-2px}
}