/* ════════════════════════════════════════════════════
   CF PRE-FOOTER — MAPA DE UBICACIÓN
   Ruta: prefooter/assets/css/cf-pf-map.css
════════════════════════════════════════════════════ */

/* Rompe el contenedor normal para ocupar todo el ancho de pantalla.
   Definición propia, independiente del tema activo. */
.full-width {
    width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    max-width: 100vw !important;
    position: relative;
}

/* El bloque de título (subtítulo/título/texto + alineación) vive en
   assets/css/cf-pf-title.css, compartido por las 5 secciones con
   título — ver cf_pf_enqueue_assets() en cf-prefooter.php. */

/* Contenedor centrado, con el mismo ancho real que usa el theme — el
   título va acá adentro; el iframe del mapa en sí sigue de borde a
   borde a propósito (ver .hb-pf-map-frame más abajo), no se contiene. */
.cf-ancho-maximo {
    width: var(--theme-container-width, 100%);
    max-width: var(--theme-normal-container-max-width, 1200px);
    margin-left: auto;
    margin-right: auto;
}

/* --hb-pf-map-padding-v: "Espacio arriba de la sección" del admin
   (ver cf-prefooter-map.php), default 20px. Sin padding abajo a
   propósito: esta sección siempre se renderiza justo antes del Footer
   (ver cf_render_prefooter_all), así que debe quedar pegada a él, sin
   el hueco que dejaría un padding-bottom normal. */
.hb-pf-map {
    padding-top: var(--hb-pf-map-padding-v, 20px);
    padding-bottom: 0;
}

.hb-pf-map-frame {
    width: 100%;
    height: var(--hb-pf-map-h, 420px);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 24px rgba(13, 45, 110, .09);
}

.hb-pf-map-frame iframe {
    display: block;
    width: 100%;
    height: 100%;
}

.hb-pf-map-address {
    text-align: center;
    margin: 14px 0 0;
    font-size: .9rem;
    color: #5a6480;
}

/* ── RESPONSIVE ──
   En mobile el mapa en sí queda de borde a borde (sin padding lateral
   ni esquinas redondeadas/sombra — no tiene sentido un "bordeado" en
   un elemento que ya ocupa el 100% de la pantalla). El padding lateral
   se mueve al título y a la dirección de abajo, que sí necesitan
   márgenes de seguridad para no tocar los bordes de la pantalla. */
@media (max-width: 768px) {
    .hb-pf-map .cf-ancho-maximo { padding-left: 16px; padding-right: 16px; }
    .hb-pf-map-address { padding-left: 16px; padding-right: 16px; }
    .hb-pf-map-frame {
        height: min(var(--hb-pf-map-h, 420px), 320px);
        border-radius: 0;
        box-shadow: none;
    }
}