/* ========================================
   Specialist Detail Page Styles
   - Scoped under #MainZone to win against legacy
     static_page.css rules (.title-style-*, .label-style,
     .content-style a, .side-zone width, .two-col-container
     flex layout, etc.)
   - Mirrors news_detail.css scoping convention
   - Layout is intentionally two-column with a persistent
     photo/contact/locations sidebar (different from
     news detail pattern)
   ======================================== */

/* ---- Grid Scaffold ----
   The page-scoped two-column grid. ID selector wins over the default
   `#MainZone .two-col-container { display: flex }` rule, swapping it
   for a grid with a fixed 380px sidebar. */
#MainZone #TwoColumnSubZoneAS {
  display: grid;
  /* Main column capped at 63.93% of the canonical 1190px content
     width = ~761px reading width. Sidebar fixed at 380px. At 1190
     inner: 761 + 380 = 1141; `space-between` pushes the sidebar
     flush right, leaving ~49px visual gap. `minmax(0, …)` prevents
     grid blowout from long unbroken tokens inside the main column. */
  grid-template-columns: minmax(0, 63.93%) 380px;
  justify-content: space-between;
  align-items: start;
}

/* ---- Hero Banner ---- */
/* Full-width image band shown only when banner_image is set.
   126px clearance = ~90px fixed navbar + 36px visual breathing. */
#MainZone .specialist-detail__hero {
  display: block;
  width: 100%;
  background-color: #F4F4F4;
  padding-top: 126px;
  border-bottom: 3px solid var(--allied-green);
  overflow: hidden;
}

#MainZone .specialist-detail__hero .specialist-detail__hero-media {
  display: block;
  max-width: 1400px;
  margin: 0 auto;
}

#MainZone .specialist-detail__hero img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 360px;
  object-fit: cover;
}

/* ---- Article Container ---- */
#MainZone .specialist-detail {
  margin: 0;
  font-family: var(--font-body);
}

/* Zero top margin on the first child so article content sits flush. */
#MainZone .specialist-detail > :first-child {
  margin-top: 0;
}

/* ---- Article Header ---- */
#MainZone .specialist-detail__header {
  margin: 0 0 1.5rem;
}

#MainZone .specialist-detail__header h1 {
  font-family: var(--font-heading);
  /* 56px ≈ 80% of the legacy 64px h1 — keeps the title dominant
     over the ~844px column without overshooting the redesign's
     tighter vertical rhythm. Mobile step-downs (44 → 34 → 28)
     preserve a ~60-65% cascade to 480px. */
  font-size: 3.5rem;
  font-weight: 700;
  color: #000;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0 0 16px;
  text-wrap: balance;
  overflow-wrap: break-word;
}

/* ---- Description List (facts) ----
   Contained card treatment echoing the old `.system-callout`.
   #F4F4F4 background matches `.specialist-detail__hero` and
   `.specialist-aside__photo`; 1px #e5e7eb border and 8px radius
   match the neutral divider + photo card radius used elsewhere
   in this file. */
#MainZone .specialist-detail__facts {
  list-style: none;
  margin: 0 0 2rem;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background-color: #F4F4F4;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 20px 24px;
}

#MainZone .specialist-detail__fact {
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.5;
  color: #333;
}

#MainZone .specialist-detail__fact-label {
  font-family: var(--font-heading);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--allied-green);
  flex: 0 0 auto;
  /* Align label baseline with value at 16px body text */
  padding-top: 2px;
}

#MainZone .specialist-detail__fact-value {
  flex: 1 1 auto;
  min-width: 0;
  color: #333;
  font-weight: 400;
}

/* Specialty links inside fact values */
#MainZone .specialist-detail__specialty-link {
  color: var(--allied-blue);
  font-weight: 700;
  text-decoration: none;
  transition: color 0.2s ease, text-decoration-color 0.2s ease;
}

#MainZone .specialist-detail__specialty-link:hover,
#MainZone .specialist-detail__specialty-link:focus {
  color: var(--allied-blue-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---- Section blocks ---- */
#MainZone .specialist-detail__section {
  margin: 2.5rem 0 0;
}

#MainZone .specialist-detail__section:first-of-type {
  margin-top: 0;
}

#MainZone .specialist-detail__section-heading {
  font-family: var(--font-heading);
  font-size: 1.75rem;
  font-weight: 700;
  color: #000;
  line-height: 1.3;
  letter-spacing: 0;
  margin: 0 0 12px;
  padding: 0 0 10px;
  border-bottom: 2px solid var(--allied-green);
}

#MainZone .specialist-detail__section-body {
  margin: 0;
}

#MainZone .specialist-detail__section-body > :first-child {
  margin-top: 0;
}

#MainZone .specialist-detail__section-body > :last-child {
  margin-bottom: 0;
}

/* ---- Awards ---- */
/* 2-col responsive list — replaces legacy calc(50% - 0.75rem) inline width.
   Awards render as strong-title + italic-year blocks, no bullets per design. */
#MainZone .specialist-detail__awards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
}

#MainZone .specialist-detail__award {
  margin: 0;
  padding: 0;
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.5;
  color: #333;
}

/* Suppress legacy static_page.css `.content-style ul:not([class*="flex"]) li:before`
   navy bullet — awards are custom-styled without markers. */
#MainZone .content-style .specialist-detail__award::before {
  content: none;
}

#MainZone .specialist-detail__award-title {
  display: block;
  font-weight: 700;
  color: #000;
  margin-bottom: 2px;
}

#MainZone .specialist-detail__award-year {
  display: block;
  font-style: italic;
  font-size: 0.875rem;
  color: #666;
}

/* ---- Education ---- */
/* Preserve the nested category → list → item hierarchy. Sizes
   moved from em-relative (old-site) to explicit px at the
   redesign scale. */
#MainZone .specialist-detail__education {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

#MainZone .specialist-detail__education-category {
  margin: 0;
}

#MainZone .specialist-detail__education-category-heading {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--allied-blue);
  line-height: 1.3;
  margin: 0 0 8px;
}

#MainZone .specialist-detail__education-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

#MainZone .specialist-detail__education-item {
  margin: 0;
  padding: 0;
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.5;
  color: #333;
}

/* Suppress legacy static_page.css `.content-style ul:not([class*="flex"]) li:before`
   navy bullet — education items are custom-styled (degree + school + year stack),
   no markers per design. Without this the absolute-positioned ::before overlaps
   the first character of the school name because
   .specialist-detail__education-item resets the legacy 1em li padding-left. */
#MainZone .content-style .specialist-detail__education-item::before {
  content: none;
}

#MainZone .specialist-detail__education-degree {
  font-weight: 700;
  color: #000;
}

#MainZone .specialist-detail__education-school {
  font-weight: 400;
  color: #333;
  font-size: 0.9375rem;
}

#MainZone .specialist-detail__education-year {
  font-style: italic;
  font-size: 0.875rem;
  color: #666;
}

/* ---- Publications ---- */
#MainZone .specialist-detail__publications {
  list-style: none;
  margin: 0;
  padding: 0;
}

#MainZone .specialist-detail__publication {
  margin: 0;
  padding: 12px 0;
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.5;
  color: #333;
  border-bottom: 1px solid #e5e7eb;
}

#MainZone .specialist-detail__publication:last-child {
  border-bottom: none;
}

#MainZone .specialist-detail__publication strong {
  font-weight: 600;
  color: #000;
}

/* Suppress legacy static_page.css `.content-style ul:not([class*="flex"]) li:before`
   navy bullet — publications render as bordered entries with strong titles. */
#MainZone .content-style .specialist-detail__publication::before {
  content: none;
}

/* ---- .title-style-5 fix ----
   Overrides static_page.css #MainZone .content-style .title-style-5.
   Applies to both DB-embedded rich text (<strong class="title-style-5">)
   and the Affiliations label rendered server-side in the template. */
#MainZone .specialist-detail .content-style .title-style-5 {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--allied-blue-dark);
  margin: 1.25rem 0 0.5rem;
  line-height: 1.3;
}

/* ========================================
   Sidebar — .specialist-aside
   ======================================== */

/* 380px matches the grid column width. ID selector on #SubZoneRight
   beats legacy #MainZone .side-zone { width: 393px } cleanly. */
#MainZone #SubZoneRight.specialist-aside {
  width: 380px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  font-family: var(--font-body);
}

/* ---- Profile (photo + contact) ---- */
#MainZone .specialist-aside__profile {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* ---- Photo card ---- */
#MainZone .specialist-aside__photo {
  margin: 0;
  padding: 0;
  width: 100%;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  overflow: hidden;
  background-color: #F4F4F4;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}

#MainZone .specialist-aside__photo img {
  display: block;
  max-width: 100%;
  max-height: 480px;
  height: auto;
  margin: 0 auto;
}

/* Mobile-only duplicate of the aside headshot — hidden at desktop.
   At ≤1024px, the layout collapses to one column and this variant
   is shown while the original aside photo is hidden, so the
   headshot sits directly under the title. */
#MainZone .specialist-detail__photo-mobile {
  display: none;
}

/* ---- Sidebar section heading ----
   Replaces legacy .title-style-3 treatment on both
   "Contact Information" and "Location Information". */
#MainZone .specialist-aside__heading {
  display: block;
  font-family: var(--font-heading);
  /* 20px matches legacy .title-style-3 scale — reads as a proper
     heading (peer to the article) rather than an eyebrow label.
     Mixed-case + slight negative tracking drops the uppercase
     tab-label feel; green underline remains as redesign accent. */
  font-size: 1.25rem;
  font-weight: 700;
  text-transform: none;
  letter-spacing: -0.01em;
  color: var(--allied-blue);
  line-height: 1.3;
  margin: 0 0 12px;
  padding: 0 0 10px;
  border-bottom: 2px solid var(--allied-green);
}

/* ---- Contact block ---- */
#MainZone .specialist-aside__contact {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px 14px;
  align-items: baseline;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: #333;
}

#MainZone .specialist-aside__contact-label {
  font-family: var(--font-heading);
  font-size: 0.8125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #666;
  white-space: nowrap;
}

#MainZone .specialist-aside__contact-value {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 400;
  color: #333;
  text-decoration: none;
  transition: color 0.2s ease;
  word-break: break-word;
}

/* Only links get the interactive treatment — fax renders as a
   <span> so we scope hover to <a>. */
#MainZone .specialist-aside__contact a.specialist-aside__contact-value:hover,
#MainZone .specialist-aside__contact a.specialist-aside__contact-value:focus {
  color: var(--allied-blue);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---- Locations ---- */
#MainZone .specialist-aside__locations {
  margin: 0;
}

#MainZone .specialist-aside__locations-list {
  display: flex;
  flex-direction: column;
}

#MainZone .specialist-aside__location {
  padding: 16px 0;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  line-height: 1.5;
  color: #333;
}

#MainZone .specialist-aside__location:first-child {
  padding-top: 0;
}

/* Replaces the legacy .location-item::before pseudo-divider */
#MainZone .specialist-aside__location + .specialist-aside__location {
  border-top: 1px solid #e5e7eb;
}

#MainZone .specialist-aside__location-name {
  display: block;
  font-family: var(--font-heading);
  /* 17px — a clear step above the 15px body text so the location
     name reads as a titled block inside each entry. */
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--allied-blue);
  line-height: 1.3;
  margin-bottom: 4px;
}

#MainZone .specialist-aside__location-type {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  color: #666;
  margin-bottom: 6px;
  line-height: 1.3;
}

#MainZone .specialist-aside__location-address {
  font-style: normal;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 400;
  color: #333;
  line-height: 1.5;
  margin: 0;
}

#MainZone .specialist-aside__location-phone {
  color: var(--allied-blue-light);
  text-decoration: none;
  font-weight: 600;
  transition: color 0.2s ease;
}

#MainZone .specialist-aside__location-phone:hover,
#MainZone .specialist-aside__location-phone:focus {
  color: var(--allied-blue);
  text-decoration: underline;
  text-underline-offset: 3px;
}

#MainZone .specialist-aside__location-fax {
  color: #555;
  font-size: 0.8125rem;
}

#MainZone .specialist-aside__location-more {
  margin-top: 8px;
}

/* "More Information" CTA — matches sibling detail-page
   link vocabulary (news-card__link: allied-blue, arrow
   slides in on hover, underline on hover). */
#MainZone .specialist-aside__location-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-heading);
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--allied-blue);
  text-decoration: none;
  transition: color 0.2s ease;
}

#MainZone .specialist-aside__location-link::after {
  content: '\2192' / ''; /* → */
  display: inline-block;
  transform: translateX(-4px);
  opacity: 0;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

#MainZone .specialist-aside__location-link:hover,
#MainZone .specialist-aside__location-link:focus {
  color: var(--allied-blue-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
}

#MainZone .specialist-aside__location-link:hover::after,
#MainZone .specialist-aside__location-link:focus::after {
  transform: translateX(0);
  opacity: 1;
}

/* ========================================
   Responsive — 1024px and below
   Single column with mobile reorder:
   h1 → photo → contact → description list → sections → locations
   ======================================== */

@media (max-width: 1024px) {
  #MainZone #TwoColumnSubZoneAS {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  /* Sidebar stretches to full width, max-width clamp
     preserves reasonable reading measure on tablet */
  #MainZone #SubZoneRight.specialist-aside {
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
  }

  /* Mobile reorder via grid order.
     #SubZoneLeft holds the whole article; #SubZoneRight holds
     the sidebar (photo + contact + locations). We can't split
     photo/contact from locations without template changes, so
     the closest approximation is: left column, then sidebar. */

  /* ---- Within-sidebar mobile reorder ----
     Sidebar is flex-column; reorder photo/contact (profile)
     before the locations block so: photo + contact appears
     above, locations appears at the bottom of the page
     (to match the intended order: h1 → photo → contact →
     description list → sections → locations).
     Profile already renders first in source order; locations
     second — so default source order matches intent. */

  #MainZone .specialist-aside__profile {
    max-width: 420px;
    margin: 0 auto;
    width: 100%;
  }

  #MainZone .specialist-detail__header h1 {
    font-size: 2.75rem;
  }

  #MainZone .specialist-detail__section-heading {
    font-size: 1.5rem;
  }

  /* Awards collapse to single column at narrow widths */
  #MainZone .specialist-detail__awards {
    gap: 1rem;
  }

  /* Photo uses 3/4 aspect on tablet/mobile, clamp max size */
  #MainZone .specialist-aside__photo {
    max-width: 280px;
    margin: 0 auto;
  }

  /* Reveal the mobile duplicate and hide the aside copy so the photo
     appears right after the title rather than at the bottom of the
     stacked aside. Reuses the aside photo sizing via the shared
     .specialist-aside__photo class on the mobile-duplicate wrapper. */
  #MainZone .specialist-detail__photo-mobile {
    display: block;
    max-width: 280px;
    margin: 0 auto 1.5rem;
  }

  #MainZone .specialist-aside__profile > .specialist-aside__photo {
    display: none;
  }

  #MainZone .specialist-aside__photo img {
    width: 100%;
  }
}

@media (max-width: 768px) {
  #MainZone .specialist-detail__header h1 {
    font-size: 2.125rem;
  }

  #MainZone .specialist-detail__section-heading {
    font-size: 1.375rem;
  }

  #MainZone .specialist-detail__education-category-heading {
    font-size: 1.125rem;
  }

  #MainZone .specialist-detail__awards {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }

  #MainZone .specialist-detail__hero {
    padding-top: 110px;
  }

  #MainZone .specialist-detail__hero img {
    max-height: 260px;
  }

  /* Tighter card padding on phones so the facts card doesn't
     feel cramped while still matching the redesign's inset. */
  #MainZone .specialist-detail__facts {
    padding: 16px 18px;
  }
}

@media (max-width: 600px) {
  /* Description list stacks under 500px-600px — each fact
     becomes label-above-value instead of side-by-side. */
  #MainZone .specialist-detail__fact {
    flex-direction: column;
    gap: 2px;
  }

  #MainZone .specialist-aside__photo {
    max-width: 240px;
  }
}

@media (max-width: 480px) {
  #MainZone .specialist-detail__header h1 {
    font-size: 1.75rem;
  }

  #MainZone .specialist-detail__section-heading {
    font-size: 1.25rem;
    padding-bottom: 8px;
  }

  #MainZone .specialist-detail__facts {
    padding: 14px 16px;
  }

  /* Sidebar mobile scale — scaled proportionally with the
     bumped desktop sizes (20 / 15 / 15). Still a modest step
     down from desktop without dropping back to the pre-bump
     micro scale. */
  #MainZone .specialist-aside__heading {
    font-size: 1.125rem;
  }

  #MainZone .specialist-aside__contact {
    font-size: 0.875rem;
  }

  #MainZone .specialist-aside__location {
    font-size: 0.875rem;
  }
}