/* ==========================================================================
   Blog Article template (single.php) — ported from mockup 07.
   Only styles NOT already global in main.css: article hero/head, the
   three-rail layout grid, in-article typography, related grid, sidebar
   widgets, comments, responsive collapse. Shared components (toc-box,
   callouts, pc-box, faq, byline, breadcrumb, art-card, aff-block,
   disclosure-banner) live in main.css.
   ========================================================================== */

/* ---- Featured image (LCP) ---- */
.hero-img{aspect-ratio:21/8; border-radius:var(--r-lg); background:linear-gradient(120deg,var(--forest),var(--olive) 60%,#B7C08A); display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow-hover); position:relative; overflow:hidden; margin:24px 0 26px;}
.hero-img svg{width:70px; height:70px; stroke:rgba(255,253,248,.85);}
.hero-img.has-img img{width:100%; height:100%; object-fit:cover;}

/* ---- Article head ---- */
.art-head h1{font-size:36px; margin:10px 0 4px; max-width:820px;}
.art-head .byline{padding:10px 0 4px;}
.post-dates{font-size:12.5px; color:var(--bark-soft);}
.post-dates .dot{color:var(--border); margin:0 6px;}
.post-breadcrumb{padding:14px 0 22px;}

/* ---- Layout: TOC rail | body | sidebar ---- */
.article-layout{display:grid; grid-template-columns:200px minmax(0,1fr) 280px; gap:40px; align-items:start; padding-bottom:60px;}
.article-layout .toc-box{padding:18px;}
article.body-col{max-width:680px; min-width:0; line-height:1.7;}
.body-col h2{font-size:24px; margin:32px 0 14px;}
.body-col > section{scroll-margin-top:90px;}

/* ---- In-article typography (editor content) ---- */
#articleBody > h2:first-child{margin-top:0;}
#articleBody h2{scroll-margin-top:90px;}
#articleBody h3{font-family:var(--font-body); font-weight:700; font-size:18px; color:var(--forest-deep); margin:22px 0 10px;}
#articleBody p{font-size:15.5px; margin-bottom:15px;}
#articleBody > p:first-child{margin-top:0;}
#articleBody a:not(.btn){color:var(--forest); text-decoration:underline;}
#articleBody ul, #articleBody ol{margin:0 0 15px; padding-left:24px; font-size:15px;}
#articleBody ul{list-style:disc;}
#articleBody ol{list-style:decimal;}
#articleBody li{margin-bottom:6px;}
#articleBody img{border-radius:var(--r-md); height:auto;}
#articleBody blockquote{border-left:4px solid var(--gold); background:var(--paper); border-radius:var(--r-sm); padding:14px 18px; margin:20px 0; font-style:italic; color:var(--bark-soft);}
/* Component markup pasted in the editor keeps its own bullet treatment. */
#articleBody .pc-box ul, #articleBody .callout ul{list-style:none; padding-left:0; margin-bottom:0;}
#articleBody .callout, #articleBody .pc-box{margin:20px 0;}

/* Editor comparison tables (mockup's .comp-table + plain core tables). */
#articleBody table{width:100%; border-collapse:collapse; margin:20px 0; background:var(--paper); border-radius:var(--r-md); overflow:hidden; box-shadow:var(--shadow-soft);}
#articleBody table th{background:var(--forest-deep); color:var(--white); text-align:left; padding:11px 14px; font-size:12px; text-transform:uppercase; letter-spacing:.04em;}
#articleBody table td{padding:11px 14px; border-bottom:1px solid var(--border); font-size:14px;}
#articleBody table tr:last-child td{border-bottom:none;}
#articleBody .wp-block-table{overflow-x:auto;}

/* ---- Related articles ---- */
.related-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin:16px 0 10px;}
.related-grid .thumb{height:100px;}
.related-grid .art-body{padding:12px 14px;}
.related-grid .art-body h4{font-size:13px; font-family:var(--font-body); font-weight:700; margin:4px 0 8px;}

.post-disclosure{margin-top:28px;}

/* ---- Comments ----
   Form + list styling is site-wide in main.css (COMMENTS / LEAVE A REPLY);
   only the block spacing is template-specific. */
.comments-block{margin-top:40px;}

/* ---- Sidebar ---- */
.sidebar{display:flex; flex-direction:column; gap:24px; min-width:0;}
.side-block{background:var(--paper); border-radius:var(--r-lg); padding:20px; box-shadow:var(--shadow-soft);}
.side-block h5{font-family:var(--font-body); font-size:12px; text-transform:uppercase; letter-spacing:.05em; color:var(--olive); font-weight:800; margin-bottom:14px;}
.side-search{display:flex; border:1px solid var(--border); border-radius:999px; overflow:hidden; background:var(--cream);}
.side-search input{flex:1; min-width:0; border:none; padding:10px 14px; font-family:var(--font-body); font-size:13px; background:none;}
.side-search button{background:var(--forest); border:none; color:var(--white); padding:0 14px; cursor:pointer; display:flex; align-items:center;}
.side-search button svg{width:15px; height:15px;}
.side-list li{padding:9px 0; border-bottom:1px solid var(--border); font-size:13px; font-weight:600; line-height:1.4;}
.side-list li:last-child{border-bottom:none; padding-bottom:0;}
.side-list li:first-child{padding-top:0;}
.side-list a{color:var(--forest-deep);}
.side-list a:hover{color:var(--forest);}
.side-cats a{display:flex; justify-content:space-between; gap:10px; padding:7px 0; font-size:13px; color:var(--bark-soft);}
.side-cats a:hover{color:var(--forest);}
.side-prod-stack{display:flex; flex-direction:column; gap:14px;}
.side-prod-stack .thumb{height:110px;}
.side-prod-stack .art-body{padding:12px 14px;}
.side-prod-stack .art-body h4{font-size:13.5px; margin:4px 0 8px;}
.side-news p{font-size:12.5px; color:var(--bark-soft); margin-bottom:12px;}
.side-news input{width:100%; padding:10px 14px; border-radius:999px; border:1px solid var(--border); font-size:12.5px; margin-bottom:8px; font-family:var(--font-body); background:var(--cream);}
.side-news .btn{width:100%; justify-content:center; padding:10px 20px; font-size:13px;}

/* ---- Responsive ---- */
@media(max-width:1080px){
	.article-layout{grid-template-columns:1fr; gap:24px;}
	.article-layout .toc-sticky{position:static; margin-bottom:2px;}
	article.body-col{max-width:none;}
	/* Sidebar becomes a swipeable row between content and footer. */
	.sidebar{flex-direction:row; overflow-x:auto; padding-bottom:8px;}
	.sidebar .side-block{min-width:260px; flex-shrink:0;}
}
@media(max-width:640px){
	.art-head h1{font-size:27px;}
	.hero-img{aspect-ratio:16/9;}
	.related-grid{grid-template-columns:1fr;}
	.sidebar{flex-direction:column; overflow-x:visible;}
	.sidebar .side-block{min-width:0;}
}

@media print{
	.sidebar, .comments-block{display:none !important;}
	.article-layout{grid-template-columns:1fr;}
}