/**
 * assets/css/chanua-trip-info.css
 * The richer single-page design added to Destination/Safari/Trek/Day
 * Trip pages: quick-facts strip, map, wildlife field notes, climate
 * guide, inclusions/exclusions, gems, packing list, health & emergency
 * panels, in-page gallery. Styled to read as a boutique operator's
 * briefing document — serif headings, gold kickers, hairline rules,
 * generous whitespace — rather than a utility checklist. Shares design
 * tokens (--cs-*) with chanua-home.css / chanua-directory.css.
 * Prefix: .cs-trip-
 */

/* == Quick facts strip ==
   One clean horizontal band, thin vertical hairlines between entries
   instead of individual boxed cards — reads like a museum placard or a
   boutique hotel spec sheet, not a dashboard. */
.cs-trip-facts {
	display: flex;
	flex-wrap: wrap;
	background: var(--cs-ivory);
	border: 1px solid var(--cs-hair);
	border-radius: 18px;
	margin-bottom: 36px;
}
.cs-trip-fact {
	flex: 1 1 220px;
	padding: 20px 26px;
	display: flex;
	flex-direction: column;
	gap: 7px;
	border-left: 1px solid var(--cs-hair);
}
.cs-trip-fact:first-child { border-left: none; }
.cs-trip-fact svg { display: none; }
.cs-trip-fact__label { font-family: var(--cs-sans); font-size: .68rem; text-transform: uppercase; letter-spacing: .1em; color: var(--cs-gold-deep); font-weight: 600; }
.cs-trip-fact__value { font-family: var(--cs-display-serif); font-size: 1.06rem; color: var(--cs-ink); line-height: 1.35; }

/* == Section headers ==
   Gold kicker + serif heading, same voice as the rest of the site
   (see .cs-kick / .cs-h2 in chanua-home.css) — no icon clutter. A thin
   rule under the heading gives each section a quiet, deliberate start. */
.cs-trip-section { margin: 48px 0; }
.cs-trip-section:first-child { margin-top: 0; }
.cs-trip-section__head { position: relative; margin-bottom: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--cs-hair); }
.cs-trip-section__head::after {
	content: "";
	position: absolute; left: 0; bottom: -1px;
	height: 1px; width: 0;
	background: var(--cs-gold);
	transition: width 1s cubic-bezier(.2,.7,.2,1);
}
.cs-trip-section__head.is-in::after { width: 72px; }
.cs-trip-section__head .cs-kick { margin-bottom: .5rem; }
.cs-trip-section__title { font-family: var(--cs-display-serif); font-weight: 400; font-size: 1.4rem; color: var(--cs-ink); margin: 0; letter-spacing: .01em; }
.cs-trip-section__note { font-size: .82rem; font-style: italic; color: var(--cs-ink-faint); margin: -6px 0 18px; }

/* == Magazine spread ==
   A real editorial layout for the two sections that pair a photo (or
   the map) against a block of text: the image fills one whole side
   edge-to-edge, and the text sits on the article's own plain background
   on the other — no separate colour panel — the way a magazine spread
   separates picture from caption rather than boxing both together. Two
   calls: chanua_render_map_facts_section() (map | quick facts) and the
   photo variant inside chanua_render_inclusions_exclusions() (photo |
   what's included). Stacks to one column on narrow screens, photo/map
   first. */
.cs-mag-split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: stretch;
	/* No boxed panel — the text side sits on the article's own
	   background (the same white .cs-dir-single__content every other
	   section already uses), only the photo/map side has any fill. */
	background: transparent;
	border-radius: 24px;
	overflow: hidden;
	/* A real safari's inclusions/exclusions lists can run to a dozen-plus
	   lines — without a cap this spread grows as tall as that list and
	   reads as one long card instead of the compact, fixed-size spread
	   in the reference. Same fixed-height + internal-scroll treatment as
	   .cs-story, and the same 460px, so the two component types read as
	   one consistent card size down the page. */
	height: 460px;
}
.cs-mag-split__media { position: relative; height: 100%; background: var(--cs-ivory); }
.cs-mag-split__media img {
	position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.cs-mag-split__media .cs-trip-map { position: absolute; inset: 0; width: 100%; height: 100%; border: none; }
.cs-mag-split__body {
	/* Same fix as .cs-story__list: a short facts list (as few as one or
	   two entries — a destination's "Best time to visit"/"Climate", say)
	   doesn't fill the fixed 460px row the way a long inclusions list
	   does, and height:100% left it stopping partway down with a dead
	   gap underneath while the map/photo side kept filling the whole
	   row. align-self (the grid property) centers the body's own box
	   when it's shorter than the row; a body long enough to need its
	   internal scroll already fills the row, so this doesn't touch that
	   behavior. */
	max-height: 100%; align-self: center; overflow-y: auto; scrollbar-width: thin;
	padding: clamp(28px, 4vw, 46px);
	display: flex; flex-direction: column; justify-content: flex-start;
}
@media (max-width: 720px) {
	.cs-mag-split { grid-template-columns: 1fr; height: auto; }
	.cs-mag-split__media { height: 260px; }
	.cs-mag-split__body { height: auto; max-height: 340px; overflow-y: auto; }
}

/* Quick facts, restyled as a vertical stat list for the magazine
   spread's text side — same voice as .cs-trip-fact (gold sans label,
   serif value) but stacked with a hairline rule between entries
   instead of laid out as a horizontal strip, since this column is
   narrower than the full content width now. */
.cs-mag-facts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 22px; }
.cs-mag-facts li { display: flex; flex-direction: column; gap: 6px; padding-bottom: 22px; border-bottom: 1px solid rgba(44,37,23,.14); }
.cs-mag-facts li:last-child { border-bottom: none; padding-bottom: 0; }
.cs-mag-facts__label { font-family: var(--cs-sans); font-size: .68rem; text-transform: uppercase; letter-spacing: .1em; color: var(--cs-gold-deep); font-weight: 600; }
.cs-mag-facts__value { font-family: var(--cs-display-serif); font-size: 1.28rem; color: var(--cs-ink); line-height: 1.3; }

/* The inclusions/exclusions list nested inside the magazine spread's
   text column is already sharing that column with a full-bleed photo,
   so the included/not-included pair stack instead of trying to fit a
   second two-column split inside the first. */
.cs-mag-split__body .cs-trip-incl { grid-template-columns: 1fr; gap: 26px; }

/* == Map == */
.cs-trip-map {
	width: 100%;
	height: 360px;
	overflow: hidden;
	border: 1px solid var(--cs-hair);
	background: var(--cs-ivory);
}
/* Shown only when Leaflet never loaded (blocked CDN / offline / privacy
   extension) — chanua-map.js empties this container before it builds the
   real map, so these styles never apply on a working map. Centred in the
   same box the map would have filled, so the layout doesn't shift either
   way. */
.cs-trip-map__fallback {
	height: 100%;
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	gap: 10px; padding: 24px; text-align: center;
}
.cs-trip-map__fallback-label {
	font-family: var(--cs-sans); font-size: .68rem; letter-spacing: .14em;
	text-transform: uppercase; color: var(--cs-ink-faint);
}
.cs-trip-map__fallback ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; justify-content: center; }
/* This section renders inside <article class="cs-dir-single__content">,
   whose own list styling draws a gold ring ::before every <li> and adds
   a hairline border under it (see chanua-directory.css). Both leak onto
   this fallback list and put a stray bullet beside each place name, so
   they're switched off here specifically. */
.cs-trip-map__fallback li { margin: 0; padding: 0; border-bottom: none; }
.cs-trip-map__fallback li::before { content: none; display: none; }
.cs-trip-map__fallback a {
	font-family: var(--cs-display-serif); font-size: 1.02rem; color: var(--cs-green-deep);
	text-decoration: underline; text-decoration-color: rgba(58,92,58,.35); text-underline-offset: 3px;
}
.cs-trip-map__fallback a:hover { text-decoration-color: currentColor; }
.chanua-map__marker span {
	display: flex; align-items: center; justify-content: center;
	width: 100%; height: 100%;
	background: var(--cs-gold-deep); color: var(--cs-white);
	border: 2px solid var(--cs-white); border-radius: 50%;
	font-family: var(--cs-sans); font-size: .66rem; font-weight: 600; letter-spacing: .02em;
	box-shadow: 0 2px 10px rgba(20,15,4,.3);
}
.chanua-map__marker--stop span { background: var(--cs-green-deep); }
.leaflet-popup-content-wrapper { border-radius: 14px; font-family: var(--cs-sans); box-shadow: 0 10px 30px rgba(20,15,4,.2); }
.leaflet-popup-content { font-size: .82rem; color: var(--cs-ink); margin: 10px 14px; font-family: var(--cs-display-serif); }
.leaflet-popup-tip { box-shadow: none; }

/* == Vegetation / climate note callout ==
   A quiet editorial pull-quote treatment rather than a boxed alert. */
.cs-trip-callout {
	font-family: var(--cs-display-serif);
	font-style: italic;
	font-size: 1.08rem;
	line-height: 1.7;
	color: var(--cs-ink-soft);
	padding-left: 22px;
	border-left: 2px solid var(--cs-gold);
	margin: 0;
}

/* == Wildlife field notes ==
   A refined list, not badge pills — species set in the body serif,
   the sighting likelihood spelled out in small gold caps on the right,
   joined by a thin dotted leader rule, like a well-typeset table of
   contents. Self-explanatory without a colour-key legend. */
.cs-trip-wildlife { list-style: none; margin: 0; padding: 0; }
.cs-trip-wildlife__row {
	display: flex;
	align-items: baseline;
	gap: 10px;
	padding: 11px 0;
	border-bottom: 1px solid var(--cs-hair);
}
.cs-trip-wildlife__row:last-child { border-bottom: none; }
.cs-trip-wildlife__species { font-family: var(--cs-display-serif); font-size: 1.02rem; color: var(--cs-ink); white-space: nowrap; }
.cs-trip-wildlife__rule { flex: 1; border-bottom: 1px dotted var(--cs-ink-faint); opacity: .5; transform: translateY(-4px); }
.cs-trip-wildlife__rating { font-family: var(--cs-sans); font-size: .68rem; text-transform: uppercase; letter-spacing: .09em; font-weight: 600; white-space: nowrap; }
.cs-trip-wildlife__rating--excellent { color: var(--cs-green-deep); }
.cs-trip-wildlife__rating--good { color: var(--cs-green); }
.cs-trip-wildlife__rating--seasonal { color: var(--cs-gold-deep); }
.cs-trip-wildlife__rating--rare { color: var(--cs-ink-faint); }

/* == Birds — a flowing italic list, not tag pills == */
.cs-trip-birds { font-family: var(--cs-display-serif); font-style: italic; font-size: 1.02rem; line-height: 2; color: var(--cs-ink-soft); margin: 0; }

/* == Seasonal climate guide ==
   A quiet table: thin rules between rows, serif season names, no
   boxed cards competing with the rest of the page. */
.cs-trip-climate { border-top: 1px solid var(--cs-hair); }
.cs-trip-climate__col {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: 16px 32px;
	padding: 16px 0;
	border-bottom: 1px solid var(--cs-hair);
}
.cs-trip-climate__label { font-family: var(--cs-display-serif); font-size: 1.04rem; color: var(--cs-ink); }
.cs-trip-climate__months { font-family: var(--cs-sans); font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; color: var(--cs-ink-faint); margin-top: 3px; }
.cs-trip-climate__stats { display: flex; gap: 32px; }
.cs-trip-climate__stat { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.cs-trip-climate__stat span { font-family: var(--cs-sans); font-size: .64rem; text-transform: uppercase; letter-spacing: .06em; color: var(--cs-ink-faint); }
.cs-trip-climate__stat strong { font-family: var(--cs-display-serif); font-weight: 400; font-size: .98rem; color: var(--cs-gold-deep); }

/* == Inclusions / Exclusions ==
   Restrained iconography — a thin gold check, a faint ink cross, never
   traffic-light red/green. */
.cs-trip-incl { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 36px; }
.cs-trip-incl__col h4 {
	font-family: var(--cs-sans); font-size: .7rem; text-transform: uppercase; letter-spacing: .1em;
	margin: 0 0 14px; color: var(--cs-gold-deep); font-weight: 600; padding-bottom: 10px; border-bottom: 1px solid var(--cs-hair);
}
.cs-trip-incl__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.cs-trip-incl__list li { display: flex; gap: 10px; font-size: .9rem; color: var(--cs-ink-soft); line-height: 1.5; padding: 8px 0; border-bottom: 1px solid var(--cs-hair); }
.cs-trip-incl__list li:last-child { border-bottom: none; }
.cs-trip-incl__list svg { width: 14px; height: 14px; flex-shrink: 0; margin-top: 3px; }
.cs-trip-incl__col--yes svg { color: var(--cs-gold); }
.cs-trip-incl__col--no svg { color: var(--cs-ink-faint); }
.cs-trip-incl__col--no li { color: var(--cs-ink-faint); }
@media (max-width: 600px) { .cs-trip-incl { grid-template-columns: 1fr; row-gap: 28px; } }

/* == Gems / insider tips ==
   Field-note cards: a serif italic voice, thin gold rule, no gradient
   fills or busy borders. */
.cs-trip-gems { display: flex; flex-direction: column; }
.cs-trip-gem {
	display: flex; gap: 16px; align-items: flex-start;
	padding: 16px 0; border-bottom: 1px solid var(--cs-hair);
}
.cs-trip-gem:last-child { border-bottom: none; }
.cs-trip-gem svg { width: 16px; height: 16px; color: var(--cs-gold); flex-shrink: 0; margin-top: 4px; }
.cs-trip-gem p { margin: 0; font-family: var(--cs-display-serif); font-style: italic; font-size: 1.02rem; color: var(--cs-ink-soft); line-height: 1.65; }

/* == Photo gallery ==
   Graduated sizing on the first tile (same "biggest thing first" device
   as .cs-dir-card in chanua-directory.css) instead of a uniform grid of
   identical squares — competitive research into editorial travel sites
   flagged varied image proportions as a cheap way to add rhythm to a
   photo grid. Position-based, so it applies wherever this gallery
   renders with no per-template markup needed. */
.cs-trip-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 4px; }
.cs-trip-gallery__item { margin: 0; overflow: hidden; background: var(--cs-ivory); }
.cs-trip-gallery__item img { display: block; width: 100%; height: 220px; object-fit: cover; transition: transform .7s cubic-bezier(.2,.7,.2,1); }
.cs-trip-gallery__item:first-child:not(:only-child) { grid-column: span 2; grid-row: span 2; }
.cs-trip-gallery__item:first-child:not(:only-child) img { height: 100%; min-height: 320px; }
@media (max-width: 560px) {
	.cs-trip-gallery__item:first-child:not(:only-child) { grid-column: span 1; grid-row: span 1; }
	.cs-trip-gallery__item:first-child:not(:only-child) img { min-height: 220px; }
}
.cs-trip-gallery__item:hover img { transform: scale(1.04); }
/* "Photo: <name>" — plain attribution, not styled to resemble a written
   caption (see the doc comment in chanua_render_gallery_section()) —
   this theme doesn't collect real per-photo captions yet. */
.cs-trip-gallery__item figcaption { font-family: var(--cs-sans); font-size: .68rem; letter-spacing: .03em; color: var(--cs-ink-faint); padding: 8px 2px; }
.cs-trip-gallery__item figcaption a { color: var(--cs-ink-faint); text-decoration: underline; text-decoration-color: rgba(154,139,107,.4); }
.cs-trip-gallery__item figcaption a:hover { color: var(--cs-gold-deep); text-decoration-color: currentColor; }

/* == Highlights showcase (the "story" component) ==
   inc/chanua-trip-info.php, chanua_render_highlights_showcase() +
   assets/js/chanua-story.js. A synced list-and-photo layout: click an
   item on the left, its photo crossfades in on the right — the same
   interaction Visit The USA uses for its "story" sections (Silver
   Screen Dreams, etc.), sitting directly on the article's own plain
   background rather than a separate colour panel. Built dependency-free
   (no GSAP) so it still works with motion
   disabled. */
.cs-story-panel {
	/* No boxed panel — this sits directly on the article's own
	   background (the .cs-dir-single__content white, same as every
	   other section around it), not a separate colour block. */
	background: transparent; padding: 0;
}
/* A fixed, compact height — Visit The USA's own "story" cards are never
   more than about one screen-height's worth regardless of how many
   items are in the list; a highlight list running to 8+ items shouldn't
   make the whole section keep growing taller, it should scroll inside
   this same modest frame instead. .cs-story__list scrolls internally
   when it needs to; the photo panel always fills the fixed height
   exactly, never stretching taller to chase a long list. */
.cs-story { display: grid; grid-template-columns: 1fr 1.3fr; gap: clamp(20px, 4vw, 40px); height: 460px; }
/* A short highlight list (as few as 3-4 items) doesn't fill the fixed
   460px frame the way a long one does — left at height:100% with no
   vertical centering, it used to just stop partway down and leave a
   dead gap under the last item while the photo kept filling the whole
   row. align-self (a grid property, not the internal flex alignment)
   centers the list's own box in that case; a list long enough to need
   its internal scroll already fills the full row, so centering has
   nothing to do there and the scroll-from-the-top behavior is untouched. */
.cs-story__list { position: relative; display: flex; flex-direction: column; padding-left: 4px; max-height: 100%; align-self: center; overflow-y: auto; scrollbar-width: thin; }
/* The connecting vertical line down the markers — Visit The USA's
   timeline touch, distinguishing this from a plain divided list. */
.cs-story__list::before {
	content: ""; position: absolute; left: 7.5px; top: 22px; bottom: 22px; width: 1px;
	background: var(--cs-hair);
}
.cs-story__item {
	position: relative; z-index: 1;
	display: flex; align-items: center; gap: 14px; width: 100%; text-align: left;
	background: none; border: 0; border-top: 1px solid var(--cs-hair); padding: 18px 4px;
	cursor: pointer; font: inherit; color: inherit;
}
.cs-story__list .cs-story__item:last-child { border-bottom: 1px solid var(--cs-hair); }
.cs-story__item-dot {
	width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
	border: 1px solid var(--cs-ink-faint); background: var(--cs-white);
	transition: background .25s ease, border-color .25s ease;
}
.cs-story__item:hover .cs-story__item-title { color: var(--cs-gold-deep); }
.cs-story__item.is-active .cs-story__item-dot { background: var(--cs-gold); border-color: var(--cs-gold); }
.cs-story__item-title { font-family: var(--cs-display-serif); font-size: 1.08rem; line-height: 1.35; color: var(--cs-ink-soft); transition: color .25s ease; }
.cs-story__item.is-active .cs-story__item-title { color: var(--cs-ink); font-weight: 500; }
.cs-story__media { position: relative; height: 100%; border-radius: 22px; overflow: hidden; background: var(--cs-ivory); }
.cs-story__media img {
	position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
	opacity: 0; transition: opacity .6s ease;
}
.cs-story__media img.is-active { opacity: 1; }
@media (max-width: 720px) {
	.cs-story { grid-template-columns: 1fr; height: auto; }
	.cs-story__list { height: auto; max-height: 300px; }
	/* Stacked layout has no list height to match, so the photo needs an
	   explicit ratio of its own here. */
	.cs-story__media { order: -1; height: auto; aspect-ratio: 16 / 10; }
}

/* == Photo/media call-to-action pill ==
   The small "Play on the Gulf" / "Discover Main Street" button Visit
   The USA overlays on its own story photos — a real link (the page's
   own enquiry URL, already used for the sidebar's "Plan a trip" button,
   never a new invented destination), not decoration. Used on
   .cs-story__media above and the photo side of
   chanua_render_inclusions_exclusions()'s magazine spread; omitted
   wherever a caller doesn't pass a URL (the map has no sensible "plan
   a trip" action of its own). */
/* .cs-dir-single__content a's generic prose-link underline (green,
   always-on) otherwise wins over this on specificity alone, since this
   pill is itself an <a> inside that same article column — the extra
   .cs-dir-single__content qualifier below is only to out-rank that
   rule, not because this pill only ever appears there. */
.cs-dir-single__content .cs-media-cta,
.cs-media-cta {
	position: absolute; z-index: 2; left: 18px; bottom: 18px;
	display: inline-flex; align-items: center; gap: 12px;
	font-family: var(--cs-sans); font-size: .84rem; font-weight: 700; letter-spacing: .01em;
	color: var(--cs-near-black); background: var(--cs-gold-soft);
	border-radius: 999px; padding: 8px 8px 8px 20px; text-decoration: none;
	box-shadow: 0 10px 24px rgba(10,8,4,.28);
	transition: transform .2s ease, background-color .2s ease;
}
.cs-dir-single__content .cs-media-cta:hover,
.cs-media-cta:hover { transform: translateY(-2px); background: var(--cs-gold); color: var(--cs-near-black); text-decoration: none; }
.cs-media-cta__arrow {
	width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
	background: var(--cs-near-black); color: #fff;
	display: flex; align-items: center; justify-content: center; font-size: 1rem;
}

/* == Packing list ==
   A clean two-column reading list, thin gold check mark rather than a
   bootstrap-green tick. */
.cs-trip-packing { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 4px 28px; }
.cs-trip-packing li { display: flex; gap: 10px; font-size: .89rem; color: var(--cs-ink-soft); line-height: 1.55; padding: 9px 0; border-bottom: 1px solid var(--cs-hair); }
.cs-trip-packing li::before { content: ""; flex-shrink: 0; width: 6px; height: 6px; margin-top: 7px; border-radius: 50%; border: 1px solid var(--cs-gold); }
@media (max-width: 600px) { .cs-trip-packing { grid-template-columns: 1fr; } }

/* == Health precautions ==
   Quiet stacked entries, no boxed borders — serif heading, thin rule
   beneath each, matching the wildlife/climate treatment above. */
.cs-trip-health { display: flex; flex-direction: column; }
.cs-trip-health__item { padding: 16px 0; border-bottom: 1px solid var(--cs-hair); }
.cs-trip-health__item:last-child { border-bottom: none; }
.cs-trip-health__item h4 { font-family: var(--cs-display-serif); font-weight: 400; font-size: 1rem; color: var(--cs-ink); margin: 0 0 6px; }
.cs-trip-health__item p { margin: 0; font-size: .87rem; color: var(--cs-ink-soft); line-height: 1.6; }
.cs-trip-disclaimer { font-size: .76rem; color: var(--cs-ink-faint); font-style: italic; margin-top: 14px; }

/* == Emergency numbers ==
   Used to be a solid near-black sidebar card; now it's the same plain,
   un-boxed stacked-entry voice as .cs-trip-health right above it (this
   section used to be the sidebar's own thing, now it's just the last
   practical-info block in the article, so it should read as one of the
   family rather than a leftover dark panel). Still visually distinct —
   gold icon + heading — just not a filled box. */
.cs-trip-emergency h3 {
	font-family: var(--cs-display-serif); font-weight: 400; font-size: 1.08rem; margin: 0 0 4px; color: var(--cs-ink);
	display: flex; align-items: center; gap: 9px; letter-spacing: .01em;
}
.cs-trip-emergency h3 svg { width: 17px; height: 17px; color: var(--cs-gold-deep); }
.cs-trip-emergency p.cs-trip-disclaimer { margin-bottom: 16px; margin-top: 0; }
.cs-trip-emergency__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.cs-trip-emergency__list li { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: .84rem; border-top: 1px solid var(--cs-hair); padding: 12px 0; }
.cs-trip-emergency__list li:first-child { border-top: none; padding-top: 0; }
.cs-trip-emergency__label { color: var(--cs-ink-faint); font-family: var(--cs-sans); }
.cs-trip-emergency__value { font-family: var(--cs-display-serif); color: var(--cs-ink); font-size: 1rem; white-space: nowrap; }
.cs-trip-emergency__value a { color: var(--cs-gold-deep); text-decoration: none; border-bottom: 1px solid rgba(138,109,53,.4); }
.cs-trip-emergency__value a:hover { border-bottom-color: var(--cs-gold-deep); }

@media (max-width: 900px) {
	.cs-trip-fact { flex-basis: 45%; border-left: none; border-top: 1px solid var(--cs-hair); }
	.cs-trip-fact:first-child { border-top: none; }
}

/* == Related content ==
   Destination <-> Safari cross-links (inc/chanua-trip-info.php,
   chanua_render_related_safaris_section() / _destinations_section()).
   A near-seamless photo mosaic — full-bleed image, sharp corners, a
   hairline seam instead of a gap — matching the literal reference this
   was built from (Easia Travel's destinations page: big edge-to-edge
   country tiles, name overlaid, no card chrome), rather than a rounded,
   gapped "card" treatment. No markup changes were needed: the pill/
   title/price were always siblings inside .cs-related-card__body, so
   this is a pure re-skin via CSS (the scrim is a ::after, not a new
   element), and it updates every related-content grid on every single
   template at once, since they all share this one class. The first
   tile in a grid of 3+ spans the full width as a wide banner, echoing
   that same one-wide-then-grid rhythm. The chip row (Destinations on
   this route) stays a lighter-weight, single-line treatment since it's
   usually a short list rather than a set of things to browse. */
.cs-related-grid {
	position: relative;
	/* Real gutters, not a hairline seam — the reference (Easia's
	   destinations grid) lets its own page background breathe between
	   tiles rather than butting them edge-to-edge, which is what was
	   reading as "still looks nothing like it" even with the right tile
	   shape underneath. */
	display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 22px;
	background: transparent;
}
.cs-related-grid > .cs-related-card:first-child:not(:only-child) {
	grid-column: 1 / -1;
	aspect-ratio: 21 / 7;
}
.cs-related-grid > .cs-related-card:first-child:not(:only-child) .cs-related-card__title { font-size: 2rem; }
/* Same graduated big/medium/small mosaic as the archive grids
   (.cs-dir-grid in chanua-directory.css) — a wide hero tile, then two
   medium ones, then the regular small grid — for the same editorial
   rhythm here on the single-page related-content sections. */
.cs-related-grid > .cs-related-card:nth-child(2):not(:only-child),
.cs-related-grid > .cs-related-card:nth-child(3):not(:only-child) {
	grid-column: span 2;
	aspect-ratio: 5 / 4;
}
.cs-related-grid > .cs-related-card:nth-child(2):not(:only-child) .cs-related-card__title,
.cs-related-grid > .cs-related-card:nth-child(3):not(:only-child) .cs-related-card__title {
	font-size: 1.7rem;
}
@media (max-width: 720px) {
	.cs-related-grid > .cs-related-card:nth-child(2):not(:only-child),
	.cs-related-grid > .cs-related-card:nth-child(3):not(:only-child) {
		grid-column: 1 / -1;
		aspect-ratio: 3 / 4;
	}
}
.cs-related-card {
	position: relative;
	display: block; overflow: hidden; border-radius: 22px;
	aspect-ratio: 3 / 4;
	background: var(--cs-champagne);
	text-decoration: none;
}
.cs-related-card:hover .cs-related-card__media img { transform: scale(1.06); }
.cs-related-card::after {
	content: ""; position: absolute; inset: 0; pointer-events: none;
	background: linear-gradient(180deg, rgba(10,8,4,0) 40%, rgba(10,8,4,.85) 100%);
}
.cs-related-card__media { position: absolute; inset: 0; display: block; overflow: hidden; }
.cs-related-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.cs-related-card__media--fallback {
	background: linear-gradient(150deg, rgba(221,201,163,.6), rgba(239,230,211,.4));
}
.cs-related-card__body {
	position: relative; z-index: 1;
	height: 100%; padding: 22px 24px; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px;
}
.cs-related-card__pill {
	align-self: flex-start; font-size: .64rem; letter-spacing: .06em; text-transform: uppercase;
	font-weight: 700; color: var(--cs-near-black); background: var(--cs-gold-soft);
	border-radius: 999px; padding: 3px 9px; margin-bottom: 2px;
}
.cs-related-card__title {
	font-family: var(--cs-display-serif); font-size: 1.45rem; font-weight: 500; line-height: 1.2;
	color: #fff; text-shadow: 0 2px 12px rgba(0,0,0,.35);
}
/* Only the official-safaris showcase passes a tagline through today (see
   chanua_render_official_safaris_showcase() in inc/chanua-trip-info.php)
   — kept as a generic .cs-related-card part rather than a one-off class
   so any future caller of this same card can use it too. */
.cs-related-card__tagline {
	font-size: .86rem; line-height: 1.4; color: rgba(255,255,255,.82);
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.cs-related-card__price { font-family: var(--cs-sans); font-size: .8rem; font-weight: 600; letter-spacing: .02em; color: var(--cs-gold-soft); }
/* A modelled running-cost estimate (inc/chanua-price-estimate.php), same
   reasoning as .cs-dir-card__price--estimate in chanua-directory.css —
   softer and lighter than a real price, never bold/confirmed-looking. */
.cs-related-card__price--estimate { color: rgba(255,255,255,.72); font-weight: 500; font-style: italic; }
.cs-related-card__price--estimate span { font-style: normal; margin-left: 1px; cursor: help; }

/* == Official safaris showcase (archive-safari.php only) ==
   A short, truthful intro line sits above the card row — same
   .cs-trip-section__note used for the wildlife-rings disclaimer
   elsewhere, not a new component. */
.cs-official-showcase .cs-trip-section__note { max-width: 62ch; margin: -.3em 0 1.6em; }

.cs-related-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.cs-related-chip {
	display: flex; align-items: center; gap: 10px; padding: 6px 16px 6px 6px;
	background: var(--cs-white); border: 1px solid var(--cs-hair); border-radius: 999px;
	transition: border-color .25s ease, box-shadow .25s ease;
}
.cs-related-chip:hover { border-color: rgba(138,109,53,.4); box-shadow: 0 6px 16px rgba(44,37,23,.08); }
.cs-related-chip__media { width: 34px; height: 34px; border-radius: 50%; overflow: hidden; flex-shrink: 0; background: var(--cs-champagne); }
.cs-related-chip__media img { width: 100%; height: 100%; object-fit: cover; }
.cs-related-chip__media--fallback { background: linear-gradient(150deg, rgba(221,201,163,.6), rgba(239,230,211,.45)); }
.cs-related-chip__label { font-family: var(--cs-display-serif); font-size: .92rem; color: var(--cs-ink); white-space: nowrap; }

/* == Reading progress ==
   A thin gold line under the nav, filling as the visitor moves through
   the article — built entirely in JS (chanua-trip-reveal.js), so this
   is dormant, invisible CSS until that script actually inserts the
   element; nothing here affects pages where the script doesn't run. */
.cs-trip-progress {
	position: fixed;
	top: 0; left: 0; right: 0;
	height: 2px;
	background: transparent;
	z-index: 200;
	pointer-events: none;
}
.cs-trip-progress__fill {
	height: 100%;
	width: 100%;
	background: linear-gradient(90deg, var(--cs-gold), var(--cs-gold-soft));
	transform: scaleX(0);
}

/* == Archive filter chips / sort ==
   Lodges (by tier), Trekking (by mountain), Day Trips (by price) — see
   assets/js/chanua-archive-filter.js. Every card is already in the page
   before this script runs; these controls only ever hide/reorder real,
   already-rendered cards, never fetch or invent anything. */
.cs-archive-filter { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 28px; }
.cs-archive-filter__chip {
	font-family: var(--cs-sans); font-size: .82rem; font-weight: 600; letter-spacing: .02em;
	color: var(--cs-ink-soft); background: var(--cs-white); border: 1px solid var(--cs-hair);
	border-radius: 999px; padding: 8px 18px; cursor: pointer;
	transition: border-color .2s ease, background-color .2s ease, color .2s ease;
}
.cs-archive-filter__chip:hover { border-color: var(--cs-gold); }
.cs-archive-filter__chip.is-active { background: var(--cs-ink); border-color: var(--cs-ink); color: var(--cs-white); }
.cs-dir-grid [data-filter-value][hidden] { display: none; }

.cs-archive-sort { display: flex; align-items: center; gap: 10px; margin: 0 0 28px; font-family: var(--cs-sans); font-size: .84rem; color: var(--cs-ink-soft); }
.cs-archive-sort select {
	font-family: var(--cs-sans); font-size: .84rem; color: var(--cs-ink);
	background: var(--cs-white); border: 1px solid var(--cs-hair); border-radius: 16px;
	padding: 7px 14px; cursor: pointer;
}

/* Safari archive: a large enough set (dozens of itineraries) that it
   needs both the filter chips AND the sort dropdown at once, side by
   side rather than picking one — everywhere else only needed one or the
   other. Both children keep their own margin-bottom above for when this
   wraps to two lines on a narrow screen. */
.cs-archive-toolbar {
	display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px;
	margin: 0 0 12px;
}
.cs-archive-toolbar .cs-archive-filter,
.cs-archive-toolbar .cs-archive-sort {
	margin: 0 0 16px;
}

/* == USD/TZS pricing toggle ==
   Pure CSS — no JS at all. Both real, already-stored values sit in the
   markup together; the (visually hidden, label-triggered) radio pair
   just decides which one shows. See single-day_trip.php. */
.cs-currency-toggle { position: relative; }
.cs-currency-toggle__radio { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.cs-currency-toggle__tabs { display: inline-flex; gap: 6px; margin-right: 10px; }
.cs-currency-toggle__tabs label {
	font-family: var(--cs-sans); font-size: .68rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
	color: var(--cs-ink-faint); background: var(--cs-ivory); border: 1px solid var(--cs-hair);
	border-radius: 999px; padding: 3px 10px; cursor: pointer; transition: color .2s ease, background-color .2s ease, border-color .2s ease;
}
#cs-cur-usd:checked ~ .cs-currency-toggle__tabs label[for="cs-cur-usd"],
#cs-cur-tzs:checked ~ .cs-currency-toggle__tabs label[for="cs-cur-tzs"] {
	color: var(--cs-white); background: var(--cs-gold-deep); border-color: var(--cs-gold-deep);
}
.cs-currency-toggle__value--tzs { display: none; }
#cs-cur-tzs:checked ~ .cs-currency-toggle__value--usd { display: none; }
#cs-cur-tzs:checked ~ .cs-currency-toggle__value--tzs { display: inline; }

/* == Travel Advice guide layout ==
   The byline above the article (real post-modified date, no invented
   author) and the compact aside blocks used only on this template —
   "More travel advice" (chanua_render_related_guides_section()) sits
   beside the emergency panel, so it needs a lighter, list-style
   treatment rather than the card-grid one .cs-related-grid uses in the
   wider main column. */
.cs-guide-byline { font-family: var(--cs-sans); font-size: .8rem; color: var(--cs-ink-faint); margin: -6px 0 22px; padding-bottom: 18px; border-bottom: 1px solid var(--cs-hair); }
.cs-guide-aside__block { display: flex; flex-direction: column; gap: 10px; }
.cs-guide-aside__title { font-family: var(--cs-sans); font-size: .72rem; text-transform: uppercase; letter-spacing: .07em; font-weight: 600; color: var(--cs-ink-faint); margin: 0; }
.cs-guide-aside__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.cs-guide-aside__list a { font-family: var(--cs-display-serif); font-size: .94rem; line-height: 1.4; color: var(--cs-ink); text-decoration: none; border-bottom: 1px solid transparent; }
.cs-guide-aside__list a:hover { color: var(--cs-gold-deep); border-bottom-color: var(--cs-gold); }

/* == Inline WhatsApp CTA button ==
   chanua_render_whatsapp_button() in functions.php — the same .cs-btn/
   .cs-btn--outline base every other secondary action button on these
   single-page sidebars uses, just tinted WhatsApp green on the icon and
   on hover so it reads as its own distinct action next to the primary
   gold "Ask about..." CTA rather than blending into it. */
.cs-wa-btn { margin-top: 10px; color: #1e9e51; border-color: rgba(37,211,102,.35); }
.cs-wa-btn svg { width: 18px; height: 18px; flex-shrink: 0; }
.cs-wa-btn:hover { color: #1e9e51; border-color: #25d366; background: rgba(37,211,102,.08); }

/* == Wildlife marquee ==
   A full-bleed band of the post's own photos drifting steadily across
   (chanua_render_wildlife_marquee() in inc/chanua-trip-info.php, driven
   by the 'marquee' feature in assets/js/chanua-motion.js).

   It breaks out of the article's reading column on purpose: this sits
   inside .cs-dir-single__content, whose children are capped at a 68ch
   measure, and the whole point of the band is to use the full width the
   page otherwise leaves empty. The 50vw/-50vw pair is the standard
   full-bleed escape — margin-left pulls the element back to the viewport
   edge from wherever its container starts, and the matching width puts
   the right edge there too.

   No background fill and no card: the strip is photos on the page's own
   background, same rule as everywhere else in this theme. */
.cs-dir-single__content .cs-marquee {
	max-width: none;
	width: 100vw;
	margin-left: 50%;
	transform: translateX(-50vw);
	margin-top: 2.6em;
	margin-bottom: 2.8em;
}
.cs-marquee__head { margin-bottom: 18px; }
.cs-marquee__title {
	font-family: var(--cs-display-serif); font-weight: 400;
	font-size: clamp(1.3rem, 2.4vw, 1.75rem); line-height: 1.25;
	color: var(--cs-ink); margin: 6px 0 0;
	border-bottom: none; padding-bottom: 0;
}
.cs-marquee__viewport { overflow: hidden; width: 100%; }
.cs-marquee__track {
	display: flex; gap: 14px;
	width: max-content;
	will-change: transform;
}
.cs-marquee__item { margin: 0; flex: none; }
.cs-marquee__item img {
	display: block;
	width: clamp(220px, 26vw, 340px);
	height: clamp(150px, 18vw, 230px);
	object-fit: cover;
}
/* Pause-on-hover and pause-when-off-screen are both done in JS (the
   'marquee' feature), since the drift is a GSAP tween rather than a CSS
   animation and there's nothing here for CSS to pause. */
@media (max-width: 560px) {
	.cs-marquee__track { gap: 10px; }
	.cs-marquee__item img { width: 62vw; height: 40vw; }
}

/* =====================================================================
   TRIP DETAIL — sticky section nav, summary rail, tier tabs, itinerary
   accordion (inc/chanua-trip-detail.php + assets/js/chanua-trip-detail.js).
   Added Oct 2026 from the Altezza reference pages. No filled panels:
   hairlines and the page's own background do the structuring, so the
   site-wide background video/image still shows through exactly as it
   did before these sections existed.
   ===================================================================== */

/* -- Sticky in-page section nav -- */
.cs-secnav {
	position: sticky; top: 72px; z-index: 20;
	background: var(--cs-ivory);
	border-bottom: 1px solid var(--cs-hair);
	/* The site-wide bg system turns interior cards translucent; this bar
	   has to stay readable over a moving video, so it keeps a solid fill
	   and a blur rather than going glass. */
	backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
body.has-bg-video .cs-secnav,
body.has-bg-image .cs-secnav { background: rgba(243,238,226,.92); }
.cs-secnav__inner { display: flex; gap: clamp(16px, 3vw, 38px); overflow-x: auto; scrollbar-width: none; }
.cs-secnav__inner::-webkit-scrollbar { display: none; }
.cs-secnav__link {
	flex: none; position: relative;
	padding: 16px 2px; text-decoration: none; white-space: nowrap;
	font-family: var(--cs-sans); font-size: .84rem; letter-spacing: .02em;
	color: var(--cs-ink-soft);
	border-bottom: 2px solid transparent;
	transition: color .2s ease, border-color .2s ease;
}
.cs-secnav__link:hover { color: var(--cs-ink); }
.cs-secnav__link.is-active { color: var(--cs-gold-deep); border-bottom-color: var(--cs-gold-deep); }
/* Scroll target offset so an anchored section isn't hidden behind the
   fixed site header plus this bar. */
.cs-anchor { display: block; height: 0; scroll-margin-top: 150px; }
#cs-overview, #cs-itinerary, #cs-pricing { scroll-margin-top: 150px; }
/* Travel Advice anchors its nav straight at the article's own <h2>s
   (chanua-toc.js), so those need the same clearance. */
.cs-guide-article h2 { scroll-margin-top: 150px; }

/* -- Trip top: intro + summary rail side by side -- */
.cs-triptop {
	display: grid; grid-template-columns: minmax(0, 1fr) minmax(250px, 310px);
	gap: clamp(24px, 4vw, 54px); align-items: start;
	margin-bottom: 1.2em;
}
.cs-triptop__intro > :first-child { margin-top: 0; }
.cs-triprail {
	position: sticky; top: 140px;
	border: 1px solid var(--cs-hair);
	padding: 22px 22px 24px;
	background: transparent;
}
.cs-triprail__pricelabel {
	font-family: var(--cs-sans); font-size: .7rem; letter-spacing: .12em;
	text-transform: uppercase; color: var(--cs-ink-faint); margin: 0 0 2px;
}
.cs-triprail__price {
	font-family: var(--cs-display-serif); font-size: 2.1rem; line-height: 1.1;
	color: var(--cs-ink); margin: 0 0 18px;
}
.cs-triprail__price span {
	display: block; font-family: var(--cs-sans); font-size: .72rem;
	letter-spacing: .06em; text-transform: uppercase; color: var(--cs-ink-faint); margin-top: 4px;
}
.cs-triprail__price--estimate { font-style: italic; color: var(--cs-ink-soft); }
.cs-triprail__facts { margin: 0 0 20px; padding: 0; border-top: 1px solid var(--cs-hair); }
.cs-triprail__fact {
	display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
	padding: 10px 0; border-bottom: 1px solid var(--cs-hair);
}
.cs-triprail__fact dt {
	font-family: var(--cs-sans); font-size: .72rem; letter-spacing: .08em;
	text-transform: uppercase; color: var(--cs-ink-faint); margin: 0;
}
.cs-triprail__fact dd {
	margin: 0; font-family: var(--cs-display-serif); font-size: 1.02rem;
	color: var(--cs-ink); text-align: right;
}
.cs-triprail__cta { width: 100%; justify-content: center; }
.cs-triprail__wa { margin-top: 10px; }

/* -- Tier pricing tabs -- */
.cs-tiers__tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.cs-tiers__tab {
	font-family: var(--cs-sans); font-size: .8rem; letter-spacing: .04em;
	padding: 10px 20px; border-radius: 999px; cursor: pointer;
	background: transparent; color: var(--cs-ink-soft);
	border: 1px solid var(--cs-hair);
	transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.cs-tiers__tab:hover { border-color: var(--cs-gold); color: var(--cs-ink); }
.cs-tiers__tab.is-active { background: var(--cs-near-black); border-color: var(--cs-near-black); color: #fff; }
.cs-tiers__amount {
	font-family: var(--cs-display-serif); font-size: clamp(2rem, 4.6vw, 3rem);
	line-height: 1.05; color: var(--cs-gold-deep); margin: 0;
}
.cs-tiers__amount span {
	display: inline-block; font-family: var(--cs-sans); font-size: .76rem;
	letter-spacing: .08em; text-transform: uppercase; color: var(--cs-ink-faint); margin-left: 8px;
}
.cs-tiers__season { font-size: .92rem; color: var(--cs-ink-soft); margin: 0 0 4px; }
.cs-tiers__season-label {
	font-family: var(--cs-sans); font-size: .68rem; letter-spacing: .1em;
	text-transform: uppercase; color: var(--cs-ink-faint); margin-right: 8px;
}
.cs-tiers__note { font-size: .82rem; line-height: 1.6; color: var(--cs-ink-faint); margin: 18px 0 0; max-width: 66ch; }

/* -- Itinerary accordion -- */
.cs-itin__bar {
	display: flex; align-items: baseline; justify-content: space-between;
	gap: 16px; flex-wrap: wrap; margin-bottom: 6px;
}
.cs-itin__count {
	font-family: var(--cs-sans); font-size: .76rem; letter-spacing: .08em;
	text-transform: uppercase; color: var(--cs-ink-faint); margin: 0;
}
.cs-itin__toggle-all {
	background: none; border: none; cursor: pointer; padding: 4px 0;
	font-family: var(--cs-sans); font-size: .8rem; font-weight: 600;
	color: var(--cs-gold-deep); text-decoration: underline;
	text-decoration-color: rgba(154,139,107,.45); text-underline-offset: 3px;
}
.cs-itin__toggle-all:hover { text-decoration-color: currentColor; }
.cs-itin__list { list-style: none; margin: 0; padding: 0; counter-reset: none; }
.cs-itin__day { border-bottom: 1px solid var(--cs-hair); padding: 0; margin: 0; }
.cs-itin__day::before { content: none !important; }   /* kill the article list bullet */
.cs-itin__day:first-child { border-top: 1px solid var(--cs-hair); }
.cs-itin__day-head { margin: 0; font-size: inherit; font-weight: inherit; border: none; padding: 0; }
.cs-itin__trigger {
	display: flex; align-items: center; gap: 12px; width: 100%;
	background: none; border: none; cursor: pointer; text-align: left;
	padding: 18px 2px; color: var(--cs-ink);
}
.cs-itin__trigger:hover .cs-itin__label { color: var(--cs-gold-deep); }
.cs-itin__daynum {
	flex: none; font-family: var(--cs-sans); font-size: .72rem; font-weight: 600;
	letter-spacing: .1em; text-transform: uppercase; color: var(--cs-ink-faint);
	min-width: 76px;
}
.cs-itin__dot { flex: none; color: var(--cs-gold); }
.cs-itin__label {
	flex: 1 1 auto;
	font-family: var(--cs-display-serif); font-weight: 400;
	font-size: clamp(1.02rem, 1.7vw, 1.22rem); line-height: 1.3;
	transition: color .2s ease;
}
.cs-itin__chev {
	flex: none; width: 10px; height: 10px; margin-left: 8px;
	border-right: 1.5px solid var(--cs-gold-deep); border-bottom: 1.5px solid var(--cs-gold-deep);
	transform: rotate(45deg) translate(-2px, -2px);
	transition: transform .25s ease;
}
.cs-itin__day.is-open .cs-itin__chev { transform: rotate(225deg) translate(-2px, -2px); }
.cs-itin__panel { padding: 0 2px 6px; }
.cs-itin__body { max-width: 68ch; }
.cs-itin__body > :first-child { margin-top: 0; }
.cs-itin__body p { font-size: .98rem; line-height: 1.75; }
/* Until the JS marks the list enhanced, every panel stays visible — a
   no-JS visitor reads the whole itinerary instead of a stack of dead
   headers. The [hidden] attribute only takes effect once enhanced. */
.cs-itin__list:not(.is-enhanced) .cs-itin__panel { display: block !important; }
.cs-itin__list:not(.is-enhanced) .cs-itin__chev,
.cs-itin__list:not(.is-enhanced) .cs-itin__toggle-all { display: none; }

@media (max-width: 900px) {
	.cs-triptop { grid-template-columns: 1fr; }
	.cs-triprail { position: static; }
}
@media (max-width: 560px) {
	.cs-secnav { top: 62px; }
	.cs-itin__trigger { align-items: flex-start; gap: 8px; padding: 15px 2px; }
	.cs-itin__daynum { min-width: 0; padding-top: 3px; }
	.cs-itin__dot { display: none; }
	.cs-itin__trigger { flex-wrap: wrap; }
	.cs-itin__label { flex: 1 1 100%; }
}

/* -- Star rating -------------------------------------------------- */
/* Two stacked rows of five stars; the filled row is clipped to the real
   percentage, so 4.6 shows as four-and-a-bit rather than rounding up to
   a flattering five. The readable number sits beside them — a row of
   glyphs alone tells a screen reader nothing. */
.cs-stars { position: relative; display: inline-block; line-height: 0; flex: none; }
.cs-stars__base, .cs-stars__fill { display: block; white-space: nowrap; }
.cs-stars svg { width: 15px; height: 15px; display: inline-block; margin-right: 2px; }
.cs-stars__base { fill: rgba(154,139,107,.32); }
.cs-stars__fill {
	position: absolute; inset: 0; overflow: hidden;
	width: var(--cs-stars-fill, 0%);
	fill: var(--cs-gold-deep);
}
.cs-rating {
	display: flex; align-items: center; gap: 10px;
	text-decoration: none; margin: 0 0 16px;
	padding-bottom: 14px; border-bottom: 1px solid var(--cs-hair);
}
.cs-rating__text { display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; }
.cs-rating__text strong {
	font-family: var(--cs-display-serif); font-size: 1.1rem; font-weight: 400; color: var(--cs-ink);
}
.cs-rating__meta { font-family: var(--cs-sans); font-size: .72rem; color: var(--cs-ink-faint); }
a.cs-rating:hover .cs-rating__meta { color: var(--cs-gold-deep); text-decoration: underline; }
.cs-rating--compact { margin: 0; padding: 0; border-bottom: none; }
.cs-rating--empty {
	display: block; border: 1px dashed var(--cs-gold); border-bottom: 1px dashed var(--cs-gold);
	padding: 12px 14px; font-family: var(--cs-sans); font-size: .76rem;
	line-height: 1.5; color: var(--cs-ink-soft);
}

/* -- Tier tabs as real cards -------------------------------------- */
.cs-tiers__tab {
	display: flex; align-items: center; gap: 11px; text-align: left;
	padding: 13px 20px; border-radius: 16px;
}
.cs-tiers__tab-icon { font-size: 1rem; line-height: 1; color: var(--cs-gold-deep); }
.cs-tiers__tab.is-active .cs-tiers__tab-icon { color: var(--cs-gold-soft); }
.cs-tiers__tab-text { display: flex; flex-direction: column; gap: 2px; }
.cs-tiers__tab-name { font-size: .86rem; font-weight: 600; letter-spacing: .02em; }
.cs-tiers__tab-note { font-size: .68rem; letter-spacing: .02em; opacity: .72; }

/* -- Season/price panel ------------------------------------------- */
.cs-tiers__card {
	border: 1px solid var(--cs-hair); padding: 20px 24px 18px;
	max-width: 560px; background: transparent;
}
.cs-tiers__season { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 12px; }
.cs-tiers__season-badge {
	font-family: var(--cs-sans); font-size: .64rem; font-weight: 700;
	letter-spacing: .1em; text-transform: uppercase;
	background: var(--cs-gold-soft); color: var(--cs-near-black);
	border-radius: 999px; padding: 4px 11px;
}
.cs-tiers__season-months { font-family: var(--cs-sans); font-size: .82rem; color: var(--cs-ink-soft); }

/* -- "Show all days" as a pill ------------------------------------ */
.cs-itin__toggle-all {
	display: inline-flex; align-items: center; gap: 9px;
	border: 1px solid var(--cs-hair); border-radius: 999px;
	padding: 9px 17px; text-decoration: none;
	transition: border-color .2s ease, background .2s ease;
}
.cs-itin__toggle-all:hover { border-color: var(--cs-gold-deep); background: rgba(154,139,107,.08); text-decoration: none; }
.cs-itin__toggle-chev {
	width: 8px; height: 8px;
	border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
	transform: rotate(45deg) translate(-1px,-1px); transition: transform .25s ease;
}
.cs-itin__toggle-all[aria-expanded="true"] .cs-itin__toggle-chev { transform: rotate(225deg) translate(-1px,-1px); }

/* -- Two-column itinerary: route map beside the days -------------- */
.cs-itin__cols--map {
	display: grid; grid-template-columns: minmax(260px, 360px) minmax(0, 1fr);
	gap: clamp(22px, 3.5vw, 48px); align-items: start;
}
.cs-itin__map { position: sticky; top: 150px; }
.cs-itin__map-inner {
	width: 100%; height: clamp(320px, 46vh, 460px);
	border: 1px solid var(--cs-hair); background: var(--cs-ivory); overflow: hidden;
}
/* Numbered route pins, matching the day numbers in the list beside it. */
.cs-itin-marker span {
	display: flex; align-items: center; justify-content: center;
	width: 26px; height: 26px; border-radius: 50%;
	background: var(--cs-gold-deep); color: #fff;
	font-family: var(--cs-sans); font-size: .74rem; font-weight: 700;
	box-shadow: 0 2px 8px rgba(10,8,4,.35);
}
@media (max-width: 860px) {
	.cs-itin__cols--map { grid-template-columns: 1fr; }
	.cs-itin__map { position: static; margin-bottom: 20px; }
}