/* =========================================================
   GOOGLE MAP BLOCK — BEM
   Map embed and nothing else.
   ========================================================= */

.smartfix-map {
    background: var(--sf-bg-white);
    padding: 0 80px;
}

/* Edge-to-edge variant */
.smartfix-map--full {
    padding: 0;
}

.smartfix-map__frame {
    position: relative;
    overflow: hidden;
    border-radius: 16px;
    line-height: 0; /* kills the inline-frame descender gap */
    max-width: var(--sf-content-max);
    margin: 0 auto;
}

.smartfix-map--full .smartfix-map__frame {
    border-radius: 0;
    max-width: none;
}

.smartfix-map__frame iframe {
    display: block;
    width: 100%;
    height: var(--sf-map-height, 450px);
    border: 0;
}

.smartfix-map__cta {
    position: absolute;
    right: 16px;
    bottom: 16px;
    z-index: 1;
    box-shadow: 0 8px 20px rgba(7, 18, 18, 0.24);
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1024px) {
    .smartfix-map {
        padding: 0 48px;
    }

    .smartfix-map--full {
        padding: 0;
    }
}

@media (max-width: 834px) {
    .smartfix-map {
        padding: 0 20px;
    }

    .smartfix-map--full {
        padding: 0;
    }

    /* A tall embed eats the whole viewport on a phone. */
    .smartfix-map__frame iframe {
        height: min(var(--sf-map-height, 450px), 320px);
    }

    .smartfix-map__cta {
        right: 12px;
        bottom: 12px;
        padding: 10px 16px;
        font-size: 14px;
    }
}

@media (max-width: 375px) {
    .smartfix-map {
        padding: 0 16px;
    }

    .smartfix-map--full {
        padding: 0;
    }
}