/* ==========================================================================
   Centaur Trails | components.css
   Alleen wat Bootstrap niet zelf levert. Layout, flex, gap, spacing, grid en
   display staan als Bootstrap-classes in de HTML. Bootstrap-componenten
   (btn, dropdown, accordion, offcanvas, form-control) worden hier via hun
   eigen --bs-* variabelen op Figma gezet.

   1. Buttons (Bootstrap .btn)        9.  Accordeon (Bootstrap .accordion)
   2. Eyebrow en sectiekop            10. Uitgelichte reizen (carousel)
   3. Top bar                         11. Rail en voortgangsbalk
   4. Header desktop                  12. Reiskaart
   5. Mega menu (Bootstrap dropdown)  13. Werelddelen
   6. Header mobiel + offcanvas       14. Testimonials
   7. Hero                            15. Beeld + tekst
   8. Zoekbalk                        16. Footer + formulier
   ========================================================================== */

/* 1. Buttons ---------------------------------------------------------------
   Basis: Bootstrap .btn. Figma: 48px hoog, 12px 24px, pil, 14px semibold,
   hoofdletters. Hover op alle varianten = groen. */
.btn-ct {
    --bs-btn-border-width: 0;            /* Figma: rand valt binnen de 48px */
    --bs-btn-padding-x: 24px;
    --bs-btn-padding-y: 12px;
    --bs-btn-font-size: 14px;
    --bs-btn-font-weight: 600;
    --bs-btn-line-height: 24px;
    --bs-btn-border-radius: var(--bs-border-radius-pill);
    --bs-btn-disabled-opacity: 1;
    --bs-btn-disabled-color: #FFFFFF;
    --bs-btn-disabled-bg: var(--gs-300);
    --bs-btn-disabled-border-color: var(--gs-300);
    letter-spacing: 0.02em;
    text-transform: uppercase;
    white-space: nowrap;
}

.btn-ct-primary {
    --bs-btn-color: #FFFFFF;
    --bs-btn-bg: var(--color-accent);
    --bs-btn-border-color: var(--color-accent);
    --bs-btn-hover-color: #FFFFFF;
    --bs-btn-hover-bg: var(--color-primary);
    --bs-btn-hover-border-color: var(--color-primary);
    --bs-btn-active-color: #FFFFFF;
    --bs-btn-active-bg: var(--color-primary-dark);
    --bs-btn-active-border-color: var(--color-primary-dark);
    --bs-btn-focus-shadow-rgb: 224, 115, 34;
}

.btn-ct-secondary {
    --bs-btn-color: var(--color-text);
    --bs-btn-bg: #FFFFFF;
    --bs-btn-border-color: var(--color-border);
    box-shadow: inset 0 0 0 1px var(--bs-btn-border-color);
    --bs-btn-hover-color: #FFFFFF;
    --bs-btn-hover-bg: var(--color-primary);
    --bs-btn-hover-border-color: var(--color-primary);
    --bs-btn-active-color: #FFFFFF;
    --bs-btn-active-bg: var(--color-primary-dark);
    --bs-btn-active-border-color: var(--color-primary-dark);
}

.btn-ct-green {
    --bs-btn-color: #FFFFFF;
    --bs-btn-bg: var(--color-primary);
    --bs-btn-border-color: var(--color-primary);
    --bs-btn-hover-color: #FFFFFF;
    --bs-btn-hover-bg: var(--color-primary-dark);
    --bs-btn-hover-border-color: var(--color-primary-dark);
    --bs-btn-active-color: #FFFFFF;
    --bs-btn-active-bg: var(--color-primary-dark);
    --bs-btn-active-border-color: var(--color-primary-dark);
}

.btn-ct-sm { --bs-btn-padding-x: 16px; --bs-btn-padding-y: 10px; }   /* header Contact, 44px */
.btn-ct-lg { --bs-btn-padding-y: 16px; }                              /* zoekbalk, 56px */

/* Mobiele header Contact: 40px, geen hoofdletters */
.btn-ct-mobile {
    --bs-btn-padding-x: 18px;
    --bs-btn-padding-y: 10px;
    --bs-btn-line-height: 20px;
    letter-spacing: 0;
    text-transform: none;
}

/* Ronde icoonknop (40x40). Kleur via -light of -accent. */
.btn-icon {
    --bs-btn-padding-x: 0;
    --bs-btn-padding-y: 0;
    --bs-btn-border-radius: 50%;
    --bs-btn-disabled-opacity: 1;
    flex-shrink: 0;                      /* blijft rond naast lange titels in een flex-rij */
    width: 40px;
    height: 40px;
}

.btn-icon-44 { width: 44px; height: 44px; }

.btn-icon-light {
    --bs-btn-color: var(--color-text);
    --bs-btn-bg: var(--color-bg-1);
    --bs-btn-border-color: var(--color-border);
    --bs-btn-hover-color: #FFFFFF;
    --bs-btn-hover-bg: var(--color-primary);
    --bs-btn-hover-border-color: var(--color-primary);
    --bs-btn-active-color: #FFFFFF;
    --bs-btn-active-bg: var(--color-primary-dark);
    --bs-btn-active-border-color: var(--color-primary-dark);
}

.btn-icon-light:hover img {
    filter: brightness(0) invert(1);
}

/* Groene icoonknop (pijlen op de reispagina) */
.btn-icon-primary {
    --bs-btn-color: #FFFFFF;
    --bs-btn-bg: var(--color-primary);
    --bs-btn-border-color: var(--color-primary);
    --bs-btn-hover-color: #FFFFFF;
    --bs-btn-hover-bg: var(--color-primary-dark);
    --bs-btn-hover-border-color: var(--color-primary-dark);
    --bs-btn-active-color: #FFFFFF;
    --bs-btn-active-bg: var(--color-primary-dark);
    --bs-btn-active-border-color: var(--color-primary-dark);
    --bs-btn-disabled-color: #FFFFFF;
    --bs-btn-disabled-bg: var(--pc-200);
    --bs-btn-disabled-border-color: var(--pc-200);
}

.btn-icon-accent {
    --bs-btn-color: #FFFFFF;
    --bs-btn-bg: var(--color-accent);
    --bs-btn-border-color: var(--color-accent);
    --bs-btn-hover-color: #FFFFFF;
    --bs-btn-hover-bg: var(--color-primary);
    --bs-btn-hover-border-color: var(--color-primary);
    --bs-btn-active-color: #FFFFFF;
    --bs-btn-active-bg: var(--color-primary-dark);
    --bs-btn-active-border-color: var(--color-primary-dark);
    --bs-btn-disabled-color: #FFFFFF;
    --bs-btn-disabled-bg: var(--color-accent-light);
    --bs-btn-disabled-border-color: var(--color-accent-light);
}

/* 2. Eyebrow en sectiekop --------------------------------------------------
   Groen streepje voor de tekst: desktop 3x10 met 12px ruimte. */
.eyebrow {
    --tick-w: 3px;
    --tick-h: 10px;
    --tick-gap: 12px;
    display: inline-flex;
    align-items: center;
    gap: var(--tick-gap);
    font-size: 14px;
    font-weight: 600;
    line-height: 10px;                   /* Figma: tekstbox bijgesneden tot hoofdletterhoogte */
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--color-primary);
}

.eyebrow::before {
    content: "";
    flex-shrink: 0;
    width: var(--tick-w);
    height: var(--tick-h);
    background-color: currentColor;
}

.eyebrow.is-wide { --tick-gap: 15px; }

.section-pad { padding-top: 112px; padding-bottom: 112px; }
.section-intro { max-width: 640px; }
.heading-narrow { max-width: 640px; }

/* 3. Top bar --------------------------------------------------------------- */
.top-bar {
    z-index: 1031;                       /* blijft scherp boven de menu-blur */
}

.top-bar-list,
.top-bar-list li {
    gap: 24px;
}

.top-bar-list li {
    font-size: 14px;
    line-height: 1.46;
}

.top-bar-list li + li::before {
    content: "";
    flex-shrink: 0;
    width: 8px;
    height: 8px;
    background: url("../assets/icons/dot.svg") center / contain no-repeat;
}

/* 4. Header desktop (Figma "Header #1": 76px) ------------------------------ */
.site-header {
    z-index: 1030;
}

.header-inner {
    gap: 40px;
    min-height: 76px;
}

.header-nav-link {
    font-size: 13px;
    line-height: 24px;
    letter-spacing: -0.01em;
    color: var(--color-text);
}

.header-nav-link:hover,
.header-nav-link[aria-expanded="true"],
.header-nav-link[aria-current="page"] {
    color: var(--color-primary);
}

.header-nav-link .ico {
    transition: transform 0.2s ease;
}

.header-nav-link[aria-expanded="true"] .ico {
    transform: rotate(180deg);
}

.header-nav-right {
    padding-right: 12px;
}

/* Logo in witte cirkel die 16px boven en onder de balk uitsteekt */
.header-logo {
    width: 200px;
    height: 44px;
}

.header-logo a {
    top: -16px;
    margin-left: 2.25px;
    padding: 10px !important;
    z-index: 2;
}

.header-logo img {
    width: 80px;
    height: 80px;
}

/* 5. Mega menu (Bootstrap .dropdown-menu) ---------------------------------
   Figma: 24px onder de header, x 170 op 1440, wit, radius 24. */
.mega-menu {
    --bs-dropdown-min-width: 0;
    --bs-dropdown-border-radius: var(--bs-border-radius-xl);
    --bs-dropdown-box-shadow: var(--shadow-4);
    --bs-dropdown-font-size: 1rem;
    --bs-dropdown-link-color: var(--color-text);
    --bs-dropdown-link-hover-color: #FFFFFF;
    --bs-dropdown-link-hover-bg: var(--color-accent);
    --bs-dropdown-link-active-color: #FFFFFF;
    --bs-dropdown-link-active-bg: var(--color-accent);
    --bs-dropdown-item-padding-x: 12px;
    --bs-dropdown-item-padding-y: 10px;
    --bs-dropdown-item-border-radius: var(--bs-border-radius-sm);
    --bs-dropdown-zindex: 1040;
    padding: 12px !important;
    box-shadow: var(--bs-dropdown-box-shadow);
}

.header-inner .mega-menu.show {
    display: flex;
    top: calc(100% + 24px);
    left: 90px;
    width: 868px;
}

.header-inner .mega-menu-sm.show {
    top: calc(100% + 50px);
    left: -12px;
    width: auto;
    min-width: 300px;
}

.mega-menu-tabs {
    width: 210px;
}

.mega-menu-countries a {
    font-size: 14px;
    line-height: 1;
    color: var(--color-text-muted);
}

.mega-menu-countries li {
    line-height: 1;
}

.mega-menu-countries a:hover {
    color: var(--color-accent);
}

/* Wazige pagina achter het mega menu */
.menu-backdrop {
    z-index: 1020;
    background-color: rgba(255, 255, 255, 0.15);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.menu-backdrop.is-visible {
    opacity: 1;
    visibility: visible;
}

/* 6. Header mobiel (68px) + offcanvas menu ---------------------------------- */
.site-header-mobile {
    z-index: 1030;
}

.header-mobile-inner {
    min-height: 68px;
    padding-top: 6px;
    padding-bottom: 6px;
}

.menu-toggle {
    width: 40px;
    height: 40px;
}

.menu-toggle span {
    width: 18px;
    height: 2px;
    background-color: var(--color-text);
    border-radius: 2px;
}

.header-mobile-logo {
    width: 56px;
    height: 56px;
}

.mobile-menu {
    --bs-offcanvas-width: 408px;
    max-width: calc(100% - 32px);
}

/* Menu-item: 16px semibold, 10px 12px, radius 8 */
.menu-link {
    min-height: 44px;
    padding: 10px 12px;
    line-height: 1.5;
    color: var(--color-text);
}

.menu-link:hover {
    color: var(--color-text);
    background-color: var(--color-bg-1) !important;
}

.menu-sub .menu-link:hover {
    background-color: #FFFFFF !important;
}

/* Uitgeklapt werelddeel: oranje balk met pijl omlaag, anders pijl rechts */
.menu-link-accent .ico {
    --ico: url("../assets/icons/arrow-right.svg");
    color: var(--color-text-muted);
}

.menu-link-accent[aria-expanded="true"] {
    color: #FFFFFF !important;
    background-color: var(--color-accent) !important;
}

.menu-link-accent[aria-expanded="true"] .ico {
    --ico: url("../assets/icons/arrow-down.svg");
    color: #FFFFFF;
}

.menu-countries a {
    display: block;
    padding: 8px 12px;
    font-weight: 600;
    color: var(--color-text);
}

.menu-countries a:hover {
    color: var(--color-accent);
}

/* 7. Hero (820px, 16px van de rand, radius 48 onder) ---------------------- */
.hero-inner {
    min-height: 820px;
    padding: 112px 208px;
    border-radius: 0 0 var(--radius-3xl) var(--radius-3xl);
    background-color: var(--color-bg-1);
    background-image:
        linear-gradient(180deg, #FFFFFF 0%, rgba(255, 255, 255, 0) 62.415%),
        url("../assets/images/home/hero.jpg");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.hero-content {
    max-width: 1000px;
    padding-bottom: 80px;
}

.hero-text .overline {
    line-height: 10px;                   /* Figma: bijgesneden tekstbox */
}

.hero-lead {
    max-width: 680px;
    font-size: 20px;
    line-height: 1.44;
}

/* 8. Zoekbalk ------------------------------------------------------------- */
.trip-search {
    padding: 0 32px;
}

.trip-search-bar {
    border: 1px solid var(--color-border-dark);
    border-radius: var(--bs-border-radius-pill);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    filter: drop-shadow(0 6px 7px rgba(127, 76, 5, 0.12))
            drop-shadow(0 25px 12.5px rgba(127, 76, 5, 0.10))
            drop-shadow(0 56px 17px rgba(127, 76, 5, 0.06))
            drop-shadow(0 100px 20px rgba(127, 76, 5, 0.02));
}

.trip-search-field:first-child {
    padding-left: 8px;
}

.trip-search-field:focus-within {
    box-shadow: 0 0 0 2px var(--pc-200);
}

.trip-search-icon {
    background-color: var(--pc-50);
}

.trip-search-label {
    font-size: 12px;
    line-height: 1.36;
    color: var(--color-text-muted);
    cursor: pointer;
}

/* Bootstrap .form-select met Figma-pijl (16px, 60% donker) */
.trip-search-select {
    background-image: url("../assets/icons/caret-down-muted.svg");
    background-position: right center;
    background-size: 16px 16px;
    line-height: 1.5;
    cursor: pointer;
}

.trip-search-text {
    min-width: 0;                        /* veld mag smaller worden; lange tekst krijgt ... */
}

.trip-search-divider {
    width: 1px;
    margin: 0 1.5px;
    background-color: var(--color-border);
}

/* 9. Accordeon (Bootstrap .accordion) -------------------------------------
   Figma: titel Montserrat 24, 32px boven/onder, lijn 2px. Open item: groene
   lijn, groene ronde knop met witte pijl omhoog. */
.accordion-ct {
    --bs-accordion-bg: transparent;
    --bs-accordion-border-width: 2px;
    --bs-accordion-border-radius: 0;
    --bs-accordion-inner-border-radius: 0;
    --bs-accordion-btn-padding-x: 0;
    --bs-accordion-btn-padding-y: 32px;
    --bs-accordion-btn-color: var(--color-text);
    --bs-accordion-btn-icon-width: 40px;
    --bs-accordion-btn-focus-box-shadow: 0 0 0 3px rgba(123, 181, 52, 0.25);
    --bs-accordion-body-padding-x: 0;
    --bs-accordion-body-padding-y: 0;
    --bs-accordion-active-color: var(--color-text);
    --bs-accordion-active-bg: transparent;
}

.accordion-ct .accordion-item {
    border-width: 0 0 var(--bs-accordion-border-width);
}

.accordion-ct .accordion-item:has(.accordion-button:not(.collapsed)) {
    border-bottom-color: var(--color-primary);
}

.accordion-ct .accordion-button {
    gap: 8px;
    font-family: var(--font-heading);
    font-size: 24px;
    font-weight: 600;
    line-height: 1.26;
    letter-spacing: -0.015em;
}

.accordion-ct .accordion-button:not(.collapsed) {
    padding-bottom: 8px;
    box-shadow: none;
}

/* Ronde knop rond het Bootstrap-icoon. Het icoon staat hier direct (en niet
   via --bs-accordion-btn-icon), omdat een relatief pad in een Bootstrap-
   variabele vanaf de CDN wordt opgezocht. */
.accordion-ct .accordion-button::after {
    background-image: url("../assets/icons/caret-down-20.svg");
    background-color: rgba(26, 26, 26, 0.1);
    background-position: center;
    background-size: 20px;
    border-radius: 50%;
}

.accordion-ct .accordion-button:not(.collapsed)::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M16.03 7.78l-5.5 5.5a.75.75 0 01-1.06 0l-5.5-5.5a.75.75 0 011.06-1.06L10 11.69l4.97-4.97a.75.75 0 111.06 1.06z' fill='%23fff'/%3E%3C/svg%3E");
    background-color: var(--color-primary);
}

.accordion-ct .accordion-body {
    padding-bottom: 32px;
}

.trust-section {
    padding-top: 64px;
    padding-bottom: 112px;
}

.trust-text {
    padding-top: 16px;
    padding-left: calc(var(--bs-gutter-x) * 0.5 + 48px);
}

.trust-acc {
    margin-top: calc(var(--bs-gutter-y) - 16px);   /* Figma: accordeon start 16px boven de foto */
    padding-bottom: 16px;
    padding-left: calc(var(--bs-gutter-x) * 0.5 + 48px);
}

.trust-media {
    height: 480px;
}

/* 10. Uitgelichte reizen ------------------------------------------------
   Desktop: actieve kaart 700x448 in het midden, buren 560x358 met blur. */
.featured-stage {
    display: flex;
}

.feature-card {
    position: relative;
    width: 560px;
    height: 358px;
    padding: 32px;
    isolation: isolate;
}

/* Uitsnede per foto (Figma), i.p.v. inline style */
.feature-card-namibie { --pos-mobile: 57.5% center; }

.feature-card > img {
    z-index: -2;
    object-position: var(--pos, center);
}

.feature-card::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(180deg, rgba(24, 40, 11, 0) 60%, rgba(24, 40, 11, 0.86) 86%, #18280B 100%),
        rgba(24, 40, 11, 0.2);
}

.feature-card:hover {
    color: #FFFFFF;
}

.feature-badge {
    min-height: 32px;
    padding: 4px 12px;
    font-size: 12px;
    line-height: 1.36;
    color: var(--color-text-light);
}

.feature-title {
    font-family: var(--font-primary);
    font-size: 26px;
    font-weight: 600;
    line-height: 1.44;
    letter-spacing: 0;
}

.feature-sub {
    color: var(--color-text-light);
}

/* Desktop: alle kaarten op één plek gestapeld (grid), main.js geeft elke kaart
   een --slot (-1 vorige, 0 actief, 1 volgende, +-2 verborgen). De kaart schuift
   met transform (soepel, GPU) en buren zijn 80% groot met blur (Figma 560/700). */
@media (min-width: 992px) {
    .featured-stage.rail {
        --card-w: 700px;
        --card-h: 448px;
        --step: calc(var(--card-w) * 0.9 + 64px);   /* halve actieve + 12 + pijl 40 + 12 + halve buur */
        display: grid;
        grid-template: "stack" var(--card-h) / 100%;
        place-items: center;
        overflow: visible;
        scroll-snap-type: none;
    }

    .featured-stage .feature-card {
        grid-area: stack;
        width: var(--card-w);
        height: var(--card-h);
        transform: translateX(calc(var(--slot, 0) * var(--step))) scale(var(--scale, 0.8));
        transition: transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1),
                    filter 0.7s ease,
                    opacity 0.5s ease;
        will-change: transform;
    }

    .featured-stage .feature-card.no-anim {
        transition: none;
    }

    .featured-stage [data-pos="prev"],
    .featured-stage [data-pos="next"] {
        filter: blur(4px);
        pointer-events: none;
    }

    .featured-stage [data-pos="active"] {
        --scale: 1;
        z-index: 2;
    }

    .featured-stage [data-pos="hidden"] {
        opacity: 0;
        pointer-events: none;
    }

    .featured-stage .feature-badge {
        padding: 10px 12px;
        font-size: 14px;
        line-height: 1.46;
        color: #FFFFFF;
    }

    .featured-prev,
    .featured-next {
        grid-area: stack;
        z-index: 3;
    }

    .featured-prev { transform: translateX(calc(var(--card-w) / -2 - 32px)); }
    .featured-next { transform: translateX(calc(var(--card-w) / 2 + 32px)); }
}

@media (prefers-reduced-motion: reduce) {
    .featured-stage .feature-card {
        transition: none;
    }
}

.featured-progress {
    width: 276px;
    height: 2px;
    background-color: var(--color-border);
}

.featured-progress span {
    transition: transform 0.3s ease;
}

/* 11. Rail (horizontale slider) ------------------------------------------ */
.rail {
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
}

.rail::-webkit-scrollbar {
    display: none;
}

.rail > * {
    flex-shrink: 0;
    scroll-snap-align: start;
}

.rail-progress {
    height: 3px;
    background-color: var(--gs-300);
    border-radius: 2px;
}

.rail-progress span {
    width: 60px;
    border-radius: 2px;
    transition: transform 0.15s linear;
}

/* 12. Reiskaart (Figma "List - Trip #1") -------------------------------- */
.popular-section {
    padding-top: 112px;
    padding-bottom: 80px;
}

.trip-card {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
    gap: 12px;
    transition: box-shadow 0.3s ease;
}

.trip-card:hover {
    box-shadow: var(--shadow-3);
}

.trip-card-media {
    aspect-ratio: 1 / 1;
    background-color: #F5F5F5;
}

.trip-card-media img {
    transition: transform 0.6s ease;
}

.trip-card:hover .trip-card-media img {
    transform: scale(1.04);
}

.trip-card-body {
    padding: 12px;
}

.trip-card-title a {
    color: inherit;
}

.trip-card:hover .trip-card-go {
    --bs-btn-bg: var(--color-primary);
    --bs-btn-border-color: var(--color-primary);
}

.trip-card-desc {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

.trip-card-meta {
    padding-top: 24px;
}

/* 13. Werelddelen ---------------------------------------------------------- */
.world-section {
    padding-bottom: 112px;
}

.world-panel {
    padding: 56px;
}

.world-card {
    color: var(--color-text);
    transition: box-shadow 0.3s ease;
}

.world-card:hover {
    color: var(--color-text);
    box-shadow: var(--shadow-3);
}

.world-card-media {
    width: 88px;
    height: 88px;
}

.world-card .ico {
    transition: transform 0.2s ease, color 0.2s ease;
}

.world-card:hover .ico {
    color: var(--color-accent);
    transform: translateX(3px);
}

/* 14. Testimonials --------------------------------------------------------- */
.reviews-head {
    margin-bottom: 64px;
}

.reviews-intro {
    max-width: 420px;
}

.reviews-rail > * {
    width: calc((min(100vw - 32px, var(--container-max)) - 16px) / 2);
}

.review-media {
    flex: 1 1 0;
    aspect-ratio: 200 / 250;
    background-color: #F5F5F5;
}

/* Uitsnede foto (Figma): ruiter links in beeld, i.p.v. inline style */
.review-img-left {
    object-position: 29.4% center;
}

.review-body {
    flex: 1 1 0;
    min-width: 0;
    padding: 12px;
}

.review-rating {
    gap: 1px;
}

.review-rating img {
    width: 24px;
    height: 24px;
}

.review-title {
    padding-left: 12px;
    font-family: var(--font-primary);
    font-size: 16px;
    line-height: 1.5;
    letter-spacing: 0;
    border-left: 3px solid var(--color-accent);
}

.review-quote {
    font-size: 16px;
    line-height: 1.44;
}

/* 15. Beeld + tekst (Over Centaur Trails) ---------------------------------- */
.media-text-img {
    height: 528px;
}

.media-text-copy {
    max-width: 600px;
}

/* 16. Footer + nieuwsbriefformulier --------------------------------------- */
.footer-inner {
    gap: 80px;
    padding: 64px 16px 24px;
    border-radius: var(--radius-3xl) var(--radius-3xl) 0 0;
    background: url("../assets/images/footer-bg.jpg") center / cover no-repeat;
    isolation: isolate;
}

.footer-inner::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-color: var(--color-overlay-dark);
}

.footer-inner > * {
    max-width: var(--container-max);
}

.footer-newsletter {
    padding: 24px;
    border-radius: var(--bs-border-radius-xxl);
}

.footer-newsletter-text {
    max-width: 360px;
}

.footer-usps .ico {
    color: var(--color-accent);
}

.footer-newsletter-form {
    gap: 16px;
    padding: 32px;
    background-color: var(--color-bg-panel);
}

/* Bootstrap .form-control / .form-check op Figma-maat */
.footer-newsletter-form .form-label {
    margin-bottom: 6px;
    font-size: 14px;
    line-height: 1.46;
}

.footer-newsletter-form .form-control {
    padding: 12px 16px;
    border-width: 0;                     /* desktop: geen rand (48px hoog) */
    border-radius: var(--bs-border-radius);
}

.footer-newsletter-form .form-control::placeholder {
    color: var(--color-text-muted);
}

.footer-newsletter-form .form-control:focus,
.footer-newsletter-form .form-check-input:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px var(--color-primary);
}

.footer-newsletter-form .form-check {
    display: flex;
    gap: 8px;
    padding-left: 0;
    color: var(--color-text-body);
}

.footer-newsletter-form .form-check-input {
    width: 20px;
    height: 20px;
    margin: 2px 0 0;
    border: 1.5px solid var(--color-text);
    border-radius: 3px;
}

.footer-newsletter-form .form-check-input:checked {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}

.footer-main {
    gap: 64px;
}

.footer-columns {
    --bs-gutter-x: 48px;
    --bs-gutter-y: 48px;
}

.footer-brand {
    gap: 32px;
}

.footer-icon {
    padding: 10px;
    background-color: rgba(255, 255, 255, 0.2);
    transition: background-color 0.3s ease;
}

a.footer-icon:hover {
    background-color: var(--color-primary);
}

.footer-contact a:hover {
    color: var(--color-primary) !important;
}

.footer-col-title {
    margin-bottom: 16px;
    font-family: var(--font-primary);
    font-size: 16px;
    line-height: 1.5;
    letter-spacing: 0;
    color: var(--color-text-light);
}

.footer-links {
    gap: 12px;
    color: #FFFFFF;
}

.footer-links a {
    color: #FFFFFF;
}

.footer-links a:hover {
    color: var(--color-primary);
}

.footer-bottom {
    border-top: 1px solid var(--color-border-dark);
    color: var(--color-text-light);
}

/* ==========================================================================
   17. Over ons
   Layout via Bootstrap (row/col, order, gap, rounded, object-fit). Hier alleen
   Figma-maten die Bootstrap niet heeft.
   ========================================================================== */

/* Paginaheader (Figma "Page Hero"): foto, 70% zwart, 48px onderradius */
.page-hero-wrap {
    padding: 0 16px;
}

.page-hero {
    min-height: 440px;
    border-radius: 0 0 var(--radius-3xl) var(--radius-3xl);
}

.page-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.7);
}

.page-hero-content {
    max-width: 960px;
    padding-bottom: 64px;
}

.page-hero-bg-low {
    object-position: 50% 88.5%;          /* Over ons: Figma-uitsnede met ruiters in beeld */
}

.page-hero-lead {
    max-width: 650px;                    /* regelval zoals in Figma */
    text-wrap: wrap;
    color: var(--gs-300);
}

/* Bootstrap-breadcrumb in Figma-stijl: wit 50%, "/" met 8px ruimte */
.breadcrumb-ct {
    --bs-breadcrumb-item-padding-x: 8px;
    --bs-breadcrumb-divider-color: rgba(255, 255, 255, 0.5);
    --bs-breadcrumb-item-active-color: rgba(255, 255, 255, 0.5);
    line-height: 10px;                   /* tekstbox bijgesneden, zoals .eyebrow */
    row-gap: 8px;                        /* lange paden breken zonder overlap */
}

.breadcrumb-ct a {
    color: rgba(255, 255, 255, 0.5);
}

.breadcrumb-ct a:hover {
    color: #FFFFFF;
}

/* Fotogalerij: middelste foto 1150x640, buren lopen half in beeld */
.gallery {
    --slide-w: min(1150px, calc(100vw - 290px));
    margin-top: 80px;
}

.gallery-rail {
    gap: 24px;
    padding-inline: calc(50% - var(--slide-w) / 2);
}

.gallery-rail > .gallery-img {
    width: var(--slide-w);
    height: auto;
    aspect-ratio: 1150 / 640;
    scroll-snap-align: center;
}

.gallery-btn {
    transform: translate(-50%, -50%);
}

.gallery-btn-prev { left: calc(50% - var(--slide-w) / 2); }
.gallery-btn-next { left: calc(50% + var(--slide-w) / 2); }

/* Kernwaarden */
.values-intro {
    max-width: 790px;
}

.ico-40 { width: 40px; height: 40px; }

.ico-welzijn     { --ico: url("../assets/icons/over-ons/welzijn.png"); }
.ico-prijs       { --ico: url("../assets/icons/over-ons/prijs.png"); }
.ico-verantwoord { --ico: url("../assets/icons/over-ons/verantwoord.png"); }
.ico-advies      { --ico: url("../assets/icons/over-ons/advies.png"); }
.ico-veiligheid  { --ico: url("../assets/icons/over-ons/veiligheid.png"); }
.ico-financieel  { --ico: url("../assets/icons/over-ons/financieel.png"); }

/* Partners: logovlakken 320x140 */
.partners-intro {
    max-width: 560px;
}

.partners {
    gap: 48px;
}

.partner {
    width: 320px;
    height: 140px;
}

/* CTA-kaart: wit vlak, 40px binnenruimte */
.cta-card {
    padding: 40px;
}

.cta-card .eyebrow { margin-bottom: 24px; }
.cta-title         { margin-bottom: 16px; }
.cta-text          { margin-bottom: 32px; }

/* Lichte knop (Figma "Button" secondary op wit vlak) */
.btn-ct-light {
    --bs-btn-color: var(--color-text);
    --bs-btn-bg: var(--color-bg-1);
    --bs-btn-hover-color: #FFFFFF;
    --bs-btn-hover-bg: var(--color-primary);
    --bs-btn-active-color: #FFFFFF;
    --bs-btn-active-bg: var(--color-primary-dark);
}

@media (min-width: 992px) {
    /* Foto volgt de hoogte van de kaart, niet andersom */
    .cta-split > .col-lg-6:last-child {
        position: relative;
    }

    .cta-img {
        position: absolute;
        top: 0;
        left: calc(var(--bs-gutter-x) * 0.5);
        width: calc(100% - var(--bs-gutter-x)) !important;
    }
}

/* ==========================================================================
   18. Blog
   Filter = Bootstrap .nav-pills, paginering = Bootstrap .pagination,
   label = Bootstrap .badge. Hier alleen de Figma-maten.
   ========================================================================== */
.blog-hero-lead {
    max-width: 550px;                    /* breekt na "helpen" zoals in Figma */
}

.blog-section {
    padding: 80px 0;
}

/* Filter (Figma: witte pil met knoppen van 36px) */
.blog-filter-list {
    --bs-nav-link-padding-x: 14px;
    --bs-nav-link-padding-y: 10px;
    --bs-nav-link-font-size: 12px;
    --bs-nav-link-font-weight: 600;
    --bs-nav-link-color: var(--color-text-muted);
    --bs-nav-link-hover-color: var(--color-text);
    --bs-nav-pills-border-radius: var(--bs-border-radius-pill);
    --bs-nav-pills-link-active-color: #FFFFFF;
    --bs-nav-pills-link-active-bg: var(--color-primary);
    background-color: #FFFFFF;
}

.blog-filter-list .nav-link {
    min-width: 68px;
    line-height: 1.36;
    white-space: nowrap;
}

/* Blogkaart (Figma "List - Blog #1") */
.blog-card-img {
    height: 296px;
}

.blog-card-body {
    padding: 12px;
}

.blog-badge {
    --bs-badge-padding-x: 12px;
    --bs-badge-padding-y: 6px;
    --bs-badge-font-size: 14px;
    --bs-badge-font-weight: 600;
    line-height: 1.46;
}

.blog-date {
    color: var(--gs-500);
}

.blog-card .h6 a {
    color: inherit;
}

.blog-card:hover .h6 a,
.blog-card:hover .blog-more {
    color: var(--color-primary);
}

.blog-card-text {
    display: -webkit-box;
    height: 60px;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

.blog-more {
    line-height: 24px;
    transition: color 0.2s ease;
}

/* Paginering (Figma "Pagination") */
.pagination-ct {
    --bs-pagination-padding-x: 4px;
    --bs-pagination-padding-y: 4px;
    --bs-pagination-font-size: 14px;
    --bs-pagination-color: var(--color-text-muted);
    --bs-pagination-bg: transparent;
    --bs-pagination-border-width: 0;
    --bs-pagination-hover-color: var(--color-text);
    --bs-pagination-hover-bg: #FFFFFF;
    --bs-pagination-focus-bg: #FFFFFF;
    --bs-pagination-focus-color: var(--color-text);
    --bs-pagination-active-color: var(--color-text);
    --bs-pagination-active-bg: transparent;
    --bs-pagination-disabled-color: var(--color-text-muted);
    --bs-pagination-disabled-bg: transparent;
    --bs-pagination-border-radius: var(--bs-border-radius-pill);
}

.pagination-ct .page-link {
    min-width: 36px;
    height: 36px;
    margin-left: 0 !important;
    line-height: 28px;
    text-align: center;
    border-radius: var(--bs-border-radius-pill) !important;
}

.pagination-ct .page-arrow {
    padding: 8px;
    color: var(--color-text);
    background-color: #FFFFFF;
}

/* ==========================================================================
   19. Blogartikel
   Inhoudsopgave = Bootstrap collapse + scrollspy. Hier alleen Figma-maten.
   ========================================================================== */
.article-page {
    padding: 80px 0;
}

/* Zijkolom: 364px breed, blijft in beeld tijdens scrollen */
@media (min-width: 992px) {
    .article-aside {
        width: calc(364px + var(--bs-gutter-x));
    }
}

.article-toc {
    top: 24px;
}

.article-toc-toggle {
    --bs-btn-font-size: 16px;
    --bs-btn-line-height: 1.5;
    --bs-btn-border-width: 0;
    --bs-btn-hover-bg: var(--color-accent);
    --bs-btn-hover-color: #FFFFFF;
    --bs-btn-active-bg: var(--color-accent);
    --bs-btn-active-color: #FFFFFF;
}

.article-toc-toggle .ico {
    transition: transform 0.2s ease;
}

.article-toc-toggle.collapsed .ico {
    transform: rotate(180deg);
}

.article-toc-list {
    min-height: 200px;
    padding: 16px 16px 16px 40px;
    color: var(--color-text-muted);
}

.article-toc-list li + li {
    margin-top: 8px;
}

.article-toc-list a {
    color: var(--color-text-muted);
}

.article-toc-list a:hover,
.article-toc-list a.active {
    color: var(--color-text);
}

/* Artikel */
.article-img {
    height: 440px;
}

.article-body {
    gap: 40px;
    padding: 40px;
}

.article-title,
.article-h2 {
    color: #1A2C33;                      /* Figma "Title-Color" */
}

.article-section {
    scroll-margin-top: 24px;
}

.article-section-img {
    height: 344px;
}

/* Datum- en categoriebalk */
.article-meta {
    padding: 12px 16px;
    line-height: 10px;                   /* tekstbox bijgesneden zoals in Figma */
    border-radius: 4px;
}

/* Delen */
.article-share {
    gap: 40px;
}

.share-btn {
    font-size: 14px;
    line-height: 1.46;
    border-radius: 4px;
    transition: background-color 0.2s ease;
}

.share-btn:hover {
    color: #FFFFFF;
    background-color: var(--color-primary-dark) !important;
}

.share-btn-label {
    padding: 8px 12px;
    background-color: rgba(250, 250, 250, 0.15);
}

.ico-caret-up  { --ico: url("../assets/icons/caret-up.svg"); }
.ico-envelope-simple { --ico: url("../assets/icons/envelope-simple.svg"); }
.ico-envelope  { --ico: url("../assets/icons/envelope.svg"); }
.ico-facebook  { --ico: url("../assets/icons/facebook.svg"); }
.ico-whatsapp  { --ico: url("../assets/icons/whatsapp.svg"); }

/* ==========================================================================
   20. Contact
   Formulier = Bootstrap .form-control / .form-check in een .row g-4.
   ========================================================================== */
.contact-hero-lead {
    max-width: 545px;                    /* breekt na "paardrijvakantie" zoals in Figma */
}

.contact-h2 {
    letter-spacing: -0.03em;
}

/* Contactgegevens */
.contact-info {
    padding: 112px 0 80px;
}

.contact-info-inner {
    gap: 40px;
}

.contact-info-intro {
    max-width: 600px;
}

.contact-social-link,
.contact-card-icon {
    padding: 12px;
    color: var(--color-text-muted);
    border: 1px solid var(--color-border);
}

.contact-social-link:hover {
    color: #FFFFFF;
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}

.contact-cards {
    --bs-gutter-x: 24px;
    --bs-gutter-y: 8px;
}

.contact-card {
    color: var(--color-text);
}

a.contact-card:hover .contact-card-value {
    color: var(--color-primary);
}

.contact-card-value {
    line-height: 1.44;
    transition: color 0.2s ease;
}

.ico-youtube      { --ico: url("../assets/icons/youtube-white.svg"); }
.ico-instagram    { --ico: url("../assets/icons/instagram-white.svg"); }
.ico-facebook-fill { --ico: url("../assets/icons/facebook-white.svg"); }
.ico-phone        { --ico: url("../assets/icons/phone-call.svg"); }
.ico-clock        { --ico: url("../assets/icons/clock.svg"); }

/* Formulierblok: paneel #EBE5DD, 56px binnenruimte, kolom van 400px */
.contact-form-section {
    padding: 24px 0 112px;
}

.contact-panel {
    gap: 48px 80px;
    padding: 56px;
    border-radius: var(--bs-border-radius-xxl);
}

.contact-panel-aside {
    gap: 48px;
}

.contact-panel-img {
    flex: 1 1 0 !important;              /* vult de rest van de kolom, groeit niet mee met de foto */
    height: 0;
    min-height: 240px;
}

.contact-form .form-label {
    margin-bottom: 8px;
    font-weight: 600;
    line-height: 1.5;
}

.contact-form .form-control {
    padding: 12px 16px;
    border-width: 0;
    border-radius: var(--bs-border-radius);
}

.contact-form textarea.form-control {
    height: 144px;
    resize: vertical;
}

.contact-form .form-control::placeholder {
    color: var(--color-text-muted);
}

.contact-form .form-control:focus,
.contact-form .form-check-input:focus {
    box-shadow: 0 0 0 2px var(--color-primary);
}

.contact-form .form-check {
    display: flex;
    gap: 8px;
    padding-left: 0;
}

.contact-form .form-check-input {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    margin: 2px 0 0;
    background-color: transparent;
    border: 1.5px solid var(--color-text);
    border-radius: 3px;
}

/* Aangevinkt: Figma-icoon CheckSquare */
.contact-form .form-check-input:checked {
    background: url("../assets/icons/check-square.svg") center / 24px no-repeat;
    border-color: transparent;
}

.contact-form .form-check-label a {
    color: inherit;
}

@media (min-width: 992px) {
    .contact-panel-aside {
        width: 400px;
    }
}

/* ==========================================================================
   21. Boekingsproces (en andere Reisinformatie-pagina's)
   Submenu = Bootstrap .nav-pills. Tijdlijn en stappen: alleen Figma-maten.
   ========================================================================== */
.booking-hero-lead {
    max-width: 590px;                    /* breekt na "begeleiden" zoals in Figma */
}

/* Submenu Reisinformatie: witte pil die 22px over de header valt */
.page-hero-wrap.has-subnav {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-bottom: 24px;
}

.page-hero-wrap.has-subnav .page-hero {
    width: 100%;
}

.info-subnav {
    margin-top: -22px;
}

.info-subnav-list {
    --bs-nav-link-padding-x: 16px;
    --bs-nav-link-padding-y: 12px;
    --bs-nav-link-font-size: 12px;
    --bs-nav-link-font-weight: 600;
    --bs-nav-link-color: var(--color-text-muted);
    --bs-nav-link-hover-color: var(--color-text);
    --bs-nav-pills-border-radius: var(--bs-border-radius-pill);
    --bs-nav-pills-link-active-color: #FFFFFF;
    --bs-nav-pills-link-active-bg: var(--color-primary);
    gap: 4px;
    padding: 4px;
    overflow-x: auto;
    scrollbar-width: none;
    background-color: #FFFFFF;
    border-radius: var(--bs-border-radius-pill);
    box-shadow: 0 7px 7.5px rgba(127, 76, 5, 0.05), 0 27px 13.5px rgba(127, 76, 5, 0.04), 0 61px 18.5px rgba(127, 76, 5, 0.03);
    backdrop-filter: blur(12px);
}

.info-subnav-list::-webkit-scrollbar {
    display: none;
}

.info-subnav-list .nav-link {
    line-height: 1.36;
    white-space: nowrap;
}

/* Intro + tijdlijn */
.booking-intro {
    padding: 80px 0 112px;
}

.timeline-marker {
    width: 28px;
}

.timeline-dot {
    padding: 5px;
    color: var(--color-text-muted);
    border: 1px solid var(--color-text-muted);
}

.timeline-line {
    width: 1px;
    background-color: var(--color-text-muted);
}

.timeline-step:last-child .timeline-line {
    display: none;
}

.timeline-body {
    padding-bottom: 32px;
}

.timeline-step:last-child .timeline-body {
    padding-bottom: 0;
}

.timeline-title {
    font-size: 18px;
    line-height: 1.44;
    color: var(--color-text-muted);
}

/* Actieve stap: groene stip met pijl omlaag, groene lijn */
.timeline-step.is-active .timeline-dot {
    color: #FFFFFF;
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}

.timeline-step.is-active .timeline-dot .ico {
    transform: rotate(90deg);
}

.timeline-step.is-active .timeline-line {
    background-color: var(--color-primary);
}

.timeline-step.is-active .timeline-title > span:first-child {
    color: #000000;
}

/* De stappen uitgelegd */
.booking-details {
    padding: 112px 0;
}

.booking-row {
    padding: 48px 0;
}

.booking-row:first-child {
    padding-top: 0;
}

.booking-row + .booking-row {
    border-top: 1px solid var(--color-border);
}

.booking-row:last-child {
    border-bottom: 1px solid var(--color-border);
}

.booking-row-head {
    width: 340px;
}

.booking-row-num {
    padding: 10px 4px;
    line-height: 10px;
}

.booking-row-img {
    width: 300px;
    height: 200px;
}

.booking-cta-img {
    object-position: top;
}

@media (min-width: 992px) {
    /* Foto even hoog als de tekstkolom */
    .booking-intro-media {
        position: relative;
    }

    .booking-intro-img {
        position: absolute;
        inset: 0 calc(var(--bs-gutter-x) * 0.5);
        width: calc(100% - var(--bs-gutter-x)) !important;
        height: 100%;
    }
}

/* ==========================================================================
   22. Veelgestelde vragen
   Bootstrap .accordion; elke vraag een losse witte kaart (Figma "FAQ").
   ========================================================================== */
.faq-section {
    padding: 80px 0 112px;
}

.accordion-faq {
    --bs-accordion-bg: #FFFFFF;
    --bs-accordion-border-width: 0;
    --bs-accordion-border-radius: var(--bs-border-radius);
    --bs-accordion-inner-border-radius: var(--bs-border-radius);
    --bs-accordion-btn-padding-x: 20px;
    --bs-accordion-btn-padding-y: 16px;
    --bs-accordion-btn-color: var(--color-text);
    --bs-accordion-btn-focus-box-shadow: inset 0 0 0 2px var(--color-primary);
    --bs-accordion-active-color: var(--color-text);
    --bs-accordion-active-bg: #FFFFFF;
    --bs-accordion-body-padding-x: 20px;
    --bs-accordion-body-padding-y: 16px;
}

.accordion-faq .accordion-item {
    border-radius: var(--bs-border-radius);
    overflow: hidden;
}

.accordion-faq .accordion-header {
    font-family: var(--font-primary);
    letter-spacing: 0;
}

.accordion-faq .accordion-button {
    gap: 32px;
    padding-right: 8px;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.44;
    box-shadow: none;
}

/* Plus/min-icoon uit Figma, 20px met 8px ruimte eromheen */
.accordion-faq .accordion-button::after {
    width: 36px;
    height: 36px;
    margin-left: auto;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23363636' stroke-width='1.5' stroke-linecap='round'%3E%3Cpath d='M3.125 10h13.75M10 3.125v13.75'/%3E%3C/svg%3E");
    background-size: 20px;
    background-position: center;
    transform: none;
}

.accordion-faq .accordion-button:not(.collapsed)::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23363636' stroke-width='1.5' stroke-linecap='round'%3E%3Cpath d='M3.125 10h13.75'/%3E%3C/svg%3E");
    transform: none;
}

.accordion-faq .accordion-body {
    padding-top: 0;                      /* 16px knop + 16px = 32px onder de vraag (Figma) */
    margin-top: 16px;
}

/* ==========================================================================
   23. Last minute
   Kalender en sorteren via main.js; kaart = Figma "List - Trip #3".
   ========================================================================== */
.lm-hero-lead {
    max-width: 960px;
}

.lm-section {
    padding: 96px 0 80px;                /* 16px onder de header + 80px (Figma) */
}

@media (min-width: 992px) {
    .lm-aside {
        width: calc(392px + var(--bs-gutter-x));
    }
}

/* Kalender */
.lm-calendar {
    padding: 20px;
}

.lm-cal-head {
    gap: 40px;
}

.lm-cal-title {
    font-size: 24px;
    color: #1A1A1A;
}

.lm-cal-year {
    color: rgba(26, 26, 26, 0.5);
}

.lm-cal-nav {
    --bs-btn-padding-x: 8px;
    --bs-btn-padding-y: 8px;
    --bs-btn-border-width: 0;
    --bs-btn-border-radius: var(--bs-border-radius-sm);
    --bs-btn-bg: #F4F4F5;
    --bs-btn-color: #1A1A1A;
    --bs-btn-hover-bg: var(--pc-200);
    --bs-btn-hover-color: #1A1A1A;
    --bs-btn-active-bg: var(--pc-200);
}

.lm-cal-grid {
    grid-template-columns: repeat(7, 40px);
}

.lm-cal-weekday,
.lm-cal-day {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    font-weight: 600;
}

.lm-cal-weekday {
    font-size: 14px;
    color: rgba(26, 26, 26, 0.5);
}

.lm-cal-day {
    padding: 0;
    font-size: 16px;
    color: #1A1A1A;
    background: none;
    border: 0;
    border-radius: 50%;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.lm-cal-day.is-muted {
    color: rgba(26, 26, 26, 0.5);
}

.lm-cal-day.has-trip {
    cursor: pointer;
    background-color: var(--pc-200);
}

.lm-cal-day.has-trip:hover,
.lm-cal-day.is-selected {
    color: #FFFFFF;
    background-color: var(--color-primary);
}

.lm-cal-day:disabled {
    cursor: default;
}

/* Resultaten */
.lm-results {
    gap: 24px;
}

.lm-toolbar {
    font-size: 12px;
    line-height: 1.36;
}

.lm-sort {
    width: auto;
    padding: 2px 22px 2px 2px;
    font-size: 12px;
    line-height: 1.36;
    color: var(--color-text);
    background-color: transparent;
    background-image: url("../assets/icons/caret-down.svg");
    background-position: right 2px center;
    background-size: 12px;
    border: 0;
    box-shadow: none !important;
    cursor: pointer;
    field-sizing: content;               /* zo breed als de gekozen optie */
}

/* Reiskaart */
.lm-card-media img {
    height: auto;
    aspect-ratio: 400 / 266;
}

.lm-card-go {
    top: 8px;
    right: 8px;
    width: 32px;
    height: 32px;
}

.lm-card-body {
    padding: 12px;
}

.lm-card-meta {
    font-size: 14px;
    line-height: 1.46;
    color: var(--color-text-body);
}

.lm-card-meta .ico {
    color: var(--color-text);
}

.lm-dot {
    width: 4px;
    height: 4px;
    background-color: var(--gs-300);
}

.lm-badge {
    height: 28px;
    padding: 2px 8px 4px;
    font-size: 12px;
    line-height: 1.36;
    color: var(--color-primary-dark);
    background-color: #E7F4D3;
}

.lm-card-title a {
    color: inherit;
}

.lm-card:hover .lm-card-title a {
    color: var(--color-primary);
}

.lm-card-text {
    display: -webkit-box;
    height: 40px;
    color: var(--gs-600);
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.lm-from {
    font-size: 12px;
}

.lm-muted {
    font-size: 14px;
    line-height: 1.46;
}

.ico-map-pin { --ico: url("../assets/icons/map-pin.svg"); }

/* ==========================================================================
   24. Alle reizen
   Zoekbalk = component 8. Filters: Bootstrap collapse + offcanvas-lg (onder
   992px een schuifpaneel). Kaart = Figma "List - Trip #2".
   ========================================================================== */
.ar-hero-lead {
    max-width: 960px;
}

/* Zoekbalk 1024px breed, half over de onderkant van de header */
.ar-search-wrap {
    margin-top: -37px;
}

.ar-search {
    max-width: 1024px;
    margin: 0 auto;
    padding: 0;
}

.ar-section {
    padding-bottom: 112px;
}

.ar-layout {
    --bs-gutter-y: 0;                    /* één rij: geen extra ruimte boven de kolommen */
    margin-top: 91px;                    /* 680px - onderkant zoekbalk (Figma) */
}

@media (min-width: 992px) {
    .ar-search .trip-search-field {
        flex: 1 1 0 !important;          /* drie even brede velden (Figma) */
    }
}

@media (min-width: 992px) {
    .ar-aside {
        width: calc(264px + var(--bs-gutter-x));
    }
}

/* Filters */

.ar-divider {
    margin: 1.5px 0;                     /* lijn van 1px in een blok van 4px */
    border-color: var(--color-border);
}

.ar-filter-title {
    font-family: var(--font-primary);
    line-height: 1.5;
    letter-spacing: 0;
}

.ar-filter-toggle::after {
    content: "";
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23363636' stroke-linecap='round'%3E%3Cpath d='M2.5 8h11'/%3E%3C/svg%3E") center / 16px no-repeat;
}

.ar-filter-toggle.collapsed::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23363636' stroke-linecap='round'%3E%3Cpath d='M2.5 8h11M8 2.5v11'/%3E%3C/svg%3E");
}

.ar-check {
    font-size: 14px;
    line-height: 20px;                   /* rij van 28px (Figma) */
    cursor: pointer;
}

/* Bootstrap-checkbox met de Figma-iconen (Square / CheckSquare) */
.ar-check-input[type="checkbox"] {
    background-color: transparent;
    background-image: url("../assets/icons/checkbox.svg");     /* direct: een url() in een --bs-variabele wijst naar de CDN */
    width: 20px;
    height: 20px;
    background-size: 20px;
    border: 0;
    border-radius: 0;
    cursor: pointer;
}

.ar-check-input[type="checkbox"]:checked {
    background-image: url("../assets/icons/checkbox-checked.svg");
    background-color: transparent;
}

/* Lijsten met scrollbalk (Figma: 4px, groen op 10% grijs) */
.ar-scroll {
    max-height: 188px;
    overscroll-behavior: contain;
}

.ar-scroll::-webkit-scrollbar {
    width: 4px;
}

.ar-scroll::-webkit-scrollbar-track {
    background-color: rgba(54, 54, 54, 0.1);
    border-radius: 8px;
}

.ar-scroll::-webkit-scrollbar-thumb {
    background-color: var(--color-primary);
    border-radius: 8px;
}

@supports not selector(::-webkit-scrollbar) {
    .ar-scroll {
        scrollbar-width: thin;
        scrollbar-color: var(--color-primary) rgba(54, 54, 54, 0.1);
    }
}

/* Budgetschuif: twee range-inputs over elkaar, balk via --range-a/-b (main.js) */

.ar-range-track {
    --range-a: 0;
    --range-b: 1;
    height: 16px;
}

.ar-range-track::before {
    content: "";
    position: absolute;
    top: 6px;
    left: 0;
    right: 0;
    height: 4px;
    border-radius: 4px;
    background: linear-gradient(to right,
        rgba(54, 54, 54, 0.1) calc(7px + (100% - 14px) * var(--range-a)),
        var(--color-primary) calc(7px + (100% - 14px) * var(--range-a)),
        var(--color-primary) calc(7px + (100% - 14px) * var(--range-b)),
        rgba(54, 54, 54, 0.1) calc(7px + (100% - 14px) * var(--range-b)));
}

.ar-range-input {
    width: 100%;
    height: 16px;
    background: none;
    pointer-events: none;
    -webkit-appearance: none;
    appearance: none;
}

.ar-range-input::-webkit-slider-thumb {
    width: 14px;
    height: 14px;
    pointer-events: auto;
    cursor: pointer;
    background-color: var(--color-primary);
    border: 1px solid #FFFFFF;
    border-radius: 50%;
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.08);
    -webkit-appearance: none;
    appearance: none;
}

.ar-range-input::-moz-range-thumb {
    width: 12px;
    height: 12px;
    pointer-events: auto;
    cursor: pointer;
    background-color: var(--color-primary);
    border: 1px solid #FFFFFF;
    border-radius: 50%;
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.08);
}

.ar-range-input::-moz-range-track {
    background: none;
}

.ar-range-input:focus-visible {
    outline: 0;
}

.ar-range-input:focus-visible::-webkit-slider-thumb {
    outline: 2px solid var(--color-accent);
    outline-offset: 1px;
}

.ar-range-value {
    padding: 4px 6px;
    font-size: 12px;
    line-height: 1.36;
    border-radius: 4px;
}

/* Resultaten */

.ar-toolbar {
    font-size: 12px;
    line-height: 1.36;
}

.ar-filter-btn {
    --bs-btn-bg: var(--color-primary);
    --bs-btn-hover-bg: var(--color-primary-dark);
    --bs-btn-active-bg: var(--color-primary-dark);
    width: 36px;
    height: 36px;
}

.ar-list {
    gap: 12px;
}

/* Reiskaart: foto 1/4, tekst 3/4 */
.ar-card-main {
    grid-template-columns: minmax(0, 1fr) minmax(0, 3fr);
    gap: 12px;
}

.ar-card-media {
    aspect-ratio: 1;
}

.ar-card-body {
    padding: 16px;
}

.ar-card-title a {
    color: inherit;
}

.ar-card:hover .ar-card-title a {
    color: var(--color-primary);
}

.ar-card-text {
    color: var(--color-text-body);
}

.ar-card-tags {
    padding-top: 12px;
}

.ar-tag {
    padding: 6.5px 10px 7.5px;
    font-size: 12px;
    line-height: 1.36;
}

.ar-rating {
    gap: 1px;
}

.ar-price {
    font-size: 20px;
    font-weight: 600;
    line-height: 1.44;
}

.ar-price-from {
    font-size: 14px;
    font-weight: 400;
    color: var(--color-text-body);
}

.ar-card:hover .ar-card-cta,
.ar-card:hover .ar-card-go {
    --bs-btn-bg: var(--color-primary);
    --bs-btn-border-color: var(--color-primary);
}

/* Kenmerken: alleen zichtbaar bij hover (of toetsenbordfocus) op de kaart.
   Uitklappen via grid-rows 0fr -> 1fr; de -12px heft de gap van de kaart op
   zolang het blok dicht is. Op touchschermen niet tonen (Figma mobiel). */
.ar-facts-wrap {
    grid-template-rows: 0fr;
    margin-top: -12px;
    opacity: 0;
    transition: grid-template-rows 0.35s ease, margin-top 0.35s ease, opacity 0.25s ease;
}

.ar-facts-inner {
    min-height: 0;
}

@media (hover: hover) {
    .ar-card:hover .ar-facts-wrap,
    .ar-card:focus-within .ar-facts-wrap {
        grid-template-rows: 1fr;
        margin-top: 0;
        opacity: 1;
    }
}

@media (hover: none) {
    .ar-facts-wrap {
        display: none !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ar-facts-wrap {
        transition: none;
    }
}

/* Kenmerken: 2 rijen van 3, 1px witte lijnen */
.ar-facts {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr);
    gap: 1px;
}

.ar-fact {
    font-size: 14px;
    line-height: 1.46;
}

.ico-horse      { --ico: url("../assets/icons/horse.svg"); }
.ico-bell-level { --ico: url("../assets/icons/bell-level.svg"); }
.ico-riding     { --ico: url("../assets/icons/riding.svg"); }
.ico-feather    { --ico: url("../assets/icons/feather.svg"); }
.ico-moon       { --ico: url("../assets/icons/moon.svg"); }

/* ==========================================================================
   25. Reis-detail (Figma "Single Reizen")
   Submenu = .info-subnav (21) + Bootstrap scrollspy, programma = collapse,
   sliders = .rail (main.js). Indeling via CSS grid: zijkolom loopt naast
   de hele inhoud mee en blijft plakken.
   ========================================================================== */

/* Header: foto 1408x704, submenu half over de foto, titel */
.rd-top {
    background-color: var(--color-bg-1);
}

.rd-hero-img {
    max-height: 704px;
    aspect-ratio: 2;
    object-position: 50% 78%;
    border-radius: var(--bs-border-radius-xxl);
}

.rd-subnav .info-subnav-list {
    --bs-nav-link-padding-x: 14px;
    --bs-nav-link-padding-y: 10px;
}

.rd-subnav .nav-link {
    min-width: 68px;
    text-align: center;
}

.rd-head {
    margin-top: 40px;
}

.rd-content {
    padding: 40px 0 80px;
}

.rd-content section,
.rd-more-rail,
.rd-practical {
    scroll-margin-top: 24px;
}

/* Inhoud links (1.9fr), zijkolom rechts (1fr) */
.rd-layout {
    grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr);
    grid-template-areas: "intro aside" "main aside";
    column-gap: 32px;
    row-gap: 40px;
}

.rd-intro { grid-area: intro; }
.rd-main  { grid-area: main; gap: 40px; }

.rd-aside {
    grid-area: aside;
    position: sticky;
    top: 24px;
}

.rd-text > * + * {
    margin-top: 24px;
}

.rd-gallery-img {
    aspect-ratio: 265 / 263;
}

.rd-photo {
    aspect-ratio: 2;
    border-radius: 20px;
}

/* Programma: dag 1 open, lijn tussen de iconen */
.rd-day {
    position: relative;
    padding-bottom: 32px;
}

.rd-day:last-child {
    padding-bottom: 0;
}

.rd-day:not(:last-child)::before {
    content: "";
    position: absolute;
    top: 28px;
    bottom: 0;
    left: 13.5px;
    width: 1px;
    background-color: var(--color-text-muted);
}

.rd-day:has(.rd-day-toggle:not(.collapsed))::before {
    background-color: var(--color-primary);
}

.rd-day-title {
    font-family: var(--font-primary);
    font-size: 18px;
    line-height: 1.44;
    letter-spacing: 0;
}

.rd-day-toggle {
    color: #000000;
}

.rd-day-toggle.collapsed {
    color: var(--color-text-muted);
}

.rd-day-toggle:hover {
    color: var(--color-primary);
}

.rd-day-icon {
    margin-bottom: -2px;                 /* rij volgt de titel (26px), zoals in Figma */
    padding: 5px;
    color: #FFFFFF;
    background-color: var(--color-primary);
    border: 1px solid var(--color-primary);
}

.rd-day-icon .ico {
    transform: rotate(90deg);
    transition: transform 0.2s ease;
}

.rd-day-toggle.collapsed .rd-day-icon {
    color: var(--color-text-muted);
    background-color: transparent;
    border-color: var(--color-text-muted);
}

.rd-day-toggle.collapsed .rd-day-icon .ico {
    transform: none;
}

.rd-day-text {
    padding: 8px 0 0 52px;
}

/* Kaart "Over de reis" en "Boek deze reis" */
.rd-card {
    padding: 24px;
    box-shadow: 0 14px 31px rgba(127, 76, 5, 0.02), 0 56px 56px rgba(127, 76, 5, 0.02), 0 127px 76px rgba(127, 76, 5, 0.01);
}

.rd-rating {
    gap: 1px;
}

.rd-tag {
    padding: 8px 12px;
    font-size: 12px;
    line-height: 1.36;
}

.rd-facts {
    border: 1px solid var(--color-border);
}

.rd-fact {
    min-height: 64px;
    padding: 12px 16px;
    font-size: 14px;
    line-height: 1.46;
}

.rd-fact + .rd-fact {
    border-top: 1px solid var(--color-border);
}

.rd-fact-icon {
    background-color: #FBEFD9;
}

.rd-small {
    font-size: 14px;
    line-height: 1.46;
}

.rd-small strong {
    font-weight: 600;
}

/* Prijs: oude prijs doorgestreept, nieuwe prijs groot */

.rd-price-from {
    line-height: 1.36;
}

.rd-price-old,
.rd-price-new {
    font-family: var(--font-heading);
    font-weight: 600;
    line-height: 1.26;
    letter-spacing: -0.01em;
}

.rd-price-old {
    font-size: 18px;
}

.rd-price-new {
    font-size: 22px;
}

.rd-fav {
    --bs-btn-padding-x: 0;
    --bs-btn-padding-y: 0;
    --bs-btn-border-width: 0;
    --bs-btn-border-radius: 50%;
    --bs-btn-bg: var(--color-bg-1);
    --bs-btn-hover-bg: var(--color-bg-panel);
    --bs-btn-active-bg: var(--color-bg-panel);
    width: 44px;
    height: 44px;
    color: rgba(54, 54, 54, 0.15);
}

.rd-fav:hover,
.rd-fav[aria-pressed="true"] {
    color: var(--color-accent);
}

.rd-card-book .rd-fav {
    --bs-btn-bg: #EBE7E1;
}

.rd-deal {
    padding: 8px 24px;
    font-size: 14px;
    line-height: 1.36;
    background-color: #E7F4D3;
}

.rd-card .rd-book .rd-deal {
    margin: 3px -24px -24px;             /* band onderaan de kaart, 19px onder de knoppen */
}

.rd-card-book > .rd-deal {
    margin: -7px -24px -24px;
    padding: 6px 24px;
}

/* Meer afbeeldingen + praktische informatie + ervaring */
.rd-more {
    padding: 80px 0;
}

.rd-more .rail {
    margin-top: 24px;
}

.rd-more-img {
    width: 391px;
    aspect-ratio: 1;
}

@media (min-width: 992px) {
    .rd-review-col {
        width: calc(416px + var(--bs-gutter-x));
    }
}

.rd-practical-col {
    gap: 28px;
}

.rd-review-body {
    padding: 12px;
}

.rd-review-title {
    padding-left: 12px;
    font-family: var(--font-primary);
    line-height: 1.5;
    letter-spacing: 0;
    border-left: 3px solid var(--color-accent);
}

.rd-review-quote {
    line-height: 1.44;
}

.rd-review-img {
    height: 0;                           /* vult de rest van de kaart (flex-fill) */
    min-height: 240px;
}

/* Vergelijkbare reizen: home-reiskaart, foto boven de tekst */
.rd-similar {
    padding: 80px 0;
}

.rd-similar-rail {
    margin-top: 64px;
}

.rd-similar-rail .trip-card {
    width: 416px;
}

.trip-card.trip-card-stacked {
    grid-template-columns: minmax(0, 1fr);  /* ook onder 1200px (responsive.css) */
    gap: 0;
}

.trip-card.trip-card-stacked .trip-card-media {
    height: auto;
    aspect-ratio: 400 / 266;
}

.trip-card-stacked .trip-card-body {
    gap: 12px;
    padding: 16px 12px 8px;
}

.trip-card-stacked .trip-card-desc {
    color: var(--gs-600);
    -webkit-line-clamp: 2;
}

.trip-card-stacked .trip-card-meta {
    padding-top: 12px;
}

.trip-card-stacked .trip-card-days {
    font-size: 15px;
    color: var(--gs-600);
}

.rd-level {
    padding: 6px 12px;
    font-size: 12px;
    line-height: 1.36;
    color: #476B20;
    background-color: var(--pc-50);
}

/* Hulp nodig bij het boeken? Foto als achtergrond, kaart links, badge rechts */
.rd-help {
    padding: 96px 0;
}

.rd-cta {
    min-height: 410px;
}

.rd-cta-img {
    position: absolute;
    height: 100%;
    object-position: 50% 15.5%;
    border-radius: var(--bs-border-radius-xxl);
}

.rd-cta-card {
    width: 416px;
    padding: 40px;
    border-radius: var(--bs-border-radius-xl);
}

.rd-cta-card .eyebrow {
    margin-bottom: 16px;
}

.rd-cta-badge {
    position: relative;
}

.rd-cta-dot {
    width: 24px;
    height: 24px;
    background: radial-gradient(circle, var(--color-primary) 6.5px, #E7F4D3 7px);
}

.ico-heart            { --ico: url("../assets/icons/heart.svg"); }
.ico-caret-right-thin { --ico: url("../assets/icons/caret-right-thin.svg"); }

/* ==========================================================================
   26. Keuzelijst in huisstijl (Figma Design System "Select" + "Options")
   main.js zet elk zoek- en sorteer-<select> om naar een Bootstrap dropdown;
   het echte <select> blijft verborgen in het formulier.
   ========================================================================== */
.ct-select-sort {
    display: inline-block;
}

.ct-select-toggle {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.ct-select-toggle.trip-search-select[aria-expanded="true"] {
    background-image: url("../assets/icons/caret-up-muted.svg");
}

.ct-select-toggle.lm-sort[aria-expanded="true"] {
    background-image: url("../assets/icons/caret-up-sm.svg");
}

.ct-select-menu {
    --bs-dropdown-min-width: 264px;
    --bs-dropdown-padding-y: 0;
    --bs-dropdown-border-width: 0;
    --bs-dropdown-border-radius: var(--bs-border-radius);
    --bs-dropdown-box-shadow: var(--shadow-4);
    --bs-dropdown-font-size: 16px;
    --bs-dropdown-link-color: var(--color-text);
    --bs-dropdown-link-hover-color: var(--color-text);
    --bs-dropdown-link-hover-bg: var(--pc-50);
    --bs-dropdown-link-active-color: var(--color-primary-dark);
    --bs-dropdown-link-active-bg: var(--pc-50);
    --bs-dropdown-item-padding-x: 16px;
    --bs-dropdown-item-padding-y: 12px;
    --bs-dropdown-header-color: var(--color-text-muted);
    --bs-dropdown-header-padding-x: 16px;
    --bs-dropdown-header-padding-y: 12px;
    --bs-dropdown-zindex: 1030;
    max-height: 296px;                   /* zes opties, daarna scrollen */
    overflow-y: auto;
    overscroll-behavior: contain;
    box-shadow: var(--bs-dropdown-box-shadow);
    scrollbar-width: thin;
    scrollbar-color: var(--gs-300) transparent;
}

.ct-select-menu li + li {
    border-top: 1px solid var(--color-border);
}

.ct-select-option {
    line-height: 1.5;
    white-space: normal;
}

.ct-select-option.active {
    font-weight: 600;
}

.ct-select-menu .dropdown-header {
    margin: 0;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.36;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    background-color: var(--color-bg-1);
}

/* Sorteren: kleinere lijst, rechts uitgelijnd */
.ct-select-sort .ct-select-menu {
    --bs-dropdown-min-width: 200px;
    --bs-dropdown-font-size: 14px;
    --bs-dropdown-item-padding-y: 10px;
}

/* ==========================================================================
   27. Styleguide (interne pagina)
   ========================================================================== */
.sg-narrow {
    max-width: 600px;
}

/* ==========================================================================
   28. Contentpagina's (Reisinformatie, juridisch, reviews)
   Opbouw = bestaande componenten (page hero, article-card, blog-card,
   ar-card, cta-card). Hier alleen opmaak voor lopende tekst uit het CMS.
   ========================================================================== */
.article-list {
    padding-left: 20px;
}

.article-list li::marker {
    color: var(--color-primary);
}

.article-callout {
    color: var(--color-text);
    border-left: 3px solid var(--color-primary);
}

.article-pair-img {
    height: 420px;
}

.figure-caption {
    color: var(--color-text-muted);
}

/* Loyaliteitsprogramma: bedrag in een cirkel */
.loyal-amount {
    width: 96px;
    height: 96px;
    font-size: 28px;
}

/* Lange inhoudsopgave (voorwaarden): blijft binnen het scherm */
@media (min-width: 992px) {
    .article-toc .article-toc-list {
        max-height: calc(100vh - 120px);
        overflow-y: auto;
    }
}