/* ============================================================
   Senyu Spices — Blog styles
   Loaded after assets/product-page.css (inherits :root tokens,
   nav, breadcrumb, buttons, related-grid, faq, cta-banner, footer)
   ============================================================ */

/* ---------- Index hero ---------- */
.blog-hero{max-width:1200px;margin:0 auto;padding:40px 24px 0}
.blog-hero h1{font:700 clamp(30px,4.4vw,46px)/1.12 var(--serif);letter-spacing:-.02em;color:var(--forest);max-width:860px;margin-bottom:18px}
.blog-hero p{font-size:16.5px;line-height:1.8;max-width:700px;color:var(--ink-secondary)}

/* ---------- Featured post ---------- */
.featured{max-width:1200px;margin:36px auto 0;padding:0 24px}
.featured a{display:grid;grid-template-columns:1.15fr 1fr;gap:0;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;text-decoration:none;transition:box-shadow .3s ease,transform .3s ease}
.featured a:hover{text-decoration:none;box-shadow:var(--shadow-lg);transform:translateY(-2px)}
.featured .f-media{position:relative;aspect-ratio:16/10;background:var(--surface-alt);overflow:hidden}
.featured .f-media img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.featured a:hover .f-media img{transform:scale(1.03)}
.featured .f-body{padding:44px 40px;display:flex;flex-direction:column;justify-content:center}
.featured .f-body h2{font:700 clamp(22px,2.4vw,30px)/1.25 var(--serif);color:var(--forest);margin:14px 0 14px;letter-spacing:-.01em}
.featured .f-body p{font-size:15px;line-height:1.75;color:var(--ink-secondary);margin-bottom:22px;max-width:none}
.featured .f-more{font-size:13.5px;font-weight:600;color:var(--gold);letter-spacing:.02em}

/* ---------- Category pill + meta ---------- */
.pill{display:inline-block;font:600 10.5px var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--gold);background:var(--gold-bg);border:1px solid var(--gold-light);border-radius:999px;padding:5px 12px}
.meta-row{display:flex;align-items:center;gap:10px;font-size:12.5px;color:var(--ink-tertiary)}
.meta-row .dot{width:3px;height:3px;border-radius:50%;background:var(--border-dark)}

/* ---------- Post grid ---------- */
.post-section{max-width:1200px;margin:0 auto;padding:64px 24px 24px}
.post-section .sec-head{display:flex;align-items:baseline;justify-content:space-between;gap:20px;border-bottom:1px solid var(--border);padding-bottom:16px;margin-bottom:32px}
.post-section .sec-head h2{font:700 24px var(--serif);color:var(--forest);margin:0}
.post-section .sec-head span{font-size:12.5px;color:var(--ink-tertiary)}
.post-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:28px}
.post-card{display:block;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;text-decoration:none;transition:box-shadow .3s ease,transform .3s ease,border-color .3s ease}
.post-card:hover{text-decoration:none;box-shadow:var(--shadow-md);transform:translateY(-3px);border-color:var(--border-dark)}
.post-card .p-media{aspect-ratio:16/10;overflow:hidden;background:var(--surface-alt)}
.post-card .p-media img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.post-card:hover .p-media img{transform:scale(1.04)}
.post-card .p-body{padding:22px 22px 24px}
.post-card h3{font:600 17.5px/1.35 var(--serif);color:var(--forest);margin:10px 0 10px}
.post-card p{font-size:13.5px;line-height:1.7;color:var(--ink-tertiary);margin:0 0 16px;max-width:none}
.post-card .p-foot{display:flex;align-items:center;justify-content:space-between;font-size:12px;color:var(--ink-tertiary);border-top:1px solid var(--border);padding-top:14px}

/* ---------- Article layout ---------- */
/* grid children must be allowed to shrink (tables scroll, pages don't) */
.article-wrap > article,.article-wrap > aside{min-width:0}
.art-table-wrap{max-width:100%}

.article-wrap{max-width:1200px;margin:0 auto;padding:8px 24px 0;display:grid;grid-template-columns:minmax(0,1fr) 288px;gap:64px;align-items:start}

.article-head{padding-top:8px}
.article-head h1{font:700 clamp(28px,3.9vw,42px)/1.16 var(--serif);letter-spacing:-.02em;color:var(--forest);margin:16px 0 18px}
.article-head .lede{font-size:17px;line-height:1.75;color:var(--ink-secondary);max-width:720px}

.article-hero{margin:28px 0 0;border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--border);aspect-ratio:16/9;background:var(--surface-alt)}
.article-hero img{width:100%;height:100%;object-fit:cover}

.article-body{max-width:760px;padding-top:30px}
.article-body h2{font:700 clamp(22px,2.6vw,30px)/1.25 var(--serif);color:var(--forest);letter-spacing:-.01em;margin:52px 0 14px;padding-top:6px}
.article-body h2:first-child{margin-top:0}
.article-body h3{font:600 17px/1.45 var(--sans);color:var(--forest);margin:30px 0 10px}
.article-body p{font-size:16px;line-height:1.82;color:var(--ink-secondary);margin-bottom:18px;max-width:none}
.article-body ul,.article-body ol{margin:0 0 20px;padding-left:22px}
.article-body li{font-size:16px;line-height:1.8;color:var(--ink-secondary);margin-bottom:9px}
.article-body li strong,.article-body p strong{color:var(--ink);font-weight:600}
.article-body a{color:var(--forest);text-decoration:underline;text-decoration-color:var(--gold-light);text-underline-offset:3px}
.article-body a:hover{text-decoration-color:var(--gold)}
.article-body code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13.5px;background:var(--surface-alt);border:1px solid var(--border);border-radius:5px;padding:1px 6px;color:var(--forest)}

/* ---------- Article table ---------- */
.art-table-wrap{overflow-x:auto;margin:0 0 24px;border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--surface)}
.art-table{width:100%;border-collapse:collapse;font-size:13.5px;min-width:560px}
.art-table th{background:var(--forest);color:#fff;font:600 11.5px var(--sans);text-transform:uppercase;letter-spacing:.08em;text-align:left;padding:13px 16px;white-space:nowrap}
.art-table td{padding:12px 16px;border-bottom:1px solid var(--border);color:var(--ink-secondary);line-height:1.6;vertical-align:top}
.art-table tbody tr:last-child td{border-bottom:none}
.art-table tbody tr:hover td{background:var(--gold-bg)}
.art-table td:first-child{font-weight:600;color:var(--ink)}
.art-note{font-size:12.5px;color:var(--ink-tertiary);line-height:1.7;margin:-10px 0 22px}

/* ---------- Callout / takeaways ---------- */
.takeaways{background:var(--gold-bg);border:1px solid var(--gold-light);border-radius:var(--radius-lg);padding:26px 28px;margin:0 0 26px}
.takeaways h2,.takeaways h3{font:600 13px var(--sans)!important;text-transform:uppercase;letter-spacing:.11em;color:var(--gold)!important;margin:0 0 14px!important;padding:0!important;font-size:13px!important}
.takeaways ul{margin:0!important;padding-left:20px}
.takeaways li{font-size:14.5px;line-height:1.75;color:var(--ink-secondary);margin-bottom:8px}
.takeaways li:last-child{margin-bottom:0}

.callout{border-left:3px solid var(--gold);background:var(--surface);border:1px solid var(--border);border-left-width:3px;border-radius:0 var(--radius) var(--radius) 0;padding:18px 22px;margin:0 0 24px}
.callout p{font-size:14.5px;line-height:1.75;margin:0;color:var(--ink-secondary)}

/* ---------- Sidebar TOC ---------- */
.side{position:sticky;top:96px;padding-top:44px}
.side .side-card{border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--surface);padding:22px 20px}
.side h2{font:600 11px var(--sans);text-transform:uppercase;letter-spacing:.12em;color:var(--ink-tertiary);margin-bottom:14px}
.side ol{list-style:none;counter-reset:toc;margin:0;padding:0}
.side li{counter-increment:toc;margin-bottom:10px;line-height:1.5}
.side li::before{content:counter(toc,decimal-leading-zero) "  ";font-size:10.5px;color:var(--gold);font-weight:600}
.side a{font-size:13px;color:var(--ink-secondary);text-decoration:none}
.side a:hover{color:var(--forest);text-decoration:underline}
.side .side-cta{margin-top:20px;border-top:1px solid var(--border);padding-top:18px}
.side .side-cta p{font-size:12.5px;line-height:1.7;color:var(--ink-tertiary);margin:0 0 12px}
.side .side-cta .btn{padding:10px 18px;font-size:12.5px;width:100%;justify-content:center}

/* ---------- Author ---------- */
.author{display:flex;gap:16px;align-items:flex-start;border-top:1px solid var(--border);margin-top:48px;padding-top:26px}
.author img{width:46px;height:46px;border-radius:8px;object-fit:cover;flex:none}
.author .a-txt{font-size:13px;line-height:1.7;color:var(--ink-tertiary)}
.author .a-txt strong{display:block;color:var(--forest);font-size:13.5px;margin-bottom:3px}

/* ---------- Article footer nav ---------- */
.post-nav{max-width:1200px;margin:0 auto;padding:0 24px}
.post-nav .pn-inner{display:flex;justify-content:space-between;gap:20px;border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:22px 0;margin:56px 0 8px;font-size:13px}
.post-nav a{color:var(--forest);font-weight:600;text-decoration:none}
.post-nav a:hover{text-decoration:underline}
.post-nav span{color:var(--ink-tertiary);font-size:12.5px}

/* ---------- Responsive ---------- */
@media(max-width:1040px){
  .article-wrap{grid-template-columns:minmax(0,1fr);gap:0}
  .side{position:static;padding-top:0;order:-1;margin-top:32px}
  .side .side-card{padding:18px 20px}
  .side ol{columns:2;column-gap:28px}
  .side .side-cta{display:none}
  .post-grid{grid-template-columns:repeat(2,1fr)}
  .featured a{grid-template-columns:1fr}
  .featured .f-media{aspect-ratio:16/9}
  .featured .f-body{padding:30px 26px}
}
@media(max-width:720px){
  .post-grid{grid-template-columns:1fr;gap:22px}
  .side ol{columns:1}
  .blog-hero{padding:28px 20px 0}
  .post-section{padding:44px 20px 16px}
  .article-wrap{padding:0 20px}
  .article-head .lede{font-size:16px}
  .article-body p,.article-body li{font-size:15.5px}
  .takeaways{padding:22px 20px}
}

/* ---------- Article FAQ (static Q&A, kept visible for extraction) ---------- */
.article-body .faq-item{padding:20px 0}
.article-body .faq-item:last-child{border-bottom:none;padding-bottom:0}
.article-body .faq-item h3{font:600 16.5px/1.5 var(--sans);color:var(--forest);margin:0 0 8px}
.article-body .faq-item p{font-size:15px;line-height:1.78;margin:0;color:var(--ink-secondary)}