/* ==========================================================================
   Acha Khao Piyo - blog archive (posts index, categories, tags)
   ========================================================================== */

.page-hero{background:var(--charcoal);color:#fff}
.page-hero-content{padding:36px 0 44px}
.page-hero .breadcrumb{justify-content:center;color:rgba(255,255,255,.55)}
.page-hero .breadcrumb .current{color:rgba(255,255,255,.85)}
.page-hero .breadcrumb a:hover{color:#fff}
.page-title{font-size:clamp(30px,4vw,46px);letter-spacing:-1px;font-weight:700;color:#fff;margin:14px 0 10px}
.page-subtitle{color:rgba(255,255,255,.62);font-size:15px;max-width:520px;margin:0}

/* ============ Category filter ============ */
.blog-filters{padding:28px 0 0}
.blog-filters .chip-row{justify-content:center}
.blog-filters .chip{padding:8px 15px}
.blog-filters .chip.is-active{background:var(--ink);border-color:var(--ink);color:#fff}

/* ============ Featured post ============ */
.featured-section{padding:36px 0 0}
.featured-post{
  display:grid;grid-template-columns:1.1fr 1fr;gap:0;background:var(--paper);
  border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-sm);
  transition:box-shadow .2s;
}
.featured-post:hover{box-shadow:var(--shadow-md)}
.featured-image{position:relative;min-height:320px;background:#eee}
.featured-image img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.featured-body{padding:36px 40px;display:flex;flex-direction:column;justify-content:center}
.featured-body h2{font-size:clamp(22px,2.6vw,30px);line-height:1.2;letter-spacing:-.5px;margin-bottom:12px}
.featured-body p{color:var(--ink-soft);font-size:14px;line-height:1.7;margin-bottom:18px}
.read-more{margin-top:18px;display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:700;color:var(--primary)}
.read-more span{transition:transform .2s}
.featured-post:hover .read-more span{transform:translateX(3px)}

/* ============ Post category pill + meta ============ */
.post-category{
  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;width:max-content;margin-bottom:14px;
}
.post-meta{display:flex;align-items:center;gap:14px;font-size:12px;color:var(--muted);font-weight:600}
.post-meta span{display:inline-flex;align-items:center;gap:5px}

/* ============ Post grid ============ */
.blog-section{padding:44px 0 88px}
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.post-card-image{height:180px;position:relative;overflow:hidden;background:#eee}
.post-card-image img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.post-card:hover .post-card-image img{transform:scale(1.05)}
.post-card-body{padding:20px;display:flex;flex-direction:column;flex:1}
.post-card h3{font-size:17px;line-height:1.35;margin:12px 0 10px;letter-spacing:-.3px}
.post-card p{color:var(--ink-soft);font-size:13px;line-height:1.65;margin:0 0 16px;flex:1}
.post-card .post-meta{margin-top:auto;padding-top:14px;border-top:1px solid var(--border)}

/* ============ Responsive ============ */
@media (max-width:980px){
  .featured-post{grid-template-columns:1fr}
  .featured-image{min-height:240px}
  .blog-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:760px){
  .page-hero-content{padding:26px 0 32px}
  .featured-body{padding:26px 22px}
  .blog-section{padding:28px 0 64px}
  .blog-grid{grid-template-columns:1fr}
}