/* agenda.html: kop met legenda, sticky filterbalk, uitleg en cadeaustrook. */
/* ---------- Kop + legenda ---------- */
.ag-hero{display:grid;grid-template-columns:minmax(0, 1.55fr) minmax(0, 1fr);gap:40px clamp(40px, 6vw, 112px);align-items:end}
.ag-legenda{border-top:1px solid var(--ink);padding-top:18px}
.ag-legenda dl{margin:16px 0 0;display:grid;gap:12px}
.ag-legenda dl > div{display:grid;grid-template-columns:172px minmax(0, 1fr);gap:14px;align-items:baseline}
.ag-legenda dt{display:flex}
.ag-legenda .label{white-space:nowrap}
.ag-legenda dd{margin:0;font-size:.9375rem;line-height:1.5;color:var(--ink-2)}
.ag-legenda .dots{align-self:center}
.js .ag-legenda{animation:fadeUp 1s var(--ease) .34s both}
.ag-legenda > summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:12px;cursor:pointer}
.ag-legenda > summary::-webkit-details-marker{display:none}
.ag-legenda > summary svg{width:12px;height:12px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;transition:transform .45s var(--ease)}
.ag-legenda[open] > summary svg{transform:rotate(180deg)}
@media (min-width: 901px){
/* Op desktop staat de legenda altijd open; de summary is dan alleen een kop. */
.ag-legenda > summary{cursor:default}
.ag-legenda > summary svg{display:none}
}
@media (max-width: 900px){
.ag-legenda{padding-top:4px}
.ag-legenda > summary{min-height:48px}
.ag-legenda dl{margin-top:4px;padding-bottom:8px}
}
/* ---------- Filterbalk ---------- */
.ag-filter{position:relative;z-index:30;background:var(--bg);border-block:1px solid var(--line)}
.ag-filter-in{display:flex;flex-wrap:wrap;align-items:center;gap:12px 28px;padding-block:14px}
.ag-filter-form{display:flex;flex-wrap:wrap;align-items:center;gap:12px 28px}
.ag-chips{display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;border:0;min-width:0}
.ag-chip{position:relative;display:inline-flex;cursor:pointer}
.ag-chip input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.ag-chip span{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border:1px solid var(--ink);background:var(--paper);font-size:.8125rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;white-space:nowrap;transition:background-color .3s var(--ease-quart),color .3s var(--ease-quart)}
.ag-chip:hover input:not(:checked) + span{background:var(--grey)}
.ag-chip input:checked + span{background:var(--ink);color:var(--on-dark)}
.ag-chip input:focus-visible + span{outline:2px solid var(--red);outline-offset:3px}
.ag-res{font-size:.9375rem;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.ag-ook{display:flex;flex-wrap:wrap;align-items:center;gap:6px 20px;margin-left:auto;font-size:.875rem}
.ag-ook-kop{color:var(--ink-2)}
.ag-ook a{display:inline-flex;align-items:center;gap:6px;min-height:44px;font-weight:700;text-decoration:none;background:linear-gradient(currentColor,currentColor) 0 calc(50% + .8em)/0 1px no-repeat;transition:background-size .4s var(--ease)}
.ag-ook a:hover{background-size:calc(100% - 20px) 1px}
.ag-ook svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8;transition:transform .45s var(--ease)}
.ag-ook a:hover svg{transform:translateX(3px)}
@media (min-width: 761px){
.ag-filter{position:sticky;top:var(--header-h)}
.ag-filter::after{content:"";position:absolute;inset:auto 0 -13px;height:12px;background:linear-gradient(oklch(0.985 0.003 120), oklch(0.985 0.003 120 / 0));pointer-events:none}
}
/* ---------- Lijst + nieuwe data ---------- */
.ag-lijst{padding-top:clamp(20px, 3vw, 36px);padding-bottom:0}
.ag-nieuw{padding-bottom:clamp(80px, 9vw, 140px)}
.ag-nieuw[hidden]{display:none}
.ag-nieuw .notify{margin-top:clamp(36px, 4vw, 56px)}
/* ---------- Uitleg ---------- */
.ag-uitleg .head{margin-bottom:clamp(28px, 3vw, 44px)}
.ag-uitleg .h2{max-width:18ch}
.ag-kolommen{display:grid;grid-template-columns:repeat(3, minmax(0, 1fr));gap:40px clamp(28px, 4vw, 64px)}
.ag-kolommen article{border-top:1px solid var(--ink);padding-top:22px;display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.ag-nr{font-size:.8125rem;font-weight:800;letter-spacing:.1em;color:var(--red)}
.ag-kolommen h3{font-size:clamp(1.3rem, 1.8vw, 1.6rem);font-weight:700;letter-spacing:-.025em;line-height:1.2}
.ag-kolommen p{color:var(--ink-2);line-height:1.65;max-width:46ch}
.ag-kolommen .act-link{margin-top:6px}
.ag-voorbeeld{display:grid;gap:8px;margin-top:6px;padding:16px 18px;background:var(--panel);font-size:.9375rem;color:var(--red) !important}
.ag-voorbeeld b{font-weight:800}
/* ---------- Cadeaustrook ---------- */
.ag-cadeau{display:grid;grid-template-columns:minmax(0, 340px) minmax(0, 1fr) auto;align-items:center;gap:clamp(24px, 4vw, 56px);background:var(--panel);text-decoration:none;color:var(--ink)}
.ag-cadeau-foto{display:block;align-self:stretch;min-height:200px}
.ag-cadeau-foto img{position:absolute;inset:0}
.ag-cadeau-tekst{padding-block:28px;display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.ag-cadeau-kop{font-size:clamp(1.75rem, 2.8vw, 2.4rem);font-weight:700;letter-spacing:-.035em;line-height:1.1}
.ag-cadeau-sub{color:var(--ink-2);max-width:52ch;line-height:1.6}
.ag-cadeau-knop{margin-right:clamp(24px, 3vw, 44px)}
.ag-cadeau:hover .crop{--hz:1.06}
.ag-cadeau:hover .btn::before,.ag-cadeau:focus-visible .btn::before{transform:scaleX(1)}
@media (max-width: 1180px){
.ag-ook{margin-left:0;flex-basis:100%}
}
@media (max-width: 900px){
.ag-hero{grid-template-columns:1fr;align-items:start}
.ag-kolommen{grid-template-columns:1fr;gap:36px}
.ag-cadeau{grid-template-columns:minmax(0, 220px) minmax(0, 1fr)}
.ag-cadeau-knop{grid-column:2;justify-self:start;margin:0 0 28px}
}
@media (max-width: 760px){
.ag-legenda dl > div{grid-template-columns:164px minmax(0, 1fr)}
.ag-filter-in{gap:10px 20px;padding-block:12px}
.ag-chip span{padding:0 12px}
.ag-res{flex-basis:100%;white-space:normal}
.ag-cadeau{grid-template-columns:1fr;gap:0}
.ag-cadeau-foto{aspect-ratio:16/9;min-height:0}
.ag-cadeau-tekst{padding:24px 22px 18px}
.ag-cadeau-knop{grid-column:1;margin:0 22px 24px}
}
@media (prefers-reduced-motion: reduce){
.js .ag-legenda{animation:none}
}