/* site.css — banuslodge.com-specifieke opmaak bovenop framework-CSS.
 *
 * Geen hard-coded kleuren: alles via tokens uit /css/variables/website.css
 * (brand + --bl-*) of de framework-base /modules/variables.css. Conflicten
 * oplossen via specificity/cascade, nooit met !important.
 *
 * Referentie-design: statische export op
 * age.playground.easyhandling.nl/banuslodge/ (Playfair Display-koppen,
 * cream-vlakken, witte kaarten met scallop-rand, zwevende pill-navigatie).
 */

/* ── Navigatie: zwevende witte pill ─────────────────────────────────────── */
.site-header__inner {
    background: var(--color-bg-elev);
    border-radius: 999px;
    box-shadow: var(--bl-shadow-sm);
    margin-top: 14px;
    padding-inline: 18px;
}
.site-nav__link {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 14px;
}
.site-nav__link:hover,
.site-nav__item--active > .site-nav__link {
    color: var(--color-primary);
}

/* ── Koppen: Playfair op design-gewicht ─────────────────────────────────── */
.general__title,
.card__title,
.layer__header-title {
    font-family: var(--font-display);
    line-height: 1.12;
}

/* ── Kaarten (verblijven/impressie): wit, rond, lift op hover ───────────── */
.card--banner {
    background: var(--color-bg-elev);
    border-radius: var(--bl-radius);
    overflow: hidden;
    box-shadow: var(--bl-shadow-sm);
    transition: transform var(--dur-med) var(--ease-out),
                box-shadow var(--dur-med) var(--ease-out);
}
.card--banner:hover {
    transform: translateY(-6px);
    box-shadow: var(--bl-shadow);
}
.card--banner .card__media {
    aspect-ratio: 4 / 3;          /* geen vaste hoogte: verhouding blijft */
    position: relative;
    overflow: hidden;
}
/* Scallop-rand over de volle breedte van de kaartfoto. De SVG heeft
   preserveAspectRatio="none" en rekt dus mee tot rand-tot-rand. */
.card--banner .card__media::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;                  /* 1px overlap tegen subpixel-haarlijn */
    height: 23px;
    background: url('banus-scallop.svg') bottom center / 100% 23px no-repeat;
}
.card--banner .card__content {
    padding: 18px 24px 24px;
}
.card--banner .card__title {
    font-size: 27px;
}
.card--banner .card__subtitle {
    color: var(--color-primary);
    font-weight: 600;
    font-size: 13.5px;
}

/* ── USP-lagen ──────────────────────────────────────────────────────────── */
/* Icon-formaat komt uit het CMS (advanced_scale/advanced_scale_size op de
   laag → --usp-icon-size). Design: visual met titel/subtitel ERONDER,
   gecentreerd — de framework-default (icoon links, tekst rechts) past niet. */
.layer__usps .usp,
.layer__region .usp {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 14px;
}
/* Grid: mobiel 1, tablet 2, desktop 4 op een rij (design). De inline-view-
   variant expliciet meenemen zodat de framework-default (3 kolommen) het
   niet wint op specificity. */
@container (min-width: 36rem) {
    .layer__usps .layer__usps-list,
    .layer__usps[data-view="inline"] .layer__usps-list {
        grid-template-columns: repeat(2, 1fr);
    }
}
@container (min-width: 56rem) {
    .layer__usps .layer__usps-list,
    .layer__usps[data-view="inline"] .layer__usps-list {
        grid-template-columns: repeat(4, 1fr);
    }
}
.layer__usps .usp__title,
.layer__region .usp__title {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 21px;
}
.layer__usps .usp__text {
    color: var(--color-fg-muted);
    font-size: 15px;
}

/* ── Region-laag: tekst links, icoon-grid (2×2) rechts ──────────────────── */
.layer__region {
    --usp-icon-size: 144px;        /* zelfde ornament-maat als de usp-lagen */
}
.layer__region-layout {
    display: grid;
    gap: 40px;
}
@container (min-width: 56rem) {
    .layer__region-layout {
        grid-template-columns: 1fr 1fr;
        align-items: center;
    }
}
.layer__region-usps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 28px 24px;
}
.layer__region-tagline {
    font-family: var(--font-body);
    font-size: var(--fs-tagline);
    font-weight: 700;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--color-primary);
    margin-bottom: 14px;
}
.layer__region-title {
    margin-bottom: 18px;
}
.layer__region-buttons {
    margin-top: 22px;
}

/* ── Reviews: witte kaartjes met zand-sterren ───────────────────────────── */
.reviews__item {
    background: var(--color-bg-elev);
    border-radius: var(--bl-radius);
    box-shadow: var(--bl-shadow-sm);
    padding: 24px 28px;
}
.reviews__item-stars-fill {
    color: var(--bl-sand);
}
.reviews__item-author {
    font-weight: 600;
}
.reviews__item-text {
    font-style: italic;
}

/* ── Zoek&boek-widget: zwevende balk óver de hero-foto ──────────────────── */
/* De widget is een eigen laag direct ná de hero (geen LayerHeader-port);
   de sectie is transparant en wordt met negatieve marge de hero-foto op
   getrokken — alleen de witte pill zweeft op het beeld, zoals het design. */
.layer__header + .layer__search-and-book {
    margin-top: -7em;
    position: relative;
    z-index: 10;
    background: transparent;
}
@media (max-width: 767px) {
    /* Mobiel stapelt het formulier (hoge pill) en is de hero-foto laag:
       minder overlap, anders verdwijnt de foto achter de widget. */
    .layer__header + .layer__search-and-book {
        margin-top: -2.5em;
    }
}
.layer__search-and-book .sab__form {
    background: var(--color-bg-elev);
    border-radius: var(--bl-radius);
    box-shadow: var(--bl-shadow);
    padding: 18px 22px;
}
.layer__search-and-book .sab__submit {
    background: var(--color-primary);
    color: var(--color-primary-fg);
    border-radius: 999px;
    font-weight: 600;
}

/* ── Footer: warm bruin i.p.v. theme-ink ────────────────────────────────── */
footer.site-footer {
    background-color: var(--bl-brown);
    color: var(--on-image-fg-soft);
}