/* ============================================================================
   FYSH — Schools nearby (listing page)
   CR: fysh-school-catchment-2026-09-23
   Mobile-first. Content cards use the FYSH 4px corner radius.
============================================================================ */

.listing-schools {
    margin: 8px 0 4px;
}

.listing-schools__intro {
    margin: 4px 0 14px;
    font-size: 13px;
    color: #6B7A8D;
    line-height: 1.5;
}

/* ── Controls ─────────────────────────────────────────────────────────── */
.listing-schools__controls {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 16px;
}

.listing-schools__radius label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #0F2340;
    margin-bottom: 8px;
}

.listing-schools__miles {
    color: #1E5BA8;
}

.listing-schools__range {
    width: 100%;
    accent-color: #1E5BA8;
    cursor: pointer;
}

.listing-schools__phases {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.listing-schools__chip {
    border: 1px solid #D4DBE2;
    background: #FFFFFF;
    color: #45566A;
    font-size: 13px;
    font-weight: 500;
    padding: 6px 14px;
    border-radius: 999px;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}

.listing-schools__chip:hover {
    border-color: #1E5BA8;
    color: #1E5BA8;
}

.listing-schools__chip:focus-visible {
    outline: 2px solid #1E5BA8;
    outline-offset: 2px;
}

.listing-schools__chip.is-active {
    background: #0F2340;
    border-color: #0F2340;
    color: #FFFFFF;
}

/* ── Status line ──────────────────────────────────────────────────────── */
.listing-schools__status {
    margin: 0 0 12px;
    font-size: 12px;
    color: #6B7A8D;
}

/* ── List ─────────────────────────────────────────────────────────────── */
.listing-schools__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 8px;
}

.listing-schools__item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid #E6EBF0;
    border-radius: 4px; /* FYSH content-card radius */
    background: #FFFFFF;
}

.listing-schools__badge {
    flex: 0 0 auto;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .02em;
    text-transform: uppercase;
    padding: 4px 8px;
    border-radius: 4px;
    white-space: nowrap;
}

.listing-schools__badge.is-primary   { background: #E7F0FB; color: #1E5BA8; }
.listing-schools__badge.is-secondary { background: #FBF0E1; color: #8A5A12; }
.listing-schools__badge.is-through   { background: #EDEAF7; color: #5A4B9C; }

.listing-schools__body {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1 1 auto;
}

.listing-schools__name {
    font-size: 14px;
    font-weight: 600;
    color: #0F2340;
    line-height: 1.35;
}

.listing-schools__meta {
    font-size: 12px;
    color: #6B7A8D;
    margin-top: 2px;
}

.listing-schools__dist {
    flex: 0 0 auto;
    font-size: 13px;
    font-weight: 600;
    color: #45566A;
    white-space: nowrap;
}

/* ── Wider viewports ──────────────────────────────────────────────────── */
@media (min-width: 640px) {
    .listing-schools__controls {
        flex-direction: row;
        align-items: flex-end;
        justify-content: space-between;
    }
    .listing-schools__radius {
        flex: 1 1 auto;
        max-width: 360px;
    }
    .listing-schools__list {
        grid-template-columns: 1fr 1fr;
    }
}

/* ============================================================================
   List / Map toggle + map view — CR: fysh-school-catchment-map-2026-09-23
============================================================================ */

.listing-schools__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.listing-schools__head .listing-desc-heading { margin-bottom: 2px; }
.listing-schools__head .listing-schools__intro { margin-top: 0; }

/* Segmented view control */
.listing-schools__view {
    display: inline-flex;
    flex: 0 0 auto;
    background: #F1F4F8;
    border: 1px solid #E0E6ED;
    border-radius: 4px;
    padding: 3px;
    gap: 2px;
}

.listing-schools__view-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: none;
    background: transparent;
    color: #45566A;
    font-size: 13px;
    font-weight: 600;
    padding: 6px 14px;
    border-radius: 3px;
    cursor: pointer;
    transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}

.listing-schools__view-btn:hover { color: #0F2340; }

.listing-schools__view-btn:focus-visible {
    outline: 2px solid #1E5BA8;
    outline-offset: 2px;
}

.listing-schools__view-btn.is-active {
    background: #FFFFFF;
    color: #0F2340;
    box-shadow: 0 1px 2px rgba(15, 35, 64, .10);
}

/* Per-school record link */
.listing-schools__link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 4px;
    font-size: 12px;
    font-weight: 600;
    color: #1E5BA8;
    text-decoration: none;
    width: fit-content;
}
.listing-schools__link:hover { text-decoration: underline; }
.listing-schools__link .ti { font-size: 13px; }

/* ── Map wrap ─────────────────────────────────────────────────────────── */
.listing-schools__mapwrap { position: relative; }

.listing-schools__map {
    height: 320px;
    width: 100%;
    border: 1px solid #E6EBF0;
    border-radius: 4px; /* FYSH content-card radius */
    overflow: hidden;
    background: #EEF2F6;
    z-index: 0;
}

.listing-schools__legend {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 10px;
    font-size: 12px;
    color: #6B7A8D;
}
.listing-schools__legend-item { display: inline-flex; align-items: center; gap: 6px; }

.listing-schools__dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid #FFFFFF;
    box-shadow: 0 0 0 1px rgba(15,35,64,.18);
}
.listing-schools__dot.is-primary   { background: #1E5BA8; }
.listing-schools__dot.is-secondary { background: #C77D22; }
.listing-schools__dot.is-home      { background: #0F2340; }
.listing-schools__dot.is-station   { background: #1E8A63; }

/* ── Leaflet div-icon pins ────────────────────────────────────────────── */
.sc-pin {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 2px solid #FFFFFF;
    box-shadow: 0 1px 3px rgba(15,35,64,.35);
    box-sizing: border-box;
    color: #FFFFFF;
}
.sc-pin svg { width: 64%; height: 64%; display: block; }
.sc-pin.is-primary   { background: #1E5BA8; }
.sc-pin.is-secondary { background: #C77D22; }
.sc-pin.is-through   { background: #5A4B9C; }

.sc-pin.is-home {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #0F2340;
    color: #FFFFFF;
    font-size: 14px;
    box-shadow: 0 2px 6px rgba(15,35,64,.45);
}
.sc-pin.is-home .ti { line-height: 1; }

/* Nearby train station pin. CR: fysh-station-proximity-2026-10-21 */
.sc-pin.is-station { background: #1E8A63; }

/* Legend swatches reuse the map pins so the key mirrors the map glyphs.
   CR: fysh-map-icon-accessibility-2026-10-21 */
.listing-schools__legend-pin { width: 18px; height: 18px; flex: 0 0 auto; }
.listing-schools__legend-pin .ti { font-size: 11px; line-height: 1; }

/* ── Leaflet popup ────────────────────────────────────────────────────── */
.sc-popup { min-width: 160px; }
.sc-popup__name { display: block; font-size: 13px; color: #0F2340; }
.sc-popup__meta { display: block; font-size: 12px; color: #6B7A8D; margin: 2px 0 6px; }
.sc-popup__link {
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    color: #1E5BA8;
    text-decoration: none;
}
.sc-popup__link:hover { text-decoration: underline; }

@media (min-width: 640px) {
    .listing-schools__map { height: 380px; }
}

/* [hidden] must win over the grid display above when toggling to Map view */
.listing-schools__list[hidden] { display: none; }

/* ============================================================================
   Card restyle — shield classification + themed distance circle
   CR: fysh-school-catchment-cards-2026-09-23
============================================================================ */

/* Phase shield (replaces the text pill). Colour keyed to phase. */
.listing-schools__shield {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}
.listing-schools__shield .ti { font-size: 24px; line-height: 1; }
.listing-schools__shield.is-primary   { background: #E7F0FB; color: #1E5BA8; }
.listing-schools__shield.is-secondary { background: #FBF0E1; color: #B26E1C; }
.listing-schools__shield.is-through   { background: #EDEAF7; color: #5A4B9C; }
.listing-schools__shield.is-station   { background: #E2F1EA; color: #1E8A63; }
.listing-schools__shield svg { width: 20px; height: 20px; }

/* Themed distance circle (replaces the plain "0.1 mi" text). */
.listing-schools__dist {
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #0F2340;
    color: #FFFFFF;
    line-height: 1;
    box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 3px rgba(201, 168, 76, .45);
}
.listing-schools__dist-val { font-size: 14px; font-weight: 700; }
.listing-schools__dist-unit {
    font-size: 9px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #C9A84C;
    margin-top: 1px;
}

/* Data currency note */
.listing-schools__source {
    margin: 12px 0 0;
    font-size: 11px;
    color: #9BA8B4;
}