/* vijb front page (and the 404's region rows): the map hero, the daylight bars, region rows with photos, the lists, the operators, the essay. */
.hero{padding:32px 0 40px}
.hero .wrap{display:grid;gap:28px}
.hero h1{max-width:14ch}
.hero .lede{font-size:1.2rem;line-height:1.5;max-width:30em;margin:18px 0 22px}
.hero .acties{display:flex;flex-wrap:wrap;gap:12px}
.kaartvak{align-self:start;min-width:0}
.kaart{width:100%;height:auto}
.kaart .land{fill:var(--ijs);stroke:var(--inkt);stroke-width:1.4;stroke-linejoin:round}
.kaart .weg{fill:none;stroke:var(--mos);stroke-width:2.4;stroke-dasharray:1 5;stroke-linecap:round}
.kaart .punt circle{fill:var(--mos)}
.kaart .punt .tik{fill:transparent}
.kaart .punt text{font:600 15px var(--ui);fill:var(--inkt);paint-order:stroke;stroke:var(--wit);stroke-width:4px;stroke-linejoin:round}
.kaart .punt:hover circle:not(.tik),.kaart .punt:focus circle:not(.tik){fill:var(--inkt)}
.kaart .punt:hover text,.kaart .punt:focus text{fill:var(--mos);text-decoration:underline}
@media (max-width:599px){.kaart .punt text{font-size:17px}}
.kaartnoot{font:400 .875rem/1.5 var(--tekst);color:var(--steen);margin:6px 0 0}
@media (min-width:900px){.hero{padding:48px 0 56px}.hero .wrap{grid-template-columns:5fr 6fr;gap:48px;align-items:center}}

.daglicht h3{font:600 1.1rem/1.3 var(--ui);margin:0 0 10px;letter-spacing:0}
.maanden{display:grid;grid-template-columns:repeat(12,1fr);gap:3px;list-style:none;margin:0;padding:0}
.maanden li{display:grid;grid-template-rows:84px auto auto;align-items:end;text-align:center;font:600 .75rem/1.2 var(--ui);color:var(--steen)}
.maanden i{display:block;background:var(--nevel);border-radius:2px 2px 0 0;height:calc(var(--u) * 3.6px)}
.maanden .nu i{background:var(--mos)}
.maanden .nu{color:var(--inkt)}
.maanden b{font-weight:600;font-variant-numeric:tabular-nums;margin-top:3px}
.maanden small{display:block;font-weight:500;font-size:.75rem}
.bron{font-size:.875rem;color:var(--steen);margin:8px 0 0}

.regio:has(img){display:grid;grid-template-columns:112px 1fr;gap:16px;align-items:start}
.regio img{width:112px;aspect-ratio:3/2;object-fit:cover;border-radius:2px}
@media (min-width:760px){.regio:has(img){grid-template-columns:150px 1fr}.regio img{width:150px}}

.lijst{list-style:none;margin:0;padding:0;display:grid;gap:0 32px}
.lijst li{padding:16px 0;border-top:1px solid var(--nevel)}
.lijst li:last-child{border-bottom:1px solid var(--nevel)}
.lijst h3{margin:0 0 4px;font-size:1.2rem}
.lijst h3 a{color:var(--inkt);text-decoration:none}
.lijst h3 a:hover{color:var(--mos);text-decoration:underline}
.lijst p{margin:0;font-size:1rem;color:var(--steen);max-width:46em}
@media (min-width:760px){.lijst{grid-template-columns:1fr 1fr}.lijst li:nth-last-child(2):nth-child(odd){border-bottom:1px solid var(--nevel)}}

.aanbieders{list-style:none;margin:0;padding:0}
.aanbieder{display:grid;gap:10px 24px;padding:20px 0;border-top:1px solid var(--nevel)}
.aanbieder:last-child{border-bottom:1px solid var(--nevel)}
.aanbieder .naam{margin:0}
.aanbieder p{margin:0;max-width:60ch}
.aanbieder .knop{justify-self:start}
@media (min-width:760px){.aanbieder{grid-template-columns:1fr auto;align-items:center}.aanbieder .knop{grid-column:2;grid-row:1/3}}

.essay{columns:2;column-gap:40px;max-width:72em}
.essay h2{column-span:all;margin-top:0}
.essay p{break-inside:avoid;max-width:none}
@media (max-width:759px){.essay{columns:1}}