/*
 * About Afghanistan — block styles.
 *
 * Values are the prototype's (design_handoff/design/About Afghanistan Home.dc.html).
 * Every rule uses logical properties so Dari/Pashto (dir="rtl") mirror with no
 * RTL stylesheet; the few things logical properties cannot express (gradient
 * direction, arrow glyphs, tracking) are handled with --aa-gdeg, the arrow
 * character chosen in PHP, and [dir="rtl"] overrides at the end.
 *
 * Tokens read the theme's theme.json presets and fall back to the design
 * values, so the blocks look right under any theme.
 */

:root {
	--aa-ivory: var(--wp--preset--color--ivory, #f8f5ed);
	--aa-sand: var(--wp--preset--color--sand, #e8ddc9);
	--aa-sand-light: var(--wp--preset--color--sand-light, #f1eadb);
	--aa-lapis: var(--wp--preset--color--lapis, #173f67);
	--aa-lapis-hover: #1d4f80;
	--aa-lapis-deep: var(--wp--preset--color--lapis-deep, #0f2438);
	--aa-ink: var(--wp--preset--color--ink, #192126);
	--aa-saffron: var(--wp--preset--color--saffron, #d99b33);
	--aa-saffron-light: var(--wp--preset--color--saffron-light, #e9b862);
	--aa-terracotta: var(--wp--preset--color--terracotta, #a75c46);
	--aa-turquoise: var(--wp--preset--color--turquoise, #168a8a);
	--aa-slate: var(--wp--preset--color--slate, #4a5358);
	--aa-slate-2: color-mix(in srgb, var(--aa-slate) 72%, var(--aa-ink));
	--aa-stone: var(--wp--preset--color--stone, #6b7275);
	--aa-tan: var(--wp--preset--color--placeholder, #d9ccb3);
	--aa-shade: var(--wp--preset--color--shade, #0f1c26);
	--aa-map-land: var(--wp--preset--color--map-land, #dccaa6);
	--aa-map-around: var(--wp--preset--color--map-around, #efe6d4);
	--aa-on-dark: color-mix(in srgb, var(--aa-ivory) 80%, var(--aa-lapis-deep));
	--aa-on-dark-muted: color-mix(in srgb, var(--aa-ivory) 64%, var(--aa-lapis-deep));
	--aa-radius: var(--aa-design-radius, 6px);
	--aa-radius-sm: var(--aa-design-radius-sm, 4px);
	--aa-btn-radius: var(--aa-design-btn-radius, 4px);
	--aa-serif: var(--wp--preset--font-family--serif, "Source Serif 4", IRANSans, Georgia, serif);
	--aa-sans: var(--wp--preset--font-family--sans, Manrope, IRANSans, system-ui, sans-serif);
	--aa-mono: ui-monospace, Menlo, Consolas, monospace;
	--aa-ease: cubic-bezier(.2, .7, .2, 1);
	--aa-shadow-card: var(--wp--preset--shadow--card, 0 20px 40px -24px rgba(23, 63, 103, .35));
	--aa-shadow-lift: var(--wp--preset--shadow--lift, 0 24px 40px -24px rgba(23, 63, 103, .55));
	--aa-gdeg: 90deg;
	--aa-track: 1;
}

[dir="rtl"] {
	--aa-gdeg: 270deg;
	--aa-track: 0;
}

/* ---------- Shared ---------- */

[class^="wp-block-about-afghanistan-"],
[class*=" wp-block-about-afghanistan-"] {
	box-sizing: border-box;
	font-family: var(--aa-sans);
	margin-block: 0;
}

[class*="wp-block-about-afghanistan-"] *,
[class*="wp-block-about-afghanistan-"] *::before,
[class*="wp-block-about-afghanistan-"] *::after {
	box-sizing: border-box;
}

.aa-wrap {
	max-width: var(--aa-wide, 1320px);
	margin-inline: auto;
	padding-inline: 40px;
}

.aa-kicker {
	margin: 0;
	font: 700 11px/1 var(--aa-sans);
	letter-spacing: calc(.22em * var(--aa-track));
	text-transform: uppercase;
	color: var(--aa-terracotta);
}

.aa-kicker--light { color: var(--aa-saffron-light); }
.aa-kicker--lapis { color: var(--aa-lapis); font-size: 12px; }

.aa-kicker--rule {
	display: flex;
	align-items: center;
	gap: 14px;
	font-size: 12px;
	letter-spacing: calc(.28em * var(--aa-track));
	color: var(--aa-saffron-light);
}

.aa-kicker--rule::after {
	content: "";
	width: 40px;
	height: 1px;
	background: currentColor;
}

.aa-h2 {
	margin: 0;
	font: 500 clamp(36px, 4vw, 52px)/1.05 var(--aa-serif);
	letter-spacing: -.02em;
	color: var(--aa-lapis);
	text-wrap: balance;
}

.aa-h2--sm { font-size: clamp(32px, 3.4vw, 46px); line-height: 1.08; }

.aa-h3 {
	margin: 0;
	font: 500 38px/1.1 var(--aa-serif);
	color: var(--aa-lapis);
}

.aa-body { margin: 0; font-size: 16px; line-height: 1.6; color: var(--aa-slate-2); }
.aa-mono { margin: 0; font: 600 13px/1 var(--aa-mono); color: var(--aa-terracotta); }

.aa-link {
	font: 600 14px/1.3 var(--aa-sans);
	color: var(--aa-turquoise);
	text-decoration: none;
	white-space: nowrap;
}

.aa-link:hover { color: var(--aa-lapis); }

.aa-arrow {
	display: inline-block;
	transition: transform .2s ease;
}

a:hover > .aa-arrow,
button:hover > .aa-arrow,
a:focus-visible > .aa-arrow { transform: translateX(4px); }

[dir="rtl"] a:hover > .aa-arrow,
[dir="rtl"] button:hover > .aa-arrow,
[dir="rtl"] a:focus-visible > .aa-arrow { transform: translateX(-4px); }

.aa-diamond {
	flex: none;
	display: inline-block;
	width: 6px;
	height: 6px;
	background: var(--aa-saffron);
	transform: rotate(45deg);
}

.aa-diamond--lg { width: 10px; height: 10px; }

.aa-chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 9px 14px;
	border-radius: var(--aa-radius-sm, 4px);
	font: 500 12.5px/1 var(--aa-sans);
	color: var(--aa-ivory);
	text-decoration: none;
}

.aa-loc { display: flex; gap: 8px; align-items: center; margin: 0; font-size: 13.5px; color: var(--aa-slate); }

.aa-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 16px 24px;
	border: 1px solid transparent;
	border-radius: var(--aa-btn-radius, 4px);
	font: 600 15px/1 var(--aa-sans);
	text-decoration: none;
	cursor: pointer;
	transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

.aa-btn--sm { padding: 15px 22px; font-size: 14px; align-self: flex-start; }
.aa-btn--block { display: flex; width: 100%; padding: 13px; font-size: 13.5px; }

.aa-btn--primary { background: var(--aa-lapis); color: var(--aa-ivory); }
.aa-btn--primary:hover, .aa-btn--primary:focus-visible { background: var(--aa-lapis-hover); color: var(--aa-ivory); }

.aa-btn--ghost { padding-block: 15px; background: color-mix(in srgb, var(--aa-ivory) 6%, transparent); border-color: color-mix(in srgb, var(--aa-ivory) 70%, transparent); color: var(--aa-ivory); }
.aa-btn--ghost:hover, .aa-btn--ghost:focus-visible { background: color-mix(in srgb, var(--aa-ivory) 16%, transparent); color: var(--aa-ivory); }

.aa-btn--dark { background: var(--aa-ink); color: var(--aa-ivory); }
.aa-btn--dark:hover, .aa-btn--dark:focus-visible { background: var(--aa-lapis); color: var(--aa-ivory); }

.aa-btn--outline-light { padding: 14px 22px; font-size: 14px; border-color: color-mix(in srgb, var(--aa-ivory) 70%, transparent); color: var(--aa-ivory); background: transparent; }
.aa-btn--outline-light:hover, .aa-btn--outline-light:focus-visible { background: var(--aa-ivory); color: var(--aa-lapis); }

.aa-btn--saffron { align-self: flex-start; padding: 14px 20px; font: 700 14px/1 var(--aa-sans); background: var(--aa-saffron); color: var(--aa-ink); }
.aa-btn--saffron:hover, .aa-btn--saffron:focus-visible { background: var(--aa-saffron-light); color: var(--aa-ink); }

.aa-pills { display: flex; flex-wrap: wrap; gap: 6px; }

.aa-pill {
	padding: 8px 12px;
	border: 1px solid color-mix(in srgb, var(--aa-ink) 25%, transparent);
	border-radius: 40px;
	background: transparent;
	color: var(--aa-ink);
	font: 600 12.5px/1 var(--aa-sans);
	cursor: pointer;
	transition: all .2s ease;
}

.aa-pill:hover { border-color: var(--aa-lapis); }
.aa-pill.is-active { background: var(--aa-lapis); border-color: var(--aa-lapis); color: var(--aa-ivory); }

.aa-pills--dark .aa-pill { border-color: color-mix(in srgb, var(--aa-ivory) 25%, transparent); color: var(--aa-on-dark); }
.aa-pills--dark .aa-pill:hover { border-color: var(--aa-saffron-light); }
.aa-pills--dark .aa-pill.is-active { background: var(--aa-saffron); border-color: var(--aa-saffron); color: var(--aa-ink); }

.aa-tabs { display: flex; flex-wrap: wrap; gap: 24px; }

.aa-tab {
	padding: 6px 0;
	border: 0;
	border-bottom: 2px solid transparent;
	background: none;
	font: 600 13.5px/1 var(--aa-sans);
	color: var(--aa-stone);
	cursor: pointer;
	transition: all .2s ease;
}

.aa-tab:hover { color: var(--aa-lapis); }
.aa-tab.is-active { border-bottom-color: var(--aa-lapis); color: var(--aa-lapis); }

.aa-circlebtn {
	flex: none;
	width: 44px;
	height: 44px;
	border: 1px solid color-mix(in srgb, var(--aa-ink) 20%, transparent);
	border-radius: 50%;
	background: var(--aa-ivory);
	color: var(--aa-ink);
	font-size: 16px;
	cursor: pointer;
	transition: border-color .2s ease;
}

.aa-circlebtn:hover { border-color: var(--aa-lapis); }

.aa-sechead {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-end;
	gap: 32px;
	margin-block-end: 40px;
}

.aa-sechead .aa-kicker { margin-block-end: 16px; }
.aa-sechead--tabs { gap: 24px; margin-block-end: 32px; }

.aa-sechead__aside { display: flex; gap: 40px; align-items: flex-end; flex-wrap: wrap; }
.aa-sechead__aside p { margin: 0; max-width: 340px; font-size: 14px; line-height: 1.6; color: var(--aa-slate); }

.aa-media-cover,
.aa-hero__img,
.aa-pcard__img,
.aa-placecard__media img,
.aa-timeline__media img,
.aa-food__hero img,
.aa-dish__thumb img,
.aa-person__img img,
.aa-era__thumb img,
.aa-surprise__media img,
.aa-news__bg,
.aa-feature__media {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
}

[class*="wp-block-about-afghanistan-"] button:focus-visible,
[class*="wp-block-about-afghanistan-"] a:focus-visible,
[class*="wp-block-about-afghanistan-"] input:focus-visible,
.aa-map__marker:focus-visible {
	outline: 2px solid var(--aa-focus, var(--aa-saffron));
	outline-offset: 3px;
}

/* ---------- 2. Hero ---------- */

.aa-hero {
	position: relative;
	height: var(--aa-hero-h, 90vh);
	min-height: var(--aa-hero-min, 640px);
	overflow: hidden;
	background: var(--aa-ink);
	color: var(--aa-ivory);
}

.aa-hero__media, .aa-hero__slide { position: absolute; inset: 0; }

.aa-hero__slide { opacity: 0; transition: opacity 1.4s ease; }
.aa-hero__slide.is-active { opacity: 1; }

.aa-hero__img { object-position: var(--aa-focal, 50% 50%); transform: scale(1); transition: transform 9s ease-out; }
.aa-hero__slide.is-active .aa-hero__img { transform: scale(1.06); }

.aa-hero__shade {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(var(--aa-gdeg), color-mix(in srgb, var(--aa-shade) calc(var(--aa-hero-shade, .72) * 100%), transparent) 0%, color-mix(in srgb, var(--aa-shade) calc(calc(var(--aa-hero-shade, .72) * .5) * 100%), transparent) 45%, color-mix(in srgb, var(--aa-shade) 0%, transparent) 70%),
		linear-gradient(180deg, color-mix(in srgb, var(--aa-shade) 45%, transparent) 0%, color-mix(in srgb, var(--aa-shade) 0%, transparent) 22%, color-mix(in srgb, var(--aa-shade) 0%, transparent) 70%, color-mix(in srgb, var(--aa-shade) 55%, transparent) 100%);
}

.aa-hero__inner {
	position: relative;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.aa-hero__content {
	max-width: var(--aa-hero-width, 640px);
	display: flex;
	flex-direction: column;
	gap: 24px;
	padding-block-start: 40px;
}

.aa-hero__title {
	margin: 0;
	font: 500 clamp(52px, 7vw, 96px)/1 var(--aa-serif);
	letter-spacing: -.02em;
	color: var(--aa-ivory);
	text-wrap: balance;
}

.aa-hero__lede { margin: 0; max-width: 500px; font-size: 19px; line-height: 1.55; opacity: .92; text-wrap: pretty; }
.aa-hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-block-start: 8px; }

.aa-hero__foot { position: absolute; inset-inline: 0; bottom: 28px; }

.aa-hero__foot-inner {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
}

.aa-hero__scroll {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 13px;
	color: var(--aa-ivory);
	opacity: .85;
	text-decoration: none;
}

.aa-hero__scroll:hover { color: var(--aa-ivory); opacity: 1; }

.aa-hero__mouse {
	position: relative;
	width: 18px;
	height: 28px;
	border: 1.5px solid currentColor;
	border-radius: 10px;
}

.aa-hero__mouse::after {
	content: "";
	position: absolute;
	inset-inline-start: 50%;
	top: 6px;
	width: 2px;
	height: 6px;
	margin-inline-start: -1px;
	border-radius: 1px;
	background: currentColor;
	animation: aa-scroll 1.8s ease-in-out infinite;
}

@keyframes aa-scroll {
	0%, 100% { transform: translateY(0); opacity: 1; }
	60% { transform: translateY(6px); opacity: .2; }
}

.aa-hero__controls { display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }
.aa-hero__bars { display: flex; gap: 8px; }

.aa-hero__bar {
	width: 16px;
	height: 3px;
	padding: 0;
	border: 0;
	border-radius: 2px;
	background: color-mix(in srgb, var(--aa-ivory) 50%, transparent);
	cursor: pointer;
	transition: all .4s ease;
	/* A 3px target is too small to hit; extend it invisibly. */
	position: relative;
}

.aa-hero__bar::before { content: ""; position: absolute; inset: -10px -2px; }
.aa-hero__bar.is-active { width: 40px; background: var(--aa-saffron); }

.aa-hero__caption {
	background: color-mix(in srgb, var(--aa-shade) 55%, transparent);
	border: 1px solid color-mix(in srgb, var(--aa-ivory) 20%, transparent);
	transition: background-color .2s ease;
}

.aa-hero__caption:hover { background: color-mix(in srgb, var(--aa-shade) 80%, transparent); color: var(--aa-ivory); }

/* ---------- 4. Map ---------- */

.aa-mapsec {
	background: var(--aa-sand);
	border-block: 1px solid color-mix(in srgb, var(--aa-ink) 6%, transparent);
	scroll-margin-top: 72px;
}

.aa-mapsec__grid {
	display: grid;
	grid-template-columns: minmax(260px, .8fr) minmax(0, 1.7fr) minmax(280px, .9fr);
	gap: 40px;
	align-items: center;
	padding-block: calc(88px * var(--aa-space, 1));
}

.aa-mapsec__intro { display: flex; flex-direction: column; gap: 22px; }
.aa-mapsec__intro .aa-h2 { font-size: clamp(36px, 3.6vw, 52px); line-height: 1.02; }

.aa-mapsec__canvas { position: relative; aspect-ratio: 4 / 3; }
.aa-mapsec__credit { position: absolute; inset-inline-end: 0; bottom: -22px; margin: 0; font-size: 10.5px; color: var(--aa-stone); }

.aa-map__svg { display: block; width: 100%; height: 100%; overflow: hidden; font-family: var(--aa-sans); direction: ltr; }
.aa-map__graticule { fill: none; stroke: color-mix(in srgb, var(--aa-ink) 7%, transparent); }
.aa-map__neighbours path { fill: var(--aa-map-around); stroke: color-mix(in srgb, var(--aa-ink) 22%, transparent); stroke-width: .7; }

.aa-map__province {
	fill: var(--aa-map-land);
	stroke: color-mix(in srgb, var(--aa-ink) 28%, transparent);
	stroke-width: .6;
	stroke-linejoin: round;
	transition: fill .25s ease, transform .25s var(--aa-ease);
}

.aa-map__province:hover { fill: color-mix(in srgb, var(--aa-map-land) 88%, var(--aa-ink)); }
.aa-map__country { fill: none; stroke: var(--aa-ink); stroke-width: 1.3; stroke-linejoin: round; pointer-events: none; }
.aa-map__labels text { font-size: 10px; letter-spacing: .18em; fill: color-mix(in srgb, var(--aa-ink) 45%, transparent); text-anchor: middle; }
.aa-map__scale line { stroke: var(--aa-ink); }
.aa-map__scale text { font-size: 10px; fill: var(--aa-ink); letter-spacing: 0; text-anchor: start; }
.aa-map__labels .aa-map__north { font-size: 11px; font-weight: 700; fill: var(--aa-ink); letter-spacing: 0; }

.aa-map__marker { cursor: pointer; transition: opacity .3s ease; outline: none; }
.aa-map__marker .aa-map__dot { fill: var(--aa-marker, var(--aa-turquoise)); stroke: var(--aa-ivory); stroke-width: 1.5; transition: r .2s ease, fill .2s ease; }
.aa-map__marker .aa-map__ring { fill: none; stroke: var(--aa-lapis); stroke-width: 0; }
.aa-map__marker text { font-size: 12px; font-weight: 500; fill: var(--aa-ink); paint-order: stroke; stroke: var(--aa-map-land); stroke-width: 3; }
.aa-map__marker:hover .aa-map__dot { r: 8; fill: var(--aa-marker, var(--aa-turquoise)); }
.aa-map__marker:focus-visible .aa-map__ring { stroke: var(--aa-saffron); stroke-width: 2; }
.aa-map__marker.is-selected .aa-map__dot { r: 7; fill: var(--aa-lapis); }
.aa-map__marker.is-selected .aa-map__ring { stroke-width: 1.5; }
.aa-map__marker.is-selected text { fill: var(--aa-lapis); font-weight: 700; }
.aa-map__marker.is-dimmed { opacity: .18; pointer-events: none; }
/* Province-only places: a smaller dot, name on hover / focus / selection, so
   34 provinces do not bury the cities and sites in labels. */
.aa-map__marker--minor .aa-map__dot { r: 3.5; }
.aa-map__marker--minor text { opacity: 0; transition: opacity .2s ease; }
.aa-map__marker--minor:hover text,
.aa-map__marker--minor:focus-visible text,
.aa-map__marker--minor.is-selected text { opacity: 1; }

.aa-placecard {
	overflow: hidden;
	border-radius: var(--aa-radius, 6px);
	background: var(--aa-ivory);
	box-shadow: var(--aa-shadow-card);
}

.aa-placecard[hidden] { display: none; }
.aa-placecard__media { position: relative; height: 170px; background: var(--aa-tan); }
.aa-placecard__body { display: flex; flex-direction: column; gap: 14px; padding: 24px; }
.aa-placecard__name { margin: 0; font: 500 28px/1.1 var(--aa-serif); color: var(--aa-lapis); }
.aa-placecard__region { margin: 4px 0 0; font-size: 13px; font-weight: 600; color: var(--aa-terracotta); }
.aa-placecard__blurb { margin: 0; font-size: 14px; line-height: 1.6; color: var(--aa-slate-2); }

.aa-facts {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px 16px;
	margin: 0;
	padding-block-start: 14px;
	border-top: 1px solid color-mix(in srgb, var(--aa-ink) 10%, transparent);
}

.aa-facts dt {
	margin-block-end: 5px;
	font: 700 10px/1 var(--aa-sans);
	letter-spacing: calc(.14em * var(--aa-track));
	text-transform: uppercase;
	color: var(--aa-stone);
}

.aa-facts dd { margin: 0; font-size: 13.5px; font-weight: 600; }

/* ---------- 5. Featured story ---------- */

.aa-feature {
	position: relative;
	height: var(--aa-feature-h, 640px);
	overflow: hidden;
	background: var(--aa-shade);
	color: var(--aa-ivory);
}

.aa-feature__media { top: -80px; height: calc(100% + 160px); will-change: transform; }

.aa-feature__shade {
	position: absolute;
	inset: 0;
	background: linear-gradient(var(--aa-gdeg), color-mix(in srgb, var(--aa-shade) calc(var(--aa-feature-shade, .9) * 100%), transparent) 0%, color-mix(in srgb, var(--aa-shade) calc(calc(var(--aa-feature-shade, .9) * .66) * 100%), transparent) 35%, color-mix(in srgb, var(--aa-shade) 0%, transparent) 65%);
}

.aa-feature__inner {
	position: relative;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 22px;
}

.aa-feature__title {
	margin: 0;
	max-width: 620px;
	font: 500 clamp(48px, 6vw, 84px)/1 var(--aa-serif);
	letter-spacing: -.02em;
	color: var(--aa-ivory);
}

.aa-feature__lede { margin: 0; max-width: 420px; font-size: 18px; line-height: 1.55; opacity: .9; }
.aa-feature__actions { display: flex; flex-wrap: wrap; gap: 24px; align-items: center; }
.aa-feature__time { font: 500 13px/1 var(--aa-mono); opacity: .7; }
.aa-feature__loc { position: absolute; inset-inline-end: 40px; top: 32px; background: color-mix(in srgb, var(--aa-shade) 60%, transparent); }

/* ---------- 6. Timeline ---------- */

.aa-timeline { padding-block: calc(96px * var(--aa-space, 1)); scroll-margin-top: 72px; }

.aa-timeline__row { display: flex; align-items: center; gap: 16px; }

.aa-timeline__list {
	flex: 1;
	min-width: 0;
	display: grid;
	grid-template-columns: repeat(var(--aa-eras, 6), minmax(104px, 1fr));
	overflow-x: auto;
	padding: 10px 0 6px;
	scroll-snap-type: x proximity;
	scrollbar-width: thin;
}

.aa-era {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	min-width: 0;
	text-align: center;
	scroll-snap-align: center;
}

.aa-era__thumb {
	position: relative;
	width: calc(100% - 20px);
	max-width: 148px;
	aspect-ratio: 1;
	overflow: hidden;
	border-radius: var(--aa-radius, 6px);
	background: var(--aa-sand);
	outline: 2px solid transparent;
	outline-offset: 3px;
	transition: transform .35s var(--aa-ease), outline-color .2s ease, box-shadow .35s ease;
}

.aa-era.is-active .aa-era__thumb {
	transform: translateY(-6px);
	outline-color: var(--aa-saffron);
	box-shadow: 0 18px 30px -18px color-mix(in srgb, var(--aa-lapis) 55%, transparent);
}

.aa-era__tab {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--aa-ink);
	cursor: pointer;
}

.aa-era__track { position: relative; display: block; width: 100%; height: 16px; }

.aa-era__seg {
	position: absolute;
	top: 7px;
	height: 2px;
	background: color-mix(in srgb, var(--aa-lapis) 22%, transparent);
	transition: background-color .4s ease;
}

.aa-era__seg--in { inset-inline: 0 50%; }
.aa-era__seg--out { inset-inline: 50% 0; }
.aa-era.is-reached .aa-era__seg--in, .aa-era.is-passed .aa-era__seg--out { background: var(--aa-lapis); }

.aa-era__dot {
	position: absolute;
	left: 50%;
	top: 8px;
	width: 9px;
	height: 9px;
	border: 2px solid var(--aa-lapis);
	background: var(--aa-ivory);
	transform: translate(-50%, -50%) rotate(45deg);
	transition: all .3s ease;
}

.aa-era.is-reached .aa-era__dot { background: var(--aa-lapis); }
.aa-era.is-active .aa-era__dot { width: 14px; height: 14px; }

.aa-era__name { display: block; font: 600 14px/1.25 var(--aa-sans); }
.aa-era.is-active .aa-era__name { color: var(--aa-lapis); }
.aa-era__date { display: block; margin-block-start: -7px; font-size: 12px; color: var(--aa-stone); }

.aa-timeline__panel {
	display: grid;
	grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
	gap: 56px;
	align-items: center;
	margin-block-start: 48px;
}

.aa-timeline__panel[hidden] { display: none; }
.aa-timeline__media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--aa-radius, 6px); background: var(--aa-tan); }
.aa-timeline__text { display: flex; flex-direction: column; gap: 16px; }
.aa-timeline__desc { margin: 0; font-size: 17px; line-height: 1.65; color: var(--aa-slate-2); text-wrap: pretty; }
.aa-timeline__rel { white-space: normal; padding-block-start: 16px; border-top: 1px solid color-mix(in srgb, var(--aa-ink) 10%, transparent); }

/* ---------- 7. Places grid ---------- */

.aa-places { padding-block: 24px calc(104px * var(--aa-space, 1)); scroll-margin-top: 72px; }

.aa-places__grid {
	display: grid;
	grid-template-columns: 1.2fr 1.2fr 1.2fr 1fr 1fr;
	grid-auto-rows: var(--aa-places-row, 224px);
	gap: 16px;
}

.aa-pcard {
	position: relative;
	overflow: hidden;
	border-radius: var(--aa-radius, 6px);
	background: var(--aa-tan);
	color: var(--aa-ivory);
	text-decoration: none;
	transition: opacity .4s ease, filter .4s ease, transform .4s var(--aa-ease), box-shadow .4s ease;
}

.aa-pcard:hover { transform: translateY(-4px); box-shadow: var(--aa-shadow-lift); color: var(--aa-ivory); }
.aa-pcard.is-dimmed { opacity: .28; filter: grayscale(1); }

.aa-pcard__img { transition: transform .7s var(--aa-ease); }
.aa-pcard:hover .aa-pcard__img { transform: scale(1.03); }
.aa-pcard__shade { position: absolute; inset: 0; background: linear-gradient(180deg, color-mix(in srgb, var(--aa-shade) 0%, transparent) 45%, color-mix(in srgb, var(--aa-shade) 80%, transparent)); pointer-events: none; }

.aa-pcard__text {
	position: absolute;
	inset-inline: 20px;
	bottom: 18px;
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 12px;
	pointer-events: none;
}

.aa-pcard__name { display: block; font: 500 24px/1.1 var(--aa-serif); }
.aa-pcard__sub { display: block; margin-block-start: 4px; font-size: 12.5px; opacity: .85; }

.aa-pcard--1 { grid-column: 1; grid-row: 1 / 3; }
.aa-pcard--2 { grid-column: 2; grid-row: 1 / 3; }
.aa-pcard--3 { grid-column: 3; grid-row: 1 / 3; }
.aa-pcard--4 { grid-column: 4; grid-row: 1; }
.aa-pcard--5 { grid-column: 4; grid-row: 2; }
.aa-pcard--6 { grid-column: 5; grid-row: 1 / 3; }
.aa-pcard--4 .aa-pcard__sub, .aa-pcard--5 .aa-pcard__sub { display: none; }

/* ---------- 9. Food ---------- */

.aa-food { overflow: hidden; background: var(--aa-lapis-deep); color: var(--aa-ivory); scroll-margin-top: 72px; }

.aa-food__grid {
	display: grid;
	grid-template-columns: minmax(260px, .8fr) minmax(0, 1.3fr) minmax(0, 1.1fr);
	gap: 40px;
	align-items: center;
	padding-block: calc(88px * var(--aa-space, 1));
}

.aa-food__intro { display: flex; flex-direction: column; gap: 20px; }
.aa-food .aa-h2 { font-size: clamp(36px, 3.6vw, 50px); color: var(--aa-ivory); }
.aa-food__lede { margin: 0; font-size: 15px; line-height: 1.65; color: var(--aa-on-dark); }

.aa-food__hero {
	position: relative;
	display: block;
	aspect-ratio: 5 / 4;
	overflow: hidden;
	border-radius: var(--aa-radius, 6px);
	color: var(--aa-ivory);
	text-decoration: none;
}

.aa-food__hero img { transition: transform .7s var(--aa-ease); }
.aa-food__hero:hover img { transform: scale(1.03); }
.aa-food__hero:hover { color: var(--aa-ivory); }
.aa-food__hero-shade { position: absolute; inset: 0; background: linear-gradient(180deg, color-mix(in srgb, var(--aa-lapis-deep) 0%, transparent) 55%, color-mix(in srgb, var(--aa-lapis-deep) 90%, transparent)); }
.aa-food__hero-text { position: absolute; inset-inline: 24px; bottom: 22px; }
.aa-food__hero-name { display: block; font: 500 30px/1.1 var(--aa-serif); }
.aa-food__hero-desc { display: block; max-width: 320px; margin-block-start: 6px; font-size: 13.5px; color: var(--aa-on-dark); }

.aa-food__browse { display: flex; flex-direction: column; gap: 20px; }

.aa-dishes {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
	gap: 14px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.aa-dishes li[hidden] { display: none; }

.aa-dish {
	display: flex;
	gap: 14px;
	align-items: center;
	padding: 10px;
	border: 1px solid color-mix(in srgb, var(--aa-ivory) 8%, transparent);
	border-radius: var(--aa-radius, 6px);
	background: color-mix(in srgb, var(--aa-ivory) 4%, transparent);
	color: var(--aa-ivory);
	text-decoration: none;
	transition: background-color .2s ease;
}

.aa-dish:hover { background: color-mix(in srgb, var(--aa-ivory) 9%, transparent); color: var(--aa-ivory); }
.aa-dish__thumb { flex: none; position: relative; width: 64px; height: 64px; overflow: hidden; border-radius: var(--aa-radius-sm, 4px); background: color-mix(in srgb, var(--aa-lapis-deep) 85%, var(--aa-ivory)); }
.aa-dish__text { min-width: 0; }
.aa-dish__name { display: block; font: 500 18px/1.1 var(--aa-serif); }
.aa-dish__desc { display: block; margin-block-start: 4px; font-size: 12px; line-height: 1.4; color: var(--aa-on-dark-muted); }

/* ---------- 10. People ---------- */

.aa-people__grid {
	display: grid;
	grid-template-columns: minmax(240px, .7fr) minmax(0, 2.3fr);
	gap: 48px;
	align-items: start;
	padding-block: calc(96px * var(--aa-space, 1));
}

.aa-people__intro { position: sticky; top: 100px; display: flex; flex-direction: column; gap: 18px; }
.aa-people__intro p { margin: 0; font-size: 14.5px; line-height: 1.65; color: var(--aa-slate); }
.aa-people__cards { display: grid; grid-template-columns: var(--aa-people-grid, repeat(auto-fill, minmax(170px, 1fr))); gap: 24px; }
.aa-people[style*="--aa-people-cols"] { --aa-people-grid: repeat(var(--aa-people-cols), minmax(0, 1fr)); }
.aa-people.is-static .aa-people__intro { position: static; }

.aa-person {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--aa-ink);
	text-align: start;
	cursor: pointer;
}

.aa-person__img {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	border-radius: var(--aa-radius-sm, 4px);
	background: var(--aa-tan);
	outline: 2px solid transparent;
	outline-offset: 3px;
	transition: outline-color .2s ease;
}

.aa-person.is-active .aa-person__img { outline-color: var(--aa-saffron); }

.aa-person__ph {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: flex-end;
	padding: 14px;
	background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--aa-ink) 5%, transparent) 0 8px, transparent 8px 16px);
	font: 500 11px/1.35 var(--aa-mono);
	color: color-mix(in srgb, var(--aa-ink) 55%, transparent);
}

.aa-person__name { display: block; font: 600 16px/1.2 var(--aa-sans); margin-block-end: -9px; }
.aa-person__role { display: block; font-size: 13px; color: var(--aa-stone); }

.aa-people__detail { margin-block-start: 24px; border-top: 1px solid color-mix(in srgb, var(--aa-ink) 12%, transparent); }

.aa-people__row {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 24px;
	align-items: baseline;
	padding-block-start: 20px;
}

.aa-people__row[hidden] { display: none; }
.aa-people__name { font: 500 22px/1.2 var(--aa-serif); color: var(--aa-lapis); text-decoration: none; }
.aa-people__bio { margin: 0; max-width: 720px; font: 400 18px/1.6 var(--aa-serif); color: var(--aa-slate-2); text-wrap: pretty; }

/* ---------- 12. A–Z ---------- */

.aa-az { background: var(--aa-ivory); scroll-margin-top: 72px; }
.aa-az > .aa-wrap { padding-block: calc(72px * var(--aa-space, 1)) calc(80px * var(--aa-space, 1)); }

.aa-az__head {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: baseline;
	gap: 24px;
	margin-block-end: 28px;
}

.aa-az__title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 28px; }
.aa-az__title p { margin: 0; font-size: 14px; color: var(--aa-stone); }

.aa-az__letters {
	display: flex;
	justify-content: space-between;
	gap: 4px;
	overflow-x: auto;
	padding-block-end: 6px;
	scroll-snap-type: x proximity;
	scrollbar-width: thin;
}

.aa-az__letter {
	flex: none;
	padding: 4px 2px;
	border: 0;
	border-bottom: 2px solid transparent;
	background: none;
	font: 500 clamp(22px, 2.4vw, 34px)/1 var(--aa-serif);
	color: var(--aa-terracotta);
	cursor: pointer;
	scroll-snap-align: center;
	transition: color .2s ease;
}

.aa-az__letter.is-accent { color: var(--aa-saffron); }
.aa-az__letter:hover { color: var(--aa-lapis); }
.aa-az__letter.is-active { color: var(--aa-lapis); border-bottom-color: var(--aa-saffron); }
.aa-az__letter:disabled { color: color-mix(in srgb, var(--aa-ink) 20%, transparent); cursor: default; }

.aa-az__entry {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 40px;
	align-items: center;
	margin-block-start: 36px;
}

.aa-az__entry[hidden] { display: none; }
.aa-az__big { font: 500 140px/.8 var(--aa-serif); color: var(--aa-saffron); }
.aa-az__term { font: 500 40px/1.1 var(--aa-serif); color: var(--aa-lapis); text-decoration: none; }
.aa-az__term:hover { color: var(--aa-turquoise); }
.aa-az__line { margin: 12px 0 0; max-width: 640px; font-size: 17px; line-height: 1.6; color: var(--aa-slate-2); }

/* ---------- 13. Surprise me ---------- */

.aa-surprise { background: var(--aa-sand); }

.aa-surprise__inner {
	max-width: 860px;
	margin-inline: auto;
	padding: calc(96px * var(--aa-space, 1)) 40px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 28px;
	text-align: center;
}

.aa-surprise .aa-h2 { font-size: clamp(34px, 3.6vw, 48px); line-height: 1.1; }

.aa-surprise__btn {
	display: inline-flex;
	gap: 12px;
	padding: 6px 2px;
	border-bottom: 2px solid var(--aa-saffron);
	font: 500 28px/1.2 var(--aa-serif);
	color: var(--aa-ink);
	text-decoration: none;
}

.aa-surprise__btn:hover { color: var(--aa-lapis); }
.aa-surprise__slot { width: 100%; max-width: 640px; }

.aa-surprise__card {
	display: grid;
	grid-template-columns: 200px minmax(0, 1fr);
	gap: 24px;
	align-items: center;
	overflow: hidden;
	border-radius: var(--aa-radius, 6px);
	background: var(--aa-ivory);
	color: var(--aa-ink);
	text-align: start;
	text-decoration: none;
	animation: aa-rise .4s var(--aa-ease);
}

.aa-surprise__card[hidden] { display: none; }

@keyframes aa-rise {
	from { opacity: 0; transform: translateY(8px); }
	to { opacity: 1; transform: none; }
}

.aa-surprise__media { position: relative; display: block; height: 140px; background: var(--aa-tan); }
.aa-surprise__media img[hidden] { display: none; }
.aa-surprise__text { display: block; padding-block: 16px; padding-inline-end: 24px; }
.aa-surprise__meta { display: block; font: 700 10.5px/1 var(--aa-sans); letter-spacing: calc(.18em * var(--aa-track)); text-transform: uppercase; color: var(--aa-terracotta); }
.aa-surprise__title { display: block; margin-block-start: 8px; font: 500 24px/1.15 var(--aa-serif); color: var(--aa-lapis); }
.aa-surprise__read { display: block; margin-block-start: 12px; font: 600 13px/1 var(--aa-sans); color: var(--aa-turquoise); }

/* ---------- 14. Newsletter ---------- */

.aa-news { position: relative; overflow: hidden; background: var(--aa-lapis); color: var(--aa-ivory); scroll-margin-top: 72px; }
.aa-news__bg { object-position: center 40%; }
.aa-news__shade { position: absolute; inset: 0; background: linear-gradient(var(--aa-gdeg), color-mix(in srgb, var(--aa-lapis-deep) calc(var(--aa-news-shade, .88) * 100%), transparent), color-mix(in srgb, var(--aa-lapis-deep) calc(calc(var(--aa-news-shade, .88) * .5) * 100%), transparent)); }

.aa-news__inner {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: 40px;
	padding-block: calc(88px * var(--aa-space, 1));
}

.aa-news .aa-h2 { color: var(--aa-ivory); line-height: 1.1; }
.aa-news__lede { margin: 12px 0 0; font-size: 16px; color: var(--aa-on-dark); }
.aa-news__action { flex: 1; max-width: 520px; min-width: min(300px, 100%); }
.aa-news__form { position: relative; display: flex; flex-wrap: wrap; }
.aa-news__form[hidden] { display: none; }

.aa-news__input {
	flex: 1;
	min-width: 0;
	padding: 16px 18px;
	border: 0;
	border-radius: 0;
	border-start-start-radius: var(--aa-btn-radius, 4px);
	border-end-start-radius: var(--aa-btn-radius, 4px);
	background: var(--aa-ivory);
	color: var(--aa-ink);
	font: 500 15px var(--aa-sans);
}

.aa-news__btn {
	padding: 16px 22px;
	border: 1px solid var(--aa-ivory);
	border-radius: 0;
	border-start-end-radius: var(--aa-btn-radius, 4px);
	border-end-end-radius: var(--aa-btn-radius, 4px);
	background: transparent;
	color: var(--aa-ivory);
	font: 600 15px/1 var(--aa-sans);
	white-space: nowrap;
	cursor: pointer;
	transition: background-color .2s ease, color .2s ease;
}

.aa-news__btn:hover, .aa-news__btn:focus-visible { background: var(--aa-ivory); color: var(--aa-lapis); }
.aa-news__btn:disabled { opacity: .6; cursor: progress; }
.aa-news__error { flex-basis: 100%; min-height: 1.2em; margin: 8px 0 0; font-size: 13.5px; color: var(--aa-saffron-light); }
.aa-news__error:empty { margin: 0; min-height: 0; }
.aa-news__done { display: flex; gap: 12px; align-items: center; margin: 0; font: 500 22px/1.3 var(--aa-serif); }
.aa-news__done[hidden] { display: none; }

.aa-hp { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Responsive ---------- */

@media (max-width: 1240px) {
	.aa-mapsec__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
	.aa-mapsec__intro { grid-column: 1 / -1; }
	.aa-food__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
	.aa-food__intro { grid-column: 1 / -1; }
}

@media (max-width: 1040px) {
	.aa-wrap { padding-inline: 24px; }
	.aa-feature__loc { inset-inline-end: 24px; }
	.aa-places__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 200px; }
	.aa-pcard--4 { grid-column: 1; grid-row: 3; }
	.aa-pcard--5 { grid-column: 2; grid-row: 3; }
	.aa-pcard--6 { grid-column: 3; grid-row: 3; }
	.aa-pcard--4 .aa-pcard__sub, .aa-pcard--5 .aa-pcard__sub { display: block; }
	.aa-timeline__panel { grid-template-columns: 1fr; gap: 28px; }
	.aa-people__grid { grid-template-columns: 1fr; gap: 32px; }
	.aa-people__intro { position: static; }
}

@media (max-width: 860px) {
	.aa-mapsec__grid, .aa-food__grid { grid-template-columns: 1fr; padding-block: calc(64px * var(--aa-space, 1)); }
	.aa-mapsec__canvas { margin-block-end: 16px; }
	.aa-timeline, .aa-people__grid { padding-block: calc(64px * var(--aa-space, 1)); }
	.aa-hero { height: 80vh; }
	.aa-hero__foot-inner { flex-direction: column; align-items: flex-start; }
	.aa-hero__controls { align-items: flex-start; }
	.aa-hero__scroll { display: none; }
	.aa-feature { height: 560px; }
	.aa-az__entry { gap: 20px; }
	.aa-az__big { font-size: 96px; }
	.aa-az__term { font-size: 32px; }
	.aa-surprise__card { grid-template-columns: 1fr; }
	.aa-surprise__text { padding: 0 20px 20px; }
	.aa-surprise__inner { padding: 72px 24px; }
}

@media (max-width: 680px) {
	.aa-places__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.aa-pcard--1 { grid-column: 1 / -1; grid-row: auto; }
	.aa-pcard--2, .aa-pcard--3, .aa-pcard--4, .aa-pcard--5, .aa-pcard--6 { grid-column: auto; grid-row: span 1; }
	.aa-pcard__sub { display: none !important; }
	.aa-timeline__row .aa-circlebtn { display: none; }
	.aa-timeline__list { grid-template-columns: repeat(var(--aa-eras, 6), 120px); }
	.aa-people__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
	.aa-people__row { grid-template-columns: 1fr; gap: 8px; }
	.aa-news__form { flex-direction: column; gap: 10px; }
	.aa-news__input, .aa-news__btn { border-radius: var(--aa-radius-sm, 4px); }
}

/* ---------- RTL ---------- */

[dir="rtl"] .aa-kicker,
[dir="rtl"] .aa-facts dt,
[dir="rtl"] .aa-surprise__meta { letter-spacing: 0; }

[dir="rtl"] .aa-h2,
[dir="rtl"] .aa-h3,
[dir="rtl"] .aa-hero__title,
[dir="rtl"] .aa-feature__title { letter-spacing: 0; line-height: 1.35; }

[dir="rtl"] .aa-era__dot { left: auto; right: 50%; transform: translate(50%, -50%) rotate(45deg); }
[dir="rtl"] .aa-hero__mouse::after { margin-inline-start: -1px; }

/* ---------- Motion ---------- */

@media (prefers-reduced-motion: reduce) {
	[class*="wp-block-about-afghanistan-"] *,
	[class*="wp-block-about-afghanistan-"] *::before,
	[class*="wp-block-about-afghanistan-"] *::after {
		transition: none !important;
		animation: none !important;
	}
	.aa-hero__slide.is-active .aa-hero__img { transform: none; }
	.aa-feature__media { top: 0; height: 100%; transform: none !important; }
}

/* Editor: ServerSideRender wraps the block; keep it clickable and full width. */
.aa-editor-preview { pointer-events: auto; }
.aa-editor-preview .aa-hero { height: 640px; }

/* ---------- Single-entry blocks ---------- */

.aa-entry-meta { margin: 0 0 14px; }

.aa-factsheet {
	padding: 24px;
	border-radius: var(--aa-radius, 6px);
	background: var(--aa-sand-light);
}

.aa-factsheet .aa-kicker { margin-block-end: 14px; }
.aa-facts--sheet { grid-template-columns: 1fr; border-top: 0; padding: 0; gap: 14px; }
.aa-locator { display: block; width: 100%; height: auto; margin-block-end: 20px; }
.aa-locator__land { fill: var(--aa-map-land); stroke: var(--aa-ink); stroke-width: 1.6; stroke-linejoin: round; }
.aa-locator__ring { fill: none; stroke: var(--aa-lapis); stroke-width: 2; }
.aa-locator__dot { fill: var(--aa-lapis); stroke: var(--aa-ivory); stroke-width: 2; }

.aa-sources {
	padding-block-start: 24px;
	border-top: 1px solid color-mix(in srgb, var(--aa-ink) 12%, transparent);
	font-size: 14px;
	color: var(--aa-slate);
}

.aa-sources .aa-kicker { margin-block-end: 12px; }
.aa-sources__list { margin: 0 0 16px; padding-inline-start: 1.2em; line-height: 1.6; }
.aa-sources__meta { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 0; font: 500 12.5px/1.4 var(--aa-mono); color: var(--aa-stone); }

.aa-continue { padding-block: calc(64px * var(--aa-space, 1)) 24px; }
.aa-continue .aa-h2 { margin-block-end: 28px; }

.aa-continue__list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.aa-continue__card { display: flex; flex-direction: column; gap: 10px; color: var(--aa-ink); text-decoration: none; }
.aa-continue__media { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--aa-radius-sm, 4px); background: var(--aa-tan); }
.aa-continue__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--aa-ease); }
.aa-continue__card:hover img { transform: scale(1.03); }
.aa-continue__type { font: 700 10.5px/1 var(--aa-sans); letter-spacing: calc(.18em * var(--aa-track)); text-transform: uppercase; color: var(--aa-terracotta); }
.aa-continue__title { font: 500 22px/1.2 var(--aa-serif); color: var(--aa-lapis); }


/* ---------- Options ---------- */

.aa-feature:not(.has-parallax) .aa-feature__media { top: 0; height: 100%; }
.aa-map__provinces.is-plain .aa-map__province { stroke: transparent; }
.aa-mapsec.is-cardless .aa-mapsec__grid { grid-template-columns: minmax(260px, .8fr) minmax(0, 2.2fr); }
.aa-timeline.is-compact .aa-era { gap: 8px; }
.aa-surprise__card.is-textonly { grid-template-columns: 1fr; }
.aa-surprise__card.is-textonly .aa-surprise__media { display: none; }
.aa-surprise__card.is-textonly .aa-surprise__text { padding: 20px 24px; }
.aa-news__privacy { flex-basis: 100%; margin: 10px 0 0; font-size: 12.5px; color: var(--aa-on-dark); }

/* A text colour chosen in the block sidebar reaches the section's own
   headings and body copy, which otherwise carry fixed design colours. */
.has-text-color :is(.aa-h2, .aa-h3, .aa-kicker, .aa-body, .aa-hero__title, .aa-feature__title, .aa-placecard__name, .aa-az__term, .aa-sechead__aside p, .aa-people__intro p, .aa-food__lede, .aa-news__lede, .aa-timeline__desc, .aa-az__line) { color: inherit; }
.has-link-color a:not(.aa-btn) { color: var(--wp--style--color--link, inherit); }
/* A background chosen in the sidebar replaces the section's own. */
.has-background.aa-mapsec, .has-background.aa-food, .has-background.aa-surprise, .has-background.aa-az { background-image: none; }

@media (max-width: 1040px) {
	.aa-people[style*="--aa-people-cols"] { --aa-people-grid: repeat(auto-fill, minmax(150px, 1fr)); }
	.aa-mapsec.is-cardless .aa-mapsec__grid { grid-template-columns: 1fr; }
}

/* ---------- Design switches (Site Options → Design) ---------- */

.aa-no-zoom :is(.aa-pcard__img, .aa-food__hero img, .aa-continue__media img, .aa-dcard__img img, .aa-ccard__img img) { transform: none !important; }
.aa-no-zoom .aa-pcard:hover { transform: none; }
.aa-no-kenburns .aa-hero__slide.is-active .aa-hero__img { transform: none; }
.aa-no-motion *, .aa-no-motion *::before, .aa-no-motion *::after { transition: none !important; animation: none !important; }

/* ---------- Section styles (block sidebar → Styles) ---------- */

[class*="wp-block-about-afghanistan-"].is-style-ivory { background: var(--aa-ivory); }
[class*="wp-block-about-afghanistan-"].is-style-sand { background: var(--aa-sand); }
[class*="wp-block-about-afghanistan-"].is-style-sand-light { background: var(--aa-sand-light); }
[class*="wp-block-about-afghanistan-"].is-style-white { background: #fff; }

/* Dark treatments re-map this section's tokens: ink/lapis become light. */
[class*="wp-block-about-afghanistan-"]:is(.is-style-dark, .is-style-lapis, .is-style-night) {
	--aa-ink: var(--aa-ivory);
	--aa-lapis: var(--aa-ivory);
	--aa-slate: var(--aa-on-dark);
	--aa-slate-2: var(--aa-on-dark);
	--aa-stone: var(--aa-on-dark-muted);
	--aa-terracotta: var(--aa-saffron-light);
	--aa-turquoise: var(--aa-saffron-light);
	background: var(--aa-lapis-deep);
	color: var(--aa-ivory);
}
[class*="wp-block-about-afghanistan-"].is-style-lapis { background: var(--wp--preset--color--lapis, #173f67); }
[class*="wp-block-about-afghanistan-"].is-style-night { background: var(--aa-shade); }

:is(.is-style-dark, .is-style-lapis, .is-style-night) .aa-btn--primary,
:is(.is-style-dark, .is-style-lapis, .is-style-night) .aa-pill.is-active { background: var(--aa-saffron); border-color: var(--aa-saffron); color: #192126; }
:is(.is-style-dark, .is-style-lapis, .is-style-night) .aa-btn--dark { background: var(--aa-ivory); color: var(--aa-lapis-deep); }
:is(.is-style-dark, .is-style-lapis, .is-style-night) .aa-circlebtn { background: transparent; border-color: color-mix(in srgb, var(--aa-ivory) 35%, transparent); color: var(--aa-ivory); }
:is(.is-style-dark, .is-style-lapis, .is-style-night) .aa-map__marker text { stroke: var(--aa-lapis-deep); }

/* Light cards inside a dark section keep their normal colours. */
:is(.is-style-dark, .is-style-lapis, .is-style-night) :is(.aa-placecard, .aa-surprise__card) {
	--aa-ink: var(--wp--preset--color--ink, #192126);
	--aa-lapis: var(--wp--preset--color--lapis, #173f67);
	--aa-slate: var(--wp--preset--color--slate, #4a5358);
	--aa-slate-2: color-mix(in srgb, var(--aa-slate) 72%, var(--aa-ink));
	--aa-stone: var(--wp--preset--color--stone, #6b7275);
	--aa-terracotta: var(--wp--preset--color--terracotta, #a75c46);
	--aa-turquoise: var(--wp--preset--color--turquoise, #168a8a);
	color: var(--aa-ink);
}
:is(.is-style-dark, .is-style-lapis, .is-style-night) :is(.aa-sechead__aside p, .aa-people__intro p, .aa-az__title p) { color: var(--aa-on-dark); }

/* ==========================================================================
   Watch Afghanistan (video gallery) + single video player
   ========================================================================== */
.aa-videos { padding-block: calc(88px * var(--aa-space, 1)); }
.aa-videos__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-block-end: 32px; }
.aa-videos__head .aa-kicker { margin: 0 0 12px; }
.aa-videos__title { margin: 0; font: 500 clamp(34px, 3.6vw, 48px)/1.05 var(--aa-serif); letter-spacing: -.02em; color: var(--aa-lapis); }

.aa-videos__grid { display: grid; gap: 24px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) {
	.aa-videos.has-feature .aa-videos__grid { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
	.aa-videos.has-feature .aa-vcard.is-large { grid-row: span 2; }
}

.aa-vcard { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.aa-vcard__media {
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: var(--aa-radius, 14px);
	background: var(--aa-placeholder, color-mix(in srgb, var(--aa-ink) 12%, transparent));
}
/* The large card fills the height of the two stacked ones beside it. */
@media (min-width: 900px) { .aa-videos.has-feature .aa-vcard.is-large .aa-vcard__media { aspect-ratio: auto; flex: 1; min-height: 320px; } }
.aa-vcard__poster, .aa-vcard__player, .aa-player video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.aa-vcard__poster { object-fit: cover; transition: transform .6s ease; }
.aa-vcard:hover .aa-vcard__poster { transform: scale(1.03); }
.aa-vcard__player { background: #000; }

.aa-vcard__play {
	position: absolute;
	inset-block-end: 16px;
	inset-inline-start: 16px;
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: #fff;
	color: #173f67;
	box-shadow: 0 6px 18px rgba(0, 0, 0, .25);
	transition: transform .2s ease;
}
.aa-vcard.is-large .aa-vcard__play { width: 64px; height: 64px; inset-block-end: 22px; inset-inline-start: 22px; }
.aa-vcard__play:hover, .aa-vcard__play:focus-visible { transform: scale(1.08); }
/* Physical margin on purpose: the play triangle points right in every
   language (media-control convention), so its optical nudge does not flip. */
.aa-vcard__play svg { margin-left: 3px; }
.aa-vcard__time {
	position: absolute;
	inset-block-end: 16px;
	inset-inline-end: 16px;
	padding: 5px 9px;
	border-radius: 6px;
	background: rgba(12, 18, 24, .78);
	color: #fff;
	font: 600 12px/1 var(--aa-sans);
	direction: ltr;
	unicode-bidi: isolate;
}
.aa-vcard__media.is-playing :is(.aa-vcard__play, .aa-vcard__time, .aa-vcard__poster) { display: none; }

.aa-vcard__title { margin: 0; font: 500 20px/1.25 var(--aa-serif); color: var(--aa-lapis); }
.aa-vcard.is-large .aa-vcard__title { font-size: clamp(22px, 2vw, 28px); }
.aa-vcard__title a { color: inherit; text-decoration: none; }
.aa-vcard__title a:hover { text-decoration: underline; text-underline-offset: 3px; }

.aa-videos__follow {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px 24px;
	margin-block-start: 40px;
	padding-block-start: 28px;
	border-block-start: 1px solid color-mix(in srgb, var(--aa-ink) 14%, transparent);
}
.aa-videos__follow-text { margin: 0; font: 500 16px/1.4 var(--aa-sans); color: var(--aa-slate-2); }
.aa-videos__social { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.aa-videos__social a {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border: 1px solid color-mix(in srgb, var(--aa-ink) 22%, transparent);
	border-radius: 50%;
	color: var(--aa-lapis);
	transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.aa-videos__social a:hover, .aa-videos__social a:focus-visible { background: var(--aa-lapis); border-color: var(--aa-lapis); color: var(--aa-ivory); }
:is(.is-style-dark, .is-style-lapis, .is-style-night) .aa-videos__social a:hover { color: var(--aa-lapis-deep); }
@media (max-width: 640px) {
	.aa-videos__head { flex-direction: column; align-items: flex-start; }
	.aa-videos__follow { flex-direction: column; align-items: flex-start; }
}

.aa-player { margin: 0 0 32px; }
.aa-player__note { margin-block-start: 12px; font: 500 14px/1.5 var(--aa-sans); color: var(--aa-slate-2); }
html.aa-dark .aa-videos__social a:hover, html.aa-dark .aa-videos__social a:focus-visible { color: #0e151c; }

/* Hero pause / play (WCAG 2.2.2). Pressed = stopped, so it shows "play". */
.aa-hero__barsrow { display: flex; align-items: center; gap: 14px; }
.aa-hero__toggle {
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 1px solid color-mix(in srgb, var(--aa-ivory) 55%, transparent);
	border-radius: 50%;
	background: color-mix(in srgb, #000 25%, transparent);
	color: var(--aa-ivory);
	cursor: pointer;
}
.aa-hero__toggle:hover, .aa-hero__toggle:focus-visible { border-color: var(--aa-ivory); background: color-mix(in srgb, #000 45%, transparent); }
.aa-hero__toggle span { display: block; width: 8px; height: 10px; border-inline: 3px solid currentColor; box-sizing: border-box; }
.aa-hero__toggle[aria-pressed="true"] span { width: 0; height: 0; border: 0; border-block: 5px solid transparent; border-left: 8px solid currentColor; margin-left: 2px; }
@media (prefers-reduced-motion: reduce) { .aa-hero__toggle { display: none; } }

.aa-news__notice { margin: 0 0 14px; padding: 10px 14px; border-radius: var(--aa-radius, 10px); background: color-mix(in srgb, var(--aa-ivory) 14%, transparent); color: var(--aa-ivory); font: 500 14px/1.45 var(--aa-sans); }

/* ==========================================================================
   Cover tile: stands in for a missing photo (Content::cover).
   Palette colour + eight-point-star tilework pattern + the first letter.
   ========================================================================== */
:is(.aa-person__img, .aa-era__thumb, .aa-pcard, .aa-food__hero, .aa-dish__thumb, .aa-placecard__media, .aa-continue__media, .aa-timeline__media) { position: relative; }
.aa-cover {
	--aa-cover-bg: var(--wp--preset--color--lapis, #173f67);
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	overflow: hidden;
	container-type: size;
	background-color: var(--aa-cover-bg);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'%3E%3Cg fill='none' stroke='%23fff' stroke-opacity='.13' stroke-width='1'%3E%3Cpath d='M28 6l6.4 15.6L50 28l-15.6 6.4L28 50l-6.4-15.6L6 28l15.6-6.4z'/%3E%3Cpath d='M12.4 12.4L28 18.9l15.6-6.5-6.5 15.6 6.5 15.6L28 37.1l-15.6 6.5 6.5-15.6z'/%3E%3C/g%3E%3C/svg%3E");
	background-size: 56px 56px;
	background-position: center;
}
.aa-cover::after {
	/* A soft vignette so the letter sits in light, like the photo cards. */
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(circle at 50% 45%, color-mix(in srgb, #fff 10%, transparent), transparent 62%);
}
.aa-cover--t2 { --aa-cover-bg: var(--wp--preset--color--terracotta, #a75c46); }
.aa-cover--t3 { --aa-cover-bg: var(--wp--preset--color--turquoise, #168a8a); }
.aa-cover--t4 { --aa-cover-bg: color-mix(in srgb, var(--wp--preset--color--lapis-deep, #0b2236) 88%, var(--wp--preset--color--saffron, #c98a2b)); }
.aa-cover__mark {
	position: relative;
	z-index: 1;
	font: 500 48px/1 var(--aa-serif);
	font-size: clamp(22px, 42cqmin, 140px);
	color: var(--wp--preset--color--saffron-light, #f0c77d);
	text-shadow: 0 2px 18px rgba(0, 0, 0, .25);
}
/* Dark mode: the palette tokens turn light there, so keep tiles deep. */
html.aa-dark .aa-cover { --aa-cover-bg: #1d3a57; }
html.aa-dark .aa-cover--t2 { --aa-cover-bg: #6f3b2c; }
html.aa-dark .aa-cover--t3 { --aa-cover-bg: #11595a; }
html.aa-dark .aa-cover--t4 { --aa-cover-bg: #2a2a1f; }
html.aa-dark .aa-cover__mark { color: #f0c77d; }
/* In a card the tile replaces the photo under the text shade. */
.aa-pcard .aa-cover, .aa-food__hero .aa-cover { z-index: 0; }
/* Archive cards (core featured-image block). */
.wp-block-post-featured-image.aa-has-cover { position: relative; overflow: hidden; }
.wp-block-post-featured-image.aa-has-cover > a { position: absolute; inset: 0; display: block; }

/* Phones / small tablets: the slideshow controls were pinned to the bottom
   of a fixed-height hero, so on a short screen the buttons ran into them.
   Here the hero grows with its content and the controls sit in the flow,
   below the buttons. */
@media (max-width: 860px) {
	.aa-hero { display: flex; flex-direction: column; height: auto; min-height: max(80svh, 560px); }
	.aa-hero__inner { flex: 1 0 auto; height: auto; padding-block: 104px 28px; }
	.aa-hero__foot { position: relative; inset: auto; bottom: auto; padding-block-end: 28px; }
	.aa-hero__foot-inner { gap: 14px; }
}

/* Map on phones. The SVG is 800 units wide; on a ~330px screen everything is
   drawn at ~41%, so 12px labels came out ~5px and dots were too small to
   tap. Here: bigger dots, an invisible 32-unit tap area (~26px, above the 24px minimum), and only the
   SELECTED place's name, at ~12px real size (all of them at that size
   would collide; the card under the map names the place anyway). */
@media (max-width: 680px) {
	.aa-map__marker .aa-map__ring { r: 32; fill: transparent; pointer-events: all; }
	.aa-map__marker .aa-map__dot { r: 10; stroke-width: 3; }
	.aa-map__marker--minor .aa-map__ring { r: 20; }
	.aa-map__marker--minor .aa-map__dot { r: 7; }
	.aa-map__marker:hover .aa-map__dot { r: 12; }
	.aa-map__marker.is-selected .aa-map__dot { r: 13; }
	.aa-map__marker.is-selected .aa-map__ring { stroke-width: 4; r: 22; }
	.aa-map__marker text { display: none; font-size: 30px; stroke-width: 7; }
	.aa-map__marker.is-selected text { display: inline; }
	.aa-map__marker.is-selected text[text-anchor="start"] { transform: translateX(14px); }
	.aa-map__marker.is-selected text[text-anchor="end"] { transform: translateX(-14px); }
	.aa-map__labels text { font-size: 24px; }
	.aa-map__scale, .aa-map__north { display: none; }
}