/* =========================================================
   COWBELL — blog.css  (blog listing + article pages)
   Uses the site's own tokens from style.css, so it follows the
   light steel / brass / teal theme and the admin Design settings.
   ========================================================= */
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.blog-wrap{max-width:var(--container,1220px);margin:0 auto;padding:0 28px}
.blog-hero-eyebrow{font-family:var(--font-mono);font-size:.74rem!important;letter-spacing:.2em;text-transform:uppercase;color:#e8ab5c!important;margin:0 auto .8rem!important;display:inline-flex;align-items:center;gap:.6rem}
.blog-hero-eyebrow::before{content:'';width:24px;height:2px;background:linear-gradient(90deg,#e8ab5c,#5fd0d6);border-radius:2px}
.blog-post-hero h1{max-width:900px;margin-left:auto;margin-right:auto}
.blog-post-hero{padding-bottom:60px}
.blog-hero-meta{font-family:var(--font-mono);font-size:.8rem!important;letter-spacing:.03em;opacity:.9}

/* ---------- listing ---------- */
.blog-section{padding:56px 0 90px;background:var(--steel-950)}
.blog-toolbar{display:flex;gap:16px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin-bottom:34px}
.blog-chips{display:flex;flex-wrap:wrap;gap:8px}
.blog-chip{border:1px solid var(--steel-line);background:var(--steel-900);color:var(--milk);padding:9px 18px;border-radius:100px;font-size:.86rem;font-weight:500;transition:all var(--dur-s) var(--ease)}
.blog-chip:hover{border-color:var(--teal);color:var(--teal)}
.blog-chip.active{background:linear-gradient(135deg,var(--teal),var(--navy));border-color:transparent;color:#fff}
.blog-search input{width:min(320px,100%);border:1px solid var(--steel-line);background:var(--steel-900);color:var(--milk);padding:11px 18px 11px 42px;border-radius:100px;font:inherit;font-size:.92rem;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235a7580' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:15px center;background-size:17px}
.blog-search input:focus{outline:2px solid color-mix(in srgb,var(--teal) 45%,transparent);border-color:var(--teal)}
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.blog-card{background:var(--steel-900);border:1px solid var(--steel-line);border-radius:20px;overflow:hidden;display:flex;flex-direction:column;transition:transform var(--dur-s) var(--ease),box-shadow var(--dur-s) var(--ease),border-color var(--dur-s) var(--ease)}
.blog-card:hover{transform:translateY(-5px);box-shadow:0 20px 40px -18px rgba(11,33,45,.22);border-color:rgba(168,104,26,.35)}
.blog-card-media{display:block;aspect-ratio:16/10;overflow:hidden;background:var(--steel-800)}
.blog-card-media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform var(--dur-m) var(--ease)}
.blog-card:hover .blog-card-media img{transform:scale(1.05)}
.blog-cover-empty{width:100%;height:100%;background:linear-gradient(135deg,var(--steel-800),var(--steel-700))}
.blog-card-body{padding:22px 24px 26px;display:flex;flex-direction:column;gap:11px;flex:1}
.blog-meta{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;font-family:var(--font-mono);font-size:.7rem;color:var(--milk-faint);letter-spacing:.02em}
.blog-pill{background:rgba(168,104,26,.12);color:var(--brass-bright);padding:4px 11px;border-radius:100px;font-weight:600}
.blog-pill-hot{background:linear-gradient(135deg,var(--brass),var(--brass-bright));color:#fff}
.blog-card h3{font-size:1.2rem;line-height:1.3;letter-spacing:-.01em}
.blog-card h3 a:hover{color:var(--teal)}
.blog-card p{font-size:.94rem;color:var(--milk-dim);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.blog-more{margin-top:auto;color:var(--teal);font-weight:600;font-size:.88rem;display:inline-flex;gap:6px;align-items:center}
.blog-more span{transition:transform var(--dur-s) var(--ease)}
.blog-card:hover .blog-more span{transform:translateX(4px)}
.blog-featured-wrap{margin-bottom:26px}
.blog-card-featured{flex-direction:row;min-height:380px}
.blog-card-featured .blog-card-media{flex:1.25;aspect-ratio:auto}
.blog-card-featured .blog-card-body{flex:1;justify-content:center;padding:38px 42px;gap:16px}
.blog-card-featured h3{font-size:clamp(1.5rem,2.6vw,2.15rem)}
.blog-card-featured p{-webkit-line-clamp:5;font-size:1.02rem}
.blog-empty{text-align:center;color:var(--milk-faint);padding:50px 0}
[hidden]{display:none!important}

/* ---------- article ---------- */
.blog-article{background:var(--steel-950);padding:0 0 30px}
.blog-post-wrap{max-width:1160px;margin:0 auto;padding:0 28px}
.blog-post-cover{margin:-36px 0 40px;border-radius:24px;overflow:hidden;box-shadow:0 30px 60px -28px rgba(11,33,45,.45);border:1px solid var(--steel-line);background:var(--steel-800);position:relative}
.blog-post-cover img{width:100%;aspect-ratio:16/8;object-fit:cover;display:block}
.blog-post-layout{display:grid;grid-template-columns:minmax(0,1fr) 250px;gap:48px;align-items:start}
.blog-post-main{max-width:760px;min-width:0}
.blog-lead{font-size:1.2rem;line-height:1.65;color:var(--milk);font-weight:500;margin-bottom:1.6rem;padding-left:18px;border-left:4px solid var(--brass)}
.blog-body{font-size:1.06rem;line-height:1.8;color:var(--milk)}
.blog-body p{color:var(--milk);margin:0 0 1.25rem}
.blog-body h2{font-size:1.65rem;margin:2.4rem 0 .9rem;letter-spacing:-.02em;scroll-margin-top:110px}
.blog-body h3{font-size:1.25rem;margin:1.8rem 0 .7rem;scroll-margin-top:110px}
.blog-body ul,.blog-body ol{margin:0 0 1.4rem;padding-left:1.4rem}
.blog-body ul{list-style:disc}.blog-body ol{list-style:decimal}
.blog-body li{margin:.4rem 0;color:var(--milk);padding-left:.2rem}
.blog-body li::marker{color:var(--brass);font-weight:700}
.blog-body a{color:var(--teal);font-weight:600;border-bottom:1px solid color-mix(in srgb,var(--teal) 35%,transparent)}
.blog-body a:hover{color:var(--brass-bright);border-color:var(--brass)}
.blog-body figure{margin:1.8rem 0;text-align:center}
.blog-body figure img,.blog-body>img{margin:0 auto;border-radius:16px;max-height:520px;width:auto;max-width:100%;box-shadow:0 18px 40px -22px rgba(11,33,45,.4);border:1px solid var(--steel-line);background:#fff}
.blog-body figcaption{font-family:var(--font-mono);font-size:.74rem;color:var(--milk-faint);margin-top:.7rem}
.blog-body blockquote{margin:1.8rem 0;padding:18px 24px;border-left:4px solid var(--teal);background:var(--steel-900);border-radius:0 14px 14px 0;font-style:italic}
.blog-body table{width:100%;border-collapse:collapse;margin:1.6rem 0;font-size:.95rem;display:block;overflow-x:auto}
.blog-body th,.blog-body td{border:1px solid var(--steel-line);padding:10px 14px;text-align:left}
.blog-body th{background:var(--steel-800)}
.blog-takeaways{background:linear-gradient(135deg,rgba(12,127,134,.08),rgba(168,104,26,.08));border:1px solid var(--steel-line);border-left:5px solid var(--brass);border-radius:18px;padding:24px 28px;margin:2.2rem 0}
.blog-takeaways h2{font-size:1.1rem;font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.12em;color:var(--brass-bright);margin-bottom:.8rem}
.blog-takeaways ul{list-style:none}
.blog-takeaways li{position:relative;padding:6px 0 6px 28px;color:var(--milk)}
.blog-takeaways li::before{content:'';position:absolute;left:0;top:13px;width:16px;height:16px;border-radius:50%;background:var(--teal) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E") center/10px no-repeat}
.blog-faq{margin:2.4rem 0}
.blog-faq h2,.blog-products h2{font-size:1.5rem;margin-bottom:1rem}
.blog-faq details{background:var(--steel-900);border:1px solid var(--steel-line);border-radius:14px;margin-bottom:10px;overflow:hidden}
.blog-faq summary{cursor:pointer;padding:16px 20px;font-weight:600;font-family:var(--font-display);list-style:none;display:flex;justify-content:space-between;gap:14px}
.blog-faq summary::-webkit-details-marker{display:none}
.blog-faq summary::after{content:'+';font-size:1.4rem;line-height:1;color:var(--brass);transition:transform var(--dur-s) var(--ease)}
.blog-faq details[open] summary::after{transform:rotate(45deg)}
.blog-faq details p{padding:0 20px 18px;color:var(--milk-dim)}
.blog-products{margin:2.4rem 0}
.blog-prod-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:16px}
.blog-prod{background:var(--steel-900);border:1px solid var(--steel-line);border-radius:16px;padding:12px;display:flex;flex-direction:column;gap:8px;transition:all var(--dur-s) var(--ease)}
.blog-prod:hover{transform:translateY(-4px);border-color:rgba(168,104,26,.4);box-shadow:0 14px 28px -16px rgba(11,33,45,.3)}
.blog-prod-img{aspect-ratio:1;background:var(--steel-800);border-radius:12px;overflow:hidden;display:block}
.blog-prod-img img{width:100%;height:100%;object-fit:contain}
.blog-prod-name{font-size:.86rem;font-weight:600;line-height:1.35}
.blog-prod-price{font-family:var(--font-mono);font-size:.8rem;color:var(--brass-bright)}
.blog-cta{margin:2.6rem 0;padding:38px 34px;border-radius:24px;text-align:center;color:#fff;background:linear-gradient(135deg,var(--navy),var(--teal) 140%);box-shadow:0 24px 50px -26px rgba(11,33,45,.6)}
.blog-cta h2{color:#fff;font-size:1.7rem;margin-bottom:.5rem}
.blog-cta p{color:rgba(255,255,255,.86);max-width:520px;margin:0 auto 1.3rem}
.blog-cta-btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.blog-btn-light{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.4);color:#fff}
.blog-btn-light:hover{background:rgba(255,255,255,.25)}
.blog-share{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-family:var(--font-mono);font-size:.78rem;color:var(--milk-faint);padding-top:1rem;border-top:1px solid var(--steel-line)}
.blog-share a,.blog-share button{border:1px solid var(--steel-line);background:var(--steel-900);color:var(--milk);padding:6px 14px;border-radius:100px;font:inherit;font-size:.78rem}
.blog-share a:hover,.blog-share button:hover{border-color:var(--teal);color:var(--teal)}
.blog-toc-wrap{position:sticky;top:110px}
.blog-toc{background:var(--steel-900);border:1px solid var(--steel-line);border-radius:18px;padding:18px 20px}
.blog-toc strong{display:block;font-family:var(--font-mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--milk-faint);margin-bottom:10px}
.blog-toc a{display:block;padding:7px 0 7px 12px;font-size:.86rem;color:var(--milk-dim);border-left:2px solid var(--steel-line);line-height:1.35}
.blog-toc a:hover,.blog-toc a.on{color:var(--teal);border-left-color:var(--brass)}
.blog-related{background:var(--steel-800);padding:64px 0 80px;border-top:1px solid var(--steel-line)}
.blog-related h2{font-size:1.8rem;margin-bottom:1.6rem}
.blog-progress{position:fixed;top:0;left:0;height:3px;width:0;background:linear-gradient(90deg,var(--brass),var(--teal));z-index:200;transition:width .1s linear}

@media(max-width:980px){
  .blog-grid{grid-template-columns:repeat(2,1fr)}
  .blog-post-layout{grid-template-columns:1fr}
  .blog-toc-wrap{display:none}
  .blog-card-featured{flex-direction:column;min-height:0}
  .blog-card-featured .blog-card-media{aspect-ratio:16/10}
  .blog-card-featured .blog-card-body{padding:26px}
}
@media(max-width:620px){
  .blog-grid{grid-template-columns:1fr}
  .blog-wrap,.blog-post-wrap{padding:0 18px}
  .blog-cta{padding:28px 20px}
  .blog-post-cover img{aspect-ratio:16/10}
  .blog-body{font-size:1rem}
}