/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* container query */

.map-content {
    container-type: inline-size;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* layout */

.map-content__layout {
    display: grid;
    /* Map caps at 500px on desktop but can shrink (down to the excerpt's 280px min)
     so the pair squishes gracefully — both columns give ground — instead of the
     excerpt alone getting crushed against a rigid 500px map and stacking early. */
    grid-template-columns: minmax(280px, 1fr) minmax(0, 500px);
    grid-template-areas:
        "header header"
        "excerpt map"
        "connect map";
    gap: 30px;
    align-items: stretch; /* map grows to match the excerpt + connect rows combined */
}

/* wrapper only groups the fields in the markup — display: contents drops its own
 box so header/excerpt/connect place independently in the layout grid above */
.map-content__content {
    display: contents;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* content side */

.map-content__header.section-header {
    grid-area: header;
    margin-bottom: 0;
}

.map-content__excerpt {
    grid-area: excerpt;
}

.map-content__excerpt,
.map-content__excerpt p {
    margin: 0 0 20px;
}

.map-content__excerpt p:last-child {
    margin-bottom: 0;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* get connected */

.map-content__connect {
    grid-area: connect;
    display: flex;
    flex-direction: column;
    justify-content: end;
}

.map-content__connect-label {
    margin: 0 0 12px;
    color: var(--blue-dk);
}

.map-content__connect-list {
    list-style: none;
    margin: 0;
    padding: 0;

    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.map-content__connect-list a {
    display: inline-flex;
    justify-content: center;
    align-items: center;

    width: 56px;
    height: 56px;

    background: var(--blue-dk);
    color: var(--white);
    border-radius: 50%;

    transition: background 0.2s ease;
}

.map-content__connect-list a:hover {
    background: var(--blue-lt);
    color: var(--white);
}

.map-content__connect-list .icon {
    font-size: 30px;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* map side */

.map-content__map {
    grid-area: map;
    min-height: 350px; /* keep the map's size when the excerpt is short; align-items: stretch
                          grows it past this to match a taller excerpt row */
    border-radius: var(--box-border-radius-lg);
    overflow: hidden;
}

/* Fill the stretched cell instead of the shortcode's fixed 500px
   (.shortcode-map defaults to height: 500px in shortcode_map.css). */
.map-content__map .shortcode-map {
    height: 100%;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* responsive */

@container (max-width: 700px) {
    .map-content__layout {
        grid-template-columns: 1fr;
        grid-template-areas:
            "header"
            "excerpt"
            "connect"
            "map";
        gap: 20px;
    }

    /* Stacked: both columns go full width. The content is already 1fr; the map
     uses a landscape ratio so it fills the full width instead of being capped to
     a 500px square (which left a gap on the right). The inner map (height: 100%,
     set above) fills it. */
    .map-content__map {
        min-height: 0; /* drop the desktop floor — stacked height comes from the ratio */
        aspect-ratio: 1 / 1; /* a bit taller on mobile than the 3/2 landscape */
        max-height: 500px;
    }

    /* map pop ups */
    .map-popup__actions .btn {
        padding: 4px 16px 8px;
    }
    .map-popup__actions .btn-text {
        font-size: 12px;
    }
}