/* ==========================================================================
   Acha Khao Piyo - single blog post
   ========================================================================== */

/* ============ Article header ============ */
.article-header{padding:20px 0 0}
.post-category-tag{
  display:inline-flex;align-items:center;gap:6px;background:var(--primary-tint);color:var(--primary-dark);
  font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;padding:5px 12px;border-radius:999px;
}
.article-title{font-size:clamp(30px,4.4vw,50px);letter-spacing:-1.2px;line-height:1.1;font-weight:700;margin:18px 0 20px}
.article-byline{display:flex;align-items:center;gap:12px;padding-bottom:24px;border-bottom:1px solid var(--border)}
.byline-avatar{
  width:40px;height:40px;border-radius:50%;background:var(--primary);color:#fff;
  display:grid;place-items:center;font-family:"Ivy Mode",serif;font-weight:700;font-size:14px;flex-shrink:0;overflow:hidden;
}
.byline-avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.byline-copy{font-size:13px;color:var(--ink-soft)}
.byline-copy strong{color:var(--ink);font-weight:700}
.byline-meta{color:var(--muted);font-size:12px;margin-top:2px}
.article-hero-image{margin:28px 0 0;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-sm);max-height:520px}
.article-hero-image img{width:100%;max-height:520px;object-fit:cover}
.image-caption{text-align:center;font-size:12px;color:var(--muted);margin-top:10px}

/* ============ Article body ============ */
.article-section{padding:44px 0 88px}
.article-grid{display:grid;grid-template-columns:1fr 260px;gap:48px;align-items:start}
.article-body{font-size:16px;line-height:1.8;color:var(--ink-soft)}
.article-body p{margin:0 0 22px}
.article-body h2{font-size:26px;letter-spacing:-.5px;margin:44px 0 14px;color:var(--ink);scroll-margin-top:100px}
.article-body h3{font-size:19px;letter-spacing:-.3px;margin:28px 0 10px;color:var(--ink)}
.article-body ul,.article-body ol{margin:0 0 22px;padding-left:22px}
.article-body li{margin-bottom:8px}
.article-body a{color:var(--primary);font-weight:600;text-decoration:underline;text-underline-offset:2px}
.article-body strong{color:var(--ink);font-weight:700}
.article-body img{border-radius:var(--radius-md);margin:8px 0 22px}
.article-body figure{margin:0 0 22px}
.article-body figcaption{text-align:center;font-size:12px;color:var(--muted);margin-top:8px}
.article-body blockquote{
  border-left:3px solid var(--primary);padding:4px 0 4px 22px;margin:32px 0;
  font-family:"Ivy Mode",serif;font-style:italic;font-size:20px;color:var(--ink);line-height:1.5;
}
.pull-quote{
  border-left:3px solid var(--primary);padding:4px 0 4px 22px;margin:32px 0;
  font-family:"Ivy Mode",serif;font-style:italic;font-size:20px;color:var(--ink);line-height:1.5;
}

/* Restaurant callout inside an article */
.restaurant-entry{
  background:var(--paper);border:1px solid var(--border);border-radius:var(--radius-md);
  padding:24px 26px;margin:22px 0 34px;box-shadow:var(--shadow-sm);
}
.restaurant-entry-head{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:10px}
.restaurant-entry-head h3{margin:0;font-size:19px}
.restaurant-entry-tags{display:flex;gap:6px;flex-wrap:wrap}
.tag{background:var(--primary-tint);color:var(--primary-dark);font-size:11px;font-weight:700;padding:4px 10px;border-radius:999px}
.restaurant-entry-meta{display:flex;flex-wrap:wrap;gap:14px;font-size:12px;color:var(--muted);font-weight:600;margin-top:12px}
.restaurant-entry-meta span{display:inline-flex;align-items:center;gap:5px}
.restaurant-entry-meta i{color:var(--primary);font-size:11px}
.restaurant-entry-head h3 a{transition:color .2s}
.restaurant-entry-head h3 a:hover{color:var(--primary)}
.restaurant-entry + .restaurant-entry-link{margin:-22px 0 34px}
.restaurant-entry-link a{
  display:inline-flex;align-items:center;gap:7px;
  font-size:14px;font-weight:700;color:var(--primary);
  text-decoration:underline;text-underline-offset:3px;
}
.restaurant-entry-link a:hover{color:var(--primary-dark)}

.faq-item{border-bottom:1px solid var(--border);padding:18px 0}
.faq-item:last-child{border-bottom:0}
.faq-item h3{font-size:16px;margin-bottom:8px}
.faq-item p{margin:0;font-size:14px}

/* ============ Sidebar ============ */
.article-sidebar{position:sticky;top:20px;display:flex;flex-direction:column;gap:20px}
.toc-card,.share-card{background:var(--paper);border:1px solid var(--border);border-radius:var(--radius-md);padding:20px}
.toc-card h4,.share-card h4{font-size:11px;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:var(--muted);margin:0 0 14px}
.toc-card ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;counter-reset:toc}
.toc-card li{counter-increment:toc}
.toc-card a{font-size:13px;color:var(--ink-soft);font-weight:600;display:flex;gap:8px;transition:color .15s}
.toc-card a:before{content:counter(toc);color:var(--primary);font-weight:700}
.toc-card a:hover,.toc-card a.is-current{color:var(--primary)}
.share-row{display:flex;gap:8px}
.share-row a{
  width:36px;height:36px;border-radius:9px;border:1px solid var(--border);display:grid;place-items:center;
  font-size:13px;color:var(--ink-soft);transition:all .2s;
}
.share-row a:hover{background:var(--primary);border-color:var(--primary);color:#fff}
.cta-card{background:var(--charcoal);border-radius:var(--radius-md);padding:22px;color:#fff}
body .cta-card h4{font-family:"Ivy Mode",Georgia,serif;font-size:17px;margin:0 0 8px;color:#fff}
.cta-card p{font-size:12px;color:rgba(255,255,255,.62);margin:0 0 16px;line-height:1.6}
.cta-card a{
  display:inline-flex;align-items:center;gap:7px;background:var(--primary);color:#fff;
  font-size:12px;font-weight:700;padding:10px 16px;border-radius:999px;
}
.cta-card a:hover{background:var(--primary-dark)}

/* ============ Related posts ============ */
.related-section{padding:0 0 88px}
.related-title{font-size:clamp(22px,2.8vw,28px);letter-spacing:-.5px;margin-bottom:26px}
.related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.related-grid .post-card-image{height:160px;position:relative;overflow:hidden;background:#eee}
.related-grid .post-card-image img{width:100%;height:100%;object-fit:cover}
.related-grid .post-card-body{padding:18px}
.related-grid .post-card h3{font-size:15px;line-height:1.35;margin:0 0 8px;letter-spacing:-.2px}
.related-grid .post-meta{display:flex;gap:12px;font-size:11px;color:var(--muted);font-weight:600;margin-top:10px}

/* ============ Responsive ============ */
@media (max-width:980px){
  .article-grid{grid-template-columns:1fr}
  .article-sidebar{position:static;flex-direction:row;flex-wrap:wrap}
  .toc-card,.share-card,.cta-card{flex:1 1 220px}
  .related-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:760px){
  .article-section{padding:28px 0 56px}
  .article-body{font-size:15px}
  .article-body h2{font-size:22px}
  .restaurant-entry{padding:18px}
  .related-grid{grid-template-columns:1fr}
}