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

Purpose
-------
This file contains the shared CSS used across individual blog post pages on joshuadaltonmedia.com. It is intended to replace repeated inline blog article styles so each post page can stay lean and only contain its own content, metadata, and any truly unique overrides.

What belongs in this file
-------------------------
- Blog post page layout
- Breadcrumb styling
- Shared article card structure
- Hero media styling
- Article typography and content blocks
- Table of contents sidebar
- Post footer / share controls
- Author / related / pagination blocks
- Shared responsive breakpoint rules for blog posts

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

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

Relationship to page files
--------------------------
Page files should typically load:
1. /assets/css/global.css
2. /assets/css/lightbox.css
3. /assets/css/blog-post.css

Maintenance rule
----------------
If a style is only used by one specific post, keep it in that page. If it is likely to be reused by future blog posts, it belongs here.
*/

/* ================= BLOG TOKENS ================= */
:root{--post-max:860px;--post-gap:20px;--post-side:300px;--post-pad:20px;--post-pad-wide:26px;--post-surface:#fff;--post-ink:#111;--post-ink-soft:#222;--post-line:#e9e9e9;--post-line-strong:#ddd;--post-muted:#555;--post-meta:#444;--post-soft:#f6f6f6;--post-soft-2:#f2f2f2;--post-radius:var(--radius);--post-radius-sm:12px;--post-radius-xs:10px;--post-shadow:0 12px 30px rgba(0,0,0,.12);--post-measure:72ch;--post-sticky-top:84px}

/* ================= BREADCRUMBS ================= */
.crumbs{margin:14px 0 6px}

/* ================= POST PAGE LAYOUT ================= */
.post-shell{display:grid;gap:var(--post-gap)}
.post-grid{display:grid;grid-template-columns:1fr;grid-template-areas:"toc" "article";gap:var(--post-gap);margin:16px 0 40px}
.post-main{grid-area:article;min-width:0}
.post-card{background:var(--post-surface);color:var(--post-ink);border:1px solid var(--post-line);border-radius:var(--post-radius);overflow:hidden;box-shadow:var(--post-shadow)}
.post-body{padding:var(--post-pad)}
.post-body>*:first-child{margin-top:0}
.post-title{margin:6px 0 4px;color:var(--post-ink);font-size:22px;line-height:1.18;letter-spacing:.1px;text-wrap:balance}
.post-subtitle{margin:0 0 10px;color:var(--post-muted);font-size:.95rem;line-height:1.5}
.post-meta{margin-bottom:14px;color:var(--post-meta);font-size:.8rem;line-height:1.45}
.post-meta a{color:inherit}
.post-lead{margin:0 0 14px;color:var(--post-ink-soft);font-size:15px;line-height:1.65}
.post-lead strong{color:var(--post-ink)}

/* ================= HERO MEDIA ================= */
.post-hero,.hero{position:relative;display:block;aspect-ratio:16/9;margin:0;background:var(--post-soft-2);overflow:hidden;border-bottom:1px solid var(--post-line);cursor:pointer}
.post-hero img,.hero img{width:100%;height:100%;object-fit:cover}
.post-hero figcaption,.hero figcaption{padding:10px 12px;background:#fff;color:var(--post-muted);font-size:.8rem;line-height:1.45;border-top:1px solid var(--post-line)}
.hero-play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none}
.hero-play span{display:flex;align-items:center;justify-content:center;width:62px;height:62px;border-radius:50%;background:rgba(0,0,0,.45);backdrop-filter:blur(4px)}
.hero-play span::after{content:"";margin-left:3px;border-style:solid;border-width:12px 0 12px 20px;border-color:transparent transparent transparent var(--accent)}

/* ================= GENERIC ARTICLE MEDIA ================= */
.post-image,.post-media{margin:18px 0 4px}
.post-image img,.post-media img{width:100%;border:1px solid var(--post-line);border-radius:var(--post-radius-sm)}
.post-image video,.post-media video{display:block;width:100%;border:1px solid var(--post-line);border-radius:var(--post-radius-sm);background:#000}
.post-image iframe,.post-media iframe{display:block;width:100%;aspect-ratio:16/9;border:0;border-radius:var(--post-radius-sm);background:#000}
.post-image figcaption,.post-media figcaption{margin-top:8px;color:var(--post-muted);font-size:.8rem;line-height:1.45}
.post-media.is-full img,.post-media.is-full video,.post-media.is-full iframe{border-radius:0;border-left:0;border-right:0}
.post-media.is-card{padding:12px;border:1px solid var(--post-line);border-radius:var(--post-radius-sm);background:var(--post-soft)}

/* ================= ARTICLE TYPOGRAPHY ================= */
article.post,.post-content{font-size:15px;line-height:1.6;color:var(--post-ink);max-width:100%}
article.post>*:first-child,.post-content>*:first-child{margin-top:0}
article.post>*:last-child,.post-content>*:last-child{margin-bottom:0}
article.post :is(h2,h3,h4,h5,h6),.post-content :is(h2,h3,h4,h5,h6){scroll-margin-top:96px}
article.post h2,.post-content h2{margin:28px 0 8px;color:var(--post-ink);font-size:20px;line-height:1.28}
article.post h3,.post-content h3{margin:22px 0 6px;color:var(--post-ink);font-size:17px;line-height:1.32}
article.post h4,.post-content h4{margin:18px 0 6px;color:var(--post-ink);font-size:15px;line-height:1.35}
article.post p,.post-content p{margin:12px 0;color:var(--post-ink-soft);font-size:15px;line-height:1.65;max-width:var(--post-measure)}
article.post a,.post-content a{word-break:break-word}
article.post strong,.post-content strong{color:var(--post-ink)}
article.post em,.post-content em{font-style:italic}
article.post ul,.post-content ul{margin:12px 0;padding-left:20px;max-width:var(--post-measure)}
article.post ol,.post-content ol{margin:12px 0;padding-left:22px;max-width:var(--post-measure)}
article.post li,.post-content li{margin:6px 0;font-size:15px;line-height:1.6;color:var(--post-ink-soft)}
article.post hr,.post-content hr{margin:22px 0;border:0;border-top:1px solid var(--post-line)}
article.post blockquote,.post-content blockquote{margin:20px 0;padding:14px 14px 14px 16px;border-left:4px solid var(--accent);background:var(--post-soft);border-radius:0 var(--post-radius-xs) var(--post-radius-xs) 0;color:var(--post-ink)}
article.post blockquote>*:first-child,.post-content blockquote>*:first-child{margin-top:0}
article.post blockquote>*:last-child,.post-content blockquote>*:last-child{margin-bottom:0}
article.post code,.post-content code{padding:.15em .38em;border-radius:6px;background:#f0f0f0;color:#222;font-size:.92em}
article.post pre,.post-content pre{margin:18px 0;padding:14px;overflow:auto;border:1px solid var(--post-line);border-radius:var(--post-radius-sm);background:#111;color:#f2f2f2}
article.post pre code,.post-content pre code{padding:0;background:none;color:inherit}
article.post table,.post-content table{width:100%;margin:18px 0;border-collapse:collapse;border:1px solid var(--post-line);border-radius:var(--post-radius-sm);overflow:hidden;display:block;overflow-x:auto;background:#fff}
article.post thead,.post-content thead{background:var(--post-soft)}
article.post th,.post-content th{padding:10px 12px;border-bottom:1px solid var(--post-line);font-size:.84rem;line-height:1.35;text-align:left;color:var(--post-ink);white-space:nowrap}
article.post td,.post-content td{padding:10px 12px;border-top:1px solid var(--post-line);font-size:.92rem;line-height:1.5;color:var(--post-ink-soft);vertical-align:top;white-space:nowrap}
article.post .lead,.post-content .lead{margin:0 0 14px;color:var(--post-ink-soft);font-size:15px;line-height:1.65}
article.post .kicker,.post-content .kicker{display:inline-block;margin:0 0 8px;padding:6px 10px;border-radius:999px;background:var(--post-soft);color:var(--post-ink);font-size:.75rem;line-height:1.2;font-weight:700}
article.post .small,.post-content .small{font-size:.86rem;line-height:1.5;color:var(--post-muted)}
article.post .muted,.post-content .muted{color:var(--post-muted)}
article.post .align-center,.post-content .align-center{text-align:center}
article.post .align-right,.post-content .align-right{text-align:right}

/* ================= CONTENT UTILITIES ================= */
.post-callout{margin:18px 0;padding:14px;border:1px solid var(--post-line);border-radius:var(--post-radius-sm);background:var(--post-soft)}
.post-callout>*:first-child{margin-top:0}
.post-callout>*:last-child{margin-bottom:0}
.post-callout.is-accent{border-color:rgba(255,77,77,.28);background:rgba(255,77,77,.08)}
.post-callout.is-dark{background:#1a1a1a;border-color:#2a2a2a;color:#efefef}
.post-callout.is-dark :is(p,h2,h3,h4,strong,li,a){color:inherit}

.post-checklist{display:grid;gap:10px;margin:18px 0}
.post-check{position:relative;padding:12px 14px 12px 46px;border:1px solid var(--post-line);border-radius:var(--post-radius-xs);background:var(--post-soft);color:var(--post-ink-soft);font-size:15px;line-height:1.65}
.post-check::before{content:"✓";position:absolute;top:12px;left:14px;display:flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;background:rgba(255,77,77,.12);color:var(--accent);font-weight:800;font-size:.8rem}
.post-check strong{color:var(--post-ink)}
.post-check > *:first-child{margin-top:0}
.post-check > *:last-child{margin-bottom:0}

.post-split{display:grid;gap:12px}
.post-cards{display:grid;gap:12px;margin:20px 0}
.post-card-lite{padding:14px;border:1px solid var(--post-line);border-radius:var(--post-radius-sm);background:var(--post-soft)}
.post-card-lite>*:first-child{margin-top:0}
.post-card-lite>*:last-child{margin-bottom:0}

/* ================= CTA ================= */
.post-cta{display:flex;flex-wrap:wrap;gap:12px;margin:24px 0 8px}
.post-cta .btn{min-height:42px}

/* ================= POST FOOTER ================= */
.post-footer{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;margin-top:26px;padding-top:12px;border-top:1px solid var(--post-line)}
.tags{font-size:.8rem;line-height:1.5;color:var(--post-muted)}
.tags a{color:inherit;text-decoration:none}
.tags a:hover{text-decoration:underline}
.share{display:flex;flex-wrap:wrap;gap:8px}
.share a,.share button{display:inline-flex;align-items:center;justify-content:center;min-height:34px;padding:6px 10px;border:1px solid #e5e5e5;border-radius:999px;background:#fff;color:#444;font-size:.8rem;line-height:1.2;text-decoration:none;cursor:pointer}
.share a:hover,.share button:hover{text-decoration:none;background:#fafafa}
.share a[aria-current="true"],.share button[aria-current="true"]{border-color:rgba(255,77,77,.28);background:rgba(255,77,77,.08);color:#b32626}

/* ================= AUTHOR / RELATED / PAGINATION ================= */
.post-author,.author-card{display:grid;gap:10px;margin-top:22px;padding:16px;border:1px solid var(--post-line);border-radius:var(--post-radius-sm);background:var(--post-soft)}
.post-author-head{display:flex;align-items:center;gap:12px}
.post-author-avatar{width:54px;height:54px;border-radius:50%;overflow:hidden;flex:0 0 auto;border:1px solid var(--post-line-strong);background:#ddd}
.post-author-avatar img{width:100%;height:100%;object-fit:cover}
.post-author-copy{display:grid;gap:4px}
.post-author-name{margin:0;color:var(--post-ink);font-size:1rem;line-height:1.2;font-weight:700}
.post-author-role{margin:0;color:var(--post-muted);font-size:.84rem;line-height:1.4}
.post-author-bio{margin:0;color:var(--post-ink-soft);font-size:.92rem;line-height:1.6}

.related-posts{display:grid;gap:12px;margin-top:24px}
.related-posts-grid{display:grid;gap:12px}
.related-post{display:grid;gap:10px;padding:12px;border:1px solid var(--post-line);border-radius:var(--post-radius-sm);background:#fff;color:var(--post-ink);text-decoration:none}
.related-post:hover{text-decoration:none;box-shadow:var(--post-shadow)}
.related-post-media{aspect-ratio:16/10;border-radius:10px;overflow:hidden;background:var(--post-soft-2)}
.related-post-media img{width:100%;height:100%;object-fit:cover}
.related-post-copy{display:grid;gap:6px}
.related-post-kicker{font-size:.72rem;line-height:1.2;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--post-muted)}
.related-post-title{margin:0;color:var(--post-ink);font-size:1rem;line-height:1.3;font-weight:700}
.related-post-text{margin:0;color:var(--post-muted);font-size:.88rem;line-height:1.5}

.post-pagination{display:grid;gap:10px;margin-top:22px}
.post-pagination a{display:flex;justify-content:space-between;gap:12px;padding:12px 14px;border:1px solid var(--post-line);border-radius:var(--post-radius-sm);background:#fff;color:var(--post-ink);text-decoration:none}
.post-pagination a:hover{text-decoration:none;background:#fafafa}
.post-pagination small{display:block;color:var(--post-muted)}
.post-pagination strong{display:block;color:var(--post-ink)}

/* ================= SIDEBAR / TOC ================= */
aside.sidebar,.post-sidebar{grid-area:toc;position:static;top:auto;height:fit-content;padding:16px;border:1px solid var(--line);border-radius:12px;background:var(--panel);color:var(--ink)}
aside.sidebar .hd,.post-sidebar .hd{margin-bottom:8px;color:#fff;font-weight:800}
.byline{font-size:.8rem;line-height:1.5;color:#bdbdbd}
.toc,.post-toc{margin:0;padding-left:16px;font-size:.8rem;line-height:1.55;color:#e5e5e5}
.toc li,.post-toc li{margin:5px 0}
.toc a,.post-toc a{color:#e5e5e5;text-decoration:none}
.toc a:hover,.post-toc a:hover{text-decoration:underline}
.toc a.is-active,.post-toc a.is-active{color:#fff;font-weight:700}
.post-sidebar .side-media,aside.sidebar .side-media{margin:12px -16px -4px;overflow:hidden;border:1px solid var(--line);border-radius:0;background:#0f0f0f}
.post-sidebar .side-media img,aside.sidebar .side-media img{display:block;width:100%;height:auto}
.post-sidebar hr,aside.sidebar hr{margin:14px 0;border:0;border-top:1px solid var(--line)}

/* ================= OPTIONAL ENHANCEMENTS ================= */
.heading-anchor{position:relative}
.heading-anchor .anchor-link{opacity:0;margin-left:.4rem;color:var(--post-muted);text-decoration:none;font-weight:700}
.heading-anchor:hover .anchor-link,.heading-anchor:focus-within .anchor-link{opacity:1}
.post-progress{position:fixed;top:56px;left:0;width:100%;height:3px;z-index:1250;pointer-events:none}
.post-progress-bar{width:0;height:100%;background:var(--accent);box-shadow:0 0 16px rgba(255,77,77,.35)}
.post-note{margin:18px 0;padding:12px 14px;border-radius:var(--post-radius-xs);background:#fff8e8;border:1px solid #f0dfb7;color:#5e4c1a}
.post-warning{margin:18px 0;padding:12px 14px;border-radius:var(--post-radius-xs);background:#fff1f1;border:1px solid #f1cccc;color:#6b1e1e}

/* ================= RESPONSIVE: 360 ================= */
@media(min-width:360px){
	.post-body{padding:22px}
	.post-title{font-size:24px}
	.post-lead{font-size:16px}
	article.post,.post-content{font-size:16px}
	article.post p,.post-content p{font-size:16px}
	article.post li,.post-content li{font-size:16px}
	article.post h2,.post-content h2{font-size:22px}
	article.post h3,.post-content h3{font-size:18px}
}

/* ================= RESPONSIVE: 700 ================= */
@media(min-width:700px){
	.post-grid{grid-template-columns:minmax(0,1fr) minmax(240px,var(--post-side));grid-template-areas:"article toc";align-items:start}
	.post-body{padding:24px var(--post-pad-wide)}
	.post-title{font-size:28px}
	.post-lead{font-size:17px}
	article.post,.post-content{font-size:17px}
	article.post p,.post-content p{font-size:17px}
	article.post li,.post-content li{font-size:17px}
	article.post h2,.post-content h2{font-size:24px}
	article.post h3,.post-content h3{font-size:19px}
	aside.sidebar,.post-sidebar{position:sticky;top:var(--post-sticky-top)}
	.post-split{grid-template-columns:repeat(2,minmax(0,1fr))}
	.post-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
	.related-posts-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ================= RESPONSIVE: 1024 ================= */
@media(min-width:1024px){
	.post-grid{grid-template-columns:minmax(0,1fr) 320px}
	.post-title{font-size:32px}
	article.post,.post-content{font-size:18px}
	article.post p,.post-content p{font-size:18px}
	article.post li,.post-content li{font-size:18px}
	article.post h2,.post-content h2{font-size:26px}
	article.post h3,.post-content h3{font-size:20px}
	.post-body{padding:26px 30px}
	.related-posts-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
	.post-cards.is-three{grid-template-columns:repeat(3,minmax(0,1fr))}
	.post-cards.is-four{grid-template-columns:repeat(4,minmax(0,1fr))}
}