/* Base two‐panel layout */
.locations-container {
    display: flex;
    gap: 0rem;
}

.locations-info {
    flex: 1;
    min-width: 360px;
}

.locations-map {
    flex: 1;
    min-width: 360px;
    min-height: 350px;
}

/* Multi-column list */
.locations-list {
    /* nice, readable multi-column on larger screens */
    columns: 3 260px; /* up to 3 columns, min column width ~260px */
    column-gap: 1.25rem;
    margin: 0.5rem 0 1rem 0;
    padding: 0;
    list-style: none; /* custom bullets below */
}

    .locations-list li {
        break-inside: avoid;
        -webkit-column-break-inside: avoid;
        padding-left: 1.25rem;
        position: relative;
        margin: 0.15rem 0;
    }

        /* Simple custom bullet */
        .locations-list li::before {
            content: "•";
            position: absolute;
            left: 0;
            line-height: 1;
        }

/* Collapse into a single column when the viewport is narrower than 1052px (360 + 640 + 2rem) */
@media (max-width: calc(360px + 640px + 2rem)) {
    .locations-container {
        flex-direction: column;
    }

    .locations-map {
        margin-top: 1.5rem;
    }
}

/* Smaller devices: reduce columns gracefully */
@media (max-width: 900px) {
    .locations-list {
        columns: 2 220px;
    }
}

@media (max-width: 640px) {
    .locations-info, .locations-map {
        padding: 0 10px;
    }

        .locations-info p, .locations-info ul {
            font-size: 0.9rem;
        }

    .locations-list {
        columns: 1;
    }
}

.map-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    padding-bottom: 56.25%; /* 16:9 */
}

.map-frame {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    min-height: 350px;
    border: none;
}