/* =============================================================================
   CARIBOO MAP BLOCK
   ============================================================================= */

.cariboo-map-block {
    position: relative;
    height: var(--map-height, 600px);
    overflow: hidden;
}

/* ── Map canvas fills the block ── */
.cariboo-map__canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

/* ── InnerBlocks overlay (left panel) ── */
.cariboo-map__overlay {
    position: absolute;
    inset: 0;
    pointer-events: none; /* let clicks pass through to map */
    display: flex;
    align-items: stretch;
}

/* Re-enable pointer events on actual content inside the overlay */
.cariboo-map__overlay > * {
    pointer-events: auto;
}

/* ── No API key notice (admins only) ── */
.cariboo-map-block__no-key {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10;
    background: rgba(0, 0, 0, 0.75);
    color: #ffffff;
    padding: 0.75rem 1.25rem;
    font-size: 0.875rem;
}

.cariboo-map-block__no-key a {
    color: var(--wp--preset--color--secondary);
    text-decoration: underline;
}

/* ── InfoWindow ── */
.cariboo-map-infowindow {
    font-family: var(--wp--preset--font-family--bricolage-grotesque);
    max-width: 240px;
    padding: 0.25rem 0;
}

.cariboo-map-infowindow__title {
    margin: 0 0 0.4rem;
    font-size: 1rem;
    font-weight: 700;
    color: var(--wp--preset--color--primary);
}

.cariboo-map-infowindow__content {
    margin: 0 0 0.5rem;
    font-size: 0.875rem;
    line-height: 1.5;
    color: #333333;
}

.cariboo-map-infowindow__link {
    display: inline-block;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--wp--preset--color--secondary);
    text-decoration: none;
}

.cariboo-map-infowindow__link:hover {
    text-decoration: underline;
}

/* ── Editor placeholder ── */
.cariboo-map-block--empty {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 300px;
    background: #1a1a2e;
    color: rgba(255, 255, 255, 0.6);
    font-size: 1rem;
}

@media (max-width: 767px) {
    .cariboo-map-block {
        height: auto;
        min-height: 480px;
    }

    .cariboo-map__canvas {
        height: 480px;
        position: relative;
    }

    .cariboo-map__overlay {
        position: relative;
        inset: auto;
    }
}