/* =============================================================================
   Module: map  (modules/map.php)
   -----------------------------------------------------------------------------
   The pinned location as a band of its own, edge to edge. The page puts it in a
   .section--flush, so this block owns its whole height and needs no padding
   around it.

   Two states occupy the same box: the consent panel, and - once consent has
   been given - the frame over it. The panel is not removed when the frame
   arrives, only hidden, because consent can be withdrawn again in the
   Cookie-Einstellungen dialog and the panel then has to come back.

   Before consent the band carries the same gradient as the one Leistungen band,
   so the empty state reads as a deliberate part of the page rather than as
   something that failed to load. .button--quiet already knows how to sit on
   that gradient (base/components.css); the filled button does not, which is the
   one override at the foot of this file.
   ============================================================================= */

.map {
    position: relative;
    display: flex;
    width: 100%;
    aspect-ratio: 4 / 5;
    min-height: 24rem;
    max-height: 70vh;
    overflow: hidden;
    background-image: linear-gradient(to bottom,
                      var(--color-primary),
                      var(--color-accent));
    color: var(--color-text-inverse);
}

/* The same three steps the hero band takes, and for the same reason: a wide
   ratio turns into a letterbox strip on a phone. */
@media (min-width: 768px) {
    .map {
        aspect-ratio: 16 / 9;
        max-height: 60vh;
    }
}

@media (min-width: 1024px) {
    .map {
        aspect-ratio: 21 / 9;
    }
}

/* --- The frame ---------------------------------------------------------------
   Absolute and over the panel: the panel is what gives the band its height on
   the first visit, and the frame has none of its own. It is `hidden` in the
   markup until assets/js/modules/map.js gives it a src.
   -------------------------------------------------------------------------- */
.map__frame {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    border: 0;
}

/* --- The consent panel ------------------------------------------------------- */
.map__consent {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: var(--space-xl) var(--container-padding);
}

/* `hidden` is a display: none from the browser's own stylesheet, and the two
   rules that carry a display above out-weigh it - ours come later at the same
   specificity. Both elements are toggled by assets/js/modules/map.js through
   that attribute, so both have to say so here. */
.map__consent[hidden],
.map__button[hidden] {
    display: none;
}

.map__panel {
    max-width: 34rem;
    text-align: center;
}

.map__title {
    margin: 0 0 var(--space-sm);
    color: var(--color-text-inverse);
    font-size: var(--font-size-h3);
}

.map__text {
    margin: 0;
    color: rgba(var(--rgb-white), 0.86);
}

.map__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    margin-block-start: var(--space-lg);
}

/* The one thing on the band that has to out-weigh .button--quiet beside it.
   White rather than the primary blue, which would disappear into the gradient
   at the head of the band. */
.map__button {
    background-color: var(--color-surface);
    color: var(--color-primary);
}

.map__button:hover,
.map__button:focus-visible {
    background-color: var(--color-accent);
    color: var(--color-blue);
}

/* --- The small print --------------------------------------------------------- */
.map__legal {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--space-2xs) var(--space-xs);
    margin-block: var(--space-md) 0;
    font-size: var(--font-size-sm);
}

/* Both are the same line of text; one of them happens to be a <button> because
   it opens a dialog rather than going anywhere. */
.map__legal-link {
    padding: 0;
    color: rgba(var(--rgb-white), 0.86);
    font: inherit;
    text-decoration: none;
}

.map__legal-link:hover,
.map__legal-link:focus-visible {
    color: var(--color-text-inverse);
}

.map__legal-separator {
    color: rgba(var(--rgb-white), 0.5);
}