/**
 * Clinic profile booking-module test — Variant B styles.
 *
 * Owner: includes/clinic/booking-module.php (read its header first). Loaded
 * only on active test profiles; every rule is scoped under
 * html.eh-pbm-b .eh-pbm-page, so the control arm renders the live page
 * untouched. The critical show/hide rules (.eh-pbm-only / .eh-pbm-a-only)
 * are inlined in <head> by eh_pbm_render_head() so they apply before this
 * file arrives.
 *
 * LAYOUT. Variant B reorders sections the live page renders in a different
 * order. The server HTML is shared with the control arm and never
 * reordered; this file draws the new order:
 *   - ≤1024px: .place-about goes display:contents so its children join
 *     .place-main-content's existing flex column, and `order` resequences.
 *   - ≥1025px: the page container becomes a 2-column grid and the wrappers
 *     between it and the sections (.place-content-wrapper,
 *     .place-main-content, .place-about) go display:contents. Every section
 *     lands in column 1 in `order`; the Get Started rail spans every row
 *     of column 2 and stays sticky the whole way down. row-gap must stay 0:
 *     the rail's 60-row span creates empty implicit rows, and each would
 *     add a gap. Sections space themselves with margins instead.
 *
 * Section order (desktop): booking tiles 2 · About heading/contact/
 * description 4–6 · map 7 · insurance 8 · hours 9 · X-ray walk-in 10 ·
 * Self-Pay Prices 11 · procedures 12 · anything unlisted 19 (default) ·
 * accreditations 20 · Patient-Reported Experience 21 · FAQ 22 · reviews 23 ·
 * nearby 24 · organization locations 25 · 3-step card 26 (rendered at the
 * bottom of the page). Phones/tablets: the same main-column order.
 *
 * In the test arm the end-of-body script (eh_pbm_render_footer) then moves
 * the DOM to match the drawn order, for keyboard and screen-reader order:
 * the map section from .place-main-content into .place-about after the
 * description, the Patient-Reported Experience section from .place-about
 * to just before the FAQ, and the About children into drawn order. So in
 * the B arm after that script, `.place-main-content > .map-section` no
 * longer matches; select the map as `.eh-pbm-page .map-section`.
 *
 * Tokens: eh-brand-tokens.css (--eh-*). "How booking works" reuses the
 * live .ehbs-* card from style.css and only overrides its layout.
 */

/* =========================================================================
   Booking tiles
   ========================================================================= */

html.eh-pbm-b .eh-pbm-page .eh-pbm-module {
    margin: 28px 0 0;
}

html.eh-pbm-b .eh-pbm-page .eh-pbm-h2 {
    margin: 0 0 4px;
    font-family: var(--eh-font-heading, 'Poppins', sans-serif);
    font-size: var(--eh-fs-24, 24px);
    font-weight: var(--eh-fw-bold, 700);
    line-height: 1.25;
    color: var(--eh-ink, #0f172a);
}

html.eh-pbm-b .eh-pbm-page .eh-pbm-sub {
    margin: 0 0 16px;
    font-size: var(--eh-fs-15, 15px);
    color: var(--eh-muted, #5b6674);
}

html.eh-pbm-b .eh-pbm-page .eh-pbm-tiles {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

/* Tiles are booking CTAs (.eh-cta-book-btn); reset any button styling. */
html.eh-pbm-b .eh-pbm-page a.eh-pbm-tile {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    padding: 14px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: var(--eh-radius, 16px);
    box-shadow: var(--eh-shadow, 0 1px 2px rgba(15, 23, 42, 0.05));
    color: var(--eh-ink, #0f172a);
    text-align: left;
    text-decoration: none;
    transition: border-color 0.15s, box-shadow 0.15s;
}

html.eh-pbm-b .eh-pbm-page a.eh-pbm-tile:hover {
    border-color: var(--eh-green, #047727);
    box-shadow: var(--eh-shadow-lift, 0 10px 30px rgba(15, 23, 42, 0.1));
}

html.eh-pbm-b .eh-pbm-page a.eh-pbm-tile:focus-visible {
    outline: 3px solid rgba(4, 119, 39, 0.35);
    outline-offset: 2px;
}

html.eh-pbm-b .eh-pbm-page .eh-pbm-tile-icon {
    flex: 0 0 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: var(--eh-green-tint, #e8f8ed);
    color: var(--eh-green-dark, #035c1e);
}

html.eh-pbm-b .eh-pbm-page .eh-pbm-tile-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

html.eh-pbm-b .eh-pbm-page .eh-pbm-tile-name {
    font-size: var(--eh-fs-15, 15px);
    font-weight: var(--eh-fw-semibold, 600);
    color: var(--eh-ink, #0f172a);
}

html.eh-pbm-b .eh-pbm-page .eh-pbm-tile-desc {
    margin-top: 1px;
    font-size: var(--eh-fs-12, 12px);
    color: var(--eh-muted, #5b6674);
}

html.eh-pbm-b .eh-pbm-page .eh-pbm-tile-chev {
    display: flex;
    color: #94a3b8;
}

/* "More imaging options": full width, dashed, indigo + icon — reads as
   "open the full menu", not as another scan. */
html.eh-pbm-b .eh-pbm-page a.eh-pbm-tile--more {
    grid-column: 1 / -1;
    border-style: dashed;
}

html.eh-pbm-b .eh-pbm-page a.eh-pbm-tile--more .eh-pbm-tile-icon {
    background: #eef2ff;
    color: #4338ca;
}

html.eh-pbm-b .eh-pbm-page a.eh-pbm-tile--more:hover {
    border-color: #4338ca;
}

/* Provider/attorney link: up to 1024px, where the Get Started card (and its
   provider tab) is hidden or stacked below the main content. */
html.eh-pbm-b .eh-pbm-page .eh-pbm-provider-link {
    display: none;
    margin: 14px 2px 0;
    font-size: var(--eh-fs-13, 13px);
    color: var(--eh-muted, #5b6674);
}

html.eh-pbm-b .eh-pbm-page .eh-pbm-link-btn {
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    color: inherit;
    text-decoration: underline;
    cursor: pointer;
}

/* =========================================================================
   "How booking works" — live .ehbs-card, numbers above the text so the
   title and copy get the full column width.
   ========================================================================= */

html.eh-pbm-b .eh-pbm-page .eh-pbm-steps {
    max-width: none;
    margin: 48px 0 0;
}

html.eh-pbm-b .eh-pbm-page .eh-pbm-steps-grid {
    grid-template-columns: repeat(3, 1fr);
}

html.eh-pbm-b .eh-pbm-page .eh-pbm-steps .ehbs-step {
    flex-direction: column;
    gap: 8px;
}

html.eh-pbm-b .eh-pbm-page .eh-pbm-steps .ehbs-num {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
}

/* =========================================================================
   Map: "Get directions" pill (the address itself stays in the header).
   Top-left: Google's logo (bottom-left) and attribution (bottom-right) on
   the static map must stay visible (Maps Platform terms). Hidden once the
   interactive map loads: single-place.js sets the static wrapper to
   display:none, and that map carries its own Google controls.
   ========================================================================= */

html.eh-pbm-b .eh-pbm-page .eh-pbm-directions {
    position: absolute;
    left: 12px;
    top: 12px;
    z-index: 2;
    padding: 6px 14px;
    background: #fff;
    border-radius: 999px;
    box-shadow: var(--eh-shadow-lift, 0 10px 30px rgba(15, 23, 42, 0.1));
    font-size: var(--eh-fs-13, 13px);
    font-weight: var(--eh-fw-semibold, 600);
    color: var(--eh-green, #047727);
    text-decoration: none;
}

html.eh-pbm-b .eh-pbm-page #static-map[style*="none"] ~ .eh-pbm-directions {
    display: none;
}

/* The map is drawn under the About description, so it spaces itself from
   the text above. */
html.eh-pbm-b .eh-pbm-page .map-section {
    margin-top: 24px;
}

/* =========================================================================
   Patient-Reported Experience: own section above the FAQ. Heading
   outside, content in a white card. The renderer (owner-locked bytes,
   visit-survey-display.php) emits the h3 INSIDE the section and nothing
   here may change its markup, so the card is assembled from the content
   blocks themselves: each gets the white background and side borders, the
   first one after the h3 the top edge, the last one (always the evidence
   footer) the bottom edge. It holds however the heading wraps.
   ========================================================================= */

html.eh-pbm-b .eh-pbm-page .eh-patient-experience-section {
    margin: 32px 0 0;
    padding: 0;
    border-top: 0;
}

html.eh-pbm-b .eh-pbm-page .eh-patient-experience-section > h3 {
    margin: 0 0 14px;
    font-family: var(--eh-font-heading, 'Poppins', sans-serif);
    font-size: 22px;
    line-height: 1.3;
    color: var(--eh-ink, #0f172a);
}

html.eh-pbm-b .eh-pbm-page .eh-patient-experience-section > :not(h3) {
    margin: 0;
    padding: 10px 20px 0;
    background-color: #fff;
    border-left: 1px solid #e2e8f0;
    border-right: 1px solid #e2e8f0;
}

html.eh-pbm-b .eh-pbm-page .eh-patient-experience-section > h3 + * {
    padding-top: 18px;
    border-top: 1px solid #e2e8f0;
    border-radius: var(--eh-radius, 16px) var(--eh-radius, 16px) 0 0;
}

html.eh-pbm-b .eh-pbm-page .eh-patient-experience-section > :last-child {
    padding-bottom: 18px;
    border-bottom: 1px solid #e2e8f0;
    border-radius: 0 0 var(--eh-radius, 16px) var(--eh-radius, 16px);
}

html.eh-pbm-b .eh-pbm-page .eh-patient-experience-section > h3 + :last-child {
    border-radius: var(--eh-radius, 16px);
}

html.eh-pbm-b .eh-pbm-page .eh-pre-strip {
    padding-bottom: 14px;
}

html.eh-pbm-b .eh-pbm-page .eh-pre-stat-value {
    font-size: var(--eh-fs-20, 20px);
    font-weight: var(--eh-fw-bold, 700);
    color: var(--eh-ink, #0f172a);
}

html.eh-pbm-b .eh-pbm-page .eh-pre-scheduling {
    font-size: var(--eh-fs-14, 14px);
    line-height: 1.55;
}

/* A hairline only when the stat strip sits above the sentence, inset to
   the content width (a border would run under the side padding). */
html.eh-pbm-b .eh-pbm-page .eh-pre-strip + .eh-pre-scheduling {
    padding-top: 13px;
    background-image: linear-gradient(#e2e8f0, #e2e8f0);
    background-position: 20px 0;
    background-size: calc(100% - 40px) 1px;
    background-repeat: no-repeat;
}

html.eh-pbm-b .eh-pbm-page .eh-pre-footer {
    font-size: var(--eh-fs-12, 12px);
}

/* =========================================================================
   Get Started card bullets
   ========================================================================= */

html.eh-pbm-b .eh-pbm-page .eh-pbm-card-bullets {
    margin: 16px 0 0;
    padding: 14px 0 0;
    list-style: none;
    border-top: 1px solid #e2e8f0;
}

html.eh-pbm-b .eh-pbm-page .eh-pbm-card-bullets li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0;
    padding: 6px 0;
    font-size: var(--eh-fs-14, 14px);
    line-height: 1.45;
    color: var(--eh-text, #334155);
}

html.eh-pbm-b .eh-pbm-page .eh-pbm-card-bullets svg {
    flex: 0 0 17px;
    margin-top: 2px;
    color: var(--eh-green-dark, #035c1e);
}

html.eh-pbm-b .eh-pbm-page .eh-pbm-card-bullets strong {
    font-weight: var(--eh-fw-semibold, 600);
    color: var(--eh-ink, #0f172a);
}

/* =========================================================================
   Self-Pay Prices sub-line
   ========================================================================= */

html.eh-pbm-b .eh-pbm-page .eh-pbm-prices-sub {
    margin: 4px 0 16px;
    font-size: var(--eh-fs-15, 15px);
    color: var(--eh-muted, #5b6674);
}

/* =========================================================================
   Mobile sticky bar: "Insurance or self-pay" beside the CTA
   ========================================================================= */

html.eh-pbm-b .eh-pbm-page .eh-pbm-sticky-note {
    flex: 0 1 auto;
    font-size: var(--eh-fs-13, 13px);
    font-weight: var(--eh-fw-semibold, 600);
    color: var(--eh-ink, #0f172a);
    white-space: nowrap;
}

/* =========================================================================
   Section order — phones and tablets (the live page already stacks
   .place-main-content as a flex column at this width)
   ========================================================================= */

@media (max-width: 1024px) {
    html.eh-pbm-b .eh-pbm-page .place-about {
        display: contents;
    }

    /* Default slot for anything without an explicit order below: after the
       procedures list, never above the tiles. Explicit rules follow and win
       on source order (equal specificity). */
    html.eh-pbm-b .eh-pbm-page .place-main-content > *,
    html.eh-pbm-b .eh-pbm-page .place-about > * {
        order: 19;
    }

    html.eh-pbm-b .eh-pbm-page .eh-pbm-module { order: 2; }
    html.eh-pbm-b .eh-pbm-page .place-about > h3 { order: 4; }
    html.eh-pbm-b .eh-pbm-page .place-about > .contact-info { order: 5; }
    html.eh-pbm-b .eh-pbm-page .place-about > .place-description { order: 6; }
    html.eh-pbm-b .eh-pbm-page .map-section { order: 7; }
    html.eh-pbm-b .eh-pbm-page .place-insurance { order: 8; }
    html.eh-pbm-b .eh-pbm-page .hours-section { order: 9; }
    html.eh-pbm-b .eh-pbm-page .xray-hours-section { order: 10; }
    html.eh-pbm-b .eh-pbm-page #services-pricing { order: 11; }
    html.eh-pbm-b .eh-pbm-page .clinic-procedures-section { order: 12; }
    /* Without JS it stays in the main column, after procedures; the
       end-of-body script moves it to just above the FAQ. */
    html.eh-pbm-b .eh-pbm-page .eh-patient-experience-section { order: 13; }

    html.eh-pbm-b .eh-pbm-page .place-about > h3 {
        margin-top: 32px;
    }
}

@media (max-width: 768px) {
    html.eh-pbm-b .eh-pbm-page .eh-pbm-tiles,
    html.eh-pbm-b .eh-pbm-page .eh-pbm-steps-grid {
        grid-template-columns: 1fr;
    }
}

/* Same breakpoint as the mobile sticky bar, whose provider icon Variant B
   hides: at 769-1024px the Get Started card (and its provider tab) stacks
   below all the main content, so the link must cover tablets too. */
@media (max-width: 1024px) {
    html.eh-pbm-b .eh-pbm-page .eh-pbm-provider-link {
        display: block;
    }
}

/* =========================================================================
   Section order + full-page sticky rail — desktop
   ========================================================================= */

@media (min-width: 1025px) {
    html.eh-pbm-b .eh-pbm-page {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(300px, 360px);
        column-gap: 2rem;
        row-gap: 0;
        align-items: start;
    }

    html.eh-pbm-b .eh-pbm-page .place-content-wrapper,
    html.eh-pbm-b .eh-pbm-page .place-main-content,
    html.eh-pbm-b .eh-pbm-page .place-about {
        display: contents;
    }

    /* order 19 is the default slot for any column-1 item without an
       explicit order below (after the procedures list, before the lower
       sections), so a new section can never land above the tiles. */
    html.eh-pbm-b .eh-pbm-page > *,
    html.eh-pbm-b .eh-pbm-page .place-content-wrapper > *,
    html.eh-pbm-b .eh-pbm-page .place-main-content > *,
    html.eh-pbm-b .eh-pbm-page .place-about > * {
        grid-column: 1;
        min-width: 0;
        order: 19;
    }

    html.eh-pbm-b .eh-pbm-page > .place-topbar {
        grid-column: 1 / -1;
        grid-row: 1;
    }

    html.eh-pbm-b .eh-pbm-page > .place-header {
        grid-column: 1 / -1;
        grid-row: 2;
    }

    html.eh-pbm-b .eh-pbm-page .place-content-wrapper > .place-sidebar {
        grid-column: 2;
        grid-row: 3 / span 60;
        align-self: start;
        position: sticky;
        top: 2rem;
        width: auto;
        min-width: 0;
        max-width: none;
    }

    html.eh-pbm-b .eh-pbm-page .eh-pbm-module { order: 2; }
    html.eh-pbm-b .eh-pbm-page .place-about > h3 { order: 4; margin-top: 32px; }
    html.eh-pbm-b .eh-pbm-page .place-about > .contact-info { order: 5; }
    html.eh-pbm-b .eh-pbm-page .place-about > .place-description { order: 6; }
    html.eh-pbm-b .eh-pbm-page .map-section { order: 7; }
    html.eh-pbm-b .eh-pbm-page .place-insurance { order: 8; }
    html.eh-pbm-b .eh-pbm-page .hours-section { order: 9; }
    html.eh-pbm-b .eh-pbm-page .xray-hours-section { order: 10; }
    html.eh-pbm-b .eh-pbm-page #services-pricing { order: 11; }
    html.eh-pbm-b .eh-pbm-page .clinic-procedures-section { order: 12; }
    html.eh-pbm-b .eh-pbm-page > .clinic-accreditations { order: 20; }
    html.eh-pbm-b .eh-pbm-page .eh-patient-experience-section { order: 21; }
    html.eh-pbm-b .eh-pbm-page > .clinic-faq-section { order: 22; }
    html.eh-pbm-b .eh-pbm-page > .clinic-reviews-section { order: 23; }
    html.eh-pbm-b .eh-pbm-page > .related-clinics-section[data-section-type="nearby"] { order: 24; }
    html.eh-pbm-b .eh-pbm-page > .related-clinics-section[data-section-type="related"] { order: 25; }
    html.eh-pbm-b .eh-pbm-page > .eh-pbm-steps { order: 26; }

    /* The lower sections were page-wide blocks centered with margin:auto
       and their own side padding. As grid items, auto margins shrink them
       to content width and the carousels overflow into the rail, so in
       column 1 they stretch flush with the sections above. */
    html.eh-pbm-b .eh-pbm-page > .clinic-accreditations,
    html.eh-pbm-b .eh-pbm-page > .clinic-faq-section,
    html.eh-pbm-b .eh-pbm-page > .clinic-reviews-section,
    html.eh-pbm-b .eh-pbm-page > .related-clinics-section {
        width: auto;
        max-width: none;
        margin-left: 0;
        margin-right: 0;
        padding-left: 0;
        padding-right: 0;
    }

    html.eh-pbm-b .eh-pbm-page > .related-clinics-section {
        overflow-x: clip;
    }

    html.eh-pbm-b .eh-pbm-page > .clinic-reviews-section::before,
    html.eh-pbm-b .eh-pbm-page > .related-clinics-section::before {
        left: 0;
    }
}