/* Parish explorer: heading, then a map column (toolbar, map, credits) beside the place list.
   On desktop the list column is exactly as tall as the toolbar and map and scrolls inside;
   on one-column layouts it follows the map so a selected place's details sit right under it. */
.parish-explorer { --parish-map-h:calc(var(--s-9) * 6); margin-bottom:var(--s-8); border-top:2px solid var(--rule-strong); padding-top:var(--s-5); }
.parish-explorer-heading { max-width:var(--measure); margin-bottom:var(--s-5); }
.parish-explorer-heading h2,.parish-explorer-heading p { margin:0; }
.parish-explorer-heading .g-eyebrow { margin-bottom:var(--s-2); }
.parish-explorer-heading .parish-explorer-lede { margin-top:var(--s-2); color:var(--ink-2); }

.parish-explorer-grid { display:grid; grid-template-columns:minmax(0,8fr) minmax(0,4fr); grid-template-areas:"map places" "credits ."; gap:0 var(--col-gap); align-items:start; }
.parish-map-column { grid-area:map; min-width:0; }
.parish-map-places { grid-area:places; align-self:stretch; position:relative; min-width:0; }
.parish-map-places-inner { position:absolute; inset:0; display:flex; flex-direction:column; }
.parish-map-credits { grid-area:credits; min-width:0; }

/* Toolbar */
.parish-map-tools { display:flex; flex-wrap:wrap; align-items:center; gap:var(--s-2); margin-bottom:var(--s-3); }
.parish-map-mode { flex:none; }
.parish-map-mode>button { min-width:var(--s-8); }
.parish-map-tools>.g-button { padding:var(--s-2) var(--s-4); }
.parish-map-tools>.parish-map-expand { margin-left:auto; }

/* Map */
.parish-map-frame { position:relative; scroll-margin-top:var(--s-4); }
.parish-map-canvas,.parish-map-fallback { width:100%; height:var(--parish-map-h); }
.parish-map-frame .parish-map-fallback { min-height:0; max-height:none; }
.parish-map-frame[data-state=loading] .parish-map-fallback { position:absolute; inset:0 0 auto; z-index:1; background:var(--lime-sunken); }
.parish-map-frame[data-state=ready] .parish-map-fallback { display:none; }
.parish-map-fallback path { fill:var(--lime-raised); stroke:var(--ink-3); stroke-width:2; }
.parish-map-fallback circle { fill:var(--celeste); }
.parish-map-fallback text { fill:var(--ink-inverse); font:600 var(--t-body)/var(--lh-dense) var(--sans); }
.parish-map-layer { position:absolute; top:var(--s-3); left:var(--s-3); z-index:2; padding-right:var(--s-4); background:var(--lime-raised); border:1px solid var(--rule); border-radius:var(--radius-ctl); color:var(--ink); font:600 var(--t-dense)/var(--lh-dense) var(--sans); }
.parish-map-frame .parish-map-status { max-width:none; margin:0; padding:var(--s-3); border-top:1px solid var(--rule); background:var(--lime-raised); color:var(--ink-2); font:var(--t-dense)/var(--lh-dense) var(--sans); }
.parish-map-canvas .maplibregl-ctrl-group { box-shadow:none; border:1px solid var(--rule); border-radius:var(--radius-ctl); background:var(--lime-raised); }
.parish-map-canvas .maplibregl-ctrl-group button { width:var(--hit); height:var(--hit); border-radius:var(--radius-ctl); padding:0; min-width:var(--hit); }
.parish-map-canvas .maplibregl-ctrl button:focus-visible,.parish-map-canvas canvas:focus-visible { outline:3px solid var(--celeste); outline-offset:4px; }
.parish-map-canvas .maplibregl-ctrl-attrib { font:var(--t-micro)/var(--lh-dense) var(--sans); color:var(--ink); background:var(--lime-raised); }
.parish-map-canvas .maplibregl-ctrl-attrib a { color:var(--celeste); }
.parish-map-canvas .maplibregl-cooperative-gesture-screen { font:var(--t-body)/var(--lh-body) var(--sans); }
/* Road warning: the marker element sits on the road coordinate with no size of its own. */
.parish-road-warning { width:0; height:0; pointer-events:none; }
.parish-road-point { position:absolute; left:calc(var(--s-3) / -2); top:calc(var(--s-3) / -2); width:var(--s-3); height:var(--s-3); border-radius:50%; background:var(--teja); box-sizing:border-box; border:2px solid var(--lime-raised); }
/* Reset the .g-map rule that sizes the static fallback map. */
.parish-road-warning svg { display:block; min-height:0; max-height:none; }
.parish-road-warning .parish-road-leader { position:absolute; left:0; top:0; width:var(--s-8); height:var(--s-6); overflow:visible; }
.parish-road-leader line { stroke:var(--teja); stroke-width:2; vector-effect:non-scaling-stroke; }
.parish-road-tag { position:absolute; left:var(--s-8); top:var(--s-6); transform:translateY(-50%); pointer-events:auto; white-space:nowrap; padding:var(--s-2) var(--s-3); border-color:var(--teja); color:var(--ink); }
.parish-road-tag:hover { border-color:var(--teja); color:var(--teja); }
.parish-road-warning .parish-road-sign { flex:none; width:var(--s-5); height:var(--s-5); }
.parish-road-sign path:first-child { fill:var(--teja); }
.parish-road-sign path:last-child { fill:none; stroke:var(--ink-inverse); stroke-width:2.5; stroke-linecap:square; }
/* Above the zoom buttons and the boundary toggle, so its close button stays reachable on phones. */
.parish-road-popup { z-index:3; width:calc(var(--s-9) * 3); }
.parish-road-popup .maplibregl-popup-content { padding:var(--s-4); border:1px solid var(--rule); border-radius:var(--radius); background:var(--lime-raised); color:var(--ink); box-shadow:var(--shadow-overlay); font:var(--t-dense)/var(--lh-dense) var(--sans); }
.parish-road-advisory { padding-top:var(--s-5); }
.parish-road-advisory p { margin:var(--s-2) 0; }
.parish-road-popup .maplibregl-popup-close-button { min-width:var(--hit); min-height:var(--hit); color:var(--ink); font:var(--t-head)/var(--lh-head) var(--sans); }
.parish-road-popup :focus-visible { outline:3px solid var(--celeste); outline-offset:4px; }

/* Credits */
.parish-map-credits .parish-map-credit { max-width:none; margin:var(--s-2) 0 0; font:var(--t-micro)/var(--lh-dense) var(--sans); color:var(--ink-3); }
.parish-map-credit a { color:var(--celeste); display:inline-flex; align-items:center; min-height:var(--hit); }
.parish-map-attribution { border-top:1px solid var(--rule); }
.parish-map-attribution summary { min-height:var(--hit); padding:var(--s-3) 0; cursor:pointer; font:600 var(--t-dense)/var(--lh-dense) var(--sans); color:var(--ink-2); }
.parish-map-attribution p { margin:0 0 var(--s-2); font:var(--t-micro)/var(--lh-dense) var(--sans); color:var(--ink-3); }

/* Numbered dots: the same marks as the map. Selected is azul noche, as on the map. */
.parish-place-number { flex:none; display:grid; place-items:center; width:var(--s-6); height:var(--s-6); border-radius:50%; background:var(--celeste); color:var(--ink-inverse); font:600 var(--t-dense)/1 var(--sans); }

/* Selected place */
.parish-place-detail { flex:none; margin-bottom:var(--s-4); padding:var(--s-4); border-top:2px solid var(--rule-strong); }
.parish-place-detail-head { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:start; gap:var(--s-3); margin-bottom:var(--s-3); }
.parish-place-detail-head .parish-place-number { background:var(--ink); }
.parish-place-detail .g-eyebrow { margin:0 0 var(--s-1); }
.parish-place-detail h3 { margin:0; font:700 var(--t-sub)/var(--lh-head) var(--sans); }
.parish-place-detail .parish-place-close { padding:var(--s-2) var(--s-3); }
.parish-place-detail .parish-place-summary { margin:0 0 var(--s-4); font:var(--t-dense)/var(--lh-dense) var(--sans); color:var(--ink-2); }
.parish-place-detail .g-actions { margin:0; gap:var(--s-2); }
.parish-place-detail .g-actions>.g-button { flex:1 1 auto; }

/* Filters and list */
.parish-place-filters { flex:none; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
.parish-filter-count { margin-left:var(--s-2); font-weight:400; }
.parish-map-places .parish-place-count { flex:none; max-width:none; margin:var(--s-3) 0 var(--s-2); font:var(--t-dense)/var(--lh-dense) var(--sans); color:var(--ink-2); }
.parish-place-list { flex:1 1 auto; min-height:0; overflow:auto; scrollbar-gutter:stable; }
.parish-place-list>li { position:relative; padding:var(--s-3); }
.parish-place-list>li:is(:hover,.is-hovered) { background:var(--lime-sunken); }
.parish-place-list>li.is-selected { background:var(--ochre-pale); }
.parish-place-list>li.is-selected .parish-place-number { background:var(--ink); }
.parish-place-list a { display:flex; align-items:center; gap:var(--s-3); min-height:var(--hit); font:700 var(--t-body)/var(--lh-dense) var(--sans); color:var(--ink); }
/* The whole row selects the place; the link keeps a short accessible name. */
.parish-place-list a::after { content:''; position:absolute; inset:0; }
.parish-place-list a:hover { color:var(--ink); text-decoration:none; }
.parish-place-list a:hover .parish-place-name { text-decoration:underline; }
.parish-place-text { display:flex; flex-direction:column; min-width:0; }
.parish-place-list .parish-place-category { font:400 var(--t-dense)/var(--lh-dense) var(--sans); color:var(--ink-3); }
.parish-place-list .parish-place-description { margin:var(--s-1) 0 0 calc(var(--s-6) + var(--s-3)); font:var(--t-dense)/var(--lh-dense) var(--sans); color:var(--ink-2); }

/* Expanded: the map fills the viewport; the list scrolls beside it. */
.parish-explorer.is-expanded { --parish-map-h:calc(100dvh - var(--s-9) * 2); position:fixed; inset:0; z-index:100; margin:0; padding:var(--s-5) var(--gutter); border:0; background:var(--lime); overflow:auto; }
.parish-explorer.is-expanded .parish-explorer-heading { margin-bottom:var(--s-3); }
.parish-explorer.is-expanded .parish-explorer-heading :is(.g-eyebrow,.parish-explorer-lede) { display:none; }

@media(max-width:850px) {
 .parish-explorer { --parish-map-h:calc(var(--s-9) * 4); }
 .parish-explorer-grid { grid-template-columns:minmax(0,1fr); grid-template-areas:"map" "places" "credits"; }
 .parish-map-places { margin-top:var(--s-4); }
 .parish-map-places-inner { position:static; }
 .parish-place-list { overflow:visible; }
 .parish-map-tools { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
 .parish-map-tools>.g-button { width:100%; }
 .parish-map-tools>.parish-map-expand { margin-left:0; }
 .parish-place-detail .g-actions>.g-button { flex-basis:100%; }
 .parish-explorer.is-expanded { --parish-map-h:60dvh; padding:var(--s-4); }
}