/* treatments.html — page-specific styles only */

h2.sec-title { font-family: 'Playfair Display', serif; font-size: clamp(24px, 3vw, 38px); color: var(--navy); line-height: 1.25; margin-bottom: 16px; }

/* Tighter hero on this page */
.page-hero { padding: 44px 48px 52px; }
.page-hero::after { display: none; }
.breadcrumb { margin-bottom: 28px; }
.page-hero h1 { margin-bottom: 14px; }
.page-hero p { margin-bottom: 0; }

/* Treatment cards section */
.treatment-list-section { padding: 0 48px 80px; max-width: 1100px; margin: 0 auto; }

/* Clean treatment list grid */
.tl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; }
.tl-card {
  display: flex; flex-direction: column; border-radius: 16px; overflow: hidden;
  border: 2px solid var(--border); background: var(--white);
  text-decoration: none; transition: all .22s;
  box-shadow: 0 2px 12px rgba(124,49,119,.05);
}
.tl-card:hover { border-color: var(--purple); transform: translateY(-5px); box-shadow: 0 14px 36px rgba(124,49,119,.13); }
.tl-img { position: relative; height: 180px; overflow: hidden; }
.tl-img img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; display: block; transition: transform .4s; }
.tl-card:hover .tl-img img { transform: scale(1.05); }
.tl-num { position: absolute; top: 12px; left: 12px; background: var(--purple); color: #fff; font-size: 11px; font-weight: 800; padding: 3px 11px; border-radius: 20px; z-index: 1; }
.tl-body { padding: 16px 20px; display: flex; flex-direction: column; justify-content: center; flex: 1; }
.tl-body h3 { font-family: 'Playfair Display', serif; font-size: 16px; color: var(--navy); margin: 0; font-weight: 700; line-height: 1.35; }

/* ── TREATMENTS.HTML FOOTER EXTRAS ── */
.footer-desc { font-size: 13px; color: rgba(255,255,255,.55); line-height: 1.8; margin-top: 10px; max-width: 280px; }
/* .soc is now defined in common.css */
.hrow {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 13px; color: rgba(255,255,255,.6);
  padding: 7px 0; border-bottom: 1px solid rgba(255,255,255,.06);
}
.hrow .open { color: #a8d88a; font-weight: 700; }
.fci { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; color: rgba(255,255,255,.6); margin-top: 8px; }
.fci a { color: rgba(255,255,255,.6); text-decoration: none; transition: color .2s; }
.fci a:hover { color: #f7b3f3; }
.ic { font-size: 15px; flex-shrink: 0; margin-top: 1px; }

/* ── RESPONSIVE (page-specific) ── */
@media (max-width: 900px) {
  .tl-grid { grid-template-columns: 1fr 1fr; }
  .page-hero { padding: 32px 20px 36px; }
  .treatment-list-section { padding: 36px 20px 60px; }
}
@media (max-width: 600px) {
  .tl-grid { grid-template-columns: 1fr; }
}