/* ==========================================================================
   Map — full-width branded Google Map in a rounded frame.
   ========================================================================== */

.section.efmap {
    padding-top: 24px;
    padding-bottom: 24px;
}

.efmap-frame {
    position: relative;
    width: 100%;
    height: var(--efmap-height, 440px);
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--color-card-navy);
}

.efmap-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

/* Google control chrome tweaks to fit the dark theme */
.efmap-canvas .gm-style-cc,
.efmap-canvas a[href^="https://maps.google.com/maps"] { opacity: 0.6; }

/* Placeholder shown until the map loads or when no API key is set */
.efmap-frame::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--color-card-navy);
    z-index: 0;
}
.efmap-frame.is-loaded::before { display: none; }

.efmap-notice {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    text-align: center;
}
.efmap-notice p {
    margin: 0;
    font-family: var(--font-body);
    font-size: var(--text-paragraph-sm);
    color: rgba(255, 255, 255, 0.7);
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 767px) {
    .efmap-frame { height: clamp(280px, 70vw, var(--efmap-height, 440px)); }
}