/* Aeolus Leden – bestuurspagina: Nu aan het roer, het boardrek, Overstag en de oproep. */
.ab {
	--ab-rood: #CF0000;
	--ab-zee: #0B7285;
	--ab-zee-donker: #075563;
	--ab-donker: #0C1E27;
	--ab-licht: #EAF3F5;
	--ab-lijn: #DCE6EA;
	--ab-tekst: #33414b;
	--ab-hout: #9A6A43;
	--ab-hout-donker: #7E5434;
	font-family: Roboto, system-ui, sans-serif;
	color: #111;
	display: grid;
	gap: 72px;
	container-type: inline-size;
	container-name: ab;
}
.ab *, .ab *::before, .ab *::after { box-sizing: border-box; }
.ab h2, .ab h3 { font-family: Poppins, system-ui, sans-serif; color: #111; margin: 0; text-wrap: balance; }
.ab .ab-woord { color: var(--ab-rood); }
.ab .ab-kicker { margin: 0 0 6px; font: 700 13px Roboto, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--ab-zee); }
.ab .screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Uitleg van het surfwoord */
.ab .ab-uitleg { margin: 14px 0 0; display: inline-block; padding: 10px 16px; background: var(--ab-licht); border-radius: 12px; font-size: 15px; line-height: 1.45; max-width: 52ch; color: var(--ab-tekst); }
.ab .ab-uitleg strong { font-family: Poppins, sans-serif; color: var(--ab-zee); margin-right: 6px; }

/* Nu aan het roer */
.ab-roer > .ab-kicker { margin-bottom: 26px; }
.ab-roer-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 56px; align-items: center; }
.ab-roer-grid > :only-child { grid-column: 1 / -1; }
.ab-polaroid { margin: 0; position: relative; padding: 16px 16px 56px; background: #fff; box-shadow: 0 14px 34px rgba(12,30,39,.18); transform: rotate(-2deg); border-radius: 4px; }
.ab-polaroid::before { content: ""; position: absolute; top: -12px; left: 50%; width: 110px; height: 26px; margin-left: -55px; background: rgba(255,201,60,.75); transform: rotate(3deg); }
.ab-polaroid img { display: block; width: 100%; aspect-ratio: 4 / 3; height: auto !important; object-fit: cover; border-radius: 2px !important; }
.ab-polaroid figcaption { position: absolute; left: 0; right: 0; bottom: 14px; text-align: center; font: 700 18px Poppins, sans-serif; }
.ab .ab-roer-naam { font-size: clamp(36px, 7.5cqi, 76px); font-weight: 800; line-height: .95; letter-spacing: -.01em; overflow-wrap: break-word; }
.ab-crew { list-style: none; margin: 28px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 170px), 1fr)); gap: 14px; }
.ab-crew li { display: flex; flex-direction: column; gap: 6px; padding: 14px 14px 16px; border-radius: 16px; background: #fff; box-shadow: 0 6px 18px rgba(17,17,17,.10); }
.ab-crew-icoon { width: 40px; height: 40px; border-radius: 50%; background: var(--ab-zee); color: #fff; display: flex; align-items: center; justify-content: center; }
.ab-crew-rol { font: 700 11px Roboto, sans-serif; letter-spacing: .1em; text-transform: uppercase; color: #4A5560; }
.ab-crew-naam { font: 700 17px/1.25 Poppins, sans-serif; }
.ab-crew-naam a, .ab-leden a { color: inherit; text-decoration: underline; text-decoration-color: rgba(207,0,0,.4); text-underline-offset: 3px; }

/* Het boardrek */
.ab-loods { background: var(--ab-licht); border-radius: 24px; overflow: hidden; }
.ab-loods-kop { padding: 48px 6% 0; }
.ab-loods-kop h2, .ab-overstag h2 { font-size: clamp(28px, 4cqi, 40px); font-weight: 800; text-transform: uppercase; }
.ab-loods-kop p, .ab-overstag > p { margin: 8px 0 0; font-size: 17px; max-width: 56ch; color: var(--ab-tekst); }
.ab-rek { overflow-x: auto; padding: 96px 6% 4px; margin-top: 8px; scrollbar-width: thin; }
.ab-rek-binnen { position: relative; display: flex; gap: 16px; align-items: flex-end; width: max-content; padding: 0 30px; }
.ab-hout { position: absolute; left: 0; right: 0; height: 18px; border-radius: 8px; background: var(--ab-hout); box-shadow: inset 0 -4px 0 rgba(0,0,0,.18), inset 0 3px 0 rgba(255,255,255,.18); pointer-events: none; }
.ab-hout--achter { bottom: 232px; z-index: 0; }
.ab-hout--voor { bottom: 36px; height: 18px; z-index: 2; }
.ab-paal { position: absolute; bottom: 26px; width: 16px; height: 240px; background: var(--ab-hout-donker); border-radius: 6px; z-index: 0; }
.ab-paal--links { left: 8px; }
.ab-paal--rechts { right: 8px; }
.ab .ab-board { position: relative; z-index: 1; flex: none; display: flex; flex-direction: column; align-items: center; gap: 8px; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; color: var(--ab-donker); font: inherit; line-height: 1; cursor: pointer; box-shadow: none; transform: rotate(var(--ab-kant, 0deg)); transition: transform .35s cubic-bezier(.3,1.4,.5,1); }
.ab .ab-board:hover, .ab .ab-board:focus, .ab .ab-board:active { background: none; color: var(--ab-donker); border: 0; box-shadow: none; }
.ab .ab-board:focus-visible { outline: none; }
.ab .ab-board:focus-visible .ab-plank { outline: 3px solid var(--ab-rood); outline-offset: 4px; border-radius: 40px; }
.ab .ab-board.is-actief { transform: translateY(-48px); }
.ab .ab-board.is-actief .ab-plank { filter: drop-shadow(0 14px 14px rgba(12,30,39,.35)); }
.ab-plank { display: block; overflow: visible; transform-origin: 50% 100%; }
.ab .ab-board:hover .ab-plank { animation: ab-wiebel 1.2s ease-in-out infinite; }
@keyframes ab-wiebel { 0%,100% { transform: rotate(0) } 30% { transform: rotate(-1.5deg) } 70% { transform: rotate(1.2deg) } }
.ab-board-label { font: 700 12px Poppins, sans-serif; white-space: nowrap; height: 18px; display: flex; align-items: center; position: relative; z-index: 3; }
.ab .ab-board.is-actief .ab-board-label { color: var(--ab-rood); transform: translateY(48px); }

.ab-golf svg { display: block; width: 100%; height: 60px; margin-top: -2px; }
.ab-zee { background: var(--ab-zee-donker); padding: 8px 6% 56px; }
.ab-paneel { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 36px; align-items: start; padding: 32px; background: #fff; border-radius: 20px; }
.ab-paneel:not(:has(.ab-paneel-foto)) { grid-template-columns: 1fr; }
.ab.ab-js .ab-paneel:not(.is-actief) { display: none; }
.ab.ab-js .ab-paneel + .ab-paneel { margin-top: 0; }
.ab:not(.ab-js) .ab-paneel + .ab-paneel { margin-top: 16px; }
.ab-paneel-foto img { display: block; width: 100%; aspect-ratio: 4 / 3; height: auto !important; object-fit: cover; border-radius: 12px !important; }
.ab-paneel h3 { margin-top: 6px; font-size: clamp(28px, 5cqi, 48px); font-weight: 800; line-height: 1; overflow-wrap: break-word; }
.ab-leden { margin: 22px 0 0; padding: 0; }
.ab-leden > div { display: grid; grid-template-columns: minmax(120px, 190px) minmax(0, 1fr); gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--ab-lijn); font-size: 16px; }
.ab-leden dt { color: #4A5560; }
.ab-leden dd { margin: 0; font-weight: 700; }

/* Overstag */
.ab-overstag ul { list-style: none; margin: 28px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 16px; }
.ab-overstag li { display: flex; flex-direction: column; gap: 10px; padding: 18px; border: 2px solid var(--ab-donker); border-radius: 16px; }
.ab-overstag strong { font: 700 17px Poppins, sans-serif; }
.ab-overstag li span { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 14px; color: var(--ab-tekst); }
.ab-overstag svg { color: var(--ab-rood); flex: none; }

/* Oproep */
.ab-oproep { display: flex; flex-wrap: wrap; align-items: center; gap: 32px 48px; padding: 36px 40px; border-radius: 24px; background: var(--ab-donker); color: #fff; }
.ab-oproep > div { flex: 1 1 340px; min-width: 0; }
.ab .ab-oproep h2 { color: #fff; font-size: 36px; font-weight: 800; }
.ab-oproep p { margin: 10px 0 0; font-size: 17px; line-height: 1.5; max-width: 52ch; color: var(--ab-lijn); }
.ab .ab-knop { display: inline-flex; align-items: center; min-height: 52px; padding: 0 28px; border-radius: 37px; background: var(--ab-rood); color: #fff; text-decoration: none; font: 700 17px Poppins, sans-serif; }
.ab .ab-knop:hover, .ab .ab-knop:focus { background: #A80000; color: #fff; }

@container ab (max-width: 820px) {
	.ab { gap: 48px; }
	.ab-roer-grid, .ab-paneel { grid-template-columns: 1fr; gap: 28px; }
	.ab-polaroid { padding: 10px 10px 40px; }
	.ab-crew { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
	.ab-crew li { padding: 12px; border-radius: 14px; }
	.ab-crew-icoon { width: 34px; height: 34px; }
	.ab-crew-naam { font-size: 15px; }
	.ab-polaroid figcaption { bottom: 10px; font-size: 15px; }
	.ab-paneel { padding: 18px; }
	.ab-zee { padding: 8px 16px 32px; }
	.ab-loods-kop { padding: 32px 16px 0; }
	.ab-rek { padding: 84px 16px 4px; scroll-snap-type: x proximity; }
	.ab .ab-board { scroll-snap-align: center; }
	.ab-leden > div { grid-template-columns: 1fr; gap: 2px; }
	.ab-oproep { padding: 26px 22px; }
	.ab .ab-oproep h2 { font-size: 28px; }
	.ab .ab-knop { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
	.ab .ab-board { transition: none; }
	.ab .ab-board:hover .ab-plank { animation: none; }
}