/* sections/about.php */
.ab-section {
	box-sizing: border-box; width: 100%;
	padding: clamp(2.5rem, 1.5rem + 3.5vw, 4.5rem) var(--space-gutter);
	--ab-blue: color-mix(in srgb, var(--c-primary) 8%, var(--c-primary-dark));
	background: var(--c-bg); color: var(--c-text);
	font-family: var(--f-body); font-size: var(--fs-base); line-height: 1.6;
}
.ab-section *, .ab-section *::before, .ab-section *::after { box-sizing: border-box; }
.ab-icon { flex: none; width: 1rem; height: 1rem; }
.ab-inner { display: grid; gap: var(--space-5); max-width: var(--container); margin: 0 auto; }
.ab-inner > * { min-width: 0; }

.ab-label {
	display: inline-flex; align-items: center; gap: var(--space-2);
	margin: 0 0 var(--space-3); padding: var(--space-1) var(--space-3);
	border-radius: var(--radius-pill); background: var(--c-primary-soft); color: var(--c-primary);
	font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
}
.ab-label::before { content: ""; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--c-accent); }
.ab-section .ab-title {
	margin: 0; color: var(--c-heading);
	font-family: var(--f-heading); font-size: var(--fs-2xl); font-weight: 800;
	line-height: 1.18; letter-spacing: -0.02em; text-wrap: balance;
}
.ab-text { margin: var(--space-3) 0 0; color: var(--c-text-muted); font-size: var(--fs-lg); }
.ab-section .ab-inline { color: var(--c-primary); font-weight: 700; text-decoration: underline; text-underline-offset: 0.2em; }
.ab-section .ab-inline:hover, .ab-section .ab-inline:focus { color: var(--c-accent); }

.ab-map {
	position: relative; overflow: hidden; aspect-ratio: 640 / 600;
	border-radius: var(--radius-lg) 3rem var(--radius-lg) 3rem; background: var(--ab-blue); box-shadow: var(--shadow-md);
}
.ab-svg { position: absolute; inset: 0; display: block; width: 100%; height: 100%; overflow: visible; }
.ab-dots { fill: var(--c-primary-light); opacity: 0.16; }
.ab-ring { fill: none; stroke: var(--c-primary-light); stroke-opacity: 0.28; stroke-width: 1.2; stroke-dasharray: 3 7; }
.ab-ring-text { fill: var(--c-primary-light); fill-opacity: 0.75; font-family: var(--f-body); font-size: 14px; font-weight: 700; text-anchor: middle; paint-order: stroke; stroke: var(--ab-blue); stroke-width: 6; }
.ab-city { fill: var(--c-primary-light); fill-opacity: 0.1; stroke: var(--c-primary-light); stroke-opacity: 0.45; stroke-width: 1.5; stroke-dasharray: 5 6; stroke-linejoin: round; }
.ab-river { fill: none; stroke: var(--c-primary-light); stroke-opacity: 0.35; stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; }
.ab-sister { margin-top: var(--space-2); }
.ab-routes { fill: none; stroke: var(--c-primary-light); stroke-opacity: 0.5; stroke-width: 2; stroke-linecap: round; stroke-dasharray: 2 9; animation: ab-flow 2.4s linear infinite; }
@keyframes ab-flow { to { stroke-dashoffset: -22; } }

.ab-pin { cursor: pointer; }
.ab-pin-hit { fill: transparent; }
.ab-pin-dot { fill: var(--c-accent); stroke: var(--c-on-dark); stroke-width: 3; transform-box: fill-box; transform-origin: center; transition: transform 0.3s; }
.ab-pin-ring { fill: none; stroke: var(--c-on-dark); stroke-width: 2; opacity: 0; transform-box: fill-box; transform-origin: center; }
.ab-pin-label {
	fill: var(--c-primary-light); font-family: var(--f-body); font-size: 19px; font-weight: 700; opacity: 0;
	paint-order: stroke; stroke: var(--ab-blue); stroke-width: 6; stroke-linejoin: round;
	transition: opacity 0.3s, fill 0.3s; pointer-events: none;
}
.ab-pin.is-active .ab-pin-dot { transform: scale(1.45); }
.ab-pin.is-active .ab-pin-label, .ab-pin--base .ab-pin-label { fill: var(--c-on-dark); font-size: 19px; opacity: 1; }
.ab-pin.is-active .ab-pin-ring, .ab-pin--base .ab-pin-ring { animation: ab-pulse 2.2s ease-out infinite; }
.ab-pin--base .ab-pin-ring { stroke: var(--c-primary-light); }
@keyframes ab-pulse { from { opacity: 0.9; transform: scale(1); } to { opacity: 0; transform: scale(4.2); } }

.ab-now {
	position: absolute; top: var(--space-3); right: var(--space-3); max-width: 62%; padding: var(--space-2) var(--space-3);
	border: 1px solid color-mix(in srgb, var(--c-primary-light) 32%, transparent); border-radius: var(--radius);
	background: var(--ab-blue); color: var(--c-on-dark); line-height: 1.25;
}
.ab-now-label { display: flex; align-items: center; gap: var(--space-2); color: var(--c-primary-light); font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.ab-now-label::before { content: ""; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--c-accent); }
.ab-now-name { display: block; margin-top: var(--space-1); font: 800 var(--fs-lg)/1.2 var(--f-heading); }

.ab-zones-title { margin: var(--space-2) 0 var(--space-3); color: var(--c-heading); font-size: var(--fs-sm); font-weight: 700; }
.ab-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.ab-section .ab-chip {
	display: inline-flex; align-items: center; gap: var(--space-2); min-height: 2.25rem; padding: var(--space-1) var(--space-3);
	border: 1px solid var(--c-border); border-radius: var(--radius-pill); background: var(--c-surface); color: var(--c-heading);
	font: 600 var(--fs-sm)/1.3 var(--f-body); text-align: left; cursor: pointer;
	transition: background-color 0.25s, border-color 0.25s, color 0.25s;
}
.ab-chip .ab-icon { color: var(--c-accent); transition: color 0.25s; }
.ab-section .ab-chip:hover, .ab-section .ab-chip:focus, .ab-section .ab-chip.is-active { border-color: var(--ab-blue); background: var(--ab-blue); color: var(--c-on-dark); }
.ab-chip:hover .ab-icon, .ab-chip:focus .ab-icon, .ab-chip.is-active .ab-icon { color: var(--c-primary-light); }
.ab-section .ab-chip:focus-visible, .ab-section a:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 2px; }
.ab-note { margin: var(--space-4) 0 0; color: var(--c-text-muted); font-size: var(--fs-sm); }

.ab-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-5); margin-top: var(--space-4); }
.ab-section .ab-btn {
	display: inline-flex; align-items: center; gap: var(--space-4); padding: var(--space-1) var(--space-1) var(--space-1) var(--space-5);
	border-radius: var(--radius-pill); background: var(--c-primary); color: var(--c-on-primary); box-shadow: var(--shadow-md);
	font: 700 var(--fs-base)/1.2 var(--f-body); text-decoration: none; transition: background-color 0.25s, transform 0.25s;
}
.ab-section .ab-btn:hover, .ab-section .ab-btn:focus { background: var(--c-primary-hover); color: var(--c-on-primary); transform: translateY(-2px); }
.ab-badge { display: grid; place-items: center; flex: none; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--c-accent); color: var(--c-on-accent); }
.ab-badge .ab-icon { transform: rotate(-45deg); transition: transform 0.25s; }
.ab-btn:hover .ab-badge .ab-icon { transform: rotate(0deg); }
.ab-section .ab-phone { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--c-heading); font-weight: 700; text-decoration: none; white-space: nowrap; }
.ab-section .ab-phone:hover, .ab-section .ab-phone:focus { color: var(--c-primary); text-decoration: underline; text-underline-offset: 0.2em; }
.ab-phone .ab-icon { color: var(--c-accent); }

@media (min-width: 768px) {
	.ab-map { max-width: 34rem; width: 100%; margin-inline: auto; }
	.ab-pin-label { font-size: 15px; opacity: 0.85; }
}
/* Brussels map (19 communes close together): only the name of the commune shown, at every width. */
.ab-section--dense .ab-pin-label { opacity: 0; }
.ab-section--dense .ab-pin.is-active .ab-pin-label { opacity: 1; }
.ab-section--dense .ab-pin--base:not(.is-active) .ab-pin-label { opacity: 0; }
.ab-section--dense .ab-pin-dot { stroke-width: 2.5; }
.ab-section--dense .ab-routes { stroke-opacity: 0.32; }
@media (min-width: 1024px) {
	.ab-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto 1fr; gap: var(--space-4) var(--space-7); align-items: start; }
	.ab-map { grid-column: 1; grid-row: 1 / span 2; max-width: none; align-self: stretch; aspect-ratio: auto; min-height: 30rem; }
	.ab-head, .ab-body { grid-column: 2; }
}
@media (prefers-reduced-motion: reduce) {
	.ab-section * { animation: none !important; transition: none !important; }
}