/* ==========================================================================
   SBHS — Sections
   Section-level treatments that give each band its own rhythm.
   ========================================================================== */

.section { padding-block: clamp(4rem, 3rem + 4vw, 7rem); position: relative; }
.section-sm { padding-block: clamp(3rem, 2.5rem + 2vw, 4.5rem); }

.bg-page { background: var(--c-bg); }
.bg-soft { background: var(--c-surface-2); }
.bg-blue-tint { background: var(--c-tint-blue); }
.bg-gold-tint { background: var(--c-tint-gold); }

/* Hairline divider that echoes the gold ring in the logo */
.gold-rule { width: 3.5rem; height: 3px; border-radius: 3px; background: linear-gradient(90deg, var(--sbhs-gold), var(--sbhs-gold-light)); }

/* ---------- Home hero ---------- */
.hero { position: relative; overflow: hidden; padding-block: clamp(2.5rem, 2rem + 3vw, 5rem) clamp(3.5rem, 3rem + 3vw, 6rem); }
.hero::before {
  /* soft blue glow — decorative */
  content: ""; position: absolute; z-index: 0;
  width: 60rem; height: 60rem; right: -22rem; top: -26rem;
  border-radius: 999px;
  background: radial-gradient(closest-side, rgb(var(--sbhs-blue-rgb) / 0.08), transparent);
  pointer-events: none;
}
:root.dark .hero::before { background: radial-gradient(closest-side, rgb(var(--sbhs-blue-rgb) / 0.3), transparent); }
.hero > * { position: relative; z-index: 1; }

.hero-title .accent { color: var(--sbhs-blue); font-style: italic; }
:root.dark .hero-title .accent { color: var(--sbhs-gold-light); }

.hero-media { position: relative; }
.hero-image {
  position: relative;
  aspect-ratio: 4 / 4.6;
  border-radius: 2rem 2rem 2rem 7rem;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  background: var(--c-surface-2);
}
.hero-image img { width: 100%; height: 100%; object-fit: cover; }
.hero-ring {
  /* thin gold arc echoing the ring in the SBHS logo */
  position: absolute; inset: -1.25rem -1.25rem auto auto;
  width: 9rem; height: 9rem;
  border-radius: 999px;
  border: 2px solid var(--sbhs-gold-light);
  border-left-color: transparent; border-bottom-color: transparent;
  rotate: 10deg;
  pointer-events: none;
}
.hero-badge {
  position: absolute;
  display: flex; align-items: center; gap: 0.8rem;
  padding: 0.85rem 1.1rem;
  border-radius: 1.1rem;
  background: rgb(var(--c-surface-rgb) / 0.95);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid var(--c-border);
  box-shadow: var(--shadow-lg);
  font-size: 0.875rem; line-height: 1.3;
  max-width: 17rem;
}
.hero-badge strong { display: block; font-size: 0.9375rem; color: var(--c-ink); }
.hero-badge span { color: var(--c-muted); }
.hero-badge--a { left: -0.75rem; bottom: 1.75rem; }
.hero-badge--b { right: -0.5rem; bottom: -1.25rem; }
.hero-image img { object-position: 45% 30%; }

/* ---------- Trust strip ---------- */
.trust-strip {
  display: grid;
  grid-template-columns: 1fr;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.trust-item { display: flex; align-items: center; gap: 0.9rem; padding: 1.15rem 1.35rem; }
.trust-item + .trust-item { border-top: 1px solid var(--c-border); }
.trust-item strong { display: block; font-size: 1rem; line-height: 1.3; }
.trust-item span { font-size: 0.875rem; color: var(--c-muted); }

/* ---------- Large statement section ---------- */
.statement {
  font-family: var(--font-serif);
  font-size: clamp(1.875rem, 1.3rem + 2.6vw, 3.25rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-weight: 600;
}
.statement em { font-style: italic; color: var(--sbhs-blue); }
:root.dark .statement em { color: var(--sbhs-gold-light); }

/* ---------- Brand band (full-width blue) ---------- */
.brand-band {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #00469e 0%, #003478 60%, #062f68 100%);
  color: #e8f0fa;
}
:root.dark .brand-band { background: linear-gradient(135deg, #0d2c4a 0%, #0b2233 100%); border-block: 1px solid var(--c-border); }
.brand-band :is(h2, h3) { color: #fff; }
.brand-band .eyebrow { color: var(--sbhs-gold-light); }
.brand-band .muted-on-dark { color: #c9d8ec; }
.brand-band::after {
  content: ""; position: absolute; pointer-events: none;
  width: 34rem; height: 34rem; right: -12rem; bottom: -18rem;
  border-radius: 999px;
  border: 2px solid rgb(var(--sbhs-gold-light-rgb) / 0.35);
}
.brand-band::before {
  content: ""; position: absolute; pointer-events: none;
  width: 22rem; height: 22rem; left: -10rem; top: -12rem;
  border-radius: 999px;
  border: 1px solid rgb(255 255 255 / 0.12);
}
/* Feature cards on the blue band.
   Layers: ::before = cursor-following gold spotlight, ::after = gold
   gradient border that lights up on hover. Tilt/spotlight position come
   from --rx / --ry / --mx / --my set in js/animations.js. */
.feature-on-dark {
  --lift: 0px;
  --rx: 0deg;
  --ry: 0deg;
  --mx: 50%;
  --my: 0%;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 1.75rem;
  border-radius: var(--radius-lg);
  background:
    linear-gradient(160deg, rgb(255 255 255 / 0.09), rgb(255 255 255 / 0.03) 60%);
  border: 1px solid rgb(255 255 255 / 0.14);
  box-shadow: 0 1px 0 rgb(255 255 255 / 0.08) inset;
  transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry)) translateY(var(--lift));
  transform-style: preserve-3d;
  transition:
    transform 450ms var(--ease-out),
    background-color var(--dur) ease,
    border-color var(--dur) ease,
    box-shadow 450ms var(--ease-out);
  will-change: transform;
}
.feature-on-dark > * { position: relative; z-index: 1; }
.feature-on-dark::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  background: radial-gradient(320px circle at var(--mx) var(--my), rgb(var(--sbhs-gold-light-rgb) / 0.2), transparent 60%);
  opacity: 0;
  transition: opacity 400ms ease;
  pointer-events: none;
}
.feature-on-dark::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  padding: 1px;
  border-radius: inherit;
  background: radial-gradient(260px circle at var(--mx) var(--my), var(--sbhs-gold-light), rgb(var(--sbhs-gold-light-rgb) / 0.25) 45%, transparent 75%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity: 0;
  transition: opacity 400ms ease;
  pointer-events: none;
}
.feature-on-dark:hover {
  --lift: -8px;
  border-color: rgb(255 255 255 / 0.2);
  box-shadow: 0 1px 0 rgb(255 255 255 / 0.1) inset, 0 30px 60px -28px rgb(0 0 0 / 0.55), 0 0 0 1px rgb(var(--sbhs-gold-light-rgb) / 0.08);
}
.feature-on-dark:hover::before,
.feature-on-dark:hover::after { opacity: 1; }

.feature-on-dark .icon-chip {
  background: rgb(var(--sbhs-gold-light-rgb) / 0.16);
  color: var(--sbhs-gold-light);
  transition: transform 500ms cubic-bezier(0.34, 1.56, 0.64, 1), background-color var(--dur) ease, box-shadow 500ms ease, color var(--dur) ease;
}
.feature-on-dark:hover .icon-chip {
  transform: translateY(-3px) rotate(-8deg) scale(1.08);
  background: var(--sbhs-gold-light);
  color: var(--sbhs-navy);
  box-shadow: 0 10px 24px -8px rgb(var(--sbhs-gold-light-rgb) / 0.6);
}
.feature-on-dark h3 { width: fit-content; }
.feature-on-dark h3::after {
  content: "";
  display: block;
  height: 2px;
  margin-top: 0.45rem;
  width: 1.25rem;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--sbhs-gold-light), rgb(var(--sbhs-gold-light-rgb) / 0));
  transition: width 500ms var(--ease-out);
}
.feature-on-dark:hover h3::after { width: 100%; }
.feature-on-dark p { color: #c9d8ec; transition: color var(--dur) ease; }
.feature-on-dark:hover p { color: #e3ecf8; }

/* Entrance: rise, un-blur and settle, staggered by --reveal-delay.
   Uses an animation (not the shared reveal transition) so hover stays instant. */
@media (prefers-reduced-motion: no-preference) {
  :root.js .feature-on-dark[data-reveal] {
    opacity: 1;
    transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry)) translateY(var(--lift));
    transition:
      transform 450ms var(--ease-out),
      background-color var(--dur) ease,
      border-color var(--dur) ease,
      box-shadow 450ms var(--ease-out);
  }
  :root.js .feature-on-dark[data-reveal]:not(.is-visible) { opacity: 0; }
  :root.js .feature-on-dark[data-reveal].is-visible {
    animation: feature-card-in 1000ms var(--ease-out) backwards;
    animation-delay: calc(var(--reveal-delay, 0ms) * 2);
  }
  :root.js .feature-on-dark[data-reveal].is-visible .icon-chip {
    animation: feature-icon-pop 700ms cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
    animation-delay: calc(var(--reveal-delay, 0ms) * 2 + 350ms);
  }
}
@keyframes feature-card-in {
  from { opacity: 0; transform: perspective(900px) rotateX(10deg) translateY(36px) scale(0.94); filter: blur(8px); }
  to { opacity: 1; transform: perspective(900px) rotateX(0deg) translateY(0) scale(1); filter: blur(0); }
}
@keyframes feature-icon-pop {
  from { opacity: 0; transform: scale(0.4) rotate(-25deg); }
  to { opacity: 1; transform: scale(1) rotate(0deg); }
}

/* ---------- Provider ---------- */
.provider-photo { position: relative; }
.provider-photo .media-frame { aspect-ratio: 4 / 5; border-radius: 2rem 7rem 2rem 2rem; }
.provider-photo .photo-note {
  position: absolute; left: 1rem; top: 1rem;
  padding: 0.35rem 0.7rem; border-radius: 999px;
  background: rgb(8 26 36 / 0.7); color: #fff;
  font-size: 0.75rem; font-weight: 600;
}
.credential-card {
  position: absolute; right: -0.5rem; bottom: -1.5rem;
  padding: 1.1rem 1.25rem;
  border-radius: 1.25rem;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  box-shadow: var(--shadow-lg);
  max-width: 15rem;
}
.cred-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
.cred {
  padding: 1rem 1.1rem;
  border-radius: var(--radius);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
}
.cred strong { display: block; font-family: var(--font-serif); font-size: 1.5rem; line-height: 1.1; color: var(--c-link); }
.cred span { font-size: 0.875rem; color: var(--c-muted); line-height: 1.35; display: block; margin-top: 0.25rem; }

/* ---------- Telehealth ---------- */
.tele-card {
  position: relative;
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  box-shadow: var(--shadow);
}
.tele-benefit { display: flex; align-items: center; gap: 0.8rem; padding: 0.9rem 1rem; border-radius: var(--radius); background: var(--c-surface); border: 1px solid var(--c-border); font-weight: 600; }

/* ---------- Insurance / cost ---------- */
.cost-panel {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-xl);
  background: var(--c-tint-gold);
  border: 1px solid rgb(var(--sbhs-gold-rgb) / 0.25);
}
.cost-panel::after {
  content: ""; position: absolute; right: -6rem; top: -6rem; width: 18rem; height: 18rem;
  border-radius: 999px; border: 2px solid rgb(var(--sbhs-gold-rgb) / 0.25); pointer-events: none;
}

/* ---------- Final CTA ---------- */
.cta-panel {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-xl);
  background:
    radial-gradient(40rem 20rem at 100% 0%, rgb(var(--sbhs-gold-light-rgb) / 0.22), transparent 60%),
    linear-gradient(135deg, #00469e, #003478);
  color: #e8f0fa;
  box-shadow: var(--shadow-lg);
}
:root.dark .cta-panel {
  background:
    radial-gradient(40rem 20rem at 100% 0%, rgb(var(--sbhs-gold-light-rgb) / 0.14), transparent 60%),
    linear-gradient(135deg, #123a5e, #0d2433);
  border: 1px solid var(--c-border);
}
.cta-panel h2 { color: #fff; }
.cta-panel p { color: #d3e0f1; }
.cta-panel::after {
  content: ""; position: absolute; pointer-events: none;
  width: 26rem; height: 26rem; left: -9rem; bottom: -17rem;
  border-radius: 999px; border: 2px solid rgb(var(--sbhs-gold-light-rgb) / 0.4);
}

/* ---------- Internal page hero ---------- */
.page-hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(2rem, 1.5rem + 2vw, 3rem) clamp(3rem, 2.5rem + 3vw, 5rem);
  background: linear-gradient(180deg, var(--c-tint-blue), var(--c-bg));
}
.page-hero::after {
  content: ""; position: absolute; pointer-events: none;
  width: 30rem; height: 30rem; right: -12rem; top: -14rem;
  border-radius: 999px; border: 2px solid rgb(var(--sbhs-gold-light-rgb) / 0.35);
}
.page-hero > * { position: relative; z-index: 1; }
.page-hero-image {
  aspect-ratio: 5 / 4;
  border-radius: 2rem 2rem 2rem 6rem;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  background: var(--c-surface-2);
}
.page-hero-image img { width: 100%; height: 100%; object-fit: cover; }

/* Sticky in-page aside (service/condition detail pages) */
.aside-card { padding: 1.5rem; }
.toc a { display: block; padding: 0.4rem 0 0.4rem 0.9rem; border-left: 2px solid var(--c-border); color: var(--c-muted); font-size: 0.9375rem; font-weight: 500; }
.toc a:hover { color: var(--c-link); border-left-color: var(--sbhs-gold); }

/* Numbered approach cards */
.approach-num { font-family: var(--font-serif); font-size: 2.5rem; line-height: 1; color: var(--sbhs-gold-light); font-weight: 600; }

/* Blog cards */
.blog-card { display: flex; flex-direction: column; overflow: hidden; height: 100%; }
.blog-card .thumb { aspect-ratio: 16 / 10; overflow: hidden; background: var(--c-surface-2); }
.blog-card .thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 800ms var(--ease-out); }
.blog-card:hover .thumb img { transform: scale(1.04); }
.blog-card .body { display: flex; flex-direction: column; gap: 0.75rem; padding: 1.5rem; flex: 1; }
.tag { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-accent-text); }

/* Map */
.map-frame { border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--c-border); background: var(--c-surface-2); aspect-ratio: 4 / 3; }
.map-frame iframe { width: 100%; height: 100%; border: 0; display: block; }
:root.dark .map-frame iframe { filter: grayscale(0.2) brightness(0.9); }