/* ============================================================
   Vaayu Wellness Spa — blog layout
   Extends assets/style.css; reuses its tokens, buttons and FAQ.
   ============================================================ */

/* ---------- Blog index ---------- */
.blog-head{
  padding:132px 0 42px;
  background:linear-gradient(180deg,var(--bg-soft),var(--bg));
  border-bottom:1px solid var(--line);
}
.blog-head h1{
  font-family:'Playfair Display',serif;font-weight:600;
  font-size:clamp(30px,4.6vw,50px);line-height:1.14;letter-spacing:-.02em;
  margin:14px 0 12px;color:var(--dark);
}
.blog-head h1 em{font-style:italic;color:var(--gold-deep)}
.blog-head .lead{max-width:620px;color:var(--ink-soft);font-size:16.5px}

.blog-list{padding:52px 0 70px}
.post-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
@media(max-width:980px){.post-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.post-grid{grid-template-columns:1fr}}

.post-card{
  display:flex;flex-direction:column;background:var(--card);
  border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  text-decoration:none;color:inherit;box-shadow:var(--shadow);
  transition:transform .28s var(--ease),box-shadow .28s var(--ease),border-color .28s var(--ease);
}
.post-card:hover{
  transform:translateY(-4px);
  box-shadow:0 22px 56px -20px rgba(14,21,18,.28);
  border-color:color-mix(in srgb,var(--gold) 42%,var(--line));
}
.pc-img{aspect-ratio:16/10;overflow:hidden;background:var(--bg-soft)}
.pc-img img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.post-card:hover .pc-img img{transform:scale(1.05)}
.pc-body{padding:20px 22px 24px;display:flex;flex-direction:column;gap:9px;flex:1}
.pc-body h2{
  font-family:'Playfair Display',serif;font-weight:600;font-size:20px;
  line-height:1.28;color:var(--dark);letter-spacing:-.01em;
}
.pc-body p{font-size:14.2px;color:var(--ink-soft);line-height:1.6;flex:1}
.pc-more{font-size:13.5px;font-weight:700;color:var(--gold-deep);margin-top:4px}

.post-cat{
  display:inline-block;align-self:flex-start;
  background:var(--gold-tint);color:var(--gold-deep);
  padding:4px 11px;border-radius:100px;font-size:11.5px;font-weight:700;
  text-transform:uppercase;letter-spacing:.05em;
}

/* ---------- Article hero ---------- */
.post-hero{position:relative;padding:150px 0 46px;overflow:hidden;isolation:isolate}
.post-hero-img,
.post-hero picture{position:absolute;inset:0;z-index:-2}
.post-hero img{width:100%;height:100%;object-fit:cover}
.post-hero::after{
  content:'';position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(14,21,18,.86),rgba(14,21,18,.72) 45%,rgba(14,21,18,.9));
}
.post-hero h1{
  font-family:'Playfair Display',serif;font-weight:600;color:#fff;
  font-size:clamp(27px,4.3vw,46px);line-height:1.16;letter-spacing:-.02em;
  max-width:820px;margin:14px 0 16px;
}
.post-hero .crumb a,.post-hero .crumb span{color:rgba(255,255,255,.82)}
.post-hero .crumb a:hover{color:#fff}
.post-meta{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;color:rgba(255,255,255,.8);font-size:13px}
.post-meta .post-cat{background:rgba(255,255,255,.14);color:#f0e2c2}

/* ---------- Article layout ---------- */
.post-wrap{
  display:grid;grid-template-columns:minmax(0,1fr) 312px;
  gap:52px;padding:52px 0 74px;align-items:start;
}
@media(max-width:1000px){.post-wrap{grid-template-columns:1fr;gap:36px}}

.post-body{max-width:74ch;min-width:0}
.post-lead{
  font-size:19px;line-height:1.66;color:var(--ink);
  padding-bottom:22px;margin-bottom:6px;border-bottom:1px solid var(--line);
}
.post-body h2{
  font-family:'Playfair Display',serif;font-weight:600;
  font-size:clamp(21px,2.5vw,28px);line-height:1.26;color:var(--dark);
  margin:38px 0 14px;letter-spacing:-.01em;scroll-margin-top:96px;
}
.post-body p{margin-bottom:15px;color:var(--ink-soft);font-size:16.2px;line-height:1.75}
.post-body p strong{color:var(--ink);font-weight:650}
.post-body a{color:var(--gold-deep);text-decoration:underline;text-underline-offset:2px}
.post-body a:hover{color:var(--gold)}

/* table of contents */
.post-toc{
  background:var(--bg-soft);border:1px solid var(--line);border-radius:var(--radius);
  padding:18px 22px;margin:24px 0 6px;
}
.post-toc b{display:block;font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin-bottom:9px}
.post-toc ul{list-style:none;display:flex;flex-direction:column;gap:7px}
.post-toc a{color:var(--ink-soft);text-decoration:none;font-size:14.6px;font-weight:500}
.post-toc a:hover{color:var(--gold-deep);text-decoration:underline}

/* inline CTA */
.post-cta{
  background:linear-gradient(135deg,var(--gold-tint),#fff);
  border:1px solid color-mix(in srgb,var(--gold) 34%,var(--line));
  border-radius:var(--radius);padding:22px 24px;margin:30px 0;
  display:flex;flex-wrap:wrap;gap:12px;align-items:center;
}
.post-cta p{flex:1 1 260px;margin:0;color:var(--ink-soft);font-size:15px}
.post-cta .btn{flex:0 0 auto}

/* closing booking block */
.post-book{
  background:var(--dark);color:#fff;border-radius:var(--radius);
  padding:32px 30px;margin:40px 0 10px;
}
.post-book h2{color:#fff;margin:0 0 10px;font-size:clamp(20px,2.4vw,26px)}
.post-book p{color:rgba(255,255,255,.8);margin-bottom:18px;font-size:15.4px}
.post-book .lp-cta{display:flex;flex-wrap:wrap;gap:12px;margin:0}
.post-book-links{margin-top:16px !important;font-size:14px}
.post-book-links a{color:var(--gold-light)}

/* related posts */
.rel-grid{display:grid;grid-template-columns:1fr;gap:10px;margin-top:6px}
.rel-card{
  display:block;padding:15px 18px;background:var(--card);
  border:1px solid var(--line);border-left:3px solid var(--gold);
  border-radius:10px;text-decoration:none;color:var(--ink);font-weight:600;font-size:15px;
  transition:transform .2s var(--ease),box-shadow .2s var(--ease);
}
.rel-card:hover{transform:translateX(3px);box-shadow:var(--shadow);color:var(--gold-deep)}

/* ---------- Sidebar ---------- */
.post-side{position:sticky;top:96px;display:flex;flex-direction:column;gap:16px}
@media(max-width:1000px){.post-side{position:static}}
.side-card{
  background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius);padding:22px;box-shadow:var(--shadow);
}
.side-card h3{
  font-family:'Playfair Display',serif;font-weight:600;
  font-size:19px;color:var(--dark);margin-bottom:9px;
}
.side-card p{font-size:14.4px;color:var(--ink-soft);margin-bottom:14px;line-height:1.6}
.side-btn{width:100%;justify-content:center;margin-bottom:9px}
.side-facts{margin-top:14px;padding-top:14px;border-top:1px solid var(--line);font-size:13.6px}
.side-facts dt{font-weight:700;color:var(--muted);font-size:11.5px;text-transform:uppercase;letter-spacing:.05em;margin-top:9px}
.side-facts dd{color:var(--ink-soft);margin-top:2px}
.side-list{list-style:none;display:flex;flex-direction:column;gap:10px}
.side-list a{
  color:var(--ink-soft);text-decoration:none;font-size:14.4px;font-weight:500;
  display:block;padding-left:13px;border-left:2px solid var(--line);line-height:1.45;
}
.side-list a:hover{color:var(--gold-deep);border-left-color:var(--gold)}

/* ---------- Small screens ---------- */
@media(max-width:640px){
  .post-hero{padding:126px 0 34px}
  .post-lead{font-size:17.4px}
  .post-body p{font-size:15.8px}
  .post-book{padding:26px 22px}
  .post-cta{padding:18px}
}