/* ===================================================================
   Asian Salts — blog styles
   Loaded after app.css on /blog and /blog/{slug}; reuses the storefront
   design tokens (--pink, --terra, --cream, --line, …).
   =================================================================== */

/* Hero */
.blog-hero{background:var(--grad-soft);border-bottom:1px solid var(--line);padding:56px 0 44px}
.blog-hero .eyebrow{color:var(--pink-deep);font-weight:700;letter-spacing:.14em;text-transform:uppercase;font-size:.78rem}
.blog-hero h1{font-size:2.4rem;margin:.25em 0 .3em}
.blog-hero p{color:var(--muted);margin:0;max-width:640px;font-size:1.03rem}

.blog-wrap{padding:34px 20px 70px}

/* Toolbar: search + sort */
.blog-toolbar{display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between;margin-bottom:6px}
.blog-search{display:flex;gap:8px;flex:1;min-width:260px}
.blog-search input,.blog-search select{border:1px solid var(--line);border-radius:999px;padding:11px 18px;font-family:inherit;
  font-size:.92rem;background:#fff;color:var(--ink);outline:none}
.blog-search input{flex:1}
.blog-search input:focus,.blog-search select:focus{border-color:var(--pink);box-shadow:0 0 0 3px rgba(224,114,138,.14)}
.blog-count{color:var(--muted);font-size:.88rem;font-weight:600}

/* Category chips */
.blog-cats{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 6px}
.blog-cats a{font-size:.82rem;font-weight:700;color:var(--charcoal);background:#fff;border:1px solid var(--line);
  padding:7px 15px;border-radius:999px}
.blog-cats a .n{opacity:.55;font-weight:600}
.blog-cats a:hover{border-color:var(--pink);color:var(--pink-deep)}
.blog-cats a.on{background:var(--grad);border-color:transparent;color:#fff}
.blog-cats a.on .n{opacity:.8}

/* Post grid */
.post-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin:26px 0 10px}
.post-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  box-shadow:var(--shadow-sm);display:flex;flex-direction:column;transition:.2s}
.post-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
/* 40/21 matches the 1200×630 hero images, so their titles are never cropped. */
.pc-thumb{aspect-ratio:40/21;background:var(--grad-soft);display:flex;align-items:center;justify-content:center;overflow:hidden}
.pc-thumb img{width:100%;height:100%;object-fit:cover}
.pc-mark{font-size:2.4rem;color:var(--pink)}
.pc-body{padding:20px 20px 22px;display:flex;flex-direction:column;gap:9px;flex:1}
.pc-body h2{font-size:1.12rem;line-height:1.32;margin:0}
.pc-body h2 a{color:var(--charcoal)}
.pc-body h2 a:hover{color:var(--pink-deep)}
.pc-body p{margin:0;color:var(--muted);font-size:.92rem;flex:1}
.pc-meta{color:#a4907e;font-size:.8rem;font-weight:600}

/* Pagination */
.blog-pager{display:flex;justify-content:center;flex-wrap:wrap;gap:7px;margin:36px 0 10px}
.blog-pager a,.blog-pager span{min-width:40px;text-align:center;padding:10px 14px;border:1px solid var(--line);
  border-radius:10px;background:#fff;color:var(--charcoal);font-weight:700;font-size:.88rem}
.blog-pager a:hover{border-color:var(--pink);color:var(--pink-deep)}
.blog-pager .current{background:var(--grad);color:#fff;border-color:transparent}

.blog-empty{text-align:center;color:var(--muted);padding:64px 20px;background:#fff;border:1px dashed var(--line);
  border-radius:var(--radius);margin:26px 0}
.blog-empty p{margin:0 0 14px;font-size:1.05rem}

/* Listing CTA strip */
.blog-cta{display:flex;flex-wrap:wrap;gap:20px;align-items:center;justify-content:space-between;margin-top:46px;
  padding:30px 34px;border-radius:var(--radius);background:var(--grad);color:#fff;box-shadow:var(--shadow)}
.blog-cta h3{color:#fff;margin:0 0 4px;font-size:1.35rem}
.blog-cta p{margin:0;color:rgba(255,255,255,.9)}
.blog-cta .btn{background:#fff;color:var(--pink-deep);box-shadow:none}
.blog-cta .btn:hover{color:var(--terra);transform:translateY(-2px)}

/* ── Article ── */
.article{max-width:800px;padding:44px 20px 20px}
.article-crumbs{margin-bottom:14px;font-weight:700;font-size:.9rem}
.article-terms{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.article-terms a{font-size:.74rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--pink-deep);
  background:#fbe4ec;padding:5px 12px;border-radius:999px}
.article-terms a:hover{background:var(--pink);color:#fff}
.article h1{font-size:2.3rem;line-height:1.18;margin:0 0 12px}
.article-meta{color:var(--muted);font-size:.9rem;font-weight:600;margin-bottom:24px}
.article-hero{width:100%;border-radius:var(--radius);margin:0 0 30px;box-shadow:var(--shadow-sm)}

.prose{font-size:1.05rem;line-height:1.8;color:#4a382c}
.prose h2{font-size:1.6rem;margin:1.7em 0 .5em}
.prose h3{font-size:1.25rem;margin:1.5em 0 .4em}
.prose p{margin:0 0 1.15em}
.prose a{color:var(--pink-deep);text-decoration:underline}
.prose ul,.prose ol{margin:0 0 1.2em 1.3em;padding:0}
.prose li{margin:.35em 0}
.prose img{width:100%;border-radius:12px;margin:1.2em 0;border:1px solid var(--line)}
.prose blockquote{border-left:4px solid var(--pink);background:#fdf3ee;margin:1.4em 0;padding:14px 22px;
  border-radius:0 12px 12px 0;color:var(--terra);font-style:italic}
.prose blockquote p{margin:0}
.prose pre{background:var(--charcoal);color:#f5d9c8;border-radius:12px;padding:18px;overflow:auto;font-size:.86rem;line-height:1.6}
.prose code{background:#f7e9e2;color:var(--pink-deep);padding:2px 7px;border-radius:6px;font-size:.9em}
.prose pre code{background:none;color:inherit;padding:0}
.prose hr{border:none;border-top:1px solid var(--line);margin:2em 0}
.prose table{width:100%;border-collapse:collapse;margin:0 0 1.4em;font-size:.94rem;display:block;overflow-x:auto}
.prose th,.prose td{border:1px solid var(--line);padding:10px 14px;text-align:left}
.prose th{background:var(--cream-2);color:var(--charcoal);font-weight:700}
.prose em{font-size:.94em;color:var(--muted)}

/* Article CTA + related */
.article-cta{margin:44px 0 10px;padding:30px 32px;border-radius:var(--radius);background:var(--cream-2);
  border:1px solid var(--line);text-align:center}
.article-cta h3{margin:0 0 8px;font-size:1.3rem}
.article-cta p{margin:0 auto 20px;color:var(--muted);max-width:520px}
.article-cta-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

.related{padding:20px 20px 70px}
.related h2{font-size:1.5rem;margin-bottom:6px}

@media(max-width:1000px){ .post-grid{grid-template-columns:repeat(2,1fr)} }
@media(max-width:680px){
  .post-grid{grid-template-columns:1fr}
  .blog-hero h1{font-size:1.9rem}
  .article h1{font-size:1.75rem}
  .blog-cta{padding:24px}
}