/* State page template (design/templates/state-page/state-page.css without its shared tail, which is in the global
   stylesheet): the hooks sp-head, lv-statedocs, lv-stateabout, lv-statelinks, the new lv-doctor--profile, and the
   variants sheet's chrome for its fixture. */

/* ---------- Page head (hook sp-head on lv-arthead--split), used when a state has several doctors or none: copy 7fr,
   the doctors 5fr on a white panel, both from the top. With one doctor the head is the plain lv-arthead with no
   tool, since the profile under it prints the same name and number in the first screen ---------- */
.sp-head { padding: 24px 0 80px; }
.lv-arthead--split.sp-head .grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 64px; align-items: start; }
.sp-head h1, .sp-head .lv-h1 { text-wrap: balance; }
.sp-head .inner { max-width: none; }
.sp-head .lead { max-width: 30em; }
/* The tool sits on a white panel: the article rail card's look (hairline edge, 12px radius), not a new card */
.sp-head .tool { background: var(--c-paper); border: 1px solid var(--c-hairline); border-radius: var(--radius-card); padding: 28px 32px 24px; }
.sp-head .tool h2 { font: 700 21px/1.3 var(--font-body); color: var(--c-head); margin: 0 0 4px; }
.sp-head .tool ul { list-style: none; }
@media (max-width: 1100px) { .lv-arthead--split.sp-head .grid { grid-template-columns: 1fr; gap: 48px; } .sp-head .tool { max-width: 640px; } }
@media (max-width: 767px) { .sp-head .tool { padding: 20px 20px 16px; } }
/* The shared lv-arthead--split phone padding follows this file in the design's CSS and wins there; this file loads
   after the global stylesheet, so it is restated here */
@media (max-width: 767px) { .lv-arthead--split.sp-head { padding-bottom: 56px; } }

/* No doctor listed: the head's tool becomes the consultation path (the page's main action, so amber) */
.sp-head .none { margin: 8px 0 0; font-weight: 600; color: var(--c-head); }
.sp-head .tool .lv-actions { margin-top: var(--s3); }
.sp-head .tool .lv-more { margin-top: 8px; }
@media (max-width: 480px) { .sp-head .tool .lv-actions .lv-btn { width: 100%; } }

/* ---------- Doctor profile: the home doctor block (portrait left, never AI), one per doctor, on the cream band ---------- */
.lv-doctor--profile .grid { scroll-margin-top: 24px; }
.lv-doctor--profile .grid + .grid { margin-top: var(--s6); padding-top: var(--s6); border-top: 1px solid var(--c-edge); }
.lv-doctor--profile .grid.no-photo { grid-template-columns: minmax(0, 1fr); } /* fallback when the practice sends no photo */
.lv-doctor--profile .portrait .slot span { font-size: 18px; }
.lv-doctor--profile h2 { margin-bottom: var(--s3); }
/* Contact strip: each office's address with its map link, then the call; hairlines above and below */
.lv-doctor--profile .contact { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 48px;
  margin-bottom: var(--s4); padding: 20px 0; border-top: 1px solid var(--c-hairline); border-bottom: 1px solid var(--c-hairline); }
.lv-doctor--profile .offices { list-style: none; display: flex; flex-wrap: wrap; gap: 12px 48px; }
.lv-doctor--profile address { font-style: normal; color: var(--c-head); font-weight: 600; line-height: 1.45; }
.lv-doctor--profile .offices .lv-more { margin-top: 2px; }
.lv-doctor--profile .contact .lv-btn .num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.lv-doctor--profile .bio { max-width: none; } /* the theme caps .lv-doctor .bio at 34em; here the paragraphs keep that cap and a CV gets the full column */
.lv-doctor--profile .bio p, .lv-doctor--profile p.bio { max-width: var(--measure); overflow-wrap: anywhere; }
.lv-doctor--profile .lv-quote { margin: var(--s4) 0; }
/* A long CV in the bio field (rich text): headings and lists in two newspaper columns, years on their own line */
.lv-doctor--profile .cv { columns: 2; column-gap: 56px; margin-top: var(--s4); }
.lv-doctor--profile .cv section { break-inside: avoid; padding-top: 4px; margin-bottom: var(--s4); }
.lv-doctor--profile .cv h3 { font: 700 21px/1.3 var(--font-body); margin-bottom: 8px; padding-bottom: 8px; border-bottom: 2px solid var(--c-head); }
.lv-doctor--profile .cv ul { list-style: none; }
.lv-doctor--profile .cv li { padding: 10px 0; border-bottom: 1px solid var(--c-hairline); line-height: 1.5; }
.lv-doctor--profile .cv li:last-child { border-bottom: 0; }
.lv-doctor--profile .cv .yr { display: block; font-weight: 700; color: var(--c-head); font-variant-numeric: tabular-nums; }
@media (max-width: 1100px) { .lv-doctor--profile .cv { columns: 1; } }
@media (max-width: 767px) {
  .lv-doctor--profile .contact { display: block; }
  .lv-doctor--profile .offices { display: grid; gap: 16px; margin-bottom: 20px; }
  .lv-doctor--profile .contact .lv-btn { width: 100%; }
}

/* ---------- About Low Vision Specialist: the exam as the home's numbered steps, under the profiles on the same band ---------- */
.lv-statedocs + .lv-stateabout { padding-top: 0; }
.lv-statedocs + .lv-stateabout .wrap > .inner { border-top: 1px solid var(--c-edge); padding-top: var(--s6); }
.lv-stateabout .lv-head { margin-bottom: 0; }
.lv-stateabout .lv-head p + p { margin-top: var(--s2); font-size: var(--fs-body); line-height: var(--lh-body); }
.lv-stateabout .lv-steps { margin-top: var(--s5); }
.lv-stateabout .lv-steps ol { margin-top: 0; }
.lv-steps li a { display: inline-flex; align-items: center; min-height: 48px; margin-top: -10px; } /* as in the finder */

/* Slot labels (placeholders until the photos land) wrap over two lines: body line height, as in the finder */
.lv-media .slot span { line-height: 1.5; }

/* ---------- Other states: the finder's state list, A to Z down three columns; this page marked ---------- */
.lv-statelinks .lv-topics { margin-top: 0; }
.lv-statelinks .lv-topics ul { display: block; columns: 3; column-gap: 48px; }
.lv-statelinks .lv-topics li { break-inside: avoid; }
.lv-statelinks .lv-topics a[aria-current] { font-weight: 700; color: var(--c-head); }
.lv-statelinks .lv-topics a[aria-current] span:first-child { text-decoration: none; }
@media (max-width: 1100px) { .lv-statelinks .lv-topics ul { columns: 2; } }
@media (max-width: 767px) { .lv-statelinks .lv-topics ul { columns: 1; } }

/* ---------- Beside the right column (rail module, lowvision_rail_bands): the steps two by two, a CV in one column ---------- */
.lv-aid-bands .lv-steps ol { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lv-aid-bands .lv-doctor--profile .cv { columns: 1; }
/* A doctor's band after another's reads as the one band with the rule between them */
.lv-statedocs:has(+ .lv-statedocs) { padding-bottom: var(--s6); }
.lv-statedocs + .lv-statedocs { padding-top: 0; }
.lv-statedocs + .lv-statedocs .grid { padding-top: var(--s6); border-top: 1px solid var(--c-edge); }

/* ---------- Variants sheet only (copied from the aid-device sheet) ---------- */
.lv-sheet-head { background: var(--c-off); border-bottom: 1px solid var(--c-hairline); padding: 48px 0; }
.lv-sheet-head h1 { font-size: var(--fs-h2); }
.lv-sheet-head p { margin-top: var(--s2); max-width: var(--measure); }
.lv-sheet-head p a { display: inline-block; padding: 12px 0; margin: -12px 0; }
.lv-sheet-label { background: var(--c-head); color: #FFFFFF; padding: 20px 0; }
.lv-sheet-label p { margin: 0; font: 700 21px/1.5 var(--font-body); max-width: 36em; }
.lv-sheet-label a { color: #FFFFFF; display: inline-block; padding: 12px 0; margin: -12px 0; }
.lv-sheet-label :focus-visible { outline-color: #FFFFFF; }
.sp-head .lv-h1 { margin-top: 20px; font-size: var(--fs-h1); line-height: var(--lh-h1); }