/* ==========================================================================
   Centaur Trails | responsive.css
   Bootstrap regelt kolommen en zichtbaarheid per breakpoint via classes in
   de HTML (col-lg-6, row-cols-xl-2, d-xl-none, flex-lg-row, ...). Hier staan
   alleen Figma-maten die per breakpoint verschillen.
   Figma heeft desktop (1440) en mobiel (440); laptop/tablet zijn afgeleid.
   Breakpoints (Bootstrap): xxl 1400 | xl 1200 | lg 992 | md 768 | sm 576
   ========================================================================== */

/* Laptop (<= 1399px) | afgeleid ------------------------------------------- */
@media (max-width: 1399.98px) {
    .hero-inner {
        padding-left: 120px;
        padding-right: 120px;
    }

    .feature-card {
        width: 500px;
        height: 330px;
    }
}

@media (min-width: 992px) and (max-width: 1399.98px) {
    .featured-stage.rail {
        --card-w: 640px;
        --card-h: 420px;
    }
}

/* Kleine laptop (<= 1199px) | afgeleid ------------------------------------ */
@media (max-width: 1199.98px) {
    .display-ct { font-size: 52px; }
    h1, .h1 { font-size: 40px; }
    h2, .h2 { font-size: 36px; }
    h3, .h3 { font-size: 32px; }

    .hero-inner {
        min-height: 720px;
        padding: 96px 48px;
    }

    .trip-search {
        padding: 0;
    }

    .trust-text,
    .trust-acc {
        padding-left: calc(var(--bs-gutter-x) * 0.5 + 24px);
    }

    /* Reiskaart in 1 kolom (Figma min-breedte 596px): foto vaste breedte */
    .trip-card {
        grid-template-columns: 240px minmax(0, 1fr);
    }
}

/* Tablet (<= 991px) | afgeleid --------------------------------------------- */
@media (max-width: 991.98px) {
    .display-ct { font-size: 44px; }
    h1, .h1 { font-size: 36px; }
    h2, .h2 { font-size: 32px; }
    h3, .h3 { font-size: 28px; }
    h4, .h4 { font-size: 26px; }

    .section-pad { padding-top: 80px; padding-bottom: 80px; }

    .hero-lead {
        font-size: 18px;
    }

    /* Zoekbalk wordt een kaart met velden onder elkaar */
    .trip-search-bar {
        border-radius: 28px;
        filter: none;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06), 0 14px 24px rgba(0, 0, 0, 0.1);
    }

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

    .trip-search-divider {
        width: auto;
        height: 1px;
        margin: 0;
        background-color: var(--gs-200);
    }

    /* Vertrouwen onder elkaar: tekst 12px onder de titel */
    .trust-text {
        margin-top: calc(var(--bs-gutter-y) - 20px);   /* 12px onder de titel */
        padding-top: 0;
    }

    .trust-text,
    .trust-acc {
        padding-left: calc(var(--bs-gutter-x) * 0.5);
        padding-bottom: 0;
    }

    .trust-acc {
        margin-top: var(--bs-gutter-y);
    }

    .trust-media {
        height: 400px;
    }

    /* Uitgelichte reizen: veegbare rij */
    .feature-card {
        width: 360px;
        height: 420px;
        padding: 16px 16px 20px;
        border-radius: var(--bs-border-radius-xl) !important;
    }

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

    .feature-badge {
        min-height: 0;
        padding: 6px 12px;
        color: #FFFFFF;
    }

    .feature-title {
        font-family: var(--font-heading);
        font-size: 22px;
        line-height: 1.26;
        letter-spacing: -0.015em;
    }

    .feature-sub {
        color: #FFFFFF;
    }

    /* Werelddelen: compacte kaart */
    .world-card-media {
        width: 72px;
        height: 72px;
    }

    .world-card .h6 {
        font-size: 18px;
    }

    /* Testimonials en beeld+tekst */
    .reviews-head {
        margin-bottom: 40px;
    }

    .reviews-rail > * {
        width: min(560px, calc(100vw - 64px));
    }

    .media-text-img {
        height: 420px;
    }
}

/* Mobiel (<= 767px) | Figma-frames van 440px ------------------------------- */
@media (max-width: 767.98px) {
    :root {
        --bs-secondary-color: #535353;        /* mobiel gebruikt BG #4 als tekstkleur */
        --color-text-body: #535353;
    }

    /* Mobiele Figma-frames gebruiken geen gebalanceerde regelval */
    h1, h2, h3, h4, h5, h6,
    .h1, .h2, .h3, .h4, .h5, .h6 {
        text-wrap: wrap;
    }

    .display-ct { font-size: 32px; line-height: 1.18; letter-spacing: -0.025em; }
    h1, .h1 { font-size: 32px; line-height: 1.18; letter-spacing: -0.025em; }
    h2, .h2 { font-size: 28px; line-height: 1.24; letter-spacing: -0.02em; }
    h3, .h3 { font-size: 26px; }
    h4, .h4 { font-size: 24px; }
    h5, .h5 { font-size: 22px; }
    h6, .h6 { font-size: 18px; }

    .section-pad { padding-top: 56px; padding-bottom: 56px; }

    /* Eyebrow: streepje 2x12, 8px ruimte, 12px tekst */
    .eyebrow,
    .eyebrow.is-wide {
        --tick-w: 2px;
        --tick-h: 12px;
        --tick-gap: 8px;
        font-size: 12px;
        line-height: 16px;
    }

    .section-heading {
        gap: 12px !important;
    }

    .section-intro,
    .trust-text p,
    .reviews-intro {
        font-size: 15px;
    }

    .btn-ct-block-mobile {
        --bs-btn-padding-y: 14px;
        --bs-btn-line-height: 17px;
        width: 100%;
    }

    /* Top bar: 11px, stip 4px, 6px ruimte */
    .top-bar {
        padding: 10px 8px !important;
    }

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

    .top-bar-list li {
        font-size: 11px;
        line-height: 1.36;
    }

    .top-bar-list li + li::before {
        width: 4px;
        height: 4px;
    }

    /* Hero: 8px van de rand, fotokaart 491px, zoekkaart eronder */
    .hero-inner {
        isolation: isolate;
        min-height: 0;
        padding: 48px 0 0;
        overflow: visible !important;
        border-radius: 0;
        background: none;
    }

    .hero-inner::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        z-index: -1;
        height: 491px;
        border-radius: 0 0 var(--bs-border-radius-xxl) var(--bs-border-radius-xxl);
        background-color: var(--color-bg-1);
        background-image:
            linear-gradient(180deg, #FFFFFF 0%, rgba(255, 255, 255, 0) 100%),
            url("../assets/images/home/hero-mobile.jpg");
        background-position: center, 51.6% 0;
        background-size: cover, auto 116.5%;
        background-repeat: no-repeat;
    }

    .hero-content {
        padding-bottom: 0;
    }

    .hero-text {
        gap: 12px !important;
        min-height: 443px;                   /* 491 - 48 bovenpadding */
        padding: 0 20px;
    }

    .hero-text .overline {
        font-size: 12px;
        line-height: 16px;
    }

    .hero-lead {
        font-size: 15px;
        line-height: 1.5;
        color: var(--color-text) !important;
    }

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

    .trip-search-icon {
        padding: 8px !important;
    }

    .trip-search-icon img {
        width: 20px;
        height: 20px;
    }

    .trip-search-label {
        font-size: 11px;
        letter-spacing: 0.02em;
        color: var(--gs-500);
    }

    .trip-search-select {
        font-size: 15px;
    }

    .trip-search-bar .btn-ct {
        --bs-btn-padding-y: 14px;
        --bs-btn-line-height: 17px;
    }

    /* Vertrouwen */
    .trust-section {
        padding-top: 48px;
        padding-bottom: 64px;
    }

    .trust-media {
        height: 260px;
        border-radius: var(--bs-border-radius-xl) !important;
    }

    .accordion-ct {
        --bs-accordion-border-width: 1px;
        --bs-accordion-btn-padding-y: 18px;
        --bs-accordion-btn-icon-width: 32px;
    }

    .accordion-ct .accordion-item:first-child .accordion-button {
        padding-top: 0;
    }

    .accordion-ct .accordion-button {
        gap: 12px;
        font-size: 17px;
        line-height: 1.28;
        letter-spacing: -0.01em;
    }

    .accordion-ct .accordion-button::after {
        background-size: 16px;
    }

    .accordion-ct .accordion-body {
        padding-bottom: 18px;
        font-size: 14px;
        line-height: 1.46;
    }

    /* Uitgelichte reizen */
    .featured-wrap {
        gap: 32px !important;
    }

    .feature-card {
        width: 300px;
        height: 380px;
    }

    /* Populaire reizen: kaart verticaal */
    .popular-section {
        padding-top: 56px;
        padding-bottom: 40px;
    }

    .popular-wrap {
        gap: 32px !important;
    }

    .trip-card {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
    }

    .trip-card-media {
        aspect-ratio: auto;
        height: 232px;
    }

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

    .trip-card-title {
        font-size: 20px;
        line-height: 1.28;
        letter-spacing: -0.01em;
    }

    .trip-card-go .ico {
        width: 18px;
        height: 18px;
    }

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

    .trip-card-days {
        font-size: 15px;
        color: var(--color-text-body);
    }

    .trip-card-days .ico {
        display: none;
    }

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

    .world-panel {
        gap: 32px !important;
        padding: 36px 20px 20px;
    }

    .world-grid {
        --bs-gutter-y: 12px;
    }

    .world-card {
        gap: 16px !important;
        padding: 10px 16px 10px 10px !important;
        border-radius: 20px !important;
    }

    .world-card-media {
        border-radius: 14px !important;
    }

    .world-card-body {
        gap: 16px !important;
        padding: 0 !important;
    }

    .world-card-text {
        gap: 4px !important;
    }

    .world-card .ico {
        width: 18px;
        height: 18px;
        color: var(--color-text-body);
    }

    /* Testimonials */
    .reviews-head {
        --bs-gutter-y: 12px;
        margin-bottom: 28px;
    }

    .reviews-rail {
        gap: 12px !important;
    }

    .reviews-rail > * {
        width: 300px;
    }

    .review-media {
        flex: 0 0 auto;
        aspect-ratio: auto;
        height: 200px;
    }

    .review-body {
        flex: 0 0 auto;
        min-height: 232px;
    }

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

    .review-title,
    .review-quote {
        font-size: 14px;
    }

    .review-title {
        line-height: 1.46;
    }

    .reviews-controls {
        margin-top: 28px;
    }

    /* Over Centaur Trails */
    .media-text {
        --bs-gutter-y: 28px;
    }

    .media-text-img {
        height: 300px;
        border-radius: var(--bs-border-radius-xl) !important;
    }

    .media-text-body {
        gap: 16px !important;
    }

    .media-text-body h2 {
        font-size: 26px;
        line-height: 1.26;
    }

    .media-text-copy {
        gap: 16px !important;
        font-size: 15px;
    }

    /* Footer: loopt tot de rand, radius 32, compacter */
    .footer-inner {
        gap: 40px;
        padding: 16px 16px 24px;
        border-radius: var(--bs-border-radius-xxl) var(--bs-border-radius-xxl) 0 0;
    }

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

    .footer-newsletter-row {
        --bs-gutter-y: 20px;
    }

    .footer-newsletter-head {
        gap: 20px !important;
    }

    .footer-newsletter-title {
        font-size: 22px;
        line-height: 1.26;
        letter-spacing: -0.015em;
    }

    .footer-newsletter-text,
    .footer-usps li {
        font-size: 14px;
        line-height: 1.46;
        color: var(--color-text-body);
    }

    .footer-usps .ico {
        width: 16px;
        height: 16px;
        color: var(--color-primary);
    }

    .footer-newsletter-intro {
        gap: 20px !important;
    }

    .footer-newsletter-form {
        gap: 12px;
        padding: 4px 0 0;
        background: none;
    }

    .footer-newsletter-form .row {
        --bs-gutter-y: 12px;
    }

    .footer-newsletter-form .form-label {
        font-size: 13px;
    }

    .footer-newsletter-form .form-control {
        font-size: 15px;
        border: 1px solid var(--gs-200);
    }

    .footer-newsletter-form .form-control::placeholder {
        color: var(--gs-400);
    }

    .footer-newsletter-form .form-check {
        gap: 10px;
        padding-top: 2px;
        font-size: 13px;
        line-height: 1.46;
    }

    .footer-newsletter-form .form-check-input {
        width: 18px;
        height: 18px;
        margin-top: 0;
        border: 1px solid var(--gs-400);
        border-radius: 4px;
    }

    .footer-main {
        gap: 24px;
    }

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

    .footer-brand {
        position: relative;
        gap: 16px;
        padding-bottom: 24px;
    }

    /* Scheidingslijn alleen over de contentbreedte (niet over de kolom-padding) */
    .footer-brand::after {
        content: "";
        position: absolute;
        right: calc(var(--bs-gutter-x) * 0.5);
        bottom: 0;
        left: calc(var(--bs-gutter-x) * 0.5);
        height: 1px;
        background-color: var(--color-border-dark);
    }

    .footer-brand > * {
        flex: 1 1 0;
    }

    .footer-label {
        font-size: 13px;
    }

    .footer-col-title {
        margin-bottom: 12px;
        font-size: 15px;
        color: #FFFFFF;
    }

    .footer-links {
        gap: 10px;
        color: var(--gs-300);
    }

    .footer-links a {
        color: var(--gs-300);
    }

    .footer-bottom {
        border-top-color: rgba(255, 255, 255, 0.2);
        font-size: 13px;
        line-height: 1.46;
        color: var(--gs-400);
    }
}

@media (max-width: 400px) {
    .top-bar-list li {
        font-size: 10px;
    }

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

/* ==========================================================================
   Over ons
   ========================================================================== */
@media (max-width: 1199.98px) {
    .gallery {
        --slide-w: calc(100vw - 160px);
    }
}

@media (max-width: 991.98px) {
    .about-img,
    .passion-img {
        height: 360px !important;
    }

    .cta-img {
        height: 400px !important;
    }
}

@media (max-width: 767.98px) {
    /* Figma mobiel: secties 48px boven/onder */
    .about-section.section-pad {
        padding-top: 48px;
        padding-bottom: 48px;
    }

    .about-section h2 {
        font-size: 26px;
        line-height: 1.26;
        letter-spacing: -0.015em;
    }

    .about-section .about-h2-lg {
        font-size: 32px;
        line-height: 1.22;
        letter-spacing: -0.025em;
        text-wrap: balance;
    }

    /* Paginaheader: 300px hoog, 8px rand, radius 24, tekst bovenaan */
    .page-hero-wrap {
        padding: 0 8px 8px;
    }

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

    .page-hero-content {
        padding-bottom: 0;
    }

    .page-hero-bg-low {
        object-position: center;
    }

    .page-hero-title {
        font-size: 30px;
        line-height: 1.2;
        letter-spacing: -0.025em;
    }

    /* Ons verhaal */
    .about-split,
    .passion-grid {
        --bs-gutter-y: 24px;
    }

    .about-copy,
    .about-text {
        gap: 12px !important;
    }

    .about-copy .text-body-secondary {
        font-size: 15px;
    }

    .about-img,
    .passion-img {
        height: 260px !important;
    }

    /* Galerij: 330x252, 12px tussenruimte */
    .gallery {
        --slide-w: min(330px, calc(100vw - 110px));
        margin-top: 24px;
    }

    .gallery-rail {
        gap: 12px;
    }

    .gallery-rail > .gallery-img {
        aspect-ratio: 330 / 252;
        border-radius: var(--bs-border-radius-lg) !important;
    }

    /* Kernwaarden: links uitgelijnd, 8px onder de titel */
    .about-section .container.gap-5 {
        gap: 32px !important;
    }

    .values-head {
        gap: 8px !important;
    }

    /* Partners: drie kolommen naast elkaar die meeschalen */
    .about-section .partners {
        gap: 12px;
    }

    .partner {
        flex: 0 1 calc((100% - 24px) / 3);   /* Figma: drie vlakken naast elkaar */
        width: auto;
        height: auto;
        aspect-ratio: 320 / 140;
    }

    .partner-wec {
        width: 100%;
        object-fit: contain;
    }

    /* CTA: foto boven, kaart zonder vlak, knoppen even breed */
    .cta-card {
        padding: 0;
        background-color: transparent !important;
    }

    .cta-card .eyebrow,
    .cta-title {
        margin-bottom: 12px;
    }

    .cta-text {
        margin-bottom: 20px;
        font-size: 15px;
    }

    .cta-actions .btn {
        flex: 1 1 0;
    }

    .cta-actions .btn-ct-light {
        --bs-btn-bg: #FFFFFF;
    }

    .cta-img {
        height: 320px !important;
    }
}

/* ==========================================================================
   Blog
   ========================================================================== */
@media (max-width: 767.98px) {
    .page-hero-title-sm {
        font-size: 28px;
    }

    /* Blogkaart behoudt op mobiel de desktopmaten (Figma) */
    .blog-card .h6 {
        font-size: 20px;
        text-wrap: balance;
    }

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

    /* Filter wordt een schuifbare strook onder de header, met lijn eronder */
    .blog-head {
        margin: 0 -16px 16px;
        padding: 12px 8px 16px;
        border-bottom: 1px solid var(--color-border);
    }

    .blog-filter {
        width: 100%;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .blog-filter::-webkit-scrollbar {
        display: none;
    }

    .blog-filter-list {
        background-color: transparent;
    }

    .blog-filter-list .nav-link:not(.active) {
        background-color: #FFFFFF;
    }
}

/* ==========================================================================
   Blogartikel
   ========================================================================== */
@media (max-width: 991.98px) {
    .article-page {
        padding: 16px 0;
    }

    .article-toc {
        position: static !important;
    }
}

@media (max-width: 767.98px) {
    .article-img {
        height: 248px;
    }

    .article-body {
        padding: 32px 24px;
    }

    .article-title {
        font-size: 36px;
        line-height: 1.22;
        letter-spacing: -0.025em;
    }

    .article-h2 {
        font-size: 28px;
        line-height: 1.24;
        letter-spacing: -0.02em;
    }

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

    .article-share {
        gap: 16px;
    }
}

/* ==========================================================================
   Contact
   ========================================================================== */
@media (max-width: 991.98px) {
    .contact-panel-img {
        height: 360px;
        flex: none !important;
    }

    .contact-panel-aside {
        width: 100%;
    }
}

@media (max-width: 767.98px) {
    .contact-h2 {
        font-size: 32px;
        line-height: 1.2;
        letter-spacing: -0.025em;
        text-wrap: balance;
    }

    .contact-info {
        padding: 40px 0;
    }

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

    /* Mobiel: social onder de kaarten */
    .contact-info-head {
        display: contents !important;
    }

    .contact-info-intro { order: 1; }
    .contact-cards      { order: 2; }
    .contact-social     { order: 3; }

    .contact-form-section {
        padding: 24px 0 48px;
        background-color: #FFFFFF !important;  /* Figma mobiel: wit rond het paneel */
    }

    .contact-panel {
        padding: 40px 24px 24px;
        border-radius: var(--bs-border-radius-xl);
    }

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

    .contact-panel-img {
        height: 286px;
    }
}

/* ==========================================================================
   Boekingsproces
   ========================================================================== */
@media (max-width: 1199.98px) {
    .booking-row-head {
        width: 260px;
    }
}

@media (max-width: 991.98px) {

    .booking-intro-img {
        height: 480px;
    }

    .booking-row-head {
        width: auto;
    }

    .booking-row-img {
        width: 100%;
        max-width: 480px;
        height: auto;
        aspect-ratio: 3 / 2;
    }
}

@media (max-width: 767.98px) {
    /* Submenu: schuifbare strook onder de header (Figma mobiel) */
    .page-hero-wrap.has-subnav {
        align-items: stretch;
        padding-bottom: 0;
    }

    .info-subnav {
        margin: 8px -8px 0;
        padding: 12px 8px 16px;
        border-bottom: 1px solid var(--color-border);
    }

    .info-subnav-list {
        --bs-nav-link-padding-x: 14px;
        --bs-nav-link-padding-y: 10px;
        padding: 0;
        background-color: transparent;
        border-radius: 0;
        box-shadow: none;
        backdrop-filter: none;
    }

    .info-subnav-list .nav-link:not(.active) {
        background-color: #FFFFFF;
    }

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

    .booking-intro-img {
        height: 400px;
    }

    .booking-intro-copy .h3 {
        font-size: 36px;                 /* Figma mobiel houdt 36px aan */
        line-height: 1.22;
    }

    .booking-details {
        padding: 56px 0 0;
    }

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

    .booking-cta {
        background-color: #FFFFFF !important;
    }
}

/* ==========================================================================
   Veelgestelde vragen
   ========================================================================== */
@media (max-width: 767.98px) {
    .faq-section {
        padding: 32px 0 48px;
    }
}

/* ==========================================================================
   Last minute
   ========================================================================== */
@media (max-width: 991.98px) {
    .lm-section .row.g-32 {
        --bs-gutter-y: 16px;
    }

    .lm-calendar {
        max-width: 480px;
    }
}

@media (max-width: 767.98px) {
    .lm-section {
        padding: 8px 0 48px;
    }

    .lm-calendar {
        max-width: none;
        padding: 16px;
    }

    .lm-cal-nav {
        --bs-btn-padding-x: 4px;
        --bs-btn-padding-y: 4px;
    }

    .lm-results {
        gap: 20px;
    }
}

/* ==========================================================================
   Alle reizen
   ========================================================================== */
@media (max-width: 1199.98px) {
    .ar-facts {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Onder 992px: zoekbalk plat op wit onder de header, filters in een schuifpaneel */
@media (max-width: 991.98px) {
    .ar-hero-wrap,
    .ar-search-wrap {
        background-color: #FFFFFF;
    }

    .ar-search-wrap {
        margin-top: 0;
        padding: 4px 0 16px;
    }

    .trip-search.ar-search {
        padding: 0;
    }

    .ar-search .trip-search-icon {
        padding: 10px !important;        /* rondje van 40px (Figma mobiel) */
    }

    .ar-search .trip-search-bar {
        padding: 0 !important;
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }

    .ar-search .trip-search-field,
    .ar-search .trip-search-field:first-child {
        padding: 8px 4px 8px 0;
    }

    .ar-search .trip-search-bar .btn-ct {
        margin-top: 8px;
    }

    .ar-layout {
        margin-top: 32px;
    }

    .ar-offcanvas {
        --bs-offcanvas-width: 320px;
        --bs-offcanvas-bg: var(--color-bg-1);
    }

    .ar-offcanvas .offcanvas-body {
        padding: 0 24px 32px;
    }
}

@media (max-width: 767.98px) {
    .ar-section {
        padding-bottom: 56px;
    }

    .ar-count-text {
        font-size: 13px;
        line-height: 1.46;
        color: var(--gs-600);
    }

    /* Kaart onder elkaar: foto 392x261, tekst met pijlknop (Figma mobiel) */
    .ar-list {
        gap: 16px;
    }

    .ar-card-main {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
    }

    .ar-card-media {
        aspect-ratio: 392 / 261;
    }

    .ar-card-body {
        gap: 12px !important;
        padding: 16px 12px 8px;
    }

    .ar-card-copy {
        gap: 12px !important;
    }

    .ar-card-title {
        font-size: 20px;
        line-height: 1.28;
        letter-spacing: -0.01em;
    }

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

    .ar-card-tags {
        padding-top: 0;
    }

    .ar-price {
        padding-top: 12px;
        font-size: 16px;
        line-height: 1.5;
    }

    .ar-price-from {
        font-size: inherit;
        font-weight: inherit;
        color: inherit;
    }

    .ar-facts {
        grid-template-columns: minmax(0, 1fr);
    }

    /* Paginering: ronde knoppen van 40px */

    .ar-pagination .pagination-ct {
        gap: 6px !important;
    }

    .ar-pagination .page-link {
        min-width: 40px;
        height: 40px;
        line-height: 30px;
        font-weight: 600;
        color: var(--color-text);
        background-color: #FFFFFF;
        border: 1px solid var(--gs-300);
    }

    .ar-pagination .active .page-link {
        color: #FFFFFF;
        background-color: var(--color-text);
        border-color: var(--color-text);
    }

    .ar-pagination .disabled span.page-link {
        background-color: transparent;
        border-color: transparent;
    }

    .ar-pagination .page-item:last-child .page-link {
        color: #FFFFFF;
        background-color: var(--color-accent);
        border-color: var(--color-accent);
    }
}

@media (min-width: 576px) and (max-width: 767.98px) {
    .ar-facts {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ==========================================================================
   Reis-detail
   ========================================================================== */
@media (max-width: 1199.98px) {
    .rd-similar-rail .trip-card {
        width: 380px;
    }
}

/* Onder 992px: één kolom, prijs onder de titel, submenu als strook (Figma mobiel) */
@media (max-width: 991.98px) {
    .rd-top {
        background-color: #FFFFFF;
    }

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

    .rd-book-mobile {
        padding-top: 14px;
    }

    .rd-book-mobile .rd-deal {
        margin-top: 16px;
    }

    .info-subnav.rd-subnav {
        align-self: stretch;
        margin: 0;
        padding: 12px 8px;
        border-bottom: 0;
    }

    .rd-subnav .info-subnav-list {
        --bs-nav-link-padding-x: 16px;
        --bs-nav-link-padding-y: 9px;
        --bs-nav-link-font-size: 13px;
        --bs-nav-link-color: var(--color-text-body);
        gap: 8px;
        padding: 0;
        background-color: transparent;
        border-radius: 0;
        box-shadow: none;
        backdrop-filter: none;
    }

    .rd-subnav .nav-link {
        min-width: 0;
        line-height: 1.46;
    }

    .rd-subnav .nav-link:not(.active) {
        background-color: var(--color-bg-1);
    }

    .rd-layout {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "intro" "aside" "main";
        row-gap: 24px;
    }

    .rd-aside {
        position: static;
    }

    .rd-main {
        margin-top: 16px;                /* 40px tussen kenmerken en galerij */
    }

    .rd-cta-card {
        width: 380px;
        padding: 32px;
    }
}

@media (max-width: 767.98px) {

    .rd-hero-img {
        height: 300px;
        aspect-ratio: auto;
        border-radius: 0 0 var(--bs-border-radius-xl) var(--bs-border-radius-xl);
    }

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

    .rd-title {
        font-size: 28px;
        line-height: 1.14;
        letter-spacing: -0.02em;
    }

    /* Ondertitel: gewone tekst in plaats van eyebrow (Figma mobiel) */
    .rd-subtitle {
        font-size: 13px;
        font-weight: 400;
        line-height: 1.46;
        letter-spacing: 0;
        text-transform: none;
        color: var(--gs-600);
    }

    .rd-subtitle::before {
        display: none;
    }

    .rd-content {
        padding: 48px 0 64px;
    }

    .rd-text {
        font-size: 15px;
    }

    .rd-card {
        padding: 20px 16px;
    }

    .rd-card .rd-book .rd-deal,
    .rd-card-book > .rd-deal {
        margin-right: -16px;
        margin-left: -16px;
    }

    .rd-card-book > .rd-deal {
        margin-bottom: -20px;
    }

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

    .rd-more {
        padding: 64px 0;
    }

    .rd-more-img {
        width: 280px;
        aspect-ratio: 280 / 200;
    }

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

    .rd-similar {
        padding: 64px 0;
    }

    .rd-similar h2 {
        font-size: 28px;
        line-height: 1.24;
    }

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

    .rd-similar-rail .trip-card {
        width: min(360px, calc(100vw - 64px));
    }

    .rd-similar-rail .trip-card-desc {
        -webkit-line-clamp: 3;
    }

    /* Hulp: tekst boven, foto met badge eronder */
    .rd-help {
        padding: 48px 0;
    }

    .rd-cta {
        min-height: 0;
    }

    .rd-cta-img {
        position: static;
        height: auto;
        aspect-ratio: 408 / 280;
        object-position: 72% 20%;        /* Aly in beeld op de smalle uitsnede */
        border-radius: var(--bs-border-radius-xl);
    }

    .rd-cta-card {
        width: auto;
        padding: 0;
        border-radius: 0;
    }

    .rd-cta-title {
        font-size: 28px;
        line-height: 1.24;
    }

    .rd-cta-badge {
        position: absolute;
        bottom: 16px;
        left: 16px;
    }
}

/* ==========================================================================
   Contentpagina's
   ========================================================================== */
@media (max-width: 767.98px) {
    .article-pair-img {
        height: 320px;
    }

    .loyal-amount {
        width: 72px;
        height: 72px;
        font-size: 22px;
    }
}