/*
 * Itinerary map. Loaded only on pages with a route map, after site.css.
 * Always all of India, with each stop's nights labelled on the map and nothing beside or beneath it.
 * Text sizes follow the map's own frame (container queries), so it fits a full-width section,
 * a half-width column or a narrow card alike.
 */

.route-map { padding-bottom: var(--section); }
.route-map__frame { --route-blue: #4D6FD1; --route-ink: #1E1E1E; --route-muted: #6B6862;
    container-type: inline-size; position: relative; margin: 0; background: #FFFFFF; border: 1px solid #E4E1DB; }

/* One still view, so it never captures scrolling or taps. India is a little taller than wide. */
.route-map__map { aspect-ratio: 1 / 1.02; width: 100%; background: #FFFFFF; }
.route-map__frame .leaflet-container { background: #FFFFFF; font-family: var(--font-body); cursor: default; }
.route-map__map--no-geo { background: #F4F4F2; }

/* Labels: a white tag with the stop's number, name and nights, at the end of its leader line. */
.leaflet-marker-icon.route-callout { overflow: visible; }
.route-callout > span { position: absolute; display: flex; align-items: center; gap: 0.35em; white-space: nowrap;
    padding: 0.3em 0.55em 0.3em 0.35em; background: #FFFFFF; border: 1px solid #D9D6D0; border-radius: 999px;
    font: 400 0.875rem/1 var(--font-body); color: var(--route-ink); box-shadow: 0 1px 4px rgba(30, 30, 30, 0.12); }
.route-callout--left > span { right: 0; top: 0; transform: translateY(-50%); }
.route-callout--right > span { left: 0; top: 0; transform: translateY(-50%); }
.route-callout--top > span { left: 0; bottom: 0; transform: translateX(-50%); }
.route-callout--bottom > span { left: 0; top: 0; transform: translateX(-50%); }
.route-callout__n { display: grid; place-items: center; width: 1.45em; height: 1.45em; border-radius: 50%; background: #E9E8E5; border: 1.5px solid var(--route-ink); font-size: 0.8em; font-weight: 700; }
.route-callout__name { font-weight: 700; }
.route-callout__nights { color: var(--route-muted); }
.route-callout__nights::before { content: "·"; margin-right: 0.35em; }
.route-callout--park > span { border-color: var(--route-blue); }
.route-callout--park .route-callout__n { background: #DCE4FA; border-color: var(--route-blue); color: var(--route-blue); }

.route-sea { font: italic 400 0.875rem/18px var(--font-body); color: var(--route-muted); text-align: center; white-space: nowrap; }

.route-map__north { position: absolute; top: 0.6rem; right: 0.6rem; z-index: 500; width: 14px; height: 20px; fill: var(--route-ink); }

/* Medium frames: smaller tags. */
@container (max-width: 519px) {
    .route-callout > span { font-size: 0.75rem; }
    .route-sea { font-size: 0.75rem; }
}
/* Small frames (a card or sidebar): short names, compact tags, no sea names. */
@container (max-width: 379px) {
    .route-callout > span { font-size: 0.6875rem; padding: 0.25em 0.45em 0.25em 0.25em; gap: 0.3em; }
    .route-callout__name { font-size: 0; }
    .route-callout__name::after { content: attr(data-short); font-size: 0.6875rem; }
    .route-sea { display: none; }
}
@container (min-width: 520px) {
    .route-map__north { top: 1rem; right: 1rem; width: 20px; height: 28px; }
}
@container (min-width: 960px) {
    .route-map__map { aspect-ratio: 7 / 5; }
    .route-callout > span { font-size: 0.9375rem; }
}

/* Trial page only: the same map at three frame sizes. */
.route-demo { display: grid; gap: 2.5rem; margin-top: 2rem; }
.route-demo__label { margin: 0 0 0.6rem; font: 700 var(--text-xs)/1 var(--font-body); letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-deep); }
.route-demo__row { display: grid; gap: 2.5rem; }
.route-demo__half { max-width: 36rem; }
@media (min-width: 60rem) {
    .route-demo__row { grid-template-columns: minmax(0, 1fr) 20rem; align-items: start; }
}
.route-map__note { margin-top: 1.25rem; font-size: var(--text-sm); color: var(--charcoal-soft); }
.route-map__note a { color: var(--green); }