/* Vastelaovend Trio's: frontend (kleuren uit de agenda als die er is) */
.vtr-trios, .vtr-history, .vtr-single { --vtr-primary: var(--vav-primary, #c8102e); --vtr-secondary: var(--vav-secondary, #ffcc00); --vtr-ink: var(--vav-ink, #1d2327); --vtr-muted: var(--vav-muted, #5f6368); --vtr-line: var(--vav-line, #e3e5e8); --vtr-radius: var(--vav-radius, 12px); --vtr-shadow: var(--vav-shadow, 0 2px 8px rgba(0,0,0,.08)); color: var(--vtr-ink); }
.vtr-trios__title, .vtr-history__title { font-size: 1.5em; margin: 0 0 16px; }
.vtr-empty { padding: 24px; border: 1px dashed var(--vtr-line); border-radius: var(--vtr-radius); text-align: center; color: var(--vtr-muted); }
.vtr-grid { display: grid; gap: 24px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); margin: 0; padding: 0; list-style: none; }
.vtr-card { display: flex; flex-direction: column; overflow: hidden; border-radius: var(--vtr-radius); background: #fff; box-shadow: var(--vtr-shadow); border-top: 4px solid var(--vtr-primary); }
.vtr-card--current { border-top-color: var(--vtr-secondary); }
.vtr-card__media { position: relative; display: block; aspect-ratio: 4 / 3; background: #f1f2f4; overflow: hidden; }
.vtr-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vtr-card__placeholder { display: flex; align-items: center; justify-content: center; height: 100%; font-size: 4em; color: var(--vtr-secondary); }
.vtr-card__year { position: absolute; left: 14px; top: 14px; padding: 6px 12px; border-radius: 8px; background: var(--vtr-secondary); color: var(--vtr-ink); font-weight: 800; box-shadow: var(--vtr-shadow); }
.vtr-card__body { display: flex; flex-direction: column; gap: 6px; padding: 16px 20px 20px; }
.vtr-card__org { display: flex; align-items: center; gap: 8px; margin: 0; font-size: .85em; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.vtr-card__org img { width: 28px; height: 28px; object-fit: cover; border-radius: 50%; }
.vtr-card__org a { color: var(--vtr-primary); text-decoration: none; }
.vtr-card__kind { font-size: .78em; color: var(--vtr-muted); }
.vtr-card__prins { margin: 0; font-size: 1.25em; line-height: 1.25; }
.vtr-card__prins a { color: var(--vtr-ink); text-decoration: none; }
.vtr-card__prins a:hover { color: var(--vtr-primary); text-decoration: underline; }
.vtr-card__name { margin: -2px 0 0; color: var(--vtr-muted); }
.vtr-card__roles { margin: 6px 0 0; }
.vtr-card__roles div { display: flex; gap: 8px; margin: 0 0 2px; }
.vtr-card__roles dt { flex: 0 0 90px; color: var(--vtr-muted); font-size: .9em; }
.vtr-card__roles dd { margin: 0; font-weight: 600; }
.vtr-card__motto { margin: 8px 0 0; font-style: italic; color: var(--vtr-muted); }
.vtr-history__table { width: 100%; border-collapse: collapse; background: #fff; border-radius: var(--vtr-radius); overflow: hidden; box-shadow: var(--vtr-shadow); }
.vtr-history__table th, .vtr-history__table td { padding: 10px 14px; text-align: left; border-bottom: 1px solid var(--vtr-line); vertical-align: top; }
.vtr-history__table thead th { background: var(--vtr-ink); color: #fff; font-size: .85em; text-transform: uppercase; letter-spacing: .04em; }
.vtr-history__year { font-weight: 800; color: var(--vtr-primary); font-size: 1.1em; white-space: nowrap; }
.vtr-history__table a { color: var(--vtr-ink); font-weight: 600; text-decoration: none; }
.vtr-history__table a:hover { color: var(--vtr-primary); text-decoration: underline; }
.vtr-muted { color: var(--vtr-muted); }
.vtr-badge { display: inline-block; padding: 2px 10px; border-radius: 999px; background: var(--vtr-secondary); font-size: .75em; font-weight: 700; vertical-align: middle; }
.vtr-single__layout { display: grid; gap: 28px; grid-template-columns: minmax(0, 1fr) minmax(280px, 1fr); align-items: start; margin-bottom: 28px; }
.vtr-single__photo { margin: 0; border-radius: var(--vtr-radius); overflow: hidden; box-shadow: var(--vtr-shadow); }
.vtr-single__img { display: block; width: 100%; height: auto; }
.vtr-single__facts { padding: 22px 24px; border-radius: var(--vtr-radius); background: #fff; box-shadow: var(--vtr-shadow); border-top: 4px solid var(--vtr-primary); }
.vtr-single__year { margin: 0 0 6px; font-size: 1.6em; font-weight: 800; color: var(--vtr-primary); }
.vtr-single__org { margin: 0 0 14px; }
.vtr-single__org a { display: inline-flex; align-items: center; gap: 8px; color: var(--vtr-ink); font-weight: 600; text-decoration: none; }
.vtr-single__org img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; }
.vtr-roles { display: grid; grid-template-columns: max-content 1fr; gap: 8px 16px; margin: 0; }
.vtr-roles div { display: contents; }
.vtr-roles dt { font-weight: 700; }
.vtr-roles dd { margin: 0; }
.vtr-single__content { margin-bottom: 32px; }
@media (max-width: 720px) { .vtr-single__layout { grid-template-columns: 1fr; } .vtr-history__table thead { display: none; } .vtr-history__table td, .vtr-history__table th { display: block; border: 0; padding: 4px 14px; } .vtr-history__table tr { display: block; padding: 8px 0; border-bottom: 1px solid var(--vtr-line); } }

/* Overzicht met filters ([vastelaovend_trio_overzicht], /trios/). */
.vtr-ov { --vtr-navy: #0b3158; --vtr-red: var(--vav-primary, #c8102e); --vtr-yellow: var(--vav-secondary, #ffcc00); --vtr-grey: #5b6478; --vtr-rule: #e6e9f0; color: var(--vtr-navy); }
.vtr-ov__filters { margin: 0 0 28px; }
.vtr-ov__row { display: flex; gap: 0; padding: 6px; background: #fff; border-radius: 18px; box-shadow: 0 8px 30px rgba(11, 49, 88, .08); }
.vtr-ov__filter { position: relative; flex: 1 1 0; min-width: 0; margin: 0; padding: 8px 16px 6px; }
.vtr-ov__filter--search { flex: 1.6 1 0; }
.vtr-ov__filter + .vtr-ov__filter::before { content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 1px; background: var(--vtr-rule); }
.vtr-ov__label { display: block; font-size: 12px; font-weight: 700; color: var(--vtr-grey); }
.vtr-ov__filter input, .vtr-ov__filter select { display: block; width: 100%; height: 30px; margin: 0; padding: 0 !important; border: 0 !important; background-color: transparent !important; color: var(--vtr-navy); font: inherit; font-weight: 800; font-size: 16px; box-shadow: none !important; outline: 0; }
.vtr-ov__filter select { cursor: pointer; }
.vtr-ov__filter:focus-within { border-radius: 12px; box-shadow: inset 0 0 0 2px var(--vtr-navy); }
.vtr-ov__status { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; min-height: 24px; margin: 16px 2px 0; padding: 0; color: var(--vtr-grey); font-weight: 700; }
.vtr-ov__reset, .vtr-ov__all { padding: 0; border: 0; background: none; color: var(--vtr-red); font: inherit; font-weight: 800; text-decoration: underline; cursor: pointer; }
.vtr-ov__cards { display: grid; gap: 24px; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); margin: 0; padding: 0 !important; list-style: none !important; }
.vtr-ovc { margin: 0; }
.vtr-ovc[hidden] { display: none; }
.vtr-ovc__link { display: flex; flex-direction: column; height: 100%; overflow: hidden; border-radius: 22px; background: #fff; box-shadow: 0 8px 30px rgba(11, 49, 88, .08); color: inherit; text-decoration: none; transition: transform .25s, box-shadow .25s; }
.vtr-ovc__link:hover, .vtr-ovc__link:focus-visible { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(11, 49, 88, .16); }
.vtr-ovc__link:focus-visible { outline: 3px solid var(--vtr-yellow); outline-offset: 2px; }
.vtr-ovc__media { position: relative; display: block; aspect-ratio: 1 / 1; overflow: hidden; background: #eef0f4; }
.vtr-ovc__media > img:not(.vtr-ovc__logo):not(.vtr-ovc__biglogo) { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 15%; transition: transform .4s; }
.vtr-ovc__link:hover .vtr-ovc__media > img:not(.vtr-ovc__logo):not(.vtr-ovc__biglogo) { transform: scale(1.05); }
.vtr-ovc__media--empty { aspect-ratio: 16 / 10; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #0b3158 0%, #12407a 62%, #1737a6 100%); }
.vtr-ovc__crown { color: var(--vtr-yellow); font-size: 64px; line-height: 1; }
.vtr-ovc__year { position: absolute; left: 14px; top: 14px; padding: 6px 13px; border-radius: 999px; background: #fff; color: var(--vtr-navy); font-size: 14px; font-weight: 900; box-shadow: 0 4px 14px rgba(11, 49, 88, .18); }
.vtr-ovc--current .vtr-ovc__year { background: var(--vtr-yellow); }
.vtr-ovc__logo { position: absolute; right: 14px; bottom: 14px; width: 54px; height: 54px; padding: 6px; border-radius: 50%; background: #fff; object-fit: contain; box-shadow: 0 4px 14px rgba(11, 49, 88, .22); }
.vtr-ovc__body { display: flex; flex-direction: column; flex: 1; gap: 5px; padding: 18px 20px 20px; }
.vtr-ovc__org { color: var(--vtr-red); font-size: 12px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; }
.vtr-ovc__prins { font-size: 21px; font-weight: 800; line-height: 1.2; overflow-wrap: break-word; }
.vtr-ovc__name { color: var(--vtr-grey); font-weight: 700; }
.vtr-ovc__adj { font-size: 15px; font-weight: 600; }
.vtr-ovc__adj strong { display: block; color: var(--vtr-grey); font-size: 12px; font-weight: 700; }
.vtr-ovc__motto { margin-top: 4px; color: var(--vtr-grey); font-style: italic; }
.vtr-ovc__more { margin-top: auto; padding-top: 10px; font-size: 14px; font-weight: 800; }
.vtr-ovc__more::after { content: " \2192"; display: inline-block; transition: transform .2s; }
.vtr-ovc__link:hover .vtr-ovc__more::after { transform: translateX(4px); }
.vtr-ov__none { padding: 48px 20px; border-radius: 22px; background: #fff; text-align: center; box-shadow: 0 8px 30px rgba(11, 49, 88, .08); }
.vtr-ov__none-title { margin: 0 0 8px; padding: 0; font-size: 20px; font-weight: 800; }
.vtr-ov__none-title[hidden], .vtr-ov__none[hidden] { display: none; }
.vtr-ov__none p { padding: 0; margin-bottom: 0; }

.vtr-archive__inner { width: min(1440px, 100% - 48px); margin: 0 auto; }
.vtr-archive__hero { padding: 72px 0 48px; background: linear-gradient(135deg, #0b3158 0%, #12407a 62%, #1737a6 100%); color: #fff; }
.vtr-archive__title { margin: 0; padding: 0; color: #fff; font-size: clamp(40px, 6vw, 78px); font-weight: 900; line-height: 1; }
.vtr-archive__intro { max-width: 640px; margin: 22px 0 0; padding: 0; color: rgba(255, 255, 255, .9); font-size: 18px; line-height: 1.55; }
.vtr-archive__body { padding: 48px 0 90px; }

@media (max-width: 767px) {
	.vtr-ov__row { flex-direction: column; }
	.vtr-ov, .vtr-archive { overflow-x: clip; }
	.vtr-ov__filter + .vtr-ov__filter::before { left: 12px; right: 12px; top: 0; bottom: auto; width: auto; height: 1px; }
	.vtr-ov__cards { gap: 16px; grid-template-columns: 1fr; }
	.vtr-archive__hero { padding: 40px 0 30px; }
	.vtr-archive__intro { font-size: 16px; margin-top: 14px; }
	.vtr-archive__body { padding: 24px 0 60px; }
}

/* Geen foto: logo van de vereniging. */
.vtr-ovc__media--logo { aspect-ratio: 16 / 10; background: #fff; border-bottom: 1px solid var(--vtr-rule); }
.vtr-ovc__biglogo { position: absolute; left: 22px; top: 22px; width: calc(100% - 44px); height: calc(100% - 44px); object-fit: contain; transition: transform .3s; }
.vtr-ovc__link:hover .vtr-ovc__biglogo { transform: scale(1.05); }
.vtr-card__media .vtr-card__biglogo { width: 100%; height: 100%; padding: 22px; box-sizing: border-box; object-fit: contain; background: #fff; }

/* Kaart zonder eigen pagina: opent een lightbox. */
.vtr-ovc__link--box { cursor: zoom-in; }

.vtr-lb { position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(7, 26, 48, .88); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.vtr-lb[hidden] { display: none; }
.vtr-lb__panel { position: relative; display: flex; flex-direction: column; width: min(560px, 100%); max-width: 100%; transition: width .15s; max-height: 100%; overflow: hidden; border-radius: 22px; background: #fff; box-shadow: 0 30px 80px rgba(0, 0, 0, .45); color: #0b3158; }
.vtr-lb__media { position: relative; flex: 1 1 auto; min-height: 0; display: flex; align-items: center; justify-content: center; background: #0b3158; }
.vtr-lb__media img { display: block; width: 100%; height: auto; max-height: min(64vh, 720px); object-fit: cover; object-position: center 20%; }
.vtr-lb__media--logo { background: #fff; padding: 36px; border-bottom: 1px solid #e6e9f0; }
.vtr-lb__media--logo img { width: auto; max-width: 100%; max-height: min(40vh, 320px); object-fit: contain; }
.vtr-lb__media--empty { min-height: 200px; background: linear-gradient(135deg, #0b3158 0%, #12407a 62%, #1737a6 100%); color: #ffc20e; font-size: 96px; line-height: 1; }
.vtr-lb__year { position: absolute; left: 16px; top: 16px; padding: 7px 14px; border-radius: 999px; background: #ffc20e; color: #0b3158; font-size: 15px; font-weight: 900; box-shadow: 0 4px 14px rgba(0, 0, 0, .25); }
.vtr-lb__body { flex: 0 0 auto; padding: 20px 24px 24px; overflow-y: auto; }
.vtr-lb__org { margin: 0 0 4px; padding: 0; color: #e30613; font-size: 12px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; }
.vtr-lb__title { margin: 0; padding: 0; color: #0b3158; font-size: 26px; font-weight: 800; line-height: 1.2; }
.vtr-lb__name { margin: 2px 0 0; padding: 0; color: #5b6478; font-size: 17px; font-weight: 700; }
.vtr-lb__row { margin: 12px 0 0; padding: 0; font-size: 16px; font-weight: 600; }
.vtr-lb__row strong { display: block; color: #5b6478; font-size: 12px; font-weight: 700; }
.vtr-lb__motto { margin: 12px 0 0; padding: 0; color: #5b6478; font-style: italic; }
.vtr-lb__btn { position: absolute; z-index: 2; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: #fff; color: #0b3158; box-shadow: 0 4px 16px rgba(0, 0, 0, .3); cursor: pointer; }
.vtr-lb__btn:hover { background: #ffc20e; }
.vtr-lb__btn:focus-visible { outline: 3px solid #ffc20e; outline-offset: 2px; }
.vtr-lb__btn[hidden] { display: none; }
.vtr-lb__close { top: 16px; right: 16px; }
.vtr-lb__prev, .vtr-lb__next { position: fixed; top: 50%; transform: translateY(-50%); }
.vtr-lb__prev { left: max(12px, calc(50% - 440px)); }
.vtr-lb__next { right: max(12px, calc(50% - 440px)); }
body.vtr-lb-open { overflow: hidden; }
@media (max-width: 767px) {
	.vtr-lb { padding: 12px; }
	.vtr-lb__media img { max-height: 56vh; }
	.vtr-lb__title { font-size: 22px; }
	.vtr-lb__prev, .vtr-lb__next { top: auto; bottom: 18px; transform: none; }
	.vtr-lb__prev { left: 18px; }
	.vtr-lb__next { right: 18px; }
	.vtr-lb__body { padding-bottom: 76px; }
}