/* ============================================================
   BAÑOS BEBIDAS — Páginas de post do blog (artigo editorial)
   Reaproveita as variáveis e o design system de style.css
   ============================================================ */

/* ---------- HERO DO POST ---------- */
.post-hero{
  position:relative;min-height:clamp(380px,50vh,560px);
  display:flex;align-items:flex-end;
  background-size:cover;background-position:center;background-repeat:no-repeat;
  color:var(--white);padding:150px 0 56px;overflow:hidden;
}
.post-hero-overlay{
  position:absolute;inset:0;z-index:0;
  background:linear-gradient(180deg, rgba(17,17,17,.78) 0%, rgba(17,17,17,.25) 38%, rgba(17,17,17,.3) 60%, rgba(17,17,17,.94) 100%);
}
.post-hero-content{position:relative;z-index:2;max-width:760px;}
.post-back{
  display:inline-flex;align-items:center;gap:8px;margin-bottom:18px;color:var(--yellow);font-weight:700;
  text-transform:uppercase;font-size:.78rem;letter-spacing:.04em;
}
.post-back:hover{color:var(--white);}
.post-tag{
  display:inline-block;background:var(--yellow);color:var(--black);font-weight:800;
  text-transform:uppercase;letter-spacing:.05em;font-size:.72rem;padding:7px 16px;border-radius:999px;
  margin-bottom:18px;
}
.post-hero h1{
  font-family:var(--font-title);color:var(--white);
  font-size:clamp(2rem,5vw,3.4rem);line-height:1.08;margin:0 0 18px;text-shadow:0 4px 18px rgba(0,0,0,.35);
}
.post-meta{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px;color:#eee;font-size:.9rem;font-weight:600;
}
.post-meta .dot{opacity:.6;}

/* ---------- CORPO DO ARTIGO — largura de leitura ---------- */
.post-body{background:var(--cream);padding:64px 0 10px;}
.post-article{max-width:720px;margin:0 auto;}
.post-article p{
  font-size:1.08rem;line-height:1.8;color:#2b2b2b;margin:0 0 22px;
}
.post-article h2{
  font-family:var(--font-title);color:var(--black);
  font-size:clamp(1.5rem,3.4vw,2.1rem);line-height:1.2;margin:44px 0 18px;
  position:relative;padding-left:20px;
}
.post-article h2::before{
  content:'';position:absolute;left:0;top:.18em;bottom:.18em;width:6px;border-radius:4px;background:var(--yellow);
}
.post-article h3{
  font-family:var(--font-body);font-weight:800;color:var(--black);
  font-size:1.15rem;margin:28px 0 12px;
}
.post-article ul{margin:0 0 24px;padding:0;}
.post-article ul li{
  position:relative;padding-left:28px;margin-bottom:12px;font-size:1.04rem;line-height:1.65;color:#2b2b2b;
}
.post-article ul li::before{
  content:'';position:absolute;left:0;top:.5em;width:10px;height:10px;border-radius:3px;background:var(--yellow);
  border:2px solid var(--black);
}
.post-article strong{color:var(--black);}
.post-article .post-lead{
  font-size:1.22rem;line-height:1.7;color:#1c1c1c;font-weight:500;margin-bottom:28px;
}
.post-article img.post-inline-img{
  width:100%;height:auto;border-radius:18px;margin:8px 0 30px;
  box-shadow:10px 12px 0 0 var(--yellow), 0 6px 0 0 var(--black);
}

/* ---------- CAIXA DE CTA ---------- */
.post-cta{
  background:var(--yellow);border-radius:28px;padding:48px 38px;text-align:center;margin:50px 0 56px;
  border:3px solid var(--black);
}
.post-cta h3{
  font-family:var(--font-title);font-size:clamp(1.6rem,3.6vw,2.3rem);color:var(--black);margin:0 0 14px;
}
.post-cta p{font-size:1.05rem;color:#1c1c1c;max-width:520px;margin:0 auto 26px;}
.post-cta-actions{display:flex;flex-wrap:wrap;gap:16px;justify-content:center;}
.btn-outline-dark{
  background:transparent;color:var(--black);border:3px solid var(--black);
}
.btn-outline-dark:hover{background:var(--black);color:var(--yellow);transform:translateY(-3px) scale(1.03);}

/* ---------- OUTROS POSTS ---------- */
.post-related{background:var(--cream);padding:10px 0 72px;}
.post-related-inner{max-width:960px;margin:0 auto;}
.post-related h3{
  font-family:var(--font-title);font-size:clamp(1.6rem,3.6vw,2.2rem);color:var(--black);
  text-align:center;margin:0 0 30px;
}
.post-related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.post-related-card{
  background:var(--white);border-radius:18px;overflow:hidden;border:2px solid var(--black);
  display:flex;flex-direction:column;transition:transform .25s, box-shadow .25s;
}
.post-related-card:hover{transform:translateY(-6px);box-shadow:6px 8px 0 var(--black);}
.post-related-thumb{width:100%;height:120px;object-fit:cover;}
.post-related-body{padding:16px 18px;display:flex;flex-direction:column;gap:6px;flex:1;}
.post-related-tag{font-size:.68rem;text-transform:uppercase;letter-spacing:.05em;color:var(--teal);font-weight:700;}
.post-related-body span.post-related-title{font-family:var(--font-body);font-weight:800;font-size:.96rem;line-height:1.3;color:var(--black);}

@media (max-width:860px){
  .post-related-grid{grid-template-columns:1fr;}
}

@media (max-width:768px){
  .post-hero{padding:130px 0 40px;min-height:clamp(320px,56vh,460px);}
  .post-body{padding:46px 0 10px;}
  .post-article h2{margin:34px 0 14px;}
  .post-cta{padding:38px 22px;}
  .post-cta-actions{flex-direction:column;align-items:stretch;}
  .post-cta-actions .btn{justify-content:center;}
}

@media (max-width:600px){
  .post-article p, .post-article ul li{font-size:1rem;}
}