/* ==========================================================================
   InCostaBlanca -- stylesheet
   ========================================================================== */

:root {
    --ink:        #0f2733;
    --ink-60:     #5a6b74;
    --ink-40:     #8a969d;
    --sea:        #1189ad;
    --sky:        #43b7dc;
    --sky-soft:   #e7f5fa;
    --sun:        #f5a623;
    --sun-soft:   #fff4e0;
    --paper:      #f4f6f7;
    --line:       #e2e8ea;
    --white:      #fff;

    --radius:     10px;
    --radius-lg:  16px;
    --shadow:     0 1px 2px rgba(15, 39, 51, .06), 0 4px 16px rgba(15, 39, 51, .05);
    --shadow-up:  0 2px 4px rgba(15, 39, 51, .08), 0 12px 28px rgba(15, 39, 51, .10);

    --display: 'Outfit', system-ui, sans-serif;
    --body:    'Inter', system-ui, sans-serif;

    --wrap:  1280px;
    --gap:   24px;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    font-family: var(--body);
    font-size: 16px;
    line-height: 1.6;
    color: var(--ink);
    background: var(--white);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
    font-family: var(--display);
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -.02em;
    margin: 0;
}

h1 { font-size: clamp(2rem, 4.5vw, 3.25rem); }
h2 { font-size: clamp(1.4rem, 2.4vw, 1.9rem); }
h3 { font-size: 1.15rem; }

p { margin: 0 0 1em; }

a { color: var(--sea); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--ink); }

img { max-width: 100%; height: auto; display: block; }

:focus-visible {
    outline: 2px solid var(--sea);
    outline-offset: 2px;
    border-radius: 4px;
}

.wrap {
    max-width: var(--wrap);
    margin-inline: auto;
    padding-inline: 20px;
}
@media (max-width: 620px) {
    .wrap { padding-inline: 18px; }
}

.sr-only {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --------------------------------------------------------------- kop */

.site-head {
    position: sticky; top: 0; z-index: 50;
    background: rgba(255, 255, 255, .92);
    backdrop-filter: saturate(140%) blur(8px);
    border-bottom: 1px solid var(--line);
}

.site-head__inner {
    display: flex; align-items: center; gap: 28px;
    height: 86px;
}

.logo {
    display: flex; align-items: center; gap: 9px;
    font-family: var(--display);
    font-weight: 700; font-size: 1.85rem;
    letter-spacing: -.03em;
    color: var(--ink); text-decoration: none;
    flex: none;
}
.logo:hover { color: var(--ink); }
.logo span { color: var(--sky); }
.logo svg { flex: none; }

.nav { display: flex; gap: 4px; margin-left: auto; align-items: center; }

.nav a {
    padding: 8px 13px;
    border-radius: 8px;
    font-size: .93rem; font-weight: 500;
    color: var(--ink-60); text-decoration: none;
}
.nav a:hover { background: var(--paper); color: var(--ink); }
.nav a[aria-current] { color: var(--ink); background: var(--sky-soft); }

.nav-toggle {
    display: none;
    margin-left: auto;
    width: 42px; height: 42px;
    border: 1px solid var(--line); border-radius: 9px;
    background: var(--white); cursor: pointer;
    align-items: center; justify-content: center;
}

@media (max-width: 800px) {
    .nav-toggle { display: flex; }
    .nav {
        display: none;
        position: absolute; inset: 86px 0 auto;
        flex-direction: column; gap: 0; align-items: stretch;
        background: var(--white);
        border-bottom: 1px solid var(--line);
        padding: 10px 16px 18px;
        box-shadow: var(--shadow);
    }
    .nav.is-open { display: flex; }
    .nav a { padding: 12px 10px; font-size: 1rem; }
}

/* ----------------------------------------------------------- baai-hero
   De curve komt uit de bestaande site: hij verwijst naar de baaien
   van de kust en is het enige echt eigen vormelement. */

.cove {
    position: relative;
    min-height: 400px;
    display: flex; align-items: center;
    background: var(--sky);
    color: var(--white);
    overflow: hidden;
    isolation: isolate;
}

.cove__media {
    position: absolute; inset: 0;
    z-index: -2;
}
.cove__media img {
    width: 100%; height: 100%;
    object-fit: cover;
    /* Iets onder het midden uitsnijden: bij landschapsfoto's zit daar de
       horizon en het onderwerp, terwijl bovenin meestal alleen lucht staat. */
    object-position: center 58%;
}

/* Scrim: donkere doek links, zodat de tekst leesbaar blijft op elke foto. */
.cove__shape {
    position: absolute; inset: 0;
    background:
        linear-gradient(100deg, rgba(8,32,44,.88) 0%, rgba(8,32,44,.72) 34%,
                        rgba(8,32,44,.30) 62%, rgba(8,32,44,.12) 100%);
    z-index: -1;
}
/* Zachte golf onderaan -- verwijst naar de kustlijn, subtiel gehouden. */
.cove::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 42px;
    background: var(--white);
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 42' preserveAspectRatio='none'%3E%3Cpath d='M0 42V18c240 22 420-14 720-14s480 36 720 14v24z' fill='%23000'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 42' preserveAspectRatio='none'%3E%3Cpath d='M0 42V18c240 22 420-14 720-14s480 36 720 14v24z' fill='%23000'/%3E%3C/svg%3E");
    -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
}
.section--tint + .cove::after, .cove--tinted::after { background: var(--paper); }

.cove__body {
    position: relative;
    width: 100%;
    box-sizing: border-box;
    padding-block: 104px 120px;
    max-width: var(--wrap);
}
/* .cove is een flexcontainer, en de automarges van .wrap zouden een smalle
   kop in het hele venster centreren in plaats van uitlijnen op de inhoud
   eronder. Daarom houdt de body de volle wrapbreedte en wordt de tekst zelf
   beperkt. */
.cove__body > * { max-width: 620px; }

.cove__eyebrow {
    font-family: var(--display);
    font-size: .8rem; font-weight: 500;
    letter-spacing: .14em; text-transform: uppercase;
    opacity: .85;
    margin-bottom: 10px;
}

.cove h1 { color: var(--white); }
.cove__lede { margin: 14px 0 0; font-size: 1.06rem; max-width: 44ch; opacity: .95; }
.cove__acties { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }

@media (max-width: 760px) {
    .cove { min-height: 300px; }
    .cove__body { max-width: 100%; }
    .cove h1 { font-size: clamp(1.75rem, 7.5vw, 2.4rem); }
    .cove__lede { font-size: 1rem; }
    /* Knoppen niet laten uitlopen buiten het scherm */
    .cove .btn { padding: 10px 16px; }
    .cove__shape { background: linear-gradient(180deg, rgba(8,32,44,.55), rgba(8,32,44,.85)); }
    .cove__body { padding-block: 56px 70px; }
    .cove::after { height: 24px; }
}

/* ------------------------------------------------------------- knoppen */

.btn {
    display: inline-flex; align-items: center; gap: 8px;
    white-space: nowrap;
    padding: 11px 20px;
    font-family: var(--display); font-size: .95rem; font-weight: 500;
    border-radius: 9px; border: 1px solid transparent;
    cursor: pointer; text-decoration: none;
    transition: background .15s, border-color .15s;
}
.btn--primary { background: var(--sea); color: var(--white); }
.btn--primary:hover { background: #0d7593; color: var(--white); }
.btn--ghost { background: var(--white); border-color: var(--line); color: var(--ink); }
.btn--ghost:hover { border-color: var(--ink-40); color: var(--ink); }

/* ------------------------------------------------------------- secties */

.section { padding: 56px 0; }
.section--tint { background: var(--paper); }

.section__head {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 20px; margin-bottom: 26px;
}

/* --------------------------------------------------------------- kaart */

.grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
    gap: var(--gap);
}

.card {
    display: flex; flex-direction: column;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    overflow: hidden;
    text-decoration: none; color: inherit;
    transition: box-shadow .18s, transform .18s, border-color .18s;
}
.card:hover {
    box-shadow: var(--shadow-up);
    transform: translateY(-2px);
    border-color: transparent;
    color: inherit;
}

.card__media {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--paper);
}
/* De verhouding ook op de afbeelding zelf: zonder dat valt een portretfoto
   terug op zijn eigen formaat zodra de hoogte van het kader niet doorrekent,
   en dan staan de kaartjes ongelijk. */
.card__media img {
    display: block; width: 100%; height: 100%;
    aspect-ratio: 4 / 3; object-fit: cover;
}

.card__body {
    display: flex; flex-direction: column;
    gap: 5px;
    padding: 14px 16px 16px;
    flex: 1;
}

.card__meta {
    font-size: .8rem; color: var(--ink-40);
    letter-spacing: .01em;
}

.card__title {
    font-family: var(--display);
    font-size: 1.02rem; font-weight: 600;
    line-height: 1.3; letter-spacing: -.01em;
    /* Gelijke hoogte: maximaal twee regels, daarna afkappen. */
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
}

.card__addr {
    margin-top: auto; padding-top: 8px;
    font-size: .84rem; color: var(--ink-60);
    display: flex; gap: 6px; align-items: flex-start;
    display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;
    overflow: hidden;
}

/* De enige plek waar geel wordt ingezet. */
.status {
    display: inline-flex; align-items: center; gap: 5px;
    font-family: var(--display);
    font-size: .76rem; font-weight: 500;
    padding: 3px 9px; border-radius: 20px;
}
.status--open   { background: var(--sun-soft); color: #8a5a05; }
.status--closed { background: var(--paper);    color: var(--ink-40); }
.status::before {
    content: ''; width: 6px; height: 6px; border-radius: 50%;
    background: var(--sun);
}
.status--closed::before { background: var(--ink-40); }

.card__badge {
    position: absolute; left: 10px; top: 10px;
    background: rgba(255, 255, 255, .94);
    box-shadow: var(--shadow);
}

/* -------------------------------------------------------------- plaats */

.places { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap); }
@media (max-width: 900px) { .places { grid-template-columns: repeat(2, 1fr); } }

.place {
    position: relative; display: block;
    aspect-ratio: 3 / 4;
    border-radius: var(--radius-lg); overflow: hidden;
    text-decoration: none; color: var(--white);
}
.place img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform .5s cubic-bezier(.2, .7, .3, 1);
}
.place:hover img { transform: scale(1.04); }
.place::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(8, 28, 38, .86) 0%, rgba(8, 28, 38, .46) 38%, rgba(8, 28, 38, .06) 72%);
}
.place__label {
    position: absolute; left: 18px; right: 18px; bottom: 16px; z-index: 1;
    text-shadow: 0 1px 12px rgba(4, 18, 26, .6);
}
.place__name {
    font-family: var(--display); font-size: 1.24rem; font-weight: 600;
    letter-spacing: -.01em;
}
.place__count { font-size: .85rem; opacity: .82; }

/* ------------------------------------------------------------- filters */

.layout {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 44px;
    align-items: start;
}
@media (min-width: 1180px) {
    .layout--map { grid-template-columns: 190px minmax(0, 1fr) 300px; }
}
@media (max-width: 900px) {
    .layout, .layout--map { grid-template-columns: 1fr; gap: 22px; }
}

.rail { position: sticky; top: 106px; }
@media (max-width: 900px) { .rail { position: static; } }

.facet { border-bottom: 1px solid var(--line); padding: 16px 0; }
.facet:first-child { padding-top: 0; }

.facet__title {
    font-family: var(--display); font-size: .78rem; font-weight: 600;
    letter-spacing: .1em; text-transform: uppercase;
    color: var(--ink-40); margin-bottom: 11px;
}

.facet ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }

.facet a {
    display: flex; justify-content: space-between; gap: 10px;
    padding: 6px 9px; margin-left: -9px;
    border-radius: 7px;
    font-size: .92rem; color: var(--ink-60); text-decoration: none;
}
.facet a:hover { background: var(--paper); color: var(--ink); }
.facet a[aria-current] {
    background: var(--sky-soft); color: var(--sea); font-weight: 500;
}
.facet a span { color: var(--ink-40); font-size: .82rem; font-variant-numeric: tabular-nums; }

.results__head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; margin-bottom: 20px; flex-wrap: wrap;
}
.results__count { color: var(--ink-60); font-size: .93rem; }

.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 6px 12px; border-radius: 20px;
    border: 1px solid var(--line); background: var(--white);
    font-size: .87rem; color: var(--ink-60); text-decoration: none;
}
.chip:hover { border-color: var(--ink-40); color: var(--ink); }
.chip[aria-current] { background: var(--ink); border-color: var(--ink); color: var(--white); }

/* Rubriekrij: alleen op smalle schermen, waar de zijbalk achter de
   filterknop schuilgaat. Doorlopen naar een tweede regel -- horizontaal
   scrollen ziet eruit als afgekapt en de helft blijft onopgemerkt. */
.rubrieken { display: none; }
@media (max-width: 900px) {
    .rubrieken {
        display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px;
    }
    .rubrieken .chip { padding: 8px 14px; font-size: .84rem; gap: 6px; }
    .rubrieken .chip svg { opacity: .7; flex: 0 0 auto; }
    .rubrieken .chip[aria-current] svg { opacity: 1; }
}

/* ---------------------------------------------------------------- kaart */


.map {
    height: 520px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--line);
    overflow: hidden;
    background: var(--paper);
}

.map-note { font-size: .76rem; color: var(--ink-40); margin-top: 8px; }

.leaflet-popup-content-wrapper { border-radius: 10px; }
.leaflet-popup-content { margin: 12px 14px; font-family: var(--body); }
.pin-title {
    font-family: var(--display); font-weight: 600; font-size: .96rem;
    display: block; margin-bottom: 2px; color: var(--ink); text-decoration: none;
}
.pin-meta { font-size: .8rem; color: var(--ink-60); }

/* ------------------------------------------------------------ detail */

.crumbs {
    font-size: .85rem; color: var(--ink-40);
    padding: 18px 0; display: flex; gap: 8px; flex-wrap: wrap;
}
.crumbs a { color: var(--ink-60); text-decoration: none; }
.crumbs a:hover { color: var(--sea); text-decoration: underline; }

.slider { position: relative; }
.slider__track {
    display: flex; gap: 4px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    border-radius: var(--radius-lg);
    background: var(--paper);
}
.slider__track::-webkit-scrollbar { display: none; }
.slider__track img {
    height: min(44vw, 420px); width: auto; max-width: none;
    flex: none; scroll-snap-align: start;
    object-fit: contain;
    background: var(--ink);
}
.slider__btn {
    position: absolute; top: 50%; translate: 0 -50%;
    width: 42px; height: 42px; border-radius: 50%;
    border: 0; background: rgba(255,255,255,.94);
    box-shadow: var(--shadow-up); cursor: pointer;
    display: grid; place-items: center; color: var(--ink);
}
.slider__btn[hidden] { display: none; }
.slider__btn--prev { left: 12px; }
.slider__btn--next { right: 12px; }
.slider__count {
    position: absolute; right: 14px; bottom: 14px;
    background: rgba(8,32,44,.72); color: #fff;
    font-size: .78rem; padding: 4px 10px; border-radius: 20px;
}
/* Op een telefoon één foto per scherm: een strook met staande en liggende
   beelden door elkaar wordt daar onleesbaar. */
@media (max-width: 700px) {
    .slider__track { gap: 0; scroll-snap-type: x mandatory; }
    .slider__track img {
        flex: 0 0 100%;
        width: 100%; height: auto;
        aspect-ratio: 4 / 3;
        object-fit: cover;
        scroll-snap-align: center;
        scroll-snap-stop: always;
    }
    .slider__btn { width: 38px; height: 38px; }
    .slider__btn--prev { left: 8px; }
    .slider__btn--next { right: 8px; }
}

.detail {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 330px;
    gap: 56px;
    align-items: start;
    padding: 36px 0 64px;
}
@media (max-width: 950px) {
    .detail { grid-template-columns: 1fr; gap: 32px; }
}

.taglinks { display: flex; gap: 14px; margin-bottom: 12px; }
.taglinks a {
    font-family: var(--display);
    font-size: .76rem; font-weight: 500;
    letter-spacing: .1em; text-transform: uppercase;
    color: var(--sea);
}

.prose { max-width: 68ch; }
.reading .prose { max-width: 760px; }
.prose h2 { margin: 2em 0 .5em; font-size: 1.35rem; }
.prose h3 { margin: 1.6em 0 .4em; }
.prose img { border-radius: var(--radius); margin: 1.5em 0; }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li { margin-bottom: .35em; }
.prose figure { margin: 1.5em 0; }
.prose figcaption { font-size: .85rem; color: var(--ink-40); }

.panel {
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 20px 22px;
    margin-bottom: 18px;
}
.panel h2 { font-size: 1.05rem; margin-bottom: 14px; }

.info { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.info li { display: flex; gap: 11px; font-size: .92rem; align-items: flex-start; }
.info svg { flex: none; margin-top: 3px; color: var(--ink-40); }
.info a { overflow-wrap: anywhere; }

.hours { width: 100%; border-collapse: collapse; font-size: .92rem; }
.hours td { padding: 7px 0; vertical-align: top; }
.hours td:first-child { padding-right: 12px; }
.hours td:last-child { text-align: right; font-variant-numeric: tabular-nums; }
/* Elk tijdvak op een eigen regel, en nooit binnen een tijdvak afbreken --
   anders komt "18:00-" boven en "22:30" eronder te staan. */
.hours td:last-child span { display: block; white-space: nowrap; }
.hours td:last-child span + span { margin-top: 2px; }
.hours tr[data-today] td { font-weight: 600; color: var(--ink); }
.hours tr:not([data-today]) td { color: var(--ink-60); }
.today-flag {
    font-family: var(--display); font-size: .7rem; font-weight: 500;
    letter-spacing: .08em; text-transform: uppercase;
    color: var(--sun); margin-left: 7px;
}

.mini-map { height: 200px; border-radius: var(--radius); overflow: hidden; margin-bottom: 14px; }

/* ------------------------------------------------------------- artikel */

/* .reading zit op hetzelfde element als .wrap. De automarge van .wrap dus
   niet uitschakelen -- dan plakt de hele pagina tegen de vensterrand. In
   plaats daarvan de wrapper laten staan en de inhoud beperken, zodat de
   tekstkolom links uitlijnt met de cove-kop erboven. */
.reading { max-width: var(--wrap); }
.reading > * { max-width: 760px; }
.article-head { padding: 32px 0 8px; }
.article-head .kicker {
    font-family: var(--display); font-size: .78rem; font-weight: 500;
    letter-spacing: .12em; text-transform: uppercase; color: var(--sea);
    margin-bottom: 12px;
}
.article-meta { color: var(--ink-40); font-size: .88rem; margin-top: 14px; }
.article-hero { margin: 28px 0 36px; border-radius: var(--radius-lg); overflow: hidden; }

/* --------------------------------------------------------------- leeg */

.empty {
    text-align: center; padding: 64px 20px;
    border: 1px dashed var(--line); border-radius: var(--radius-lg);
}
.empty h2 { margin-bottom: 8px; }
.empty p { color: var(--ink-60); }

/* --------------------------------------------------------------- voet */

.site-foot {
    background: var(--ink); color: rgba(255, 255, 255, .72);
    padding: 52px 0 28px; margin-top: 72px;
    font-size: .92rem;
}
.site-foot a { color: rgba(255, 255, 255, .72); text-decoration: none; }
.site-foot a:hover { color: var(--white); }
.foot-grid {
    display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 32px;
}
@media (max-width: 800px) { .foot-grid { grid-template-columns: 1fr 1fr; } }
.foot-grid h3 {
    font-size: .78rem; letter-spacing: .1em; text-transform: uppercase;
    color: rgba(255, 255, 255, .45); margin-bottom: 13px;
}
.foot-grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.foot-logo { color: var(--white); font-family: var(--display); font-weight: 700; font-size: 1.2rem; }
.foot-bottom {
    margin-top: 40px; padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, .12);
    font-size: .85rem; color: rgba(255, 255, 255, .45);
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
    }
    .place:hover img { transform: none; }
}

/* ------------------------------------------------------------ formulier */

.form { border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 26px 28px; margin-top: 28px; }
.form h2 { margin-bottom: 18px; }
.form label { display: block; margin-bottom: 16px; font-size: .88rem; color: var(--ink-60); font-weight: 500; }
.form input, .form textarea {
    display: block; width: 100%; margin-top: 6px;
    padding: 11px 13px; border: 1px solid var(--line); border-radius: 9px;
    font: inherit; color: var(--ink); background: var(--white);
}
.form textarea { resize: vertical; }
.form input:focus, .form textarea:focus {
    border-color: var(--sea); outline: none; box-shadow: 0 0 0 3px rgba(17,137,173,.12);
}
.form__two { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 620px) { .form__two { grid-template-columns: 1fr; } }
.form .req { color: var(--sun); }
.form__note { font-size: .82rem; color: var(--ink-40); margin: 14px 0 0; }
.honey { position: absolute; left: -9999px; }

/* ------------------------------------------------------------ home-intro
   Leesbreedte houden, maar links uitlijnen met de kaarten en koppen
   eromheen -- gecentreerd zweeft het blok los van de rest. */

.home__intro { max-width: 68ch; }

/* ------------------------------------------------------------- tabellen */

.prose table {
    width: 100%; border-collapse: collapse; margin: 26px 0;
    font-size: .93rem;
}
.prose th {
    text-align: left; font-family: var(--display); font-weight: 600;
    font-size: .78rem; text-transform: uppercase; letter-spacing: .06em;
    color: var(--ink-40); padding: 0 14px 8px 0;
    border-bottom: 1px solid var(--line);
}
.prose td {
    padding: 11px 14px 11px 0; vertical-align: top;
    border-bottom: 1px solid var(--line); color: var(--ink-60);
}
.prose td:first-child { color: var(--ink); font-weight: 500; }

/* Op een telefoon past vier kolommen niet. Elke rij wordt dan een blokje,
   met de kolomnaam uit data-label voor de waarde. */
@media (max-width: 720px) {
    .prose table.stapel thead { display: none; }
    .prose table.stapel,
    .prose table.stapel tbody,
    .prose table.stapel tr,
    .prose table.stapel td { display: block; width: 100%; }
    .prose table.stapel tr {
        border: 1px solid var(--line); border-radius: var(--radius-lg);
        padding: 14px 16px; margin-bottom: 12px;
    }
    .prose table.stapel td { border: 0; padding: 2px 0; }
    .prose table.stapel td:first-child {
        font-family: var(--display); font-size: 1.05rem; font-weight: 600;
        margin-bottom: 6px;
    }
    .prose table.stapel td:not(:first-child)::before {
        content: attr(data-label) ": ";
        color: var(--ink-40);
    }
}

/* ------------------------------------------------------------- artikel */

.artikel {
    display: grid;
    grid-template-columns: minmax(0, 720px) minmax(0, 300px);
    justify-content: start;
    gap: 56px; align-items: start;
    padding-top: 28px;
}
.artikel__main { min-width: 0; }

.artikel__zij { position: sticky; top: 88px; }
.zij-blok {
    background: var(--sky-soft);
    border-radius: var(--radius-lg);
    padding: 22px 22px 18px;
}
.zij-blok h2 {
    font-size: .78rem; text-transform: uppercase; letter-spacing: .08em;
    color: var(--ink-40); margin: 0 0 16px;
}
.zij-lijst { list-style: none; margin: 0; padding: 0; }
.zij-lijst li + li {
    border-top: 1px solid rgba(17,137,173,.16);
    margin-top: 14px; padding-top: 14px;
}
.zij-lijst a {
    display: flex; gap: 12px; align-items: flex-start;
    text-decoration: none; color: inherit;
}
.zij-lijst img {
    width: 64px; height: 64px; flex: 0 0 auto;
    object-fit: cover; border-radius: 10px;
}
.zij-lijst strong {
    display: block; font-size: .92rem; font-weight: 500;
    line-height: 1.35; color: var(--ink);
}
.zij-lijst em { font-style: normal; font-size: .8rem; color: var(--ink-40); }
.zij-lijst a:hover strong { color: var(--sea); }
.zij-alle {
    display: inline-block; margin-top: 18px;
    font-size: .87rem; color: var(--sea); text-decoration: none;
}
.zij-alle:hover { text-decoration: underline; }

@media (max-width: 1040px) {
    .artikel { grid-template-columns: 1fr; gap: 40px; }
    .artikel__zij { position: static; }
}

/* ---------------------------------------------------------- pakketten */

.pakketten {
    display: grid; grid-template-columns: 1fr 1fr; gap: 20px;
    margin: 30px 0 10px; align-items: start;
}
.pakket {
    position: relative; background: var(--white);
    border: 1px solid var(--line); border-radius: var(--radius-lg);
    padding: 26px 24px;
}
.pakket--pro { border-color: var(--sea); box-shadow: var(--shadow); }
.pakket__badge {
    position: absolute; top: -11px; right: 20px;
    font-family: var(--display); font-size: .7rem; font-weight: 600;
    letter-spacing: .09em; text-transform: uppercase;
    background: var(--sun); color: var(--ink);
    padding: 4px 11px; border-radius: 999px;
}
.pakket h3 { font-family: var(--display); font-size: 1.15rem; margin: 0 0 4px; }
.pakket__sub { font-size: .85rem; color: var(--ink-40); margin: 0 0 20px; }
.pakket__prijs {
    font-family: var(--display); font-size: 2.3rem; font-weight: 600;
    line-height: 1; color: var(--ink);
}
.pakket__prijs span { font-size: .85rem; font-weight: 500; color: var(--ink-60); }
.pakket__features { list-style: none; padding: 0; margin: 22px 0 24px; }
.pakket__features li {
    position: relative; padding-left: 25px; margin-bottom: 11px;
    font-size: .89rem; line-height: 1.5; color: var(--ink-60);
}
.pakket__features li::before {
    content: ""; position: absolute; left: 2px; top: .34em;
    width: 11px; height: 6px;
    border-left: 2px solid var(--sea); border-bottom: 2px solid var(--sea);
    transform: rotate(-45deg);
}
.pakket .btn { width: 100%; justify-content: center; }

@media (max-width: 620px) { .pakketten { grid-template-columns: 1fr; } }

/* Bij één pakket geen halve lege kolom ernaast. */
.pakketten--een { grid-template-columns: minmax(0, 380px); justify-content: start; }

/* ----------------------------------------------------------- contact */

.contact {
    display: grid;
    grid-template-columns: minmax(0, 620px) minmax(0, 340px);
    justify-content: start;
    gap: 40px; align-items: start;
}
.contact__intro { grid-column: 1 / -1; max-width: 62ch; }
.contact .form { grid-column: 1; grid-row: 3; margin-top: 0; background: var(--white); }
.contact .notice { grid-column: 1 / -1; grid-row: 2; }
.contact__aside {
    grid-column: 2; grid-row: 3; background: var(--sky-soft);
    border-radius: var(--radius-lg); padding: 24px 26px;
}
.contact__aside h2 { font-size: 1.05rem; margin: 0 0 14px; }
.contact__aside ul { list-style: none; padding: 0; margin: 0; }
.contact__aside li {
    font-size: .9rem; line-height: 1.55; color: var(--ink-60);
    padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid rgba(17,137,173,.16);
}
.contact__aside li:last-child { border-bottom: 0; padding-bottom: 0; margin-bottom: 0; }
.contact__aside strong { color: var(--ink); font-weight: 600; display: block; }
.contact__meta { font-size: .84rem; color: var(--ink-40); margin: 16px 0 0; }
.contact .form button { width: auto; }

@media (max-width: 880px) {
    .contact { grid-template-columns: 1fr; gap: 28px; }
    .contact .form, .contact__aside, .contact .notice {
        grid-column: 1; grid-row: auto;
    }
}

.notice { padding: 14px 18px; border-radius: var(--radius); margin-top: 24px; }
.notice--ok  { background: #e7f7ec; border: 1px solid #b7e3c4; color: #1c5c31; }
.notice--err { background: #fdecea; border: 1px solid #f5c6c0; color: #a13226; }

/* --------------------------------------------------- resultaten in drie */

/* Resultaten: drie ruime kaartjes op desktop, twee op tablet, één op mobiel. */
.layout .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1080px) { .layout .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px)  { .layout .grid { grid-template-columns: 1fr; } }

/* De kaartjes zijn nu breder, dus mag het beeld wat royaler. */
.layout .card__media,
.layout .card__media img { aspect-ratio: 3 / 2; }
.layout .card__title { font-size: 1.1rem; }
.layout .card__body { padding: 16px 18px 18px; }

/* ---------------------------------------------------- kaart onder de lijst */

.kaart-sectie { margin-top: 80px; padding-top: 44px; border-top: 1px solid var(--line); }
.kaart-sectie .section__head { margin-bottom: 20px; }

/* Tekst onder de kaart: leesbare breedte, maar links uitgelijnd met de
   pagina in plaats van gecentreerd -- anders zweeft hij in het midden. */
.gids-intro {
    max-width: 68ch;
    margin: 72px 0 0;
    padding-top: 44px;
    border-top: 1px solid var(--line);
}
.gids-intro > :first-child { margin-top: 0; }
.kaart-sectie .map { height: 520px; }
@media (max-width: 720px) { .kaart-sectie .map { height: 340px; } }
.muted-note { color: var(--ink-40); font-size: .85rem; }

/* ------------------------------------------------------ kaart uitklappen */

.map-wrap { position: relative; }
.map-expand {
    position: absolute; right: 12px; top: 12px; z-index: 500;
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 12px; border-radius: 8px; border: 1px solid var(--line);
    background: rgba(255,255,255,.95); box-shadow: var(--shadow);
    font-family: var(--display); font-size: .84rem; font-weight: 500;
    color: var(--ink); cursor: pointer;
}
.map-expand:hover { border-color: var(--ink-40); }

body.kaart-groot { overflow: hidden; }
body.kaart-groot .map-wrap {
    position: fixed; inset: 16px; z-index: 900;
    background: var(--white); border-radius: var(--radius-lg);
    box-shadow: 0 24px 70px rgba(8, 32, 44, .35); padding: 12px;
}
body.kaart-groot .map { height: 100%; }
body.kaart-groot .map-note { display: none; }

/* -------------------------------------------------------------- sterren */

.sterren { border: 0; padding: 0; margin: 0 0 18px; }
.sterren legend {
    padding: 0; margin-bottom: 6px;
    font-size: .88rem; font-weight: 500; color: var(--ink-60);
}
.sterren input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.sterren { display: flex; flex-wrap: wrap; }
.sterren legend { width: 100%; }
.sterren label {
    font-size: 1.9rem; line-height: 1; color: var(--line);
    cursor: pointer; margin: 0 2px 0 0; padding: 0;
    transition: color .12s;
}
/* Omgekeerde volgorde in de HTML, zodat de voorgaande sterren mee oplichten */
.sterren { flex-direction: row-reverse; justify-content: flex-end; }
.sterren input:checked ~ label,
.sterren label:hover, .sterren label:hover ~ label { color: var(--sun); }
.sterren input:focus-visible + label { outline: 2px solid var(--sea); outline-offset: 2px; }

/* -------------------------------------------------- filters op mobiel */

.rail-knop { display: none; }

@media (max-width: 900px) {
    .rail-knop {
        display: inline-flex; align-items: center; gap: 8px;
        padding: 11px 18px; margin-bottom: 4px;
        border: 1px solid var(--line); border-radius: 10px;
        background: var(--white); color: var(--ink);
        font-family: var(--display); font-size: .95rem; font-weight: 500;
        cursor: pointer;
    }
    .rail-knop__n {
        background: var(--sea); color: var(--white);
        font-size: .76rem; padding: 1px 8px; border-radius: 20px;
    }
    .rail-knop__pijl {
        margin-left: auto; color: var(--ink-40);
        transition: transform .18s ease;
    }
    .rail-knop[aria-expanded="true"] { border-color: var(--ink-40); }
    .rail-knop[aria-expanded="true"] .rail-knop__pijl { transform: rotate(180deg); }
    /* Standaard dicht: de bezoeker wil eerst de resultaten zien. */
    .rail { display: none; }
    .rail.is-open { display: block; margin-bottom: 8px; }
}

/* Anker net onder de plakkende kop laten uitkomen */
#resultaten { scroll-margin-top: 96px; }
#kaart-blok { scroll-margin-top: 96px; }

/* ------------------------------------------------------- lange teksten */

.inkort { position: relative; }

.inkort.is-ingekort:not(.is-open) .prose {
    max-height: var(--inkort-hoogte, 520px);
    overflow: hidden;
}
.inkort.is-ingekort:not(.is-open)::after {
    content: '';
    position: absolute; left: 0; right: 0; bottom: 46px; height: 120px;
    background: linear-gradient(to bottom, rgba(255,255,255,0), var(--white) 85%);
    pointer-events: none;
}
.inkort__knop {
    position: relative; z-index: 1;
    margin-top: 14px;
    padding: 10px 20px;
    border: 1px solid var(--line); border-radius: 9px;
    background: var(--white); color: var(--ink);
    font-family: var(--display); font-size: .93rem; font-weight: 500;
    cursor: pointer;
}
.inkort__knop:hover { border-color: var(--ink-40); }

/* Iets rustiger regelafstand in lopende tekst op een telefoon */
@media (max-width: 700px) {
    .prose { font-size: .97rem; }
    .prose p { margin-bottom: 1.1em; }
}

/* Advertenties -------------------------------------------------------- */
.adv {
    display: block;
    max-width: 728px;
    margin: 36px 0;
    padding-top: 14px;
    border-top: 1px solid var(--line);
    clear: both;
}
.adv__label {
    display: block;
    margin-bottom: 8px;
    font-size: .72rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ink-40);
}
.adv .adsbygoogle { min-height: 90px; }
#resultaten .adv { max-width: none; margin-bottom: 0; }