/* =========================================================
   Nahi Clinic Spa, blog.css (índice do blog)
   ========================================================= */

.section{ padding-block: clamp(48px, 8vw, 100px); }

.page-hero{
  background: radial-gradient(120% 90% at 85% -10%, var(--sand) 0%, transparent 55%), linear-gradient(180deg, var(--ivory), var(--cream));
  padding: clamp(44px, 8vw, 98px) 0 clamp(36px, 5vw, 68px);
}
.page-hero__title{ font-family: var(--serif); font-weight: 500; color: var(--brown-deep); font-size: clamp(2.3rem, 6vw, 4rem); line-height: 1.03; letter-spacing: -.01em; margin: 18px 0 16px; }
.page-hero__lede{ font-size: clamp(1.05rem, 1.8vw, 1.25rem); color: var(--ink); max-width: 54ch; margin: 0; font-weight: 300; }

.blog-list{ background: var(--ivory); }
.blog-list__head{ margin-bottom: 26px; }
.blog-list__head--mt{ margin-top: clamp(46px, 6vw, 76px); }
.blog-list__head .title{ margin: 0; }

.bgrid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.bcard{
  background: var(--cream); border: 1px solid var(--line); border-radius: var(--r);
  padding: 30px 28px; text-decoration: none; color: inherit; display: flex; flex-direction: column;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
}
.bcard:hover{ transform: translateY(-4px); box-shadow: var(--shadow); border-color: rgba(138,92,70,.4); }
.bcard__tag{ align-self: flex-start; font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; color: var(--brown-deep); background: var(--taupe); padding: 5px 12px; border-radius: 100px; margin-bottom: 16px; }
.bcard h3{ font-family: var(--serif); font-weight: 500; font-size: 1.5rem; color: var(--brown-deep); margin: 0 0 10px; line-height: 1.12; }
.bcard p{ margin: 0 0 20px; color: var(--muted); font-size: .98rem; flex: 1; }
.bcard__go{ font-size: .76rem; letter-spacing: .12em; text-transform: uppercase; color: var(--clay); display: inline-flex; gap: 7px; }
.bcard__go span{ transition: transform .3s var(--ease); }
.bcard:hover .bcard__go span{ transform: translateX(5px); }

@media (max-width: 900px){ .bgrid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 580px){ .bgrid{ grid-template-columns: 1fr; } }