/* /team/ "Our Doctors" page (tools/doctor-pages.mjs buildDoctorsPage). The captured
   /team/ rows keep their Beaver Builder styling; this file styles only what the build
   adds: the doctor chooser under the hero, the quote and actions inside each shortened
   bio row, the treatment list in its accordion, and the phone line above the booking
   widget. Buttons are press.css's .dr-press-btn (the site's square pastel button).
   Palette and type are the site's own: #FF82C8 / #96F0FC, DidotDisplay headings,
   FreightNeo Pro text. */

/* ---- Chooser ------------------------------------------------------------- */
/* Editorial, not UI cards (Amr, 2026-10-14: "make this more elevated"): no boxes,
   matched portraits, Didot names, hairlines, black square buttons; the doctors'
   pastels survive only as a short rule under each label. The theme styles h2/h3
   with its own font, hence the !important on the headings. */
.dr-choose { max-width: 1160px; margin: 0 auto; padding: 120px 24px 104px; scroll-margin-top: 90px; }
.dr-choose__kicker, .dr-card__eyebrow {
  font-family: "FreightNeo Pro", Verdana, Arial, sans-serif; font-size: 12px; font-weight: 400;
  letter-spacing: .22em; text-transform: uppercase;
}
.dr-choose__kicker { margin: 0 0 18px; text-align: center; color: #6B6B6B; }
.dr-choose .dr-choose__h {
  font-family: DidotDisplay, Verdana, Arial, sans-serif !important; font-weight: 400 !important;
  font-size: clamp(40px, 4.4vw, 68px) !important; line-height: 1.04 !important; letter-spacing: -.01em;
  text-align: center; margin: 0 0 80px !important;
}
/* /team/ only: the definitional paragraph between the heading and the cards */
.dr-choose__lead { max-width: 62ch; margin: -44px auto 72px; text-align: center; font-size: 17px; line-height: 1.6; text-wrap: pretty; }
/* A page's optional "why a dermatologist" line, in the same place (copy pass 2026-10-18) */
.dr-choose__why { max-width: 62ch; margin: -44px auto 72px; text-align: center; font-size: 17px; line-height: 1.6; text-wrap: pretty; }
.dr-choose__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 96px; align-items: start; }
.dr-card { display: flex; flex-direction: column; align-items: flex-start; text-align: left; }
.dr-card__photo { display: block; width: 100%; margin-bottom: 36px; overflow: hidden; background: #F4F1EE; }
.dr-card__photo img { display: block; width: 100%; height: auto; aspect-ratio: 15 / 16; object-fit: cover;
  transition: transform 1.2s cubic-bezier(.2, .7, .2, 1); }
.dr-card:hover .dr-card__photo img { transform: scale(1.025); }
@media (prefers-reduced-motion: reduce) {
  .dr-card__photo img { transition: none; }
  .dr-card:hover .dr-card__photo img { transform: none; }
}
.dr-card__eyebrow { margin: 0 0 18px; color: #000; }
/* the doctor's colour, once: a short rule under her label */
.dr-card__eyebrow::after { content: ""; display: block; width: 40px; height: 3px; margin-top: 14px; }
.dr-card--pink .dr-card__eyebrow::after { background: #FF82C8; }
.dr-card--blue .dr-card__eyebrow::after { background: #96F0FC; }
.dr-choose .dr-card__name {
  margin: 0 0 14px !important; font-family: DidotDisplay, Verdana, Arial, sans-serif !important; font-weight: 400 !important;
  font-size: clamp(34px, 3vw, 46px) !important; line-height: 1.05 !important; letter-spacing: -.01em;
}
.dr-card__name a { color: #000 !important; text-decoration: none !important; }
.dr-card__line { margin: 0 0 22px; font-family: DidotDisplay, Verdana, Arial, sans-serif; font-size: 22px; line-height: 1.35; }
/* (upright: DidotDisplay has no italic, and the browser's slanted fake broke its spacing) */
.dr-card__facts { margin: 0 0 34px; padding: 14px 0 0; width: 100%; border-top: 1px solid #000; font-size: 15px; line-height: 1.5; color: #444; }
.dr-card__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; }
.dr-card__btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 30px;
  background: #000; color: #fff !important; border: 1px solid #000; border-radius: 0; text-decoration: none !important;
  font-size: 13px; letter-spacing: .16em; text-transform: uppercase; transition: background-color .25s, color .25s;
}
.dr-card__btn:hover, .dr-card__btn:focus-visible { background: #fff; color: #000 !important; }
.dr-card__btn:focus-visible { outline: 2px solid #000; outline-offset: 3px; }
.dr-card__more, .dr-doc-more {
  font-size: 15px; color: #000 !important; text-decoration: underline !important; text-underline-offset: 4px;
}
.dr-choose__helper { max-width: 60ch; margin: 88px auto 0; padding-top: 36px; border-top: 1px solid #E6E6E6;
  text-align: center; font-size: 16px; line-height: 1.6; text-wrap: pretty; }
.dr-choose__helper a { color: inherit; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.dr-choose .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@media (max-width: 900px) {
  .dr-choose { padding: 72px 20px 64px; }
  .dr-choose .dr-choose__h { margin-bottom: 44px !important; }
  .dr-choose__lead, .dr-choose__why { margin: -20px auto 44px; font-size: 16px; }
  .dr-choose__grid { grid-template-columns: 1fr; gap: 64px; }
  .dr-card__photo { margin-bottom: 26px; }
  .dr-card__actions { width: 100%; }
  .dr-card__btn { flex: 1 1 100%; }
  .dr-choose__helper { margin-top: 56px; }
}

/* ---- Shortened bio rows -------------------------------------------------- */
/* The /team/ text column bottom-aligns its content (justify-content: flex-end), which
   suited the long bio; the short one would sit under ~500px of empty colour (QA 2026-10-14). */
.dr-doc-short .col-title-par > .fl-col-content { justify-content: center !important; }
/* The panel is the doctor's own colour, so her button would vanish into it: white here. */
.dr-doc-actions .dr-press-btn { background: #fff; }
.dr-doc-quote { margin: 22px 0 0; padding: 0 0 0 18px; border-left: 3px solid #000; }
.dr-doc-quote p { margin: 0 0 8px; font-style: italic; font-size: 17px; line-height: 1.5; text-align: left; }
.dr-doc-quote cite { font-style: normal; font-size: 14px; letter-spacing: .06em; text-transform: uppercase; }
.dr-doc-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 26px; }
.dr-doc-treats { margin: 0; padding: 0 0 0 1.1em; }
.dr-doc-treats li { margin: 0 0 10px; line-height: 1.5; }
.dr-doc-treats a { color: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 767px) {
  .dr-doc-actions { flex-direction: column; align-items: stretch; }
  .dr-doc-actions .dr-press-btn { justify-content: space-between; }
  .dr-doc-more { text-align: center; }
}

/* ---- Booking ------------------------------------------------------------- */
#book { scroll-margin-top: 90px; }
.dr-booking-note { max-width: 640px; margin: 0 auto 28px; text-align: center; font-size: 17px; line-height: 1.5; }
.dr-booking-note a { color: inherit; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }