/* ==========================
   DIRECTORY LOCATOR SPLIT
   Splits .sidebar-layout__content into a results-list pane (left) and a
   sticky Leaflet map pane (right) on the Archive/Directory page — every shop
   card on the left that has coordinates gets a pin on the right, wired up by
   assets/js/directory-map.js.
========================== */

.directory-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(480px, 640px);
    gap: clamp(1.25rem, 2.5vw, 2rem);
    align-items: start;
}

.directory-split__list {
    min-width: 0;
}

/* Sticky offset matches .sidebar-layout__sidebar's — both sit below the same
   fixed header. Viewport-relative (clamped) per request, so the map reads as
   a wide, modest-height panel rather than a full-height slab next to the
   cards, on both short laptop screens and tall monitors. */
.directory-split__map {
    position: sticky;
    top: calc(100px + 1.5rem);
    height: clamp(320px, 50vh, 600px);
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: var(--border-soft);
}

.directory-map {
    width: 100%;
}

/* Compact cards — smaller than the default .shop-card so more fit alongside
   the map. Scoped to this pane only; the shared shop-card.php partial itself
   is untouched since homepage Top Picks / Related Shops still want the
   regular size. */
.directory-split__list .layout-grid {
    grid-template-columns: repeat(2, 1fr);
}

/* archive.php still wraps each card in the 12-column system's ".span-4" (3-
   per-row at full page width) — but this pane redefines its own grid to just
   2 literal columns above. Left as span-4, a card would ask to span 4 of only
   2 defined tracks, forcing the browser to fabricate extra implicit columns
   to satisfy it — which is what was rendering every card as one full-width
   column instead of 2-up. Pin it back down to 1 of the 2 real columns. */
.directory-split__list .layout-grid > .span-4 {
    grid-column: span 1;
}

.directory-split__list .shop-card__media {
    aspect-ratio: 2 / 1;
}

.directory-split__list .shop-card__body {
    padding: 0.65rem;
    gap: 0.35rem;
}

.directory-split__list .shop-card__title {
    font-size: 0.85rem;
}

.directory-split__list .shop-card__excerpt {
    font-size: 0.75rem;
    -webkit-line-clamp: 1;
}

.directory-split__list .shop-card__tag,
.directory-split__list .shop-card__payment {
    font-size: 0.62rem;
    padding: 0.22rem 0.42rem;
}

/* List-view toggle still applies within the narrower left pane. */
.directory-split__list .layout-grid--list {
    grid-template-columns: 1fr;
}

/* Below this, even 2 compact cards get too narrow — drop to 1 column. Stays
   2-up through tablet and most desktop widths (the previous 1200px cutoff
   was collapsing to 1 huge column on ordinary laptop screens). */
@media (max-width: 640px) {
    .directory-split__list .layout-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 960px) {
    .directory-split {
        grid-template-columns: 1fr;
    }

    .directory-split__map {
        position: static;
        height: 320px;
        order: -1;
    }
}