/* ==========================================================================
   Sol: block markup bridge for inner pages (loaded after sol-inner.css).
   The inner pages are saved as core blocks carrying the classes of the approved
   HTML builds. This file evens out the few places where block markup differs.
   ========================================================================== */

/* Groups replace divs one for one and add no layout of their own */
:where(.sol-inner) .sol-container { margin-inline: auto; }
:where(.sol-inner .sol-span) { margin: 0; }
:where(.sol-inner .sol-ul, .sol-inner .sol-ol) { list-style: none; margin: 0; padding: 0; }
:where(.sol-inner .sol-dl, .sol-inner .sol-dd) { margin: 0; }
:where(.sol-inner p.sol-dt, .sol-inner p.sol-dd) { margin: 0; }

/* Paragraph spacing inside prose follows the build */
:where(.sol-inner .wp-block-list) { margin: 0; }

/* Images: block images wrap the <img> in a figure */
:where(.sol-inner .wp-block-image) { margin: 0; }
:where(.sol-inner .wp-block-image) img { display: block; width: 100%; }
.sol-inner .wp-block-image.sol-cta-band__bg { position: absolute; inset: 0; z-index: 0; }
.sol-inner .wp-block-image.sol-cta-band__bg img { width: 100%; height: 100%; object-fit: cover; }

/* A card that was one big link: the heading link stretches over the card */
.sol-cardlink { position: relative; }
.sol-cardlink .sol-stretch { color: inherit; text-decoration: none; }
.sol-cardlink .sol-stretch::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.sol-cardlink .sol-stretch:focus-visible { outline: none; }
.sol-cardlink:has(.sol-stretch:focus-visible) { outline: 3px solid var(--sol-brand-teal); outline-offset: 3px; }
.sol-cardlink a:not(.sol-stretch) { position: relative; z-index: 2; }

/* Buttons saved as core buttons look like the build's .sol-btn */
:where(.sol-inner .wp-block-buttons) { display: flex; flex-wrap: wrap; gap: var(--sol-space-12); align-items: center; }
.sol-inner .wp-block-button.is-lg .wp-block-button__link { min-height: 58px; padding-inline: var(--sol-space-32); font-size: var(--sol-fs-body-lg); }
.sol-inner .wp-block-button.is-block, .sol-inner .wp-block-button.is-block .wp-block-button__link { width: 100%; }

/* Saved "show all" labels only show as buttons once the script runs */
.sol-js-btn { display: none; }

/* FAQ before the script turns each one into a disclosure: question and answer show plainly */
.sol-faq__item:not(details) { padding-block: var(--sol-space-16); border-bottom: 1px solid var(--sol-hairline); }
.sol-faq__item:not(details) .sol-faq__q { margin: 0 0 var(--sol-space-8); font-size: var(--sol-fs-h4, 1.25rem); }

/* Hero buttons and icons rendered by PHP */
.sol-btn .sol-i { width: 18px; height: 18px; }
.sol-ihero__cred .sol-i { width: 20px; height: 20px; }
.sol-carousel__btn .sol-i { width: 20px; height: 20px; }
.sol-post__go .sol-i, .sol-carrier-btn__go::after { width: 18px; height: 18px; }
.sol-carrier-btn__go::after { content: ""; display: inline-block; vertical-align: -3px; margin-left: 6px; background: currentColor; -webkit-mask: url("../icons/inner/arrow.svg") center/contain no-repeat; mask: url("../icons/inner/arrow.svg") center/contain no-repeat; }

/* Reviewer name links to the bio without looking like a button */
.sol-ihero__shelf strong a, .sol-reviewer strong a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }

/* Sitemap page */
.sol-sitemap { display: grid; gap: var(--sol-space-32); grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.sol-sitemap h2 { font-size: var(--sol-fs-h3); margin-bottom: var(--sol-space-12); }
.sol-sitemap ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.sol-sitemap a { color: var(--sol-deep-teal); font-weight: 700; text-underline-offset: 3px; }
.sol-sitemap__d2 { padding-left: 14px; } .sol-sitemap__d3 { padding-left: 28px; }

/* Medical callout block keeps the build's section spacing */
.wp-block-sol-medical-callout { margin: 0; }

/* An icon that sat on its own (card corner icons) is saved as a paragraph holding the icon */
.sol-iconp { line-height: 0; margin: 0; }
.sol-iconp .sol-i { width: 100%; height: 100%; vertical-align: top; }

/* A safety box marked "top" (sol-sos--top) reads before the hero, as in the build */
.sol-inner .sol-main { display: flex; flex-direction: column; }
.sol-inner .sol-main > .sol-content--inner { display: contents; }
.sol-inner .sol-main .sol-sos--top { order: -1; }

/* The on-teal style carries the phone icon only on phone links */
.is-style-sol-on-teal .wp-block-button__link:not([href^="tel:"])::before { content: none; }
.is-style-sol-on-teal .wp-block-button__link:not([href^="tel:"])::after { content: "→"; font-weight: 800; }

/* Figma image slots: a photo under a section heading (desktop) */
.sol-media--slot { margin-top: var(--sol-space-32) !important; overflow: hidden; border-radius: var(--sol-radius-media); box-shadow: var(--sol-shadow-media); aspect-ratio: 3 / 2; }
.sol-media--slot img { width: 100%; height: 100%; object-fit: cover; }
.sol-sticky-head .sol-media--slot { max-width: 520px; }
/* Video card: when its play button links to a video file, sol-inner.js plays a muted preview of the film
   behind the title, under a teal wash so the title stays readable, and the play button opens the full video
   with sound in a lightbox. Without JS the card keeps its teal gradient and the link opens the video file. */
.sol-video { overflow: hidden; isolation: isolate; }
.sol-video__bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 700ms var(--sol-ease); }
.sol-video.is-live .sol-video__bg { opacity: 1; }
.sol-video.has-video::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(135deg, rgb(15 58 64 / 0.86) 0%, rgb(15 58 64 / 0.7) 50%, rgb(28 110 126 / 0.62) 100%); }
.sol-video.has-video .sol-video__title { text-shadow: 0 1px 12px rgb(15 58 64 / 0.45); }
.sol-video__play { transition: transform 200ms var(--sol-ease), box-shadow 200ms var(--sol-ease); box-shadow: 0 10px 28px -10px rgb(15 58 64 / 0.6); }
.sol-video__play a { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%; color: inherit; text-decoration: none; }
.sol-video__play a:focus-visible { outline: 3px solid var(--sol-paper); outline-offset: 4px; }
.sol-video__play .sol-i { width: 30px; height: 30px; margin-left: 4px; }
.sol-video.has-video { cursor: pointer; }
.sol-video.has-video:hover .sol-video__play { transform: scale(1.06); box-shadow: 0 14px 34px -10px rgb(15 58 64 / 0.7); }
.sol-vmodal { width: min(1120px, calc(100vw - 32px)); max-width: none; max-height: none; margin: auto; padding: 56px 0 0; border: 0; background: transparent; overflow: visible; color: var(--sol-paper); }
.sol-vmodal::backdrop { background: rgb(15 58 64 / 0.92); }
.sol-vmodal__close {
  position: absolute; top: 0; right: 0; display: grid; place-items: center; width: 44px; height: 44px; padding: 0;
  border: 0; border-radius: 50%; background: var(--sol-paper); color: var(--sol-deep-teal); cursor: pointer;
}
.sol-vmodal__close::before, .sol-vmodal__close::after { content: ""; position: absolute; width: 18px; height: 2px; border-radius: 2px; background: currentColor; transform: rotate(45deg); }
.sol-vmodal__close::after { transform: rotate(-45deg); }
.sol-vmodal__close:hover { background: var(--sol-white); }
.sol-vmodal__close:focus-visible { outline: 3px solid var(--sol-paper); outline-offset: 3px; }
.sol-vmodal__video { display: block; width: 100%; max-height: calc(100vh - 96px); max-height: calc(100dvh - 96px); border-radius: var(--sol-radius-card); background: #000; box-shadow: 0 30px 80px -20px rgb(0 0 0 / 0.55); }
html.sol-vmodal-open { overflow: hidden; }
@media (max-width: 760px) {
  .sol-video { aspect-ratio: auto; min-height: 280px; padding: var(--sol-space-32) var(--sol-space-24); }
  .sol-video__play { width: 64px; height: 64px; }
  .sol-video__play .sol-i { width: 26px; height: 26px; }
  .sol-vmodal { width: calc(100vw - 24px); padding-top: 52px; }
  .sol-vmodal__video { border-radius: var(--sol-radius-field); }
}
@media (prefers-reduced-motion: reduce) {
  .sol-video__bg, .sol-video__play { transition: none; }
  .sol-video.has-video:hover .sol-video__play { transform: none; }
}

/* Table blocks: WordPress puts the block's class on the <figure> around the <table>, while the design styles the
   table itself. Give the table the full width and joined cell borders the design expects (no gaps between cells). */
.sol-dtable-wrap > .wp-block-table.sol-dtable { margin: 0; }
.wp-block-table:is(.sol-dtable, .sol-ways, .sol-day, .sol-week-table) > table { width: 100%; border-collapse: collapse; border-spacing: 0; }
@media (max-width: 760px) {
  /* phones stack the rows as cards, so the table element stacks too */
  .wp-block-table:is(.sol-dtable, .sol-ways) > table { display: block; }
}
/* Key takeaways summary (the gold-lined box beside "Key Takeaways"): when an image sits under the summary, the gold
   line runs beside the text only, not down past the image. Same text position as before. */
.sol-tldr:has(> .wp-block-image) { border-left-color: transparent; }
.sol-tldr:has(> .wp-block-image) > :not(.wp-block-image) {
  margin-left: calc((var(--sol-space-32) + 4px) * -1); padding-left: var(--sol-space-32); border-left: 4px solid var(--sol-gold);
}
.sol-tldr:has(> .wp-block-image) > :not(.wp-block-image) + :not(.wp-block-image) { margin-top: 0; padding-top: var(--sol-space-16); }
.sol-tldr > .wp-block-image { margin-top: var(--sol-space-24); }
@media (max-width: 760px) {
  .sol-tldr:has(> .wp-block-image) > :not(.wp-block-image) { margin-left: calc((var(--sol-space-24) + 4px) * -1); padding-left: var(--sol-space-24); }
  .sol-tldr > .wp-block-image { margin-top: var(--sol-space-20, 20px); }
}

/* Section photos (an image under a section heading, beside the FAQs, in a side panel) show on every screen size.
   The original builds left them out below 1000px or 760px to keep phone pages short; they now stay, as a wide crop
   above the text on tablets and phones. */
@media (max-width: 1000px) {
  .sol-faqs__head .sol-media,
  .sol-head-media,
  .sol-sticky-head .sol-head-media { display: block; margin-top: var(--sol-space-24); aspect-ratio: 16 / 10; }
}
@media (max-width: 760px) {
  .sol-convert__aside .sol-media { display: block; aspect-ratio: 16 / 10; }
  .sol-sticky-head > .sol-media,
  .sol-faqs__head .sol-media,
  .sol-sticky-head .sol-head-media { margin-top: var(--sol-space-20, 20px); }
}

/* Team photos (inc/team-photos.php): the photograph from a team profile fills the circle that otherwise shows
   initials. object-fit: cover keeps its proportions (never stretched) and the focus sits near the top of the frame
   so heads and faces stay in the circle when a portrait photo is trimmed to a square. */
.sol-team-photo { display: block; max-width: none; border-radius: 50%; object-fit: cover; object-position: 50% 22%; }
.sol-person__mono.has-photo,
.sol-voice__who.has-photo,
.sol-reviewer__photo.has-photo { position: relative; overflow: hidden; padding: 0; background: var(--sol-sand); }
.sol-person__mono.has-photo .sol-team-photo,
.sol-voice__who.has-photo .sol-team-photo,
.sol-reviewer__photo.has-photo .sol-team-photo { position: absolute; inset: 0; width: 100%; height: 100%; }
.sol-person__mono.has-photo,
.sol-voice__who.has-photo { box-shadow: 0 0 0 3px var(--sol-paper), 0 0 0 4px var(--sol-hairline-strong); }
/* no photo yet: no circle and no initials; the name and text take the full width */
.sol-person__mono.no-photo, .sol-voice__who.no-photo, .sol-reviewer__photo.no-photo { display: none; }
.sol-person__head:has(> .no-photo) { grid-template-columns: minmax(0, 1fr); }
.sol-voice:has(> .sol-voice__who.no-photo) { grid-template-columns: minmax(0, 1fr); }
/* bio hero: the photo sits inside the same ring as the initials */
.sol-bio-photo { padding: 0; overflow: hidden; background: rgb(244 237 223 / 0.08); }
.sol-ihero__panel .sol-bio-photo .sol-team-photo {
  position: absolute; inset: auto; top: 10px; left: 10px; width: calc(100% - 20px); height: calc(100% - 20px);
  box-shadow: 0 18px 40px -18px rgb(0 0 0 / 0.45);
}
@media (max-width: 1000px) {
  /* the initials leave the hero below 1000px; the photo moves above the name instead */
  .sol-ihero--photo .sol-bio-photo { display: block; position: absolute; top: var(--sol-space-40); left: var(--sol-space-40); width: 112px; }
  .sol-ihero--photo .sol-ihero__panel .sol-bio-photo .sol-team-photo { top: 5px; left: 5px; width: calc(100% - 10px); height: calc(100% - 10px); }
  .sol-ihero--photo .sol-ihero__content { padding-top: calc(var(--sol-space-40) + 112px + var(--sol-space-24)); }
}
@media (max-width: 760px) {
  .sol-ihero--photo .sol-bio-photo { top: var(--sol-space-32); left: var(--sol-space-24); width: 96px; }
  .sol-ihero--photo .sol-ihero__content { padding-top: calc(var(--sol-space-32) + 96px + var(--sol-space-20, 20px)); }
}

/* Image dimensions (0.2.11): images now carry width/height for CLS. Keep the aspect ratio unless a
   class rule sizes the image; :where() has zero specificity, so every existing rule still wins. */
:where(img[width][height]) { height: auto; }

/* Data tables: a row whose cells all say the same thing can carry one phone label in the first cell
   (<span class="sol-dtable__mlabel">). Desktop keeps the columns; on phones that row shows the label
   once with one answer, instead of repeating it under every column name. */
.sol-dtable__mlabel { display: none; }
@media (max-width: 760px) {
  .sol-dtable .sol-dtable__mlabel { display: block !important; margin-bottom: 2px; font-size: var(--sol-fs-caption); font-weight: 800; color: var(--sol-brand-teal); }
  .sol-dtable td:has(> .sol-dtable__mlabel)::before { content: none; }
  .sol-dtable tr:has(.sol-dtable__mlabel) td:not(:has(.sol-dtable__mlabel)) { display: none; }
}

/* Door cards in pairs (How We Treat page: Therapies, Programs) */
@media (min-width: 1001px) {
  .sol-doors.sol-doors--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Room photo sliders (Our Treatment Center, "What Is in the Building"). The photos sit in a
   .sol-slides group: a swipeable scroll-snap strip that works without JavaScript; sol-inner.js adds
   arrows and dots. Every slide uses the same 16:10 frame, so all four cards line up at one height. */
.sol-room__slides { position: relative; }
.sol-slides {
  display: flex; margin: 0; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory;
  scroll-behavior: smooth; scrollbar-width: none; overscroll-behavior-x: contain;
}
.sol-slides::-webkit-scrollbar { display: none; }
.sol-slides > .wp-block-image { flex: 0 0 100%; margin: 0 !important; aspect-ratio: 16 / 10; scroll-snap-align: start; }
.sol-slides > .wp-block-image img { display: block; width: 100%; height: 100%; object-fit: cover; aspect-ratio: auto !important; }
.sol-slides__btn {
  position: absolute; top: 50%; z-index: 2; display: grid; place-items: center; width: 40px; height: 40px;
  margin-top: -20px; padding: 0; border: 0; border-radius: 50%; background: rgb(251 247 238 / 0.92);
  color: var(--sol-deep-teal); box-shadow: 0 4px 14px rgb(15 58 64 / 0.18); cursor: pointer;
  transition: opacity var(--sol-dur-hover) var(--sol-ease), background-color var(--sol-dur-hover) var(--sol-ease);
}
.sol-slides__btn::before { content: ""; width: 18px; height: 18px; background: currentColor; -webkit-mask: var(--sol-i-arrow) center / contain no-repeat; mask: var(--sol-i-arrow) center / contain no-repeat; }
.sol-slides__btn--prev { left: 12px; }
.sol-slides__btn--prev::before { transform: scaleX(-1); }
.sol-slides__btn--next { right: 12px; }
.sol-slides__btn:hover { background: var(--sol-white); }
.sol-slides__btn:disabled { opacity: 0; pointer-events: none; }
.sol-slides__btn:focus-visible, .sol-slides__dot:focus-visible { outline: 3px solid var(--sol-white); outline-offset: 2px; }
.sol-slides__dots { position: absolute; left: 0; right: 0; bottom: 12px; z-index: 2; display: flex; justify-content: center; gap: 6px; }
.sol-slides__dot { width: 24px; height: 24px; padding: 0; border: 0; background: none; cursor: pointer; display: grid; place-items: center; }
.sol-slides__dot::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: rgb(251 247 238 / 0.6); box-shadow: 0 1px 3px rgb(15 58 64 / 0.35); transition: background-color var(--sol-dur-hover) var(--sol-ease), transform var(--sol-dur-hover) var(--sol-ease); }
.sol-slides__dot[aria-current="true"]::before { background: var(--sol-white); transform: scale(1.25); }
@media (max-width: 760px) {
  .sol-slides__btn { width: 36px; height: 36px; margin-top: -18px; }
  .sol-slides__btn--prev { left: 8px; }
  .sol-slides__btn--next { right: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .sol-slides { scroll-behavior: auto; }
}

/* A map in a page section's heading column (Our Treatment Center, "Getting Here and Getting In") */
.sol-head-map { margin-top: var(--sol-space-32); }
.sol-head-map .sol-map__frame { min-height: 300px; aspect-ratio: 4 / 3; }
@media (max-width: 760px) {
  .sol-head-map { margin-top: var(--sol-space-20, 20px); }
  .sol-head-map .sol-map__frame { aspect-ratio: auto; min-height: 320px; }
}

/* Phones: an accordion's photo (Resources page: it sits beside the title, outside the folding panel)
   only shows while that accordion is open, like the rest of its content. Desktop keeps them open. */
@media (max-width: 760px) {
  .js .sol-acc:not(.is-open) .wp-block-image { display: none; }
  .js .sol-resgroup.is-open > :first-child .wp-block-image { margin-bottom: var(--sol-space-20, 20px); }
}