/* =========================================================
   SEEBY SOUND — blog.css  (blog list + single article)
   ========================================================= */

/* ---------- Blog hero ---------- */
.blog-hero{ background:var(--black); color:#fff; }
.blog-hero__inner{ padding-block:48px 40px; text-align:center; }
@media (min-width:768px){ .blog-hero__inner{ padding-block:72px 56px; } }
.blog-hero p.eyebrow{ color:var(--yellow); }
.blog-hero h1{ font-size:clamp(2.4rem,7vw,4rem); margin-top:10px; }
.blog-hero .lead{ color:#cfcfca; max-width:54ch; margin:14px auto 0; font-size:1.12rem; }
.blog-search{ display:flex; max-width:440px; margin:26px auto 0; }
.blog-search input{ flex:1; padding:13px 16px; border-radius:7px 0 0 7px; border:0; font-size:.98rem; }
.blog-search button{ background:var(--yellow); color:#0a0a0a; padding:0 18px; border-radius:0 7px 7px 0; display:flex; align-items:center; }
.blog-search button svg{ width:20px; height:20px; }

/* ---------- Category chips ---------- */
.blog-chips{ background:#fff; border-bottom:1px solid var(--line); position:sticky; top:var(--header-h); z-index:40; }
.blog-chips__scroll{ display:flex; gap:8px; overflow-x:auto; padding-block:14px; scrollbar-width:none; }
.blog-chips__scroll::-webkit-scrollbar{ display:none; }
.blog-chip{ flex:0 0 auto; font-family:var(--ff-head); font-weight:600; text-transform:uppercase; letter-spacing:.04em; font-size:.9rem; padding:9px 16px; border-radius:30px; border:1.5px solid var(--line-2); white-space:nowrap; transition:.15s; }
.blog-chip:hover{ border-color:var(--ink); }
.blog-chip.is-active{ background:var(--yellow); border-color:var(--yellow); color:#0a0a0a; }

/* ---------- Featured post ---------- */
.featured-post{
  display:grid; grid-template-columns:1fr; gap:0; background:#fff;
  border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden; margin-bottom:36px;
}
@media (min-width:860px){ .featured-post{ grid-template-columns:1.15fr 1fr; } }
.featured-post__media{ position:relative; min-height:240px; }
@media (min-width:860px){ .featured-post__media{ min-height:380px; } }
.featured-post__media .ph{ position:absolute; inset:0; }
.featured-post__tag{ position:absolute; top:16px; left:16px; background:var(--yellow); color:#0a0a0a; font-family:var(--ff-head); font-weight:700; text-transform:uppercase; letter-spacing:.05em; font-size:.75rem; padding:5px 11px; border-radius:4px; }
.featured-post__body{ padding:28px; display:flex; flex-direction:column; justify-content:center; }
@media (min-width:860px){ .featured-post__body{ padding:44px; } }
.featured-post__kicker{ font-family:var(--ff-head); font-weight:700; text-transform:uppercase; letter-spacing:.1em; color:#a07a00; font-size:.78rem; }
.featured-post h2{ font-size:clamp(1.7rem,4vw,2.6rem); line-height:1.02; margin:10px 0 12px; text-transform:none; letter-spacing:0; }
.featured-post h2 a:hover{ color:var(--yellow-dark); }
.featured-post p{ color:var(--muted); font-size:1.05rem; }
.post-meta{ display:flex; align-items:center; gap:12px; margin-top:18px; font-size:.88rem; color:var(--muted); }
.post-meta .avatar{ width:38px; height:38px; border-radius:50%; background:var(--bg-2); border:1px solid var(--line-2); display:flex; align-items:center; justify-content:center; font-family:var(--ff-head); font-weight:700; color:var(--muted); font-size:.9rem; }
.post-meta strong{ color:var(--ink); display:block; font-size:.92rem; }
.featured-post .btn{ align-self:flex-start; margin-top:22px; }

/* ---------- Post list grid ---------- */
.blog-grid{ display:grid; grid-template-columns:1fr; gap:22px; }
@media (min-width:600px){ .blog-grid{ grid-template-columns:1fr 1fr; } }
@media (min-width:1000px){ .blog-grid{ grid-template-columns:repeat(3,1fr); } }
.blog-grid .post-card.hide{ display:none; }

/* ---------- Mid CTA ---------- */
.blog-cta{ background:var(--ink); color:#fff; border-radius:var(--radius-lg); padding:36px 28px; text-align:center; margin-top:40px; }
.blog-cta h3{ font-size:clamp(1.5rem,4vw,2.2rem); }
.blog-cta p{ color:#bcbcb6; margin:8px auto 20px; max-width:46ch; }
.blog-cta__form{ display:flex; flex-direction:column; gap:10px; max-width:420px; margin:0 auto; }
@media (min-width:520px){ .blog-cta__form{ flex-direction:row; } }
.blog-cta__form input{ flex:1; padding:13px 15px; border-radius:7px; border:1px solid rgba(255,255,255,.2); background:rgba(255,255,255,.07); color:#fff; }
.blog-cta__form input::placeholder{ color:#9a9a92; }

/* =========================================================
   SINGLE ARTICLE
   ========================================================= */
.article-hero{ background:var(--black); color:#fff; }
.article-hero__inner{ padding-block:40px 32px; max-width:820px; }
.article-tag{ display:inline-block; background:var(--yellow); color:#0a0a0a; font-family:var(--ff-head); font-weight:700; text-transform:uppercase; letter-spacing:.05em; font-size:.76rem; padding:5px 12px; border-radius:4px; }
.article-hero h1{ font-size:clamp(2rem,6vw,3.4rem); line-height:1.02; margin:16px 0; text-transform:none; letter-spacing:0; font-weight:700; }
.article-hero .standfirst{ color:#cfcfca; font-size:1.18rem; line-height:1.5; max-width:60ch; }
.article-byline{ display:flex; align-items:center; gap:8px 14px; margin-top:24px; flex-wrap:wrap; }
.article-byline .who{ flex:0 0 auto; }
.article-byline .who strong{ white-space:nowrap; }
.article-byline .avatar{ width:46px; height:46px; border-radius:50%; background:#222; border:1px solid #333; display:flex; align-items:center; justify-content:center; font-family:var(--ff-head); font-weight:700; color:var(--yellow); }
.article-byline .who strong{ display:block; font-size:.98rem; }
.article-byline .who span{ font-size:.84rem; color:#aaa; }
.article-byline .dot{ width:4px; height:4px; border-radius:50%; background:#666; }
.article-byline .meta-bits{ display:flex; align-items:center; gap:10px; font-size:.86rem; color:#bbb; }
.article-byline .meta-bits span{ white-space:nowrap; }

/* hero image */
.article-figure{ margin-top:28px; position:relative; z-index:2; }
.article-figure .ph{ aspect-ratio:16/8; border-radius:var(--radius-lg); box-shadow:var(--shadow); }
.article-figure figcaption{ text-align:center; color:var(--muted); font-size:.85rem; margin-top:10px; }

/* layout: content + TOC */
.article-wrap{ display:grid; grid-template-columns:1fr; gap:40px; padding-block:48px 64px; }
@media (min-width:1000px){ .article-wrap{ grid-template-columns:1fr 240px; align-items:start; } }

/* readable body */
.article-body{ max-width:720px; font-size:1.13rem; line-height:1.8; color:#26282e; }
.article-body > * + *{ margin-top:1.45em; }
.article-body p{ }
.article-body .lead-p{ font-size:1.28rem; line-height:1.6; color:#16181d; font-weight:500; }
.article-body h2{ font-family:var(--ff-head); font-size:1.9rem; line-height:1.05; margin-top:2em; text-transform:none; letter-spacing:0; }
.article-body h3{ font-family:var(--ff-head); font-size:1.4rem; margin-top:1.6em; text-transform:none; letter-spacing:0; }
.article-body a{ color:var(--yellow-dark); text-decoration:underline; text-underline-offset:2px; }
.article-body ul,.article-body ol{ padding-left:1.3em; }
.article-body ul li{ list-style:disc; margin-top:.6em; }
.article-body ol li{ list-style:decimal; margin-top:.6em; }
.article-body img,.article-body .ph{ border-radius:var(--radius); }
.article-body figure .ph{ aspect-ratio:16/9; }
.article-body figcaption{ font-size:.85rem; color:var(--muted); text-align:center; margin-top:8px; }
.article-body blockquote{
  border-left:4px solid var(--yellow); padding:6px 0 6px 22px; margin-left:0;
  font-family:var(--ff-head); font-weight:500; font-size:1.5rem; line-height:1.25; color:var(--ink); text-transform:none; letter-spacing:0;
}
.article-body strong{ font-weight:700; }

/* callout */
.callout{ background:#fffaeb; border:1px solid #f5e3a8; border-radius:12px; padding:22px 24px; }
.callout h4{ display:flex; align-items:center; gap:9px; font-size:1.15rem; text-transform:none; letter-spacing:0; margin-bottom:10px; }
.callout h4 svg{ width:20px; height:20px; color:#b8860b; }
.callout ul{ padding-left:1.2em; }
.callout ul li{ list-style:disc; margin-top:.4em; font-size:1rem; line-height:1.6; }

/* product inline card */
.inline-product{ display:flex; gap:16px; align-items:center; background:#fff; border:1px solid var(--line); border-radius:12px; padding:16px; }
.inline-product .ph{ width:88px; height:88px; border-radius:8px; flex-shrink:0; }
.inline-product__body{ flex:1; }
.inline-product__body .k{ font-size:.74rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted-2); font-weight:600; }
.inline-product__body h4{ text-transform:none; letter-spacing:0; font-size:1.1rem; margin:2px 0 4px; }
.inline-product__body .price{ font-size:1.2rem; }
.inline-product .btn{ flex-shrink:0; }
@media (max-width:520px){ .inline-product{ flex-wrap:wrap; } .inline-product .btn{ width:100%; } }

/* share */
.article-share{ display:flex; align-items:center; gap:10px; margin-top:36px; padding-top:24px; border-top:1px solid var(--line); flex-wrap:wrap; }
.article-share span{ font-family:var(--ff-head); font-weight:700; text-transform:uppercase; letter-spacing:.05em; font-size:.85rem; color:var(--muted); }
.share-btn{ width:42px; height:42px; border-radius:8px; border:1.5px solid var(--line-2); display:inline-flex; align-items:center; justify-content:center; color:var(--muted); transition:.15s; }
.share-btn:hover{ border-color:var(--ink); color:var(--ink); }
.share-btn svg{ width:18px; height:18px; }
.article-tags{ display:flex; flex-wrap:wrap; gap:8px; margin-top:20px; }
.article-tags a{ background:var(--bg-2); border:1px solid var(--line-2); border-radius:20px; padding:5px 13px; font-size:.82rem; color:var(--muted); }
.article-tags a:hover{ color:var(--ink); }

/* author box */
.author-box{ display:flex; gap:18px; align-items:flex-start; background:#fff; border:1px solid var(--line); border-radius:14px; padding:24px; margin-top:32px; }
.author-box .avatar{ width:64px; height:64px; border-radius:50%; background:var(--bg-2); border:1px solid var(--line-2); display:flex; align-items:center; justify-content:center; font-family:var(--ff-head); font-weight:700; color:var(--muted); font-size:1.3rem; flex-shrink:0; }
.author-box .k{ font-size:.74rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted-2); font-weight:600; }
.author-box h4{ text-transform:none; letter-spacing:0; font-size:1.2rem; margin:2px 0 6px; }
.author-box p{ color:var(--muted); font-size:.95rem; }

/* TOC */
.toc{ position:sticky; top:calc(var(--header-h) + 20px); }
.toc__title{ font-family:var(--ff-head); font-weight:700; text-transform:uppercase; letter-spacing:.06em; font-size:.8rem; color:var(--muted); margin-bottom:12px; }
.toc ul{ border-left:2px solid var(--line); }
.toc a{ display:block; padding:7px 0 7px 16px; margin-left:-2px; border-left:2px solid transparent; font-size:.92rem; color:var(--muted); line-height:1.35; }
.toc a:hover,.toc a.active{ color:var(--ink); border-left-color:var(--yellow); }
@media (max-width:999px){ .toc{ display:none; } }

/* reading progress */
.read-progress{ position:fixed; top:var(--header-h); left:0; height:3px; background:var(--yellow); width:0; z-index:55; transition:width .1s linear; }

/* related */
.related{ background:#fff; }
.related h2{ font-size:clamp(1.6rem,4vw,2.4rem); margin-bottom:24px; }
.related-grid{ display:grid; grid-template-columns:1fr; gap:22px; }
@media (min-width:680px){ .related-grid{ grid-template-columns:repeat(3,1fr); } }

/* ── Defensive containment for pasted/imported content ─────────────────────
   Prevents oversized images, tables, iframes, or unclosed-tag artifacts
   from breaking the .article-wrap two-column grid layout. */
.article-wrap { min-width: 0; }
.article-body { min-width: 0; max-width: 720px; overflow-wrap: break-word; word-break: break-word; }
.article-body img,
.article-body iframe,
.article-body video,
.article-body table,
.article-body pre {
  max-width: 100%;
  height: auto;
}
.article-body table { display: block; overflow-x: auto; }
.article-body pre { overflow-x: auto; white-space: pre-wrap; }