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

Purpose
-------
This file contains the shared styles for reusable blog cards and embedded blog
preview sections used across joshuadaltonmedia.com. It supports index cards,
single-row rails, grid layouts, featured post cards, compact cards, CTA rows,
and reusable section wrappers for blog previews on homepages, service pages,
landing pages, and supporting content blocks.

What belongs in this file
-------------------------
- Shared blog embed section wrappers
- Shared blog embed rail and grid layouts
- Shared blog preview card styles
- Shared archive-card primitives used by the blog index
- Shared media, body, eyebrow, title, excerpt, and action styles
- Shared featured / compact / minimal card variants
- Shared hero-feature card treatment when that card is used as a blog preview
- Shared blog embed CTA footer row styles
- Shared responsive rules for blog preview layouts

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

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

Relationship to page files
--------------------------
Page files should:
1. load this stylesheet in the head
2. use the shared blog embed class system where possible
3. keep genuinely page-specific blog preview tweaks inside their page skin stylesheet

Maintenance rule
----------------
If a selector is not genuinely reusable across multiple blog preview implementations
or templates, it should not be added here. Keep this file shared, stable, and predictable.
*/

/* ================= BLOG EMBED WRAPPERS ================= */
.blog-embed{display:grid;gap:14px}
.blog-embed.flush{gap:0}
.blog-embed.compact{gap:10px}
.blog-embed.loose{gap:18px}
.blog-embed.center{justify-items:center}
.blog-embed-head{display:grid;gap:10px}
.blog-embed-lead{margin:0}

.blog-embed-rail{display:grid;gap:12px}
.blog-embed-track{display:grid;gap:12px}
.blog-embed-track > *{min-width:0}

/* ================= SHARED BLOG CARD BASE ================= */
.blog-embed-card.archive-card{--blog-card-display:grid;--blog-card-grid-rows:auto 1fr;--blog-card-bg:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.02));--blog-card-border-color:rgba(255,255,255,.08);--blog-card-radius:var(--radius);--blog-card-shadow:0 10px 30px rgba(0,0,0,.24);--blog-card-transition-duration:.22s;--blog-card-media-aspect:4/3;--blog-card-body-display:grid;--blog-card-body-gap:8px;--blog-card-body-padding:12px 12px 14px;--blog-card-title-size:1.02rem;--blog-card-title-line-height:1.15;--blog-card-copy-size:.88rem;--blog-card-copy-line-height:1.5;--blog-card-hover-lift:-4px;--blog-card-hover-shadow:0 18px 40px rgba(0,0,0,.4);--blog-card-hover-border:rgba(255,255,255,.14)}

.blog-embed-card{--blog-card-display:flex;--blog-card-min-height:100%;--blog-card-flex-direction:column;--blog-card-bg:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.02));--blog-card-border-color:rgba(255,255,255,.1);--blog-card-radius:clamp(14px,3vw,18px);--blog-card-shadow:0 18px 50px rgba(0,0,0,.28);--blog-card-transition-duration:.25s;--blog-card-media-aspect:16/10;--blog-card-body-display:flex;--blog-card-body-flex:1;--blog-card-body-direction:column;--blog-card-body-gap:10px;--blog-card-body-padding:14px 14px 16px;--blog-card-title-size:clamp(1.02rem,4.6vw,1.18rem);--blog-card-title-line-height:1.12;--blog-card-copy-size:.88rem;--blog-card-copy-line-height:1.5;--blog-card-hover-lift:-3px;--blog-card-hover-shadow:0 22px 60px rgba(0,0,0,.34);--blog-card-hover-border:rgba(255,255,255,.14);display:var(--blog-card-display,flex);min-height:var(--blog-card-min-height,auto);background:var(--blog-card-bg,linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.02)));border:1px solid var(--blog-card-border-color,rgba(255,255,255,.08));border-radius:var(--blog-card-radius,var(--radius));overflow:hidden;box-shadow:var(--blog-card-shadow,0 10px 30px rgba(0,0,0,.24));transition:transform var(--blog-card-transition-duration,.22s) ease,box-shadow var(--blog-card-transition-duration,.22s) ease,border-color var(--blog-card-transition-duration,.22s) ease;flex-direction:var(--blog-card-flex-direction,column);scroll-snap-align:start;scroll-snap-stop:normal}

.blog-embed-card.archive-card,
.blog-embed-card.blog-embed-card--hero{grid-template-rows:var(--blog-card-grid-rows,auto)}

.blog-embed-media{position:relative;display:block;background:#111;overflow:hidden}

.blog-embed-media img{display:block;width:100%;aspect-ratio:var(--blog-card-media-aspect,16/10);object-fit:cover;background:#111}

.blog-embed-body{display:var(--blog-card-body-display,grid);flex:var(--blog-card-body-flex,initial);flex-direction:var(--blog-card-body-direction,initial);gap:var(--blog-card-body-gap,10px);padding:var(--blog-card-body-padding,14px 14px 16px)}

.blog-embed-body > *{margin:0}

.blog-embed-kicker{color:var(--accent);font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;line-height:1.2}

.blog-embed-title{margin:0;font-size:var(--blog-card-title-size,1.02rem);line-height:var(--blog-card-title-line-height,1.12)}

.blog-embed-title a{color:var(--ink);text-decoration:none}

.blog-embed-excerpt{margin:0;color:var(--muted);font-size:var(--blog-card-copy-size,.88rem);line-height:var(--blog-card-copy-line-height,1.5)}

.archive-card .blog-embed-link,
.blog-embed-card--hero .blog-embed-link{margin-top:2px;font-weight:700}

/* ================= BLOG HERO FEATURE CARD ================= */
.blog-embed-card.blog-embed-card--hero{--blog-card-display:grid;--blog-card-grid-rows:auto 1fr;--blog-card-bg:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.02));--blog-card-border-color:rgba(255,255,255,.08);--blog-card-radius:calc(var(--radius) + 4px);--blog-card-shadow:var(--shadow);--blog-card-transition-duration:.22s;--blog-card-media-aspect:16/10;--blog-card-body-display:grid;--blog-card-body-gap:8px;--blog-card-body-padding:14px;--blog-card-title-size:1.15rem;--blog-card-title-line-height:1.18;--blog-card-hover-lift:-4px;--blog-card-hover-shadow:0 18px 40px rgba(0,0,0,.4);--blog-card-hover-border:rgba(255,255,255,.14)}
.blog-embed-card.blog-embed-card--hero .blog-embed-kicker{display:inline-flex;align-items:center;gap:8px}
.blog-embed-card.blog-embed-card--hero .blog-embed-title{max-width:32ch}
.blog-embed-card.blog-embed-card--hero .blog-embed-excerpt{max-width:42ch;font-size:.7rem}

/* ================= BLOG CARD ================= */
.blog-embed-card > a:first-child{display:block;text-decoration:none;color:inherit}
.blog-embed-card.is-hidden{display:none}
.blog-embed-card.flat{background:rgba(255,255,255,.03);box-shadow:none}
.blog-embed-card.featured{border-color:rgba(255,77,77,.18);box-shadow:0 20px 60px rgba(0,0,0,.34)}
.blog-embed-card.compact{--blog-card-body-gap:8px;--blog-card-body-padding:12px 12px 14px}
.blog-embed-card.minimal{background:transparent;border:0;box-shadow:none;border-radius:0;--blog-card-body-padding:12px 0 0}
.blog-embed-card.minimal .blog-embed-media{border-radius:clamp(14px,3vw,18px);overflow:hidden}

/* ================= BLOG CARD MEDIA ================= */
.blog-embed-media.tall{--blog-card-media-aspect:4/5}
.blog-embed-media.wide{--blog-card-media-aspect:16/9}
.blog-embed-media::after{content:"";position:absolute;inset:auto 0 0 0;height:40%;background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.16));pointer-events:none;opacity:.7}

/* ================= BLOG TITLE / COPY ================= */
.blog-embed-title a:hover{text-decoration:underline}

/* ================= BLOG ACTIONS ================= */
.blog-embed-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:auto;padding-top:2px}
.blog-embed-actions .btn{margin-top:auto;align-self:flex-start}
.blog-embed-link{display:inline-flex;align-items:center;gap:6px;color:var(--accent);font-size:.84rem;line-height:1.3;font-weight:700;text-decoration:none}
.blog-embed-link:hover{text-decoration:underline}

/* ================= BLOG FOOTER / CTA ================= */
.blog-embed-foot{display:flex;flex-wrap:wrap;gap:10px 12px;align-items:center;justify-content:flex-start}
.blog-embed-foot.center{justify-content:center}
.blog-embed-foot.split{justify-content:space-between}
.blog-embed-more{margin-top:14px}

/* ================= RESPONSIVE BREAKPOINTS ================= */
@media(min-width:360px){
	/* ================= BLOG EMBED WRAPPERS ================= */
	.blog-embed{gap:15px}
	.blog-embed-track{gap:14px}
	/* ================= BLOG HERO FEATURE CARD ================= */
	.blog-embed-card.blog-embed-card--hero{--blog-card-body-padding:16px}
	/* ================= BLOG CARD ================= */
	.blog-embed-card.archive-card{--blog-card-body-padding:13px 14px 15px;--blog-card-title-size:1.06rem}
	.blog-embed-card{--blog-card-body-padding:16px;--blog-card-title-size:clamp(1.06rem,3.8vw,1.2rem)}
}

@media(min-width:700px){
	/* ================= BLOG EMBED WRAPPERS ================= */
	.blog-embed{gap:16px}
	/* ================= BLOG CARD ================= */
	.blog-embed-card{--blog-card-body-padding:18px;--blog-card-title-size:clamp(1.02rem,1.9vw,1.2rem);--blog-card-copy-size:.92rem}
}

@media(min-width:1024px){
	/* ================= BLOG EMBED WRAPPERS ================= */
	.blog-embed{gap:18px}
	/* ================= BLOG CARD ================= */
	.blog-embed-card.archive-card{--blog-card-title-size:1.1rem}
	.blog-embed-card{scroll-snap-align:unset;scroll-snap-stop:normal;--blog-card-title-size:1.3rem}
}

@media(hover:hover){
	/* ================= BLOG CARD ================= */
	.blog-embed-card:hover{transform:translateY(var(--blog-card-hover-lift,-3px));box-shadow:var(--blog-card-hover-shadow,0 22px 60px rgba(0,0,0,.34));border-color:var(--blog-card-hover-border,rgba(255,255,255,.14))}
	.blog-embed-card.featured:hover{border-color:rgba(255,77,77,.24)}
}