/* =========================================================================
   FVKB ontwerplaag 4: fotoarchief
   ========================================================================= */

/* ---------- Jaarvaandels in de donkere kop ---------- */
.fvkb-f-jarenscroll { padding-bottom: 8px; }
.fvkb-f-jarenbaan { min-width: 1100px; padding: 0 10px; }
.fvkb-f-jarenstang { position: relative; height: 6px; border-radius: 3px; background: #D9A43A; }
.fvkb-f-jarenstang > span { position: absolute; top: -5px; width: 16px; height: 16px; border-radius: 50%; background: #D9A43A; left: -6px; }
.fvkb-f-jarenstang > span + span { left: auto; right: -6px; }
.fvkb-f-jarenrij { display: flex; justify-content: space-between; padding: 0 12px; --start: .2s; --stap: .04s; }
.fvkb-f-jaarknop { width: 62px; height: 82px; }
.fvkb-f-jaarknop .fvkb-o-franje { inset: 0 0 -7px 0; clip-path: polygon(0 0, 100% 0, 100% 78%, 50% 100%, 0 78%); background: repeating-linear-gradient(90deg, #D9A43A 0 2px, transparent 2px 4px); opacity: 0; transition: opacity .25s; }
.fvkb-f-jaarknop .fvkb-o-doek { clip-path: polygon(0 0, 100% 0, 100% 78%, 50% 100%, 0 78%); background: #262A53; color: #FFFFFF; justify-content: flex-start; padding-top: 22px; font-family: "Unbounded", sans-serif; font-size: 14px; font-weight: 700; transition: background-color .25s, color .25s; }
.fvkb-f-jaarknop:hover .fvkb-o-doek { background: #3E4166; color: #FFFFFF; }
.fvkb-f-jaarknop[aria-current] { margin-top: 10px; }
.fvkb-f-jaarknop[aria-current] .fvkb-o-doek { background: #FFFFFF; color: #0E1240; }
.fvkb-f-jaarknop[aria-current] .fvkb-o-franje { opacity: 1; }
.fvkb-f-jaarknop:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 4px; }

/* ---------- Zoeken in de kop ---------- */
.fvkb-f-zoek-w { display: flex; flex-direction: column; gap: 10px; padding-bottom: 6px; }
.fvkb-f-zoek { display: flex; align-items: center; gap: 10px; min-height: 60px; padding: 0 8px 0 20px; border-radius: 6px; background: #FFFFFF; box-sizing: border-box; width: 100%; margin: 0; }
.fvkb-f-zoek:focus-within { box-shadow: 0 0 0 3px rgba(217, 164, 58, .6); }
.fvkb-f-zoek input[type="search"] { flex: 1; min-width: 0; border: 0 !important; outline: none; background: transparent !important; font-size: 17px; color: #0E1240; padding: 0 !important; box-shadow: none !important; }
.fvkb-f-zoek input::placeholder { color: #6E718C; }
.fvkb-f-zoek .fvkb-o-zoekknop { min-height: 44px; padding: 0 20px !important; }
.fvkb-f-zoeknoot { font-size: 14px; color: #D5D8F7; }

/* ---------- Kop van het archief: jaar of zoekterm, aantal ---------- */
.fvkb-f-kop { display: flex; flex-wrap: wrap; gap: 16px 32px; align-items: baseline; justify-content: space-between; }
.fvkb-f-kop-l { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; }
.fvkb-f-titel { margin: 0; font-family: "Unbounded", sans-serif; font-size: clamp(40px, 4.4vw, 60px); font-weight: 700; letter-spacing: -.03em; line-height: 1; color: #0E1240; }
.fvkb-f-telling { font-size: 17px; font-weight: 700; color: #3E4166; }
.fvkb-f-wis { font-size: 16px; font-weight: 700; color: #2B3BD6; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; text-decoration-color: #AAB1EF; transition: text-decoration-color .25s; }
.fvkb-f-wis:hover { color: #2B3BD6; text-decoration-color: #2B3BD6; }
.fvkb-f-leeg { margin-top: 32px; background: #FFFFFF; border-radius: 14px; padding: 40px; display: flex; flex-direction: column; gap: 8px; }
.fvkb-f-leeg h3 { margin: 0; font-family: "Unbounded", sans-serif; font-size: 22px; font-weight: 600; color: #0E1240; }
.fvkb-f-leeg p { margin: 0; font-size: 17px; color: #3E4166; }

/* ---------- Soort activiteit als chips ---------- */
.fvkb-f-soortrij { display: flex; flex-wrap: wrap; gap: 10px; }
.fvkb-f-chip { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 6px; border: 2px solid #DAD7CD; box-sizing: border-box; background: transparent; color: #0E1240; font-size: 15px; font-weight: 700; text-decoration: none; transition: border-color .25s, background-color .25s, color .25s; }
.fvkb-f-chip:hover { border-color: #0E1240; color: #0E1240; }
.fvkb-f-chip[aria-current] { background: #0E1240; border-color: #0E1240; color: #FFFFFF; }
.fvkb-f-chip[aria-current]:hover { color: #FFFFFF; }
.fvkb-f-chipdot { width: 8px; height: 8px; border-radius: 50%; margin-right: 8px; flex: none; }

/* ---------- Tegels in het archief: jaar alleen bij zoeken ---------- */
.fvkb-archief .fvkb-album-tegel .fvkb-jaarvaandel { display: none !important; }
.fvkb-f-zoekend .fvkb-archief .fvkb-album-tegel .fvkb-jaarvaandel { display: flex !important; }
.fvkb-archief .elementor-loop-container { gap: 32px 20px !important; }

@media (max-width: 760px) {
	.fvkb-f-soortrij { flex-wrap: nowrap; overflow-x: auto; margin: 0 -20px; padding: 0 20px 6px; }
	.fvkb-f-soortrij > * { flex-shrink: 0; }
	.fvkb-f-jarenscroll { margin: 0 -20px; padding: 0 20px 8px; }
	.fvkb-archief .elementor-loop-container { gap: 24px 12px !important; }
	.fvkb-archief .fvkb-album-tegel__titel .elementor-heading-title { font-size: 14px !important; hyphens: auto; overflow-wrap: break-word; }
	.fvkb-archief .fvkb-soortchip { display: none !important; }
}