/**
 * Explore the Trail (page-explore.php, 3.0). Prefix .lce-.
 * Builds on atlas.css (.lca-, whose colour tokens .lce inherits through .lca) and
 * trail-explorer.css (.tx-); the hero and the cards come from t360.css.
 */

.lce { background: var(--cream); }

.lce-h2 {
	font-family: var(--font-heading, 'Playfair Display', Georgia, serif);
	color: var(--ink);
	font-size: clamp(1.5rem, 3vw, 2rem);
	line-height: 1.15;
	margin: 0 0 1rem;
}

/* hero pills, on the still */
.lce-pills { display: flex; flex-wrap: wrap; gap: .6rem; margin: 1.1rem 0 0; }
.lce-pill {
	display: inline-flex; align-items: center; gap: .35rem;
	padding: .55rem 1.05rem; border-radius: 999px;
	border: 1.5px solid rgba(250, 248, 245, .85);
	background: rgba(20, 12, 6, .38); color: #FAF8F5;
	font-weight: 700; font-size: .92rem; text-decoration: none;
	transition: background .2s;
}
.lce-pill:hover, .lce-pill:focus-visible { background: rgba(250, 248, 245, .2); color: #fff; }

/* chapters */
.lce-chapters { padding: 2.75rem 0 1.5rem; }
.lce-chapter-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 1rem; }

/* the map */
.lce-map { padding: 1.5rem 0 0; scroll-margin-top: calc(var(--header-height, 72px) + 8px); }
.lce-map-head { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.5rem; margin-bottom: .9rem; }
.lce-map-title { flex: 1 1 auto; min-width: 0; }
.lce-map-title .lce-h2 { margin: 0; }
.lce-stats { margin: .25rem 0 0; color: var(--muted); } /* trail-explorer.css's #8B7355 is 4.23:1 on cream; --muted is 4.64:1 */
.lce-switch { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; padding: 3px; background: #fff; }
.lce-switch-btn {
	appearance: none; border: 0; background: none; border-radius: 999px;
	padding: .45rem 1.1rem; font-weight: 700; font-size: .9rem; color: var(--ink-2); cursor: pointer;
}
.lce-switch-btn.is-on { background: var(--ink); color: var(--cream); }
.lce-switch-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.lce-today { flex: 1 1 100%; display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; }
.lce-today[hidden] { display: none; }
.lce-modes { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.lce-modes .lca-mode { width: auto; }
.lce .lca-mode-note { color: #5a3a20; } /* --muted is 4.10:1 on an active mode's tint (4.25:1 on hover); .lce-sub's brown is 8.49:1 or better */
.lce-bike-cta { font-weight: 700; color: var(--gold); text-decoration: none; }
.lce-bike-cta:hover { text-decoration: underline; }
.lce-bike-cta[hidden] { display: none; }
.lce-basemap-pick { flex: 1 1 100%; margin: 0; font-size: .85rem; color: var(--muted); }
/* A link inside running text is underlined: its gold on the muted text is 1.03:1, so colour alone does not tell it apart (axe link-in-text-block). */
.lce-basemap-pick a { color: var(--gold); text-decoration: underline; text-underline-offset: .15em; }
.lce-basemap-pick a[aria-current] { color: var(--ink); font-weight: 700; }

.lce-stage { height: clamp(560px, 80vh, 920px); }
.lce-stage .tx-map-wrap { height: auto; min-height: 0; }
#explore-map[data-mode="today"] .tx-scrub { display: none; }
.lce .lca-rail-toggle { top: 5rem; } /* below the zoom buttons */
.lce-map-note { font-size: .8rem; color: var(--muted); margin: .6rem auto 0; }
/* trail-explorer.css's #8B7355 is 4.19:1 on the scrubber; its place-label brown holds 8.8:1 even over a dark satellite map. */
.lce .tx-milestones-label { color: #5a3a20; }

/* provenance (atlas.css's part, on Explore). atlas.css's --teal summary is 3.05:1 on cream: #1f7a82 (4.76:1) and
   #94501f (5.78:1) are the darker pair atlas.css already uses in its popups. Running-text links are underlined:
   gold on the muted note is 1.03:1 (axe link-in-text-block). */
.lce .lca-prov-details summary { color: #1f7a82; }
.lce .lca-prov-details summary:hover { color: #94501f; }
.lce .lca-provenance p a { text-decoration: underline; text-underline-offset: .15em; }

/* popups */
.lce .tx-popup .mapboxgl-popup-content { padding: .55rem .8rem; border-radius: 8px; max-width: 250px; }
.lce-pop-still { position: relative; display: block; width: 100%; padding: 0; border: 0; background: var(--tan); cursor: pointer; }
.lce-pop-still img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.lce-pop-badge, .lce-pop-chip {
	position: absolute; padding: .15rem .5rem; border-radius: 999px;
	background: rgba(20, 12, 6, .82); color: #fff; font-size: .7rem; font-weight: 700;
}
.lce-pop-badge { right: .5rem; bottom: .5rem; }
.lce-pop-chip { left: .5rem; top: .5rem; }
.lce-pop-360 { margin: 0; padding: .6rem .85rem 0; font-size: .8rem; }
.lce-pop-360 a, .lce-pop-360 button {
	appearance: none; border: 0; background: none; padding: 0;
	color: var(--gold); font-weight: 700; cursor: pointer; text-decoration: none;
}
.lce-pop-360 a:hover, .lce-pop-360 button:hover { text-decoration: underline; }

/* night by night */
.lce-nights { padding: 2.75rem 0 3.5rem; }
.lce-sub { color: #5a3a20; max-width: 68ch; margin: -.5rem 0 1rem; }
.lce-filters { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.4rem; margin: 0 0 1.25rem; font-size: .9rem; color: var(--ink-2); }
.lce-filters label { display: inline-flex; align-items: center; gap: .45rem; }
.lce-filters input { accent-color: var(--gold); }
.lce-filters select { border: 1px solid var(--line); border-radius: 6px; padding: .3rem .5rem; background: #fff; color: var(--ink); }
.lce-count { margin-left: auto; color: var(--muted); font-variant-numeric: tabular-nums; }
.lce-chapter { margin: 0 0 2rem; }
.lce-chapter[hidden] { display: none; }
.lce-chapter-h {
	font-family: var(--font-heading, 'Playfair Display', Georgia, serif);
	color: var(--ink); font-size: 1.35rem; margin: 0 0 .8rem;
	scroll-margin-top: calc(var(--header-height, 72px) + 8px);
}
.lce-chapter-h span { font-size: .9rem; color: var(--muted); font-weight: 400; margin-left: .4rem; }
.lce-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1rem; }
.lce-grid .t360-card[hidden] { display: none; }

@media (max-width: 900px) {
	.lce-stage { height: auto; }
	.lce-stage .tx-map-wrap { height: clamp(460px, 72vh, 680px); }
}
@media (max-width: 560px) {
	.lce-count { margin-left: 0; flex-basis: 100%; }
	.lce-switch-btn { padding: .45rem .9rem; }
	.lce .mapboxgl-ctrl-scale { display: none; } /* the scrubber spans the bottom edge */
}
/* Feedback lives in the page (Ryan, Task 29b): the site's floating Feedback pill (the lcr-feedback plugin's
   #lcr-fb-launcher) is hidden here so it never sits on the map or its controls, and the Feedback button in the map
   head (template-parts/feedback-button.php) opens the same form. Keyed to this template's body class, so no other
   page ever loses the pill. */
body.page-template-page-explore #lcr-fb-launcher { display: none; }
.lce-feedback {
	display: inline-flex; align-items: center; gap: .4rem;
	appearance: none; border: 1px solid var(--line); border-radius: 999px; background: #fff;
	padding: .5rem 1.05rem; font-weight: 700; font-size: .9rem; color: var(--ink-2); cursor: pointer;
}
.lce-feedback i { color: var(--gold); }
.lce-feedback:hover { border-color: var(--gold); }
.lce-feedback:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
/* The scrubber stays centred and sits above the map's bottom 40px, where Mapbox's wordmark and attribution must stay
   visible (Mapbox's terms). */
.lce { --scrub-inset: 12px; }
.lce .tx-scrub {
	--scrub-w: min(680px, calc(100% - 2 * var(--scrub-inset)));
	left: calc((100% - var(--scrub-w)) / 2);
	right: auto;
	bottom: 40px;
	width: var(--scrub-w);
	transform: none;
}
/* Mapbox's scale bar (up to 100px wide) sits above its wordmark, bottom left, and the centred scrubber reaches it on a
   map under about 910px wide. Below a 1304px window (a map under 960px beside the 344px rail, with room to spare) the
   scale shows only in Today mode, when the scrubber is away (it already hides at 560px and below). */
@media (max-width: 1303px) {
	#explore-map:not([data-mode="today"]) .mapboxgl-ctrl-scale { display: none; }
}
@media (max-width: 720px) {
	.lce { --scrub-inset: 8px; }
}
@media (prefers-reduced-motion: reduce) {
	.lce-pill { transition: none; }
}