/* Mobile overrides for guide detail page widgets.
   These use !important where needed to override React inline styles. */

@media (max-width: 599px) {
    /* ── BearcanSizer ── */
    .bcs-wrap {
        padding: 14px !important;
    }
    .bcs-header,
    .bcs-row {
        grid-template-columns: minmax(0, 1fr) 60px 60px !important;
        gap: 8px !important;
    }
    .bcs-cta {
        display: none !important;
    }

    /* ── CertFilterTable ── */
    .cft-table {
        min-width: 0 !important;
        font-size: 13px !important;
    }
    .cft-body-col {
        display: none !important;
    }
    .cft-table td,
    .cft-table th {
        padding: 8px 4px !important;
    }
    .cft-table .cft-status-badge {
        font-size: 10px !important;
        padding: 2px 5px !important;
    }

    /* ── GearComparator ── */
    .gc-chip {
        padding: 4px 8px !important;
        font-size: 11px !important;
    }
    .gc-table {
        font-size: 13px !important;
    }
    .gc-table th,
    .gc-table td {
        padding: 8px 6px !important;
    }

    /* ── RentalFinder ── */
    .rf-sections {
        grid-template-columns: 1fr !important;
    }

    /* ── PermitMap ── */
    .pm-wrap {
        padding: 12px !important;
    }
}

/* ── PermitMap layout ──
   The map stays in view while someone reads the list. Narrow widgets: the map
   sticks below the site header and the list flows with the page (no scrolling
   panel inside a scrolling page on touch screens). Wide widgets: map and list
   side by side, the list scrolling in its own panel with sticky program
   headers. */
.pm-wrap {
    container-type: inline-size;
}
.pm-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
}
.pm-map {
    position: sticky;
    top: var(--hs-header-height, 56px);
    z-index: 2;
    height: 210px;
    width: 100%;
    border-radius: 6px;
    overflow: hidden;
    background: #eef2f5;
    box-shadow: 0 2px 6px rgba(26, 42, 58, 0.15);
}
.pm-list {
    position: relative;
    border: 1px solid #e3e9ef;
    border-radius: 6px;
}
.pm-program-head {
    background: #f4f7fa;
    border-left: 4px solid #cbd5db;
    padding: 7px 10px;
}
@container (min-width: 600px) {
    .pm-body {
        grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    }
    /* Leaflet sets position: relative inline, so reset the sticky offset too. */
    .pm-map {
        position: relative;
        top: auto;
        box-shadow: none;
    }
    .pm-map,
    .pm-list {
        height: 440px;
    }
    .pm-list {
        overflow-y: auto;
    }
    .pm-program-head {
        position: sticky;
        top: 0;
        z-index: 1;
    }
}