/* Taak 37 · Algemene dienstpagina T6 (mockup Dienst op het canvas). Hero en editorinhoud: contentpagina.css. */

.eo-cp-hero__knoppen{display:flex;gap:16px;flex-wrap:wrap;justify-content:center;margin:24px 0 0}

/* {Dienst} per stad: blauwe band, steden in kolommen, panden als links met vanaf-prijs. */
.eo-ad-steden{background:var(--eo-blue);color:#fff;padding:72px 16px}
.eo-ad-steden__in{max-width:var(--eo-container);margin-inline:auto}
.eo-ad .eo-ad-steden h2{color:#fff;font-size:clamp(1.6rem,3vw,2.1rem);margin:0 0 32px}
.eo-ad .eo-ad-stad h3{color:var(--eo-accent);font-size:1.25rem;margin:0 0 8px}
.eo-ad-steden__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}
.eo-ad-stad ul{list-style:none;margin:0;padding:0}
.eo-ad-stad a{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:12px 0;min-height:44px;border-bottom:1px solid #4E5D68;color:#fff;font-weight:600;text-decoration:none}
.eo-ad-stad a:hover span:first-child{text-decoration:underline}
.eo-ad-stad a:focus-visible{outline:3px solid var(--eo-focus);outline-offset:2px}
.eo-ad-stad__prijs{font-weight:400;color:var(--eo-off);white-space:nowrap}
.eo-ad-steden__noot{font-size:.8rem;color:var(--eo-off);margin:24px 0 0}
.eo-ad-steden__knop{margin:32px 0 0}
@media(max-width:1000px){.eo-ad-steden__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.eo-ad-steden__grid{grid-template-columns:1fr}.eo-ad-steden{padding-block:48px}}

/* FAQ (core/details in de editorinhoud), als de mockup: wit vlak, groene rand links, +/–. */
.eo-ad .eo-cp-inhoud details{background:#fff;margin:0 auto 8px;border-left:4px solid var(--eo-green)}
.eo-ad .eo-cp-inhoud summary{padding:18px 24px;min-height:44px;font:600 16px/1.4 var(--eo-font);cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:16px;color:var(--eo-navy)}
.eo-ad .eo-cp-inhoud summary::-webkit-details-marker{display:none}
.eo-ad .eo-cp-inhoud summary::after{content:"+";font:400 24px/1 var(--eo-font-kop);color:var(--eo-green)}
.eo-ad .eo-cp-inhoud details[open] summary::after{content:"–"}
.eo-ad .eo-cp-inhoud summary:focus-visible{outline:3px solid var(--eo-focus);outline-offset:2px}
.eo-ad .eo-cp-inhoud details>:not(summary){padding:0 24px 20px;margin:0;font-size:15px}

/* Taak 57: hero-feiten + overzicht vergaderruimtes / flexplekken (mockups VergaderOverzicht, FlexOverzicht). */
.eo-cp-hero__feiten{list-style:none;display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin:20px 0 0;padding:0}
.eo-cp-hero__feiten li{border:1px solid rgba(255,255,255,.5);padding:6px 12px;font:600 13px/1.4 var(--eo-font);color:#fff}
.eo-ad .eo-btn--rand{background:transparent;color:var(--eo-navy);border:1px solid var(--eo-navy)}
.eo-ad .eo-btn--rand:hover{background:var(--eo-navy);color:#fff}

.eo-ov{padding-block:72px}
.eo-ov__kop{max-width:780px;margin:0 auto 32px;text-align:center}
.eo-ad .eo-ov__kop h2{font-size:clamp(1.6rem,3vw,2.1rem);margin:0 0 12px}
.eo-ov__kop p{margin:0;color:var(--eo-blue)}
.eo-ov__filter{background:#fff;padding:20px 24px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:20px;align-items:end;border-top:4px solid var(--eo-green)}
.eo-ov__filter label,.eo-ov__label{display:block;font:700 10px/1.4 var(--eo-font);letter-spacing:.12em;text-transform:uppercase;color:#5f6670;margin-bottom:6px}
.eo-ov__filter select{width:100%;min-height:46px;border:1px solid #B7BFC2;background:var(--eo-off);padding:0 12px;font:500 15px var(--eo-font);color:var(--eo-navy)}
.eo-ov__chips{display:flex;gap:8px;flex-wrap:wrap}
.eo-ov__chips .eo-vr__chip{border-radius:0;border-color:var(--eo-navy);min-height:46px;padding:8px 14px}
.eo-ov__rkop{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px 16px;margin:24px 0 12px;font-size:13px}
.eo-ov__rkop p{margin:0}
.eo-ov__rkop small{font-size:13px;color:var(--eo-green);font-weight:600}
.eo-ov__lijst{list-style:none;margin:0;padding:0;display:grid;gap:20px;grid-template-columns:repeat(3,minmax(0,1fr))}
.eo-ov__kaart .eo-vr__foto{aspect-ratio:16/9}
.eo-ov__loc{font:700 11px/1.4 var(--eo-font);letter-spacing:.1em;text-transform:uppercase;color:var(--eo-green);text-decoration:none}
.eo-ov__loc:hover{text-decoration:underline}
.eo-ov__soort{align-self:flex-start;font:700 11px/1.4 var(--eo-font);letter-spacing:.08em;text-transform:uppercase;padding:3px 10px;background:var(--eo-accent);color:var(--eo-accent-tekst)}
.eo-ov__soort--b{background:var(--eo-blue);color:#fff}
.eo-ov__t{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.eo-ov__t .eo-vr__cap{margin:0;white-space:nowrap}
.eo-ov__uren{list-style:none;margin:0;padding:0;font-size:14px}
.eo-ov__leeg{margin:24px 0 0;text-align:center}
.eo-ov__meer{margin:24px 0 0;text-align:center}
.eo-ov__blok{background:var(--eo-off);padding:24px;border-left:4px solid var(--eo-accent);display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-top:24px}
.eo-ov__blok p{margin:0;max-width:760px}
.eo-ov__knoppen{display:flex;gap:12px;flex-wrap:wrap}

.eo-ov-steden{background:#fff;padding:72px 16px}
.eo-ov-steden__in{max-width:var(--eo-container);margin-inline:auto;text-align:center}
.eo-ad .eo-ov-steden h2{font-size:clamp(1.6rem,3vw,2.1rem);margin:0 0 12px}
.eo-ov-steden__in>p{max-width:780px;margin:0 auto}
.eo-ov-steden__grid{list-style:none;margin:32px 0 0;padding:0;display:grid;gap:16px;grid-template-columns:repeat(4,minmax(0,1fr));text-align:left}
.eo-ov-steden__grid a{display:flex;flex-direction:column;gap:4px;height:100%;background:var(--eo-off);padding:20px;border-top:4px solid var(--eo-green);text-decoration:none;font-size:13px;color:var(--eo-blue)}
.eo-ov-steden__grid b{font:400 22px/1.1 var(--eo-font-kop);text-transform:uppercase;color:var(--eo-navy)}
.eo-ov-steden__grid a:hover b{text-decoration:underline}
.eo-ov-steden__grid a:focus-visible{outline:3px solid var(--eo-focus);outline-offset:2px}

@media(max-width:1000px){.eo-ov__lijst{grid-template-columns:repeat(2,minmax(0,1fr))}.eo-ov-steden__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){.eo-ov__filter{grid-template-columns:1fr}}
@media(max-width:640px){.eo-ov__lijst{grid-template-columns:1fr}.eo-ov{padding-block:48px}.eo-ov-steden{padding-block:48px}.eo-ov-steden__grid{grid-template-columns:1fr}}