/* Village Explorer (Mode A): "Village of Tomorrow". */

.ccaf-village { padding-block: var(--s-6) var(--s-7); }
.ccaf-village__head { display: flex; flex-wrap: wrap; gap: var(--s-4); align-items: end; justify-content: space-between; margin-block-end: var(--s-5); }
.ccaf-village__head p { margin: 0; color: var(--text-muted); }

.ccaf-village__stage { position: relative; inline-size: min(100% - 2 * var(--gutter), 1400px); margin-inline: auto; }
.ccaf-village__scroller {
	border-radius: var(--radius-lg);
	overflow: hidden;
	box-shadow: var(--shadow-lift);
	border: 1px solid var(--border);
	background: var(--sky-bottom);
}
.ccaf-village__swipe { display: none; }
.ccaf-village-svg { display: block; inline-size: 100%; block-size: auto; }

/* Phones and small tablets: give the scene a minimum width inside its own horizontal
   scroller so labels stay legible (the page itself never scrolls sideways). */
@media (max-width: 900px) {
	.ccaf-village__stage { inline-size: 100%; }
	.ccaf-village__scroller { overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; border-radius: 0; border-inline: 0; }
	.ccaf-village-svg { inline-size: 1150px; max-inline-size: none; }
	.ccaf-village__swipe { display: block; position: sticky; inset-inline-start: 0; margin: 0; padding: var(--s-2) var(--gutter); text-align: center; background: var(--surface); }
}

/* Ink outlines give the scene a crisp, illustrated look (shadows and labels excluded). */
.ccaf-village-svg .v-spot > g :is(rect, path, ellipse, circle, polygon):not([fill="#000"]):not([stroke]) { stroke: rgb(17 19 17 / 0.28); stroke-width: 1.2; stroke-linejoin: round; }
.ccaf-village-svg use { stroke: none; }

/* Hotspots */
.v-spot { cursor: pointer; outline: none; }
.v-spot > g:first-of-type { transition: transform var(--dur) var(--ease), filter var(--dur) var(--ease); transform-box: fill-box; transform-origin: 50% 100%; }
.v-spot:hover > g:first-of-type,
.v-spot:focus-visible > g:first-of-type,
.v-spot.is-active > g:first-of-type { transform: translateY(-6px); filter: drop-shadow(0 12px 10px rgb(10 40 20 / 0.28)); }

.v-label rect { fill: var(--surface); stroke: var(--label-ink); stroke-width: 2; transition: fill var(--dur) var(--ease); }
.v-label text { font: 700 19px var(--font-body); fill: var(--label-ink); pointer-events: none; }
.v-label--life rect { stroke: var(--border-strong); stroke-width: 1.5; }
.v-label--life circle { fill: var(--c-red); }
.v-label--life text { font: 600 16px var(--font-body); fill: var(--text); }
.v-spot:hover .v-label rect,
.v-spot:focus-visible .v-label rect,
.v-spot.is-active .v-label rect { fill: var(--c-green); stroke: var(--c-yellow); stroke-width: 3; }
.v-spot:hover .v-label text,
.v-spot:focus-visible .v-label text,
.v-spot.is-active .v-label text { fill: #fff; }
.v-spot:hover .v-label--life circle,
.v-spot:focus-visible .v-label--life circle,
.v-spot.is-active .v-label--life circle { fill: var(--c-yellow); }
/* SVG <a> focus ring drawn on the label for clarity */
.v-spot:focus-visible .v-label rect { stroke: var(--focus); stroke-width: 4; }

.v-spot.is-closed { filter: grayscale(0.85); opacity: 0.75; }
.v-spot.is-closed .v-label text { font-style: italic; font-weight: 500; fill: var(--text-muted); }

/* Night village: stars and lit windows appear in dark mode */
.v-stars { opacity: 0; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .v-stars { opacity: 0.85; } }
:root[data-theme="dark"] .v-stars { opacity: 0.85; }

/* Gentle ambient motion. SMIL animations (turbines, boat, clouds, birds) are paused by
   ui.js under reduced motion and the "Pause animation" button. */
.v-river-shimmer { animation: v-flow 6s linear infinite; }
.v-flame { transform-box: fill-box; transform-origin: 50% 100%; animation: v-flicker 1.8s ease-in-out infinite; }
.v-flame--inner { animation-duration: 1.2s; }
@keyframes v-flow { to { stroke-dashoffset: -128; } }
@keyframes v-flicker { 50% { transform: scaleY(0.88) scaleX(1.05); } }

html.ccaf-reduce-motion .ccaf-village-svg * { animation: none !important; }
@media (prefers-reduced-motion: reduce) {
	.ccaf-village-svg * { animation: none !important; transition: none !important; }
}

/* Explorer card: floats over the scene on wide screens, sits under it on phones */
.ccaf-explorer {
	display: grid; gap: var(--s-2); align-content: start;
	margin-block-start: var(--s-4); padding: var(--s-5);
	background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
	box-shadow: var(--shadow-lift);
	border-block-start: 5px solid var(--c-yellow);
}
@media (min-width: 900px) {
	.ccaf-explorer {
		grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) auto; gap: var(--s-1) var(--s-6); align-items: center;
		grid-template-areas: "kicker role link" "title role link" "text role link";
	}
	.ccaf-explorer__kicker { grid-area: kicker; }
	.ccaf-explorer__title { grid-area: title; }
	.ccaf-explorer__text { grid-area: text; }
	.ccaf-explorer__role { grid-area: role; }
	.ccaf-explorer [data-ccaf-explorer-link] { grid-area: link; }
}
.ccaf-page .ccaf-explorer p { margin: 0; }
.ccaf-explorer__kicker { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); }
.ccaf-page .ccaf-explorer__title { font-size: var(--fs-1); margin: 0; }
.ccaf-explorer__text { color: var(--text-muted); font-size: var(--fs--1); }
.ccaf-explorer__role { font-size: var(--fs--1); padding: var(--s-2) var(--s-3); border-radius: var(--radius-sm); background: color-mix(in srgb, var(--c-yellow) 22%, transparent); color: var(--text); }
.ccaf-explorer .ccaf-btn { justify-self: start; }

/* Everyday life list (also the text alternative for the life hotspots) */
.ccaf-life { margin-block-start: var(--s-6); }
.ccaf-page .ccaf-life__title { font-size: var(--fs-2); }
.ccaf-life__list { list-style: none; margin: var(--s-4) 0 0; padding: 0; display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); }
.ccaf-life__item {
	padding: var(--s-5); border-radius: var(--radius); background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow);
	background-image: linear-gradient(90deg, var(--life-a, var(--c-green)), var(--life-b, var(--c-yellow))); background-size: 100% 4px; background-repeat: no-repeat;
	scroll-margin-block-start: 6rem;
}
.ccaf-life__item:target, .ccaf-life__item:focus { outline: 3px solid var(--focus); outline-offset: 2px; }
.ccaf-life__item--energy { --life-a: var(--c-river); --life-b: var(--c-yellow); }
.ccaf-life__item--health { --life-a: var(--c-green); --life-b: var(--c-sprout); }
.ccaf-life__item--school { --life-a: var(--c-yellow); --life-b: var(--c-red); }
.ccaf-life__item--market { --life-a: var(--c-red); --life-b: var(--c-ochre); }
.ccaf-life__item--homes  { --life-a: var(--c-terracotta); --life-b: var(--c-clay); }
.ccaf-life__item--play   { --life-a: var(--c-leaf); --life-b: var(--c-yellow); }
.ccaf-page .ccaf-life__item h4 { font: 700 var(--fs-1)/1.25 var(--font-display); color: var(--heading); margin: 0 0 var(--s-2); }
.ccaf-life__item p { font-size: var(--fs--1); color: var(--text-muted); margin-block-end: var(--s-2); }
.ccaf-page .ccaf-life__role { color: var(--text); margin: 0; }

@media (forced-colors: active) {
	.v-label rect { stroke: CanvasText; }
	.v-spot:focus-visible .v-label rect { stroke: Highlight; }
}

/* Realistic village artwork with the accessible SVG place labels preserved. */
.ccaf-village-svg { background: #d8e2cf url("../images/village-realistic.jpg") center / 100% 100% no-repeat; }
.ccaf-village-svg > .v-scenery { display: none; }
.ccaf-village-svg .v-spot > g:not(.v-label) { opacity: 0; }