/* ============================================================
 * /locations landing redesign — Figma 492:293 (desktop 1440) +
 * 450:14028 (mobile finder). Scoped under .ad-locations-page.
 * Reuses service-template.css (hero/buttons/faq), locations.css
 * (map/tabs/pills), location-detail.css (services panel),
 * doctor-carousel.css (doctors). This bundle adds the landing
 * layout + section-specific geometry. Colors map to --ad-* tokens.
 * Maps render empty on localhost by design — not a defect.
 * ============================================================ */

.ad-locations-page { --ad-locations-shell: min(1280px, calc(100% - 128px)); }

/* Page-local shell = 1280 content / 64px gutter (Figma container). */
.ad-locations-page .ad-service-shell {
    width: var(--ad-locations-shell);
    max-width: none;
    margin-inline: auto;
}

/* ---------------- [1] HERO ---------------- */
.ad-locations-page__hero { padding: 112px 0; background: var(--ad-color-white); }

.ad-locations-page .ad-service-hero__shell {
    display: grid;
    grid-template-columns: minmax(0, 600px) minmax(0, 600px);
    /* Reset the 3-row template inherited from service-template.css so the text
       column can vertically center against the taller image (was top-pinned). */
    grid-template-rows: auto;
    gap: 80px;
    align-items: center;
}

.ad-locations-page .ad-service-hero__content {
    display: flex;
    flex-direction: column;
    gap: 36px;
    align-items: flex-start;
}

.ad-locations-page .ad-service-hero__title {
    font-family: var(--ad-font-primary);
    font-weight: var(--ad-font-weight-semibold);
    font-size: var(--ad-fluid-h1);
    line-height: 1.1;
    color: var(--ad-color-blue-deep);
    margin: 0;
}

.ad-locations-page .ad-service-hero__body { margin: 0; }
.ad-locations-page .ad-service-hero__body p {
    font-size: 18px;
    line-height: 1.6;
    color: var(--ad-color-copy-soft); /* Figma: muted gray, lighter than the H1 */
    margin: 0;
}

.ad-locations-page__hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.ad-locations-page .ad-service-hero__media img {
    width: 100%;
    height: 500px;
    object-fit: cover;
    border-radius: var(--ad-radius-sm); /* Figma: near-square corners */
}

/* Figma hero buttons are TEAL (match the overline), not the reused azure ghost-blue. */
.ad-locations-page__hero-actions .ad-service-button--ghost-blue {
    border-color: var(--ad-color-teal);
    color: var(--ad-color-teal);
}
.ad-locations-page__hero-actions .ad-service-button--ghost-blue:hover {
    background: var(--ad-color-teal);
    border-color: var(--ad-color-teal);
    color: var(--ad-color-white);
}

/* ---------------- [2]/[6] BREAK divider ---------------- */
.ad-locations-break {
    width: 100%;
    height: 102px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* ---------------- [3..4] REGION FINDER (desktop stacked) ----------------
   Single owner of .ad-locations-page__region-* (previously also declared in
   locations.css, producing an enqueue-order-dependent merge). */
.ad-locations-page__region-section {
    padding: 112px 0;
    background: var(--ad-color-white);
    border-top: 1px solid var(--ad-service-line);
}
.ad-locations-page__region-section:first-of-type { border-top: none; }

.ad-locations-page__region-header {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-bottom: 62px;
    padding-left: 20px;
    border-left: 3px solid var(--ad-service-teal);
}
.ad-locations-page__region-overline {
    font-family: var(--ad-font-primary);
    font-weight: var(--ad-font-weight-semibold);
    font-size: 16px;
    color: var(--ad-color-teal);
    margin: 0 0 18px;
}
.ad-locations-page__region-title {
    font-family: var(--ad-font-primary);
    font-weight: var(--ad-font-weight-semibold);
    font-size: var(--ad-fluid-h2-30);
    line-height: 1.15;
    color: var(--ad-color-blue-deep);
    margin: 0 0 16px;
}
.ad-locations-page__region-desc {
    font-size: 18px;
    line-height: 1.6;
    color: var(--ad-color-blue-deep);
    max-width: 800px;
    margin: 0;
}

/* 2-col: Map 800 + gap 48 + List 432 = 1280 */
.ad-locations-page .ad-locations__body--page {
    display: grid;
    grid-template-columns: minmax(0, 800px) 432px;
    gap: 48px;
    align-items: start;
}
.ad-locations-page .ad-locations__body--page .ad-locations__map {
    height: 460px;
    border-radius: var(--ad-radius-xl);
    background: var(--ad-color-mist);
}
.ad-locations-page .ad-locations__body--page .ad-locations__list-col {
    max-height: max(460px, 60vh);
    min-height: 0;
    overflow-y: auto;
    scrollbar-width: none;
}
.ad-locations-page .ad-locations__body--page .ad-locations__list-col::-webkit-scrollbar {
    display: none;
}

/* ---------------- [8] PATIENT REVIEWS (Elfsight) ---------------- */
.ad-locations-reviews { padding: 0 0 112px; background: var(--ad-color-white); }
.ad-locations-reviews__title { text-align: center; margin-bottom: 48px; }
.ad-locations-reviews__widget { min-height: 1px; }

/* ---------------- [9] DENTAL SERVICES — Figma: centered, borderless cards + line-art icons ---------------- */
.ad-locations-page .ad-location-services__panel { border-radius: var(--ad-radius-xl); }
.ad-locations-page .ad-location-service-card {
    background: var(--ad-color-mist); /* Figma: subtle light panel (not borderless) */
    box-shadow: none;
    border-radius: var(--ad-radius-2xl);
    text-align: center;
    align-items: center;
}
.ad-locations-page .ad-location-service-card:hover { transform: none; box-shadow: none; }
.ad-locations-page .ad-location-service-card__icon {
    background: transparent;
    padding: 0;
    width: 60px;
    height: 60px;
    margin: 0 auto 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ad-locations-page .ad-locations-service-icon { width: 60px; height: 60px; display: block; }
.ad-locations-page .ad-location-service-card__title,
.ad-locations-page .ad-location-service-card__copy,
.ad-locations-page .ad-location-service-card__link { text-align: center; }

/* ---------------- [7] DOCTORS — reuse the shared AD_Doctor_Carousel_Renderer EXACTLY as on
 * home/about (no custom grid override — that broke the first card's sizing). ---------------- */

/* ---------------- [10] WHAT TO EXPECT ---------------- */
.ad-locations-expect { padding: 112px 0; background: var(--ad-color-white); }
.ad-locations-expect__grid {
    display: grid;
    grid-template-columns: minmax(0, 600px) minmax(0, 600px);
    gap: 80px;
    align-items: start;
}
.ad-locations-expect__media { margin: 0; }
.ad-locations-expect__media img {
    width: 100%;
    height: 745px;
    object-fit: cover;
    border-radius: var(--ad-radius-sm); /* Figma: minimal rounding */
    display: block;
}
.ad-locations-expect__copy { display: flex; flex-direction: column; gap: 24px; align-items: flex-start; }
.ad-locations-expect__lead {
    font-size: 20px;
    font-weight: 500;
    line-height: 1.6;
    color: var(--ad-color-blue-deep);
    margin: 0;
}

/* ---------------- [10] What-to-Expect inline items (the Figma colored-card frame is hidden) ---------------- */
.ad-locations-expect__items { display: flex; flex-direction: column; gap: 24px; margin-top: 8px; }
.ad-locations-expect__item { display: flex; flex-direction: column; gap: 8px; }
.ad-locations-expect__item-title {
    font-family: var(--ad-font-primary);
    font-weight: var(--ad-font-weight-semibold);
    font-size: 24px;
    line-height: 1.25;
    color: var(--ad-color-blue-deep);
    margin: 0;
}
.ad-locations-expect__item-body {
    font-size: 18px;
    line-height: 1.6;
    color: var(--ad-color-copy-soft); /* Figma: muted blue-gray, lighter than titles */
    margin: 0;
}

/* ============================================================
 * TABLET (<=1080): this file's desktop rules are (0,2,0) specific and
 * were permanently beating locations.css's @1080 stacking tier, leaving
 * the region map crushed to ~190px between 768-1080. Mirror the stack
 * here at matching specificity.
 * ============================================================ */
@media (max-width: 1100px) {
    .ad-locations-page .ad-service-hero__shell { grid-template-columns: 1fr; gap: 40px; }
    .ad-locations-page .ad-service-hero__media img { height: auto; aspect-ratio: 3 / 2; }

    .ad-locations-page .ad-locations__body--page { grid-template-columns: 1fr; gap: 32px; }
    .ad-locations-page .ad-locations__body--page .ad-locations__map { height: 340px; }
    .ad-locations-page .ad-locations__body--page .ad-locations__list-col { max-height: none; overflow: visible; }

    .ad-locations-expect__grid { grid-template-columns: 1fr; gap: 40px; }
    .ad-locations-expect__media img { height: auto; }
}

/* ============================================================
 * MOBILE (<=767): stack the 2-col sections; the region map + the
 * shared location accordion stack natively (no custom mobile finder).
 * ============================================================ */
@media (max-width: 767px) {
    /* FIX: the shell used a fixed 128px gutter (→ 262px content on a 390px screen).
       Match the standard responsive shell — 20px gutters on mobile. */
    .ad-locations-page { --ad-locations-shell: calc(100% - 40px); }

    .ad-locations-page__hero { padding: 64px 0; }
    .ad-locations-page .ad-service-hero__shell { grid-template-columns: 1fr; gap: 32px; }
    .ad-locations-page .ad-service-hero__title { font-size: var(--ad-fluid-h1); }
    .ad-locations-page .ad-service-hero__media img { height: auto; }

    /* FIX: region finder was a fixed 800/432 2-col grid (→ map crushed to ~2px).
       Stack map over the office accordion on mobile. */
    .ad-locations-page__region-section { padding: 64px 0; }
    .ad-locations-page__region-header { margin-bottom: 32px; }
    .ad-locations-page .ad-locations__body--page { grid-template-columns: 1fr; gap: 28px; }
    .ad-locations-page .ad-locations__body--page .ad-locations__map { height: 240px; }
    .ad-locations-page .ad-locations__body--page .ad-locations__list-col { max-height: none; overflow: visible; }

    .ad-locations-expect { padding: 64px 0; }
    .ad-locations-expect__grid { grid-template-columns: 1fr; gap: 32px; }
    .ad-locations-expect__media img { height: auto; }
}