/* Round 1 inner-page styles: services.html, team.html, about.html,
   booking.html. Everything new for these four pages lives here rather
   than in each page's own inline <style>, so the whole round-1 pass has
   one file to review. Reuses design tokens from styles/tokens.css and
   layout primitives from styles/base.css; never redefines either.
   Owner: services/team/about/booking pass, 2026-09-16. Do not add rules
   for index.html, patient-journey.html or the service-*.html pages here,
   they are outside this file's scope. */

/* ---------- Services carousels (services.html) ----------
   The carousel card anatomy (.carousel, .service-card, .service-thumb,
   .service-detail, .carousel-rail, the carousel-block wrapper) moved to
   styles/carousel.css, 2026-10-05 round 2: index.html's Therapies and
   Consultations sections became belts again that same round, so both
   pages now share one definition instead of two copies drifting apart.
   Only what is genuinely specific to this page's layout stays here. */

/* Hairline between stacked carousel blocks on services.html. Applied to
   the section wrapper, not the carousel itself, so the divider sits in
   the section's own padding rhythm. */
.services-block + .services-block {
  border-top: 1px solid var(--line);
}

/* Anchor targets inside a carousel: services.html#iv-therapy and
   #peptide-therapy are linked from the nav Services dropdown on every
   page. scroll-margin-top clears the fixed nav capsule (nav sits at
   top: 1rem, capsule is roughly 4-4.5rem tall; 7rem leaves clean air). */
#iv-therapy,
#peptide-therapy {
  scroll-margin-top: 7rem;
}

/* ---------- Team page: horizontal doctor bands (team.html) ----------
   Replaces the old three-up .physicians-grid with one full-width band
   per person, stacked vertically, alternating portrait side for rhythm.
   Deliberately a single repeatable pattern (not one bespoke card per
   founder) so a future hire is just another .doctor-band in the stack. */

.doctor-bands {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.doctor-band {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  padding: 2.5rem;
  display: flex;
  align-items: center;
  gap: 3rem;
}
/* Alternate rhythm: odd bands (1st, 3rd...) portrait left (source order,
   default row direction); even bands portrait right. */
.doctor-band:nth-child(even) {
  flex-direction: row-reverse;
}

.doctor-band-portrait {
  flex: 0 0 38%;
  width: 38%;
}

.doctor-band-body {
  flex: 1 1 auto;
  min-width: 0;
}

.doctor-band .doctor-portrait {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(150deg, var(--accent-tint), var(--accent));
  position: relative;
  overflow: hidden;
}
.doctor-band .doctor-portrait span { font-family: var(--display); font-size: 3rem; color: var(--accent-ink); }
/* .doctor-photo is photo-ready but not photo-loaded, same convention as
   the original grid: data-src rather than src so a missing file never
   fires a real resource request, and the initials keep showing until a
   real portrait lands and the attribute is renamed to src. */
.doctor-band .doctor-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 30%;
  border-radius: inherit;
}
.doctor-band .doctor-photo:not([src]) { display: none; }

.doctor-band-body h3 { font-size: 1.4rem; }
.doctor-band-body .role { font-size: 0.9rem; color: var(--ink-soft); margin-top: 0.3rem; }
.doctor-band-bio { display: flex; flex-direction: column; gap: 0.75rem; margin-top: 1.1rem; }
.doctor-band-bio p { font-size: var(--size-small); line-height: 1.65; color: var(--ink-soft); margin: 0; }

/* Multidisciplinary-team band: same dark inversion as the old .team-card
   so it still reads as the practice-wide entry rather than a named
   physician. */
.doctor-band.team-band { background: var(--ink); color: var(--paper); }
.doctor-band.team-band .doctor-portrait { background: rgba(247, 246, 244, 0.08); }
.doctor-band.team-band .doctor-portrait span { color: var(--paper); }
.doctor-band.team-band .doctor-band-body .role { color: var(--paper-soft); }
.doctor-band.team-band .doctor-band-bio p { color: var(--paper-soft); }

@media (max-width: 900px) {
  .doctor-band,
  .doctor-band:nth-child(even) {
    flex-direction: column;
    align-items: stretch;
    gap: 1.75rem;
  }
  .doctor-band-portrait { width: 100%; flex-basis: auto; max-width: 22rem; margin: 0 auto; }
}
@media (max-width: 640px) {
  .doctor-band { padding: 1.5rem; }
}

/* ---------- Booking page: contact map (booking.html) ---------- */

.contact-map {
  margin-top: 2rem;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  aspect-ratio: 16 / 9;
}
.contact-map iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}
@media (max-width: 640px) {
  .contact-map { aspect-ratio: 4 / 3; }
}