/* Taak 38 · Stad × dienst T3b (mockup StadDienst op het canvas). Hero: contentpagina.css. */

.eo-sd .eo-cp-hero{padding-bottom:88px}
.eo-cp-hero__knoppen{display:flex;gap:16px;flex-wrap:wrap;justify-content:center;margin:24px 0 0}
.eo-sd-kruimel{position:absolute;z-index:1;left:0;right:0;bottom:16px;max-width:var(--eo-container);margin:0 auto;padding:0 20px;text-align:left;font-size:.75rem;color:var(--eo-sand,#E5E2DB)}
.eo-sd-kruimel a{color:inherit;text-decoration:none}
.eo-sd-kruimel a:hover{text-decoration:underline}
.eo-sd-kruimel a:focus-visible{outline:3px solid var(--eo-focus);outline-offset:2px}

.eo-sd__in{max-width:var(--eo-container);margin-inline:auto}
.eo-sd h2{font-size:clamp(1.6rem,3vw,2.1rem);margin:0 0 32px;text-align:center}

/* Vergelijking: rij per pand (foto, naam + adres, vanaf-prijs, knop). Geen aantallen. */
.eo-sd-vergelijk{padding:72px 16px}
.eo-sd-rijen{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.eo-sd-rij{display:grid;grid-template-columns:180px minmax(0,1.6fr) minmax(0,1fr) 220px;gap:24px;align-items:center;background:#fff;padding:12px 24px 12px 12px}
.eo-sd-rij__foto{position:relative;min-height:120px;background:#d9d6cd;overflow:hidden}
.eo-sd-rij__foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.eo-sd .eo-sd-rij h3{font-size:1.375rem;margin:0}
.eo-sd-rij__adres{font-size:.8125rem;color:var(--eo-blue);margin:4px 0 0}
.eo-sd-rij__prijs{font-weight:600;font-size:.875rem;color:var(--eo-navy);margin:0}
.eo-sd .eo-btn--klein{padding:10px 18px;font-size:.875rem;min-height:44px;justify-self:end;text-align:center}
.eo-sd__noot{font-size:.8rem;margin:16px 0 0}

/* Ook in {stad}: tegels met groene bovenrand. */
.eo-sd-ook{background:#fff;padding:72px 16px}
.eo-sd-ook__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.eo-sd-tegel{display:flex;flex-direction:column;gap:8px;background:var(--eo-off,#F1F0EC);padding:24px;border-top:4px solid var(--eo-green);color:var(--eo-navy);text-decoration:none}
.eo-sd .eo-sd-tegel h3{margin:0;font-size:1.375rem}
.eo-sd-tegel__prijs{font-weight:600;font-size:.875rem}
.eo-sd-tegel__link{font-weight:700;padding:4px 8px;margin-left:-8px;align-self:flex-start}
.eo-sd-tegel:hover .eo-sd-tegel__link{background:var(--eo-link-hover-bg);color:var(--eo-link-hover-tekst);text-decoration:none}
.eo-sd-tegel:focus-visible{outline:3px solid var(--eo-focus);outline-offset:2px}

/* Taak 38-vervolg: hero-ondertitel, usp-labels (zoals T7b), kernregel per pand, FAQ. */
.eo-sd-hero__sub{margin-top:16px}
.eo-sd-usps{list-style:none;margin:20px auto 0;padding:0;display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.eo-sd-usps li{border:1px solid rgba(255,255,255,.5);padding:6px 12px;font:600 13px/1.4 var(--eo-font);color:#fff}
.eo-sd-rij__kern{font-size:.875rem;line-height:1.5;margin:8px 0 0}
.eo-sd-faq{max-width:860px}
.eo-sd-faq h2{text-align:left}

@media(max-width:900px){
	.eo-sd-rij{grid-template-columns:1fr 1fr;padding:12px}
	.eo-sd-rij__foto{grid-column:1/-1;aspect-ratio:16/9;min-height:0}
	.eo-sd-rij__naam{grid-column:1/-1}
	.eo-sd .eo-btn--klein{justify-self:stretch}
	.eo-sd-ook__grid{grid-template-columns:1fr}
}
@media(max-width:640px){.eo-sd-vergelijk,.eo-sd-ook{padding-block:48px}}

/* Taak 38-vervolg A · werkplekken-keuze (kantoorruimte-hubs) */
.eo-sd-wp{margin:0 0 24px;text-align:center}
.eo-sd-wp__vraag{font-weight:700;color:var(--eo-navy);margin:0 0 12px}
.eo-sd-wp__knoppen{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.eo-sd-wp__knop{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:72px;padding:8px 16px;background:#fff;border:1px solid var(--eo-navy);color:var(--eo-navy);font-weight:600;font-size:.9375rem;text-decoration:none}
.eo-sd-wp__knop:hover{background:var(--eo-off,#F1F0EC)}
.eo-sd-wp__knop[aria-pressed="true"],.eo-sd-wp__knop[aria-pressed="true"]:hover{background:var(--eo-navy);color:#fff}
.eo-sd-wp__knop:focus-visible{outline:3px solid var(--eo-focus);outline-offset:2px}
.eo-sd-rij .eo-btn--klein{white-space:normal}
@media (max-width:600px){.eo-sd-wp__knoppen{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}.eo-sd-wp__knop{display:flex;width:100%;min-width:0;padding:8px;text-align:center;line-height:1.2}}

/* Taak 38-vervolg C · bezichtigingsblok: pandkeuze + agenda, kaart sales-eigenaar ernaast. Geen belknop (nummers volgen). */
.eo-sd-bz{padding:72px 16px;background:var(--eo-off,#F1F0EC)}
.eo-sd-bz__knoppen{margin-bottom:32px}
.eo-sd-bz .eo-sd-wp__vraag{text-align:center}
.eo-sd-bz__paneel{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:32px;align-items:start;max-width:960px;margin-inline:auto}
.eo-sd-bz__paneel[hidden]{display:none}
.eo-sd-bz__form{margin:0;padding:0;max-width:none}
.eo-sd-bz .eo-form__titel{text-align:left;margin-bottom:8px}
.eo-sd-bz__sales{background:#fff;padding:24px;border-top:4px solid var(--eo-green);display:flex;flex-direction:column;align-items:flex-start;gap:4px}
.eo-sd-bz__avatar{display:inline-flex;align-items:center;justify-content:center;width:72px;height:72px;border-radius:50%;background:var(--eo-navy);color:#fff;font-weight:700;font-size:1.375rem;margin-bottom:12px}
.eo-sd-bz__sales .eo-eyebrow{margin:0}
.eo-sd-bz__naam{font-weight:700;font-size:1.125rem;color:var(--eo-navy);margin:0 0 16px}
.eo-sd-bz__sales .eo-btn--klein{justify-self:auto;align-self:stretch}
@media(max-width:900px){.eo-sd-bz__paneel{grid-template-columns:1fr}}
@media(max-width:640px){.eo-sd-bz{padding-block:48px}}

/* Taak 65 / R0: zin "hotel voor bedrijven" onder de kop van het bezichtigingsblok. */
.eo-sd-bz__intro { max-width: 44rem; margin: 0 auto 1.5rem; text-align: center; }

/* Taak 38-vervolg B + D: prijsblok en "minder meters" naast elkaar (mobiel onder elkaar). Geen bedragen. */
.eo-sd-info{background:#fff;padding:72px 16px}
.eo-sd-info__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:48px}
.eo-sd .eo-sd-info h2{text-align:left;margin-bottom:16px}
.eo-sd-info__blok{background:var(--eo-off,#F1F0EC);padding:32px;border-top:4px solid var(--eo-green)}
.eo-sd-info__blok p{margin:0 0 12px;line-height:1.6}
.eo-sd-info__knop{margin:20px 0 0 !important}
.eo-sd-info__rand{background:transparent;color:var(--eo-navy);border:2px solid var(--eo-navy)}
.eo-sd-info__rand:hover{background:var(--eo-navy);color:#fff}
.eo-sd-info__rand:focus-visible{outline:3px solid var(--eo-focus);outline-offset:2px}
@media (max-width:860px){.eo-sd-info{padding:48px 16px}.eo-sd-info__grid{grid-template-columns:1fr;gap:24px}.eo-sd-info__blok{padding:24px 20px}}

/* T63 A/B: uitleg per stad × dienst, tussen vergelijking en FAQ. */
.eo-sd-uitleg { max-width: 860px; margin-block: 48px; }
.eo-sd-uitleg h2 { margin-bottom: 0.6em; }
.eo-sd-uitleg h3 { margin: 1.4em 0 0.4em; }