/* ========================================
   MAP PROZON
   Scoped + editor-theme friendly

   Mirrors the Hours prozon font/color structure.
======================================== */

.pz-map {
    --map-heading: var(--pz-heading, var(--pz-color-h1, #000000));
    --map-subheading: var(--pz-subheading, var(--pz-color-h2, var(--map-heading)));
    --map-body: var(--pz-body, var(--pz-color-body-text, #1f2933));
    --map-muted: var(--pz-muted, var(--pz-color-muted-text, color-mix(in srgb, var(--map-body) 68%, transparent)));
    --map-link: var(--pz-link, var(--pz-color-link-text, var(--map-heading)));
    --map-link-hover: var(--pz-link-hover, var(--map-link));
    --map-card-bg: var(--pz-card-bg, #ffffff);
    --map-border: var(--pz-border, var(--pz-border-medium, color-mix(in srgb, var(--map-body) 22%, transparent)));
    --map-focus: var(--pz-focus, var(--pz-input-focus, var(--map-link)));
    --map-radius: var(--pz-radius, 20px);
    --map-spacing: var(--pz-spacing, 1.25rem);
    --map-section-gap: 0rem;
    --map-shadow: var(--pz-shadow, 0 12px 28px rgba(0,0,0,.12));
    --map-hover-shadow: var(--pz-shadow-hover, 0 8px 18px rgba(0,0,0,.12));
    --map-button-radius: var(--pz-button-radius, calc(var(--map-radius) * 0.55));
    --map-animation-duration: var(--pz-animation-duration, .16s);
    --map-animation-ease: var(--pz-animation-ease, ease);

    width: 100%;
    margin: 0;
    overflow: hidden;
    padding-block: var(--map-section-gap);
    color: var(--map-body);
    font-family: var(--pz-font-body, Arial, sans-serif);
    font-size: var(--pz-size-body, clamp(0.95rem, 1vw, 1.05rem));
}

.pz-map,
.pz-map * { box-sizing: border-box; }

.pz-map__inner {
    width: 100%;
    max-width: none;
    margin: 0;
}

.pz-map__card {
    width: 100%;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
    padding: var(--map-spacing);
    border: 1px solid color-mix(in srgb, var(--map-border) 75%, transparent);
    border-radius: var(--map-radius);
    background: var(--map-card-bg);
    box-shadow: var(--map-shadow);
    color: var(--map-body);
}

.pz-map__title {
    margin: 0 0 calc(var(--map-spacing) * 0.28);
    padding: 0;
    color: var(--map-heading);
    font-family: var(--pz-font-h2, Georgia, serif);
    font-size: var(--pz-size-h2, 1.7rem);
    font-weight: 700;
    line-height: 1.05;
}

.pz-map__content { flex: 1 1 auto; padding: calc(var(--map-spacing) * 0.52) 0 0; }

.pz-map__address {
    margin: 0 0 calc(var(--map-spacing) * 0.68);
    font-weight: 700;
    color: var(--map-link);
    line-height: 1.45;
}

.pz-map__actions {
    display: flex;
    flex-wrap: wrap;
    gap: calc(var(--map-spacing) * 0.6);
    margin: calc(var(--map-spacing) * 0.2) 0 calc(var(--map-spacing) * 0.8);
}

.pz-map__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: calc(var(--map-spacing) * 0.28);
    min-height: 2.6rem;
    padding: calc(var(--map-spacing) * 0.52) calc(var(--map-spacing) * 0.76);
    border-radius: var(--map-button-radius);
    font-family: var(--pz-font-buttons, var(--pz-font-body, inherit));
    font-size: var(--pz-action-button-size, min(var(--pz-size-buttons, 1rem), 1rem));
    font-weight: 800;
    line-height: 1.1;
    text-decoration: none;
    transition: transform var(--map-animation-duration) var(--map-animation-ease), box-shadow var(--map-animation-duration) var(--map-animation-ease), background-color var(--map-animation-duration) var(--map-animation-ease), color var(--map-animation-duration) var(--map-animation-ease);
}

.pz-map__button--primary {
    background: var(--map-link);
    color: var(--pz-button-text, #ffffff);
    border: 1px solid var(--map-link);
}

.pz-map__button--secondary {
    background: var(--map-card-bg);
    color: var(--map-body);
    border: 1px solid color-mix(in srgb, var(--map-border) 90%, transparent);
}

.pz-map__button:hover,
.pz-map__button:focus-visible {
    color: var(--map-link-hover);
    transform: translateY(-1px);
    box-shadow: var(--map-hover-shadow);
}

.pz-map__button--primary:hover,
.pz-map__button--primary:focus-visible {
    background: var(--map-card-bg);
}

.pz-map__button:focus-visible,
.pz-map a:focus-visible {
    outline: 2px solid var(--map-focus);
    outline-offset: 3px;
}

.pz-map__frame-wrap {
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--map-border) 75%, transparent);
    border-radius: calc(var(--map-radius) * 0.7);
    background: var(--map-card-bg);
}

.pz-map__frame { display: block; width: 100%; height: 100%; border: 0; }

.pz-map__message { margin: 0; color: var(--map-muted); }

@media (max-width: 980px) {
    .pz-map__card { padding: calc(var(--map-spacing) * 0.75); }
    .pz-map__title { font-size: calc(var(--pz-size-h2, 1.7rem) * 0.9); }
}

@media (max-width: 640px) {
    .pz-map__inner { width: 100%; max-width: none; }
    .pz-map__frame-wrap { aspect-ratio: 4 / 3; }
}

@media (max-width: 420px) {
    .pz-map__card { padding-left: calc(var(--map-spacing) * 0.8); padding-right: calc(var(--map-spacing) * 0.8); }
    .pz-map__button { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .pz-map__button { transition-duration: 0.01ms; }
    .pz-map__button:hover,
    .pz-map__button:focus-visible { transform: none; }
}