/**
 * assets/css/chanua-stats.css
 * The interactive "stats system" for single-page templates: wildlife
 * sighting rings, quick-stat tiles, the seasonal intel card, and the
 * shared tasteful hover/tap popup. No boxed panels here either — rings
 * and tiles sit directly on the page, same as everything else this
 * theme's redesign already moved to. Shares tokens with chanua-home.css.
 * Prefix: .cs-wildlife-ring / .cs-quick-stat / .cs-seasonal-intel / .cs-intel-pop
 */

/* == Wildlife sighting rings == */
.cs-wildlife-rings { display: flex; flex-wrap: wrap; gap: 26px 36px; margin: 4px 0 1.9em; padding: 0; list-style: none; }
.cs-wildlife-ring { position: relative; display: flex; align-items: center; gap: 14px; flex: 0 0 auto; outline: none; }
/* outline:none above drops the browser default ring on this tabindex="0"
   li so it doesn't clip against the tooltip/dial — but the tooltip popup
   was the ONLY visible sign a keyboard user had landed here. Found during
   an accessibility pass: a soft halo on the dial itself gives a focus
   indicator on the focused element, not just a popup elsewhere on the
   page, with no change to the existing hover/tap/auto-tip behavior. */
.cs-wildlife-ring:focus-visible .cs-wildlife-ring__dial { box-shadow: 0 0 0 3px var(--cs-ivory), 0 0 0 5px var(--cs-gold-deep); border-radius: 50%; }
.cs-wildlife-ring__dial { position: relative; width: 56px; height: 56px; flex-shrink: 0; }
.cs-wildlife-ring__dial svg { width: 100%; height: 100%; transform: rotate(-90deg); display: block; }
.cs-wildlife-ring__track { fill: none; stroke: var(--cs-hair); stroke-width: 4; }
.cs-wildlife-ring__fill { fill: none; stroke-width: 4; stroke-linecap: round; transition: stroke-dashoffset 1.15s cubic-bezier(.16,.84,.44,1); }
.cs-wildlife-ring[data-rating="excellent"] .cs-wildlife-ring__fill { stroke: var(--cs-green-deep); }
.cs-wildlife-ring[data-rating="good"] .cs-wildlife-ring__fill { stroke: var(--cs-green); }
.cs-wildlife-ring[data-rating="seasonal"] .cs-wildlife-ring__fill { stroke: var(--cs-gold-deep); }
.cs-wildlife-ring[data-rating="rare"] .cs-wildlife-ring__fill { stroke: var(--cs-ink-faint); }
.cs-wildlife-ring__body { display: flex; flex-direction: column; gap: 3px; }
.cs-wildlife-ring__species { font-family: var(--cs-display-serif); font-size: .96rem; color: var(--cs-ink); white-space: nowrap; }
.cs-wildlife-ring__rating { font-family: var(--cs-sans); font-size: .64rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 600; }
.cs-wildlife-ring__rating--excellent { color: var(--cs-green-deep); }
.cs-wildlife-ring__rating--good { color: var(--cs-green); }
.cs-wildlife-ring__rating--seasonal { color: var(--cs-gold-deep); }
.cs-wildlife-ring__rating--rare { color: var(--cs-ink-faint); }

/* == Quick-stat tiles ==
   These are real counts (see inc/chanua-stats.php's doc comment) and the
   one moment on the page built entirely from this destination/trip's own
   data — worth more visual weight than a sub-heading, not less. Sized up
   past .cs-h2 on purpose; everything else on the page stays quieter so
   this is the thing a visitor's eye actually lands on.
   width: fit-content (not the full content column) so the hairline rules
   above/below always frame exactly the stats that are actually there —
   three tiles on a Destination page, one on a Day Trip — instead of a
   full-width rule trailing off into a block of empty space next to a
   lonely number on the wide pages. */
.cs-quick-stats { display: flex; flex-wrap: wrap; width: fit-content; max-width: 100%; gap: 30px 52px; margin: 0 0 2.2em; padding: 22px 0; border-top: 1px solid var(--cs-hair); border-bottom: 1px solid var(--cs-hair); }
.cs-quick-stat { display: flex; flex-direction: column; }
.cs-quick-stat__value,
.cs-quick-stat__suffix { font-family: var(--cs-display-serif); font-size: clamp(2.3rem, 4.4vw, 3.4rem); line-height: 1; color: var(--cs-gold-deep); font-weight: 400; font-variant-numeric: oldstyle-nums; }
.cs-quick-stat__label { font-family: var(--cs-sans); font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; color: var(--cs-ink-faint); margin-top: 8px; }

/* == Seasonal intel card ==
   Same "editorial lead" language as .cs-client-intro: a gold rule, a
   small kicker, no fill — this is the one piece of body copy allowed to
   look like an aside, and a border is enough to do that without boxing
   it in. */
.cs-seasonal-intel { position: relative; max-width: 58ch; padding: 2px 0 6px 24px; border-left: 3px solid var(--cs-gold); margin: 0 0 2em; }
.cs-seasonal-intel__title { font-family: var(--cs-display-serif); font-weight: 400; font-size: 1.18rem; color: var(--cs-ink); margin: 7px 0 8px; }
.cs-seasonal-intel__body { font-size: .95rem; line-height: 1.65; color: var(--cs-ink-soft); margin: 0; }

/* == Shared tasteful popup ==
   No close button, no persistent state — a small tip that fades in near
   whatever it's attached to and fades back out on its own. Three ways in
   trigger it, same visual treatment for all: hover (mouse), :focus-visible
   (keyboard), and two JS-toggled classes — .is-tapped (manual tap on
   touch) and .is-auto-tip (the automatic cascade in chanua-stats.js that
   plays once when the ring row scrolls into view — the actual "comes and
   disappears on its own" behaviour). Currently used on the wildlife
   rings; built generically enough to attach to any element carrying a
   .cs-intel-pop child. */
.cs-intel-pop {
	position: absolute;
	left: 50%;
	bottom: calc(100% + 10px);
	transform: translateX(-50%) translateY(6px);
	width: max-content;
	max-width: 220px;
	background: var(--cs-near-black);
	color: #fff;
	text-shadow: none;
	font-family: var(--cs-sans);
	font-size: .76rem;
	line-height: 1.45;
	padding: 10px 13px;
	border-radius: 14px;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity .2s ease, transform .2s ease, visibility .2s;
	z-index: 5;
	box-shadow: 0 10px 24px rgba(10,8,4,.3);
}
.cs-intel-pop::after {
	content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
	border: 6px solid transparent; border-top-color: var(--cs-near-black);
}
.cs-wildlife-ring:hover .cs-intel-pop,
.cs-wildlife-ring:focus-visible .cs-intel-pop,
.cs-wildlife-ring.is-tapped .cs-intel-pop,
.cs-wildlife-ring.is-auto-tip .cs-intel-pop {
	opacity: 1;
	visibility: visible;
	transform: translateX(-50%) translateY(0);
	pointer-events: auto;
}

@media (max-width: 560px) {
	.cs-wildlife-rings { gap: 20px 28px; }
	.cs-quick-stats { gap: 20px 32px; }
}