/* ============================================================
   Interactive Facility Map
   Ported verbatim from module.css. All values driven by Style
   tab fields via CSS variables set inline in module.html.
   Fallbacks below match the field defaults.
   Two variants: embed (Google Maps / stylized placeholder + card)
   and interactive (office list + selectable pins + info card).
   ============================================================ */

/* ===========================================================
   Variant: embed (shared + embed-specific)
   =========================================================== */
.facility-map--embed {
    background: var(--facility-map-bg, #F5F5F0);
    border-top: 1px solid var(--facility-map-border, #D9E2EC);
    border-bottom: 1px solid var(--facility-map-border, #D9E2EC);
}
.facility-map__wrap {
    max-width: 1200px;
    margin: 0 auto;
}
.facility-map__iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

/* ---- Map container (embed) ---- */
.facility-map--embed .facility-map__map {
    position: relative;
    height: 440px;
    overflow: hidden;
    border-left: 1px solid var(--facility-map-border, #D9E2EC);
    border-right: 1px solid var(--facility-map-border, #D9E2EC);
    background-color: var(--facility-map-map-bg, #E9EEF2);
    background-image:
        linear-gradient(rgba(27, 79, 114, .07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(27, 79, 114, .07) 1px, transparent 1px),
        linear-gradient(rgba(27, 79, 114, .12) 1px, transparent 1px),
        linear-gradient(90deg, rgba(27, 79, 114, .12) 1px, transparent 1px);
    background-size: 26px 26px, 26px 26px, 130px 130px, 130px 130px;
}

/* ---- Roads (shared between both variants) ---- */
.facility-map__road {
    position: absolute;
    background: var(--facility-map-road, #FFFFFF);
    box-shadow: 0 0 0 1px var(--facility-map-border, #D9E2EC);
}
.facility-map__road--h { height: 14px; left: -5%; right: -5%; }
.facility-map__road--v { width: 14px; top: -5%; bottom: -5%; }
.facility-map__road--diag { height: 12px; width: 60%; left: 22%; top: 52%; transform: rotate(-16deg); transform-origin: center; }

/* ---- Static pin (embed variant) ---- */
.facility-map__pin--static {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -100%);
    display: flex;
    flex-direction: column;
    align-items: center;
}
.facility-map--embed .facility-map__dot {
    width: 40px;
    height: 40px;
    border-radius: 50% 50% 50% 0;
    background: var(--facility-map-pin, #1B4F72);
    transform: rotate(-45deg);
    box-shadow: 0 6px 16px rgba(0, 0, 0, .28);
    display: flex;
    align-items: center;
    justify-content: center;
}
.facility-map--embed .facility-map__dot svg {
    transform: rotate(45deg);
    color: var(--facility-map-card-bg, #FFFFFF);
}
.facility-map--embed .facility-map__label {
    margin-top: 10px;
    background: var(--facility-map-card-bg, #FFFFFF);
    border: 1px solid var(--facility-map-border, #D9E2EC);
    border-radius: 4px;
    padding: 8px 14px;
    font-family: var(--facility-map-eyebrow-font, 'Roboto Mono', monospace);
    font-size: 11px;
    color: var(--facility-map-pin, #1B4F72);
    white-space: nowrap;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .1);
}

/* ---- Zoom controls (embed) ---- */
.facility-map__controls {
    position: absolute;
    right: 24px;
    bottom: 24px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.facility-map__controls button {
    width: 40px;
    height: 40px;
    border-radius: 4px;
    border: 1px solid var(--facility-map-border, #D9E2EC);
    background: var(--facility-map-card-bg, #FFFFFF);
    color: var(--facility-map-pin, #1B4F72);
    font-size: 18px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .08);
}
.facility-map__controls button:hover {
    background: var(--facility-map-pin, #1B4F72);
    color: var(--facility-map-card-bg, #FFFFFF);
    border-color: var(--facility-map-pin, #1B4F72);
}

/* ---- Floating card (embed) ---- */
.facility-map__card {
    position: absolute;
    top: 24px;
    left: 24px;
    z-index: 2;
    background: var(--facility-map-card-bg, #FFFFFF);
    border: 1px solid var(--facility-map-card-border, #D9E2EC);
    border-radius: 8px;
    padding: 26px 28px;
    max-width: 280px;
    box-shadow: 0 10px 24px rgba(27, 79, 114, .14);
}
.facility-map__card-k {
    font-family: var(--facility-map-eyebrow-font, 'Roboto Mono', monospace);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--facility-map-pin-active, #E8610A);
    margin-bottom: 8px;
}
.facility-map__card h4 {
    font-family: var(--facility-map-heading-font, 'Barlow Condensed', sans-serif);
    font-weight: var(--facility-map-heading-weight, 700);
    font-size: 22px;
    color: var(--facility-map-heading-color, #1B4F72);
    margin: 0 0 8px;
}
.facility-map__card p {
    font-family: var(--facility-map-body-font, 'Inter', sans-serif);
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--facility-map-body-color, #6B7280);
    margin: 0 0 18px;
}

/* ---- Button (shared) ---- */
.facility-map__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    font-family: var(--facility-map-body-font, 'Inter', sans-serif);
    font-weight: 600;
    font-size: 14px;
    color: var(--facility-map-btn-text, #FFFFFF);
    background: var(--facility-map-btn-bg, #E8610A);
    border-radius: var(--facility-map-btn-radius, 4px);
    padding: 11px 20px;
    box-sizing: border-box;
    transition: box-shadow .18s ease;
    text-decoration: none;
}
.facility-map__btn:hover {
    box-shadow: 0 6px 16px rgba(232, 97, 10, .32);
    color: var(--facility-map-btn-text, #FFFFFF);
}

/* ===========================================================
   Variant: interactive
   ============================================================ */

/* ---- Head ---- */
.facility-map__head {
    max-width: 1200px;
    margin: 0 auto;
    padding: var(--facility-map-top-spacing, 64px) 32px calc(var(--facility-map-bottom-spacing, 72px) / 2);
}
.facility-map__eyebrow {
    font-family: var(--facility-map-eyebrow-font, 'Roboto Mono', monospace);
    color: var(--facility-map-eyebrow-color, #E8610A);
    font-size: var(--facility-map-eyebrow-size, 11px);
    font-weight: var(--facility-map-eyebrow-weight, 500);
    text-transform: uppercase;
    letter-spacing: .14em;
}
.facility-map__heading {
    font-family: var(--facility-map-heading-font, 'Barlow Condensed', sans-serif);
    font-weight: var(--facility-map-heading-weight, 700);
    font-size: var(--facility-map-heading-size, 34px);
    line-height: 1.1;
    color: var(--facility-map-heading-color, #1B4F72);
    margin: 14px 0 0;
}
.facility-map__sub {
    font-family: var(--facility-map-body-font, 'Inter', sans-serif);
    font-size: var(--facility-map-body-size, 16px);
    font-weight: var(--facility-map-body-weight, 400);
    line-height: 1.6;
    color: var(--facility-map-body-color, #6B7280);
    margin-top: 14px;
    max-width: 600px;
}

/* ---- Layout ---- */
.facility-map__layout {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 340px 1fr;
}

/* ---- Office list ---- */
.facility-map__list {
    background: var(--facility-map-card-bg, #FFFFFF);
    border: 1px solid var(--facility-map-border, #D9E2EC);
    border-right: none;
}
.facility-map__item {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 22px 24px;
    border-bottom: 1px solid var(--facility-map-border, #D9E2EC);
    cursor: pointer;
    transition: background .15s ease;
}
.facility-map__item:last-child {
    border-bottom: none;
}
.facility-map__item:hover {
    background: var(--facility-map-bg, #F5F5F0);
}
.facility-map__item.is-active {
    background: rgba(27, 79, 114, .06);
    box-shadow: inset 4px 0 0 var(--facility-map-pin-active, #E8610A);
}
.facility-map__num {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--facility-map-pin, #1B4F72);
    color: var(--facility-map-card-bg, #FFFFFF);
    font-family: var(--facility-map-eyebrow-font, 'Roboto Mono', monospace);
    font-size: 13px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.facility-map__item.is-active .facility-map__num {
    background: var(--facility-map-pin-active, #E8610A);
}
.facility-map__item h4 {
    font-family: var(--facility-map-heading-font, 'Barlow Condensed', sans-serif);
    font-weight: var(--facility-map-heading-weight, 700);
    font-size: 19px;
    color: var(--facility-map-heading-color, #1B4F72);
    margin: 0 0 4px;
}
.facility-map__addr {
    font-family: var(--facility-map-body-font, 'Inter', sans-serif);
    font-size: 13px;
    line-height: 1.5;
    color: var(--facility-map-body-color, #6B7280);
}
.facility-map__tagline {
    font-family: var(--facility-map-eyebrow-font, 'Roboto Mono', monospace);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--facility-map-pin-active, #E8610A);
    margin-top: 6px;
}

/* ---- Map canvas (interactive) ---- */
.facility-map__canvas {
    position: relative;
    min-height: 520px;
    border: 1px solid var(--facility-map-border, #D9E2EC);
    overflow: hidden;
    background-color: var(--facility-map-map-bg, #E9EEF2);
    background-image:
        linear-gradient(rgba(27, 79, 114, .07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(27, 79, 114, .07) 1px, transparent 1px),
        linear-gradient(rgba(27, 79, 114, .12) 1px, transparent 1px),
        linear-gradient(90deg, rgba(27, 79, 114, .12) 1px, transparent 1px);
    background-size: 26px 26px, 26px 26px, 130px 130px, 130px 130px;
}

/* ---- Pins (interactive) ---- */
.facility-map__canvas .facility-map__pin {
    position: absolute;
    transform: translate(-50%, -100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    transition: transform .2s ease;
}
.facility-map__canvas .facility-map__dot {
    width: 34px;
    height: 34px;
    border-radius: 50% 50% 50% 0;
    background: var(--facility-map-pin, #1B4F72);
    transform: rotate(-45deg);
    box-shadow: 0 6px 16px rgba(0, 0, 0, .28);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .2s ease, width .2s ease, height .2s ease;
}
.facility-map__canvas .facility-map__dot span {
    transform: rotate(45deg);
    color: var(--facility-map-card-bg, #FFFFFF);
    font-family: var(--facility-map-eyebrow-font, 'Roboto Mono', monospace);
    font-size: 13px;
    font-weight: 500;
}

#ifm-canvas-v5 {
    .facility-map__dot span {
        color: #FFFFFF;
    }

    .facility-map__label {
        color: #FFFFFF;
    }
}
.facility-map__canvas .facility-map__label {
    margin-top: 8px;
    background: var(--facility-map-card-bg, #FFFFFF);
    border: 1px solid var(--facility-map-border, #D9E2EC);
    border-radius: 4px;
    padding: 5px 11px;
    font-family: var(--facility-map-eyebrow-font, 'Roboto Mono', monospace);
    font-size: 11px;
    color: var(--facility-map-pin, #1B4F72);
    white-space: nowrap;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .1);
    opacity: 0;
    transition: opacity .2s ease;
}
.facility-map__canvas .facility-map__pin.is-active {
    transform: translate(-50%, -100%) scale(1.12);
    z-index: 3;
}
.facility-map__canvas .facility-map__pin.is-active .facility-map__dot {
    background: var(--facility-map-pin-active, #E8610A);
    width: 42px;
    height: 42px;
}
.facility-map__canvas .facility-map__pin.is-active .facility-map__label {
    opacity: 1;
}

/* ---- Info card (interactive) ---- */
.facility-map__info {
    position: absolute;
    right: 24px;
    bottom: 24px;
    background: var(--facility-map-card-bg, #FFFFFF);
    border: 1px solid var(--facility-map-card-border, #D9E2EC);
    border-radius: 8px;
    padding: 22px;
    max-width: 300px;
    box-shadow: 0 10px 24px rgba(27, 79, 114, .16);
}
.facility-map__info-k {
    font-family: var(--facility-map-eyebrow-font, 'Roboto Mono', monospace);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--facility-map-pin-active, #E8610A);
    margin-bottom: 8px;
}
.facility-map__info h4 {
    font-family: var(--facility-map-heading-font, 'Barlow Condensed', sans-serif);
    font-weight: var(--facility-map-heading-weight, 700);
    font-size: 22px;
    color: var(--facility-map-heading-color, #1B4F72);
    margin: 0 0 6px;
}
.facility-map__info-addr {
    font-family: var(--facility-map-body-font, 'Inter', sans-serif);
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--facility-map-body-color, #6B7280);
    margin-bottom: 16px;
}

/* ===========================================================
   Media queries
   =========================================================== */
@media (max-width: 1023px) {
    .facility-map__layout { grid-template-columns: 1fr; }
    .facility-map__list { border-right: 1px solid var(--facility-map-border, #D9E2EC); }
}
@media (max-width: 767px) {
    .facility-map__head { padding: 48px 20px 24px; }
    .facility-map__canvas { min-height: 400px; }
    .facility-map__info { max-width: 220px; padding: 18px; }
    .facility-map--embed .facility-map__map { height: 360px; }
    .facility-map__card { max-width: 220px; padding: 18px 20px; left: 16px; top: 16px; }
}