@import 'components/variables';
@import 'components/global';
@import 'components/components';
@import 'components/header';
@import 'components/footer';

/* =========================================================
   Page: Home
   Only styles exclusive to the home page.
   Reusable patterns live in components.css
   ========================================================= */

/* ---------- Hero ---------- */
.hero {
    position: relative;
    min-height: 760px;
    padding-top: calc(var(--header-height) + var(--space-8));
    padding-bottom: var(--space-13);
    display: flex;
    align-items: flex-end;
    color: var(--color-text);
    overflow: hidden;
    isolation: isolate;
}
 body.home {
    margin-top: -152px;
}
.hero__media {
    position: absolute;
    inset: 0;
    z-index: -2;
}
 header.site-header.scrolled {
    background: #000;
}
.hero__media video,
.hero__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
 
/* Reduced motion: pause the hero video for users who prefer less motion */
@media (prefers-reduced-motion: reduce) {
    .hero__video {
        display: none;
    }
    .hero__media::before {
        content: '';
        position: absolute;
        inset: 0;
        background-image: url('../images/hero.jpg');
        background-size: cover;
        background-position: center;
    }
}
 
.hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(10, 10, 10, 0.00) 0%, #0A0A0A 100%);
    z-index: -1;
}
 
.hero__content {
    /* max-width: 560px; */
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

.hero__brand {
   font-size: var(--fs-5xl);
    font-family: var(--font-heading);
    font-weight: var(--fw-regular);
    color: var(--color-accent);
    line-height: 1;
}
 
.hero__title {
    font-size: var(--fluid-hero-title);
    line-height: 1.1;
    letter-spacing: 0.01em;
    max-width: 25ch;
}
 
.hero__text p {
    font-size: var(--fs-base);
    color: var(--color-text-muted);
    max-width: 460px;
    line-height: var(--lh-base);
}
 
@media (max-width: 768px) {
    .hero {
        min-height: 560px;
        padding-top: calc(var(--header-height) + var(--space-12));
        padding-bottom: var(--space-11);
    }
}
section.hero:after {
    content: '';
    width: 2px;
    height: 100px;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    background: linear-gradient(
245deg, #8D7A40 0%, #F7E490 100%);
}
/* ---------- Section: Rooms ---------- */
.rooms-section {
    padding-block: var(--space-11);
}

.rooms-section__footer {
    display: flex;
    justify-content: center;
    margin-top: var(--space-7);
}

/* ---------- Section: Features ---------- */
.features-section {
    padding-block: var(--space-9);
}

/* ---------- Section: Trusted logos ---------- */
.trusted-section {
    padding-block: var(--space-9);
}

.trusted-section__title {
    display: block;
    text-align: center;
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    letter-spacing: var(--ls-wider);
    text-transform: uppercase;
    color: var(--color-text-subtle);
    margin-bottom: var(--space-7);
}


/* ---------- Reviews section ---------- */
.reviews-section {
    padding-block: var(--space-11);
}

/* ---------- Testimonial slider ---------- */
.testimonial {
    background: var(--color-surface);
    border-radius: 1px;
    overflow: hidden;
    display: grid;
    grid-template-columns: 1.35fr 1fr; /* text wider, image column narrower — matches design ratio */
    min-height: 460px;
}

.testimonial__body {
    /* Left padding: align text with container--lg's left edge.
       max(space-9, min(130px, (100vw - container-lg) / 2))
       - 130px is the fixed offset when viewport is >= container-xl (1600px)
       - shrinks as viewport narrows
       - clamped to space-9 minimum so there's always breathing room. */
    padding: var(--space-12)
             var(--space-9)
             var(--space-12)
             max(var(--space-9),
                 min(
                     calc((var(--container-xl) - var(--container-lg)) / 2),
                     calc((100vw - var(--container-lg)) / 2)
                 ));
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--space-7);
}

.testimonial__nav {
    display: flex;
    align-items: center;
    gap: var(--space-4);
}

.testimonial__nav-btn {
    width: 31px;
    height: 30px;
    border: none;
    background: transparent;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: opacity var(--transition-base);
}

.testimonial__nav-btn:hover {
    opacity: 0.75;
}

/* Disabled (at first/last slide) — visible but unclickable */
.testimonial__nav-btn[disabled],
.testimonial__nav-btn.is-disabled {
    opacity: 0.3;
    cursor: default;
    pointer-events: none;
}

.testimonial__nav-btn svg {
    width: 31px;
    height: 30px;
}

.testimonial__nav-divider {
    width: 1px;
    height: 30px;
    background: var(--color-border);
}

/* Slides — only the active one is visible */
.testimonial__slide {
    display: none;
    flex-direction: column;
    justify-content: flex-start;
    gap: var(--space-7);
    flex: 1;
}

.testimonial__slide.is-active {
    display: flex;
}

.testimonial__quote {
    font-family: var(--font-heading);
    font-size: var(--fs-3xl);
    font-weight: var(--fw-regular);
    line-height: 1.35;
    color: var(--color-text);
    margin: 0;
    max-width: 33ch;
}

.testimonial__author {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.testimonial__avatar {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
}

.testimonial__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.testimonial__author-name {
    font-size: var(--fs-base);
    font-weight: var(--fw-semibold);
    color: var(--color-text);
    margin: 0;
}

.testimonial__author-role {
    font-size: var(--fs-xs);
    color: var(--color-text-subtle);
    letter-spacing: var(--ls-wide);
    text-transform: uppercase;
    margin: 0;
}

/* Media (right column) */
.testimonial__media {
    position: relative;
    overflow: hidden;
}

.testimonial__media-slide {
    display: none;
    position: absolute;
    inset: 0;
}

.testimonial__media-slide.is-active {
    display: block;
}

.testimonial__media-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

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

    .testimonial__media {
        min-height: 280px;
        position: relative;
    }

    .testimonial__media-slide {
        position: relative;
        inset: unset;
    }

    .testimonial__media-slide.is-active {
        display: block;
    }

    .testimonial__media-slide img {
        min-height: 280px;
    }

    .testimonial__body {
        padding: var(--space-7);
        order: -1;
    }

    .testimonial__quote {
        font-size: var(--fs-xl);
    }
}

/* ---------- Content blocks section spacing ---------- */
.content-section {
    padding-block: var(--space-10);
}

/* ---------- Gallery collage ---------- */
.gallery {
    padding-block: var(--space-10);
}

.gallery__grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: 90px;
    gap: var(--space-5);
}

/* --- Collage placements --- */

/* Large top-centre image */
.gallery__item--1 { grid-column: 3 / 9;  grid-row: 1 / 5; }

/* Small top-right, bottom-aligned with IMG1 */
.gallery__item--2 { grid-column: 9 / 12; grid-row: 3 / 5; }

/* Medium bottom-left — top-aligned with IMG4 */
.gallery__item--3 { grid-column: 1 / 5;  grid-row: 5 / 8; }

/* Large bottom-right */
.gallery__item--4 { grid-column: 5 / 13; grid-row: 5 / 9; }

/* --- Item base styles --- */
.gallery__item {
    overflow: hidden;
}

.gallery__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* --- Responsive --- */
@media (max-width: 900px) {
    .gallery__grid {
        grid-template-columns: repeat(6, 1fr);
        grid-auto-rows: 80px;
    }
    .gallery__item--1 { grid-column: 1 / 5; grid-row: 1 / 4; }
    .gallery__item--2 { grid-column: 5 / 7; grid-row: 1 / 3; }
    .gallery__item--3 { grid-column: 1 / 3; grid-row: 4 / 6; }
    .gallery__item--4 { grid-column: 3 / 7; grid-row: 5 / 8; }
    section.hero:after { height: 60px; }
}

@media (max-width: 560px) {
    .gallery__grid {
        grid-template-columns: 1fr 1fr;
        grid-auto-rows: 140px;
    }
    .gallery__item--1 { grid-column: 1 / -1; grid-row: auto / span 2; }
    .gallery__item--2 { grid-column: auto;   grid-row: auto; }
    .gallery__item--3 { grid-column: auto;   grid-row: auto; }
    .gallery__item--4 { grid-column: 1 / -1; grid-row: auto / span 2; }
}

/* ---------- Archive: Ruimtes ---------- */
body.post-type-archive-ruimtes {
    margin-top: -152px;
}

/* ---------- Default page template with hero ---------- */
body.has-hero {
    margin-top: -152px;
}


.archive-hero {
    /* min-height: clamp(300px, 30vw, 600px); */
    padding-top: calc(var(--header-height) + var(--space-11));
    /* padding-bottom: var(--space-11); */
    text-align: center;
    position: relative;
}

.archive-hero__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-5);
}

.archive-hero__text {
    font-size: var(--fs-base);
    color: var(--color-text-muted);
    max-width: 460px;
    line-height: var(--lh-base);
    margin: 0;
}


/* ---------- Archive: Ruimtes section ---------- */
.ruimtes-archive {
    padding-block: var(--space-11);
}

/* ---------- Knop (button) builder block ---------- */
.knop-section {
    padding-block: var(--space-9);
    text-align: center;
}

.knop-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    padding: 18px 24px;
    font-family: var(--font-body);
    font-size: var(--fs-sm);
    font-weight: var(--fw-regular);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    border-radius: 1px;
    cursor: pointer;
    color: var(--color-text);
    border: 1px solid transparent;
    background:
        linear-gradient(#1A1A1A, #1A1A1A) padding-box,
        var(--gradient-gold-h)             border-box;
    transition: color var(--transition-base), background var(--transition-base);
}

.knop-btn:hover {
    color: var(--color-accent);
    background:
        linear-gradient(#1A1A1A, #1A1A1A) padding-box,
        var(--gradient-gold-v)             border-box;
}

/* ---------- CTA Section (builder) ---------- */
.cta-section {
    padding-block: var(--space-11);
    text-align: center;
    position: relative;
}

/* Vertical decorative line above the content */
.cta-section::before {
    content: '';
    display: block;
    width: 1px;
    height: 150px;
    margin: 0 auto var(--space-9);
    background: linear-gradient(180deg, #8D7A40 0%, #F7E490 100%);
}

.cta-section__title {
    margin-bottom: var(--space-5);
}

.cta-section__text {
    font-size: 20px;
    color: var(--color-text-muted);
    max-width: 400px;
    margin: 0 auto var(--space-8);
    line-height: var(--lh-base);
}

/* ---------- Image section ---------- */
.image-section {
    padding-block: var(--space-10);
}

.image-section__img {
    width: 100%;
    height: auto;
    border-radius: 1px;
    display: block;
}

.image-section__link {
    display: block;
}

.image-section__link .image-section__img {
    transition: opacity var(--transition-base);
}

.image-section__link:hover .image-section__img {
    opacity: 0.85;
}

.image-section__actions {
    display: flex;
    justify-content: center;
    margin-top: var(--space-7);
}

/* Height modifiers — object-fit keeps the image nicely cropped */
.image-section__img--small  { height: 280px;  object-fit: cover; object-position: center; }
.image-section__img--medium { height: 480px;  object-fit: cover; object-position: center; }
.image-section__img--large  { height: 680px;  object-fit: cover; object-position: center; }

@media (max-width: 768px) {
    .image-section__img--small  { height: 200px; }
    .image-section__img--medium { height: 320px; }
    .image-section__img--large  { height: 440px; }
}

/* ---------- FAQ Section ---------- */
.faq-section {
    padding-block: var(--space-13);
}

.faq-section__layout {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: var(--space-12);
    align-items: start;
}

.faq-section__title {
    font-size: var(--fs-5xl);
    font-weight: var(--fw-regular);
    position: sticky;
    top: calc(var(--header-height) + var(--space-6));
}

/* ---- Accordion items ---- */
.faq-item {
    border-top: 1px solid var(--color-border);
}

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

.faq-item__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-6);
    width: 100%;
    padding-block: var(--space-6);
    text-align: left;
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--color-text);
    font-family: var(--font-body);
    font-size: var(--fs-xl);
    font-weight: var(--fw-regular);
    transition: color var(--transition-base);
}

.faq-item__question {
    transition: color var(--transition-base);
}

.faq-item.is-open .faq-item__question {
    color: var(--color-accent);
}

.faq-item__icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-muted);
    transition: color var(--transition-base);
}

.faq-item.is-open .faq-item__icon {
    color: var(--color-accent);
}

/* Toggle plus / minus */
.faq-item__icon-minus { display: none; }

.faq-item.is-open .faq-item__icon-plus  { display: none; }
.faq-item.is-open .faq-item__icon-minus { display: block; }

/* Smooth reveal */
.faq-item__body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease;
}

.faq-item.is-open .faq-item__body {
    max-height: 800px;
}

.faq-item__answer {
    padding-bottom: var(--space-7);
    font-size: var(--fs-base);
    color: var(--color-text-muted);
    line-height: var(--lh-base);
}

.faq-item__answer p:last-child {
    margin-bottom: 0;
}

@media (max-width: 768px) {
    .faq-section__layout {
        grid-template-columns: 1fr;
        gap: var(--space-8);
    }

    .faq-section__title {
        position: static;
        font-size: 34px;
    }
    a.ruimte-hero__back {
        margin-top: 30px;
    }
}

/* ---------- Contact page ---------- */
.contact-section {
    padding-block: var(--space-11);
    position: relative;
    z-index: 1;
}

.contact-layout {
    display: grid;
    grid-template-columns: 2fr 3fr;
    gap: var(--space-13);
    align-items: start;
}

/* ---- Left: info list ---- */
.contact-info__list {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    list-style: none;
    margin: 0;
    padding: 0;
}

.contact-info__item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
}

.contact-info__icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    color: var(--color-accent);
    margin-top: 2px;
}

.contact-info__icon svg {
    width: 100%;
    height: 100%;
}

.contact-info__text {
    font-size: var(--fs-base);
    color: var(--color-text-muted);
    line-height: var(--lh-base);
} 
button#gform_submit_button_2 {
    padding: 18px 24px;
}
.contact-info__text a {
    color: var(--color-text-muted);
}

.contact-info__text a:hover {
    color: var(--color-accent);
}

/* Opening hours rows from repeater */
.contact-info__item--hours .contact-info__icon {
    margin-top: 1px; /* align icon with first row */
}

.opening-hours__row {
    display: flex;
    gap: var(--space-2);
    line-height: var(--lh-base);
}
.contact-info {
    background: #1A1A1A;
}
ul.contact-info__list {
    padding: 34px 16px 0 24px;
}
.opening-hours__day {
    flex-shrink: 0;
    min-width: 56px;
}

.opening-hours__closed {
    color: var(--color-text-subtle);
    font-style: italic;
}


.contact-info__image {
    margin-top: var(--space-8);
    /* border-radius: var(--radius-md); */
    overflow: hidden;
}

.contact-info__image img {
    width: 100%;
    height: auto;
    display: block;
}

/* ---- Right: form ---- */
.contact-form__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-4);
    flex-wrap: wrap;
    margin-bottom: var(--space-8);
}

.contact-form__title {
    font-size: var(--fs-big);
    font-weight: var(--fw-regular);
    margin-bottom: 0;
}

/* GF fields inside contact form — 12-col grid so GF's width classes work */
.contact-form .gform_wrapper .gform_fields,
.contact-form .gform_fields,
.contact-form .gform_body ul,
.contact-form .gform-theme--foundation .gform_fields {
    display: grid !important;
    grid-template-columns: repeat(12, 1fr) !important;
    flex-direction: row !important;
    gap: var(--space-5);
    list-style: none;
    margin: 0;
    padding: 0;
}

.contact-form .gfield,
.contact-form .gform-field {
    margin: 0;
    padding: 0;
    grid-column: 1 / -1 !important; /* full width by default */
    min-width: 0;
    width: auto;
    float: none;
}

/* GF 2.5+ width classes — match what the form editor in the dashboard shows */
.contact-form .gfield--width-full           { grid-column: span 12 !important; }
.contact-form .gfield--width-three-quarter,
.contact-form .gfield--width-three-quarters { grid-column: span 9  !important; }
.contact-form .gfield--width-two-thirds     { grid-column: span 8  !important; }
.contact-form .gfield--width-half           { grid-column: span 6  !important; }
.contact-form .gfield--width-third          { grid-column: span 4  !important; }
.contact-form .gfield--width-quarter        { grid-column: span 3  !important; }

/* Honeypot field — keep hidden so it doesn't take a grid cell */
.contact-form .gfield--type-honeypot,
.contact-form .gform_validation_container {
    display: none !important;
}

@media (max-width: 640px) {
    .contact-form .gfield,
    .contact-form .gfield--width-half,
    .contact-form .gfield--width-third,
    .contact-form .gfield--width-two-thirds,
    .contact-form .gfield--width-quarter,
    .contact-form .gfield--width-three-quarter,
    .contact-form .gfield--width-three-quarters {
        grid-column: 1 / -1 !important;
    }
}

.contact-form .gfield_label,
.contact-form .gform-field-label {
    display: block;
    font-size: var(--fs-sm);
    font-weight: var(--fw-regular);
    color: var(--color-text-muted);
    margin-bottom: var(--space-2);
}

.contact-form input:not([type="submit"]):not([type="radio"]):not([type="checkbox"]),
.contact-form textarea,
.contact-form select {
    width: 100%;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    color: var(--color-text);
    font-family: var(--font-body);
    font-size: var(--fs-sm);
    line-height: var(--lh-base);
    padding: 12px 16px;
    transition: border-color var(--transition-base);
    appearance: none;
    -webkit-appearance: none;
    box-sizing: border-box;
}

.contact-form input:not([type="submit"]):not([type="radio"]):not([type="checkbox"]) {
    height: 52px;
}

.contact-form input:focus,
.contact-form textarea:focus,
.contact-form select:focus {
    outline: none;
    border-color: var(--color-accent);
}

.contact-form textarea {
    min-height: 130px;
    resize: vertical;
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
    color: var(--color-text-subtle);
}

/* Legacy GF half/third classes (pre-2.5) — map to the same grid columns */
.contact-form .gf_left_half,
.contact-form .gf_right_half  { grid-column: span 6 !important; }
.contact-form .gf_left_third,
.contact-form .gf_middle_third,
.contact-form .gf_right_third { grid-column: span 4 !important; }

/* GF footer */
.contact-form .gform_footer,
.contact-form .gform_page_footer {
    padding: 0;
    margin: 0;
}

/* Submit button — gradient border */
.contact-form__btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    padding: 14px 28px;
    font-family: var(--font-body) !important;
    font-size: var(--fs-sm) !important;
    font-weight: var(--fw-regular) !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    border-radius: var(--radius-sm) !important;
    cursor: pointer;
    color: var(--color-text) !important;
    border: 1px solid transparent !important;
    background:
        linear-gradient(var(--color-bg), var(--color-bg)) padding-box,
        var(--gradient-gold-h)                             border-box !important;
    box-shadow: none !important;
    outline: none;
    transition: color var(--transition-base), background var(--transition-base);
    margin-top: var(--space-5);
    width: auto !important;
}

.contact-form__btn:hover {
    color: var(--color-accent) !important;
    background:
        linear-gradient(var(--color-bg), var(--color-bg)) padding-box,
        var(--gradient-gold-v)                             border-box !important;
}

.contact-form__btn svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* Validation */
.contact-form .gfield_error input,
.contact-form .gfield_error textarea { border-color: #e53e3e; }

.contact-form .validation_message,
.contact-form .gfield_validation_message {
    color: #e53e3e;
    font-size: var(--fs-xs);
    margin-top: var(--space-1);
    padding: 0;
    background: none;
    border: none;
}

.contact-form .gform_confirmation_message {
    color: var(--color-text-muted);
    font-size: var(--fs-base);
    padding: var(--space-7) 0;
}

@media (max-width: 900px) {
    .contact-layout {
        grid-template-columns: 1fr;
        gap: var(--space-10);
    }

    .contact-form .gf_left_half,
    .contact-form .gf_right_half {
        grid-column: 1 / -1 !important;
    }
}

/* ---------- Brochure form section ---------- */
.brochure-form-section {
    padding-block: var(--space-11);
    position: relative;
    z-index: 1;
}

.brochure-form {
    max-width: 855px;
    margin: 0 auto;
    background: var(--color-surface);
    padding: var(--space-10) var(--space-11);
}

/* ----- Gravity Forms reset & dark theme ----- */
.brochure-form .gform_wrapper,
.brochure-form .gform-theme {
    margin: 0;
}

/* Field list — 12-col grid so GF's per-field width classes work */
.brochure-form .gform_wrapper .gform_fields,
.brochure-form .gform_fields,
.brochure-form .gform_body ul,
.brochure-form .gform-theme--foundation .gform_fields {
    display: grid !important;
    grid-template-columns: repeat(12, 1fr) !important;
    flex-direction: row !important;
    gap: var(--space-5);
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Honeypot — keep hidden so it doesn't take a grid cell */
.brochure-form .gfield--type-honeypot,
.brochure-form .gform_validation_container {
    display: none !important;
}

label.gfield_label.gform-field-label {
    font-weight: 300;
    font-size: 17px;
    color: #fff;
    line-height: 150%;
}
.brochure-form .gfield,
.brochure-form .gform-field {
    margin: 0;
    padding: 0;
    grid-column: 1 / -1 !important; /* full width by default */
    min-width: 0;
    width: auto;
    float: none;
}

/* GF 2.5+ width classes — match what the form editor shows */
.brochure-form .gfield--width-full           { grid-column: span 12 !important; }
.brochure-form .gfield--width-three-quarter,
.brochure-form .gfield--width-three-quarters { grid-column: span 9  !important; }
.brochure-form .gfield--width-two-thirds     { grid-column: span 8  !important; }
.brochure-form .gfield--width-half           { grid-column: span 6  !important; }
.brochure-form .gfield--width-third          { grid-column: span 4  !important; }
.brochure-form .gfield--width-quarter        { grid-column: span 3  !important; }

/* Legacy GF classes (pre-2.5) — map to the same grid columns */
.brochure-form .gf_left_half,
.brochure-form .gf_right_half  { grid-column: span 6 !important; }
.brochure-form .gf_left_third,
.brochure-form .gf_middle_third,
.brochure-form .gf_right_third { grid-column: span 4 !important; }

/* Labels */
.brochure-form .gfield_label,
.brochure-form .gform-field-label {
    display: block;
    font-family: var(--font-body);
    font-size: var(--fs-sm);
    font-weight: var(--fw-regular);
    color: var(--color-text-muted);
    margin-bottom: var(--space-2);
}

/* Inputs / textarea / select */
.brochure-form input:not([type="submit"]):not([type="radio"]):not([type="checkbox"]),
.brochure-form textarea,
.brochure-form select,
.gform-theme--foundation .gfield textarea.medium {
    width: 100%;
    background: var(--color-bg-alt);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    color: var(--color-text);
    font-family: var(--font-body);
    font-size: var(--fs-sm);
    line-height: var(--lh-base);
    padding: 12px 16px;
    transition: border-color var(--transition-base);
    appearance: none;
    -webkit-appearance: none;
    box-sizing: border-box;
    height: auto;
}

.brochure-form input:not([type="submit"]):not([type="radio"]):not([type="checkbox"]) {
    height: 52px;
}
.page-id-381 .page-bg img{
    filter: grayscale(0);
}
.brochure-form input:focus,
.brochure-form textarea:focus,
.brochure-form select:focus {
    outline: none;
    border-color: var(--color-accent);
}

.brochure-form textarea {
    min-height: 130px;
    resize: vertical;
}

/* Placeholder */
.brochure-form input::placeholder,
.brochure-form textarea::placeholder {
    color: var(--color-text-subtle);
}

/* Submit button — gradient border via background-clip technique
   (works on both <input> and <button>, no pseudo-elements needed) */
#gform_submit_button_1 {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    padding: 24px !important;
    font-family: var(--font-body) !important;
    font-size: var(--fs-sm) !important;
    font-weight: var(--fw-regular) !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    border-radius: 1px !important;
    cursor: pointer;
    color: var(--color-text) !important;
    /* Gold gradient border: paint the gradient over the full border-box,
       then cover the padding-box with the card background colour so only
       the 1 px border ring stays visible. */
    border: 1px solid transparent !important;
    background:
        linear-gradient(#1A1A1A, #1A1A1A) padding-box,
        var(--gradient-gold-h)            border-box !important;
    box-shadow: none !important;
    outline: none;
    transition: color var(--transition-base), background var(--transition-base);
    margin-top: 0;
    width: auto !important;
}

#gform_submit_button_1:hover {
    color: var(--color-accent) !important;
    background:
        linear-gradient(#1A1A1A, #1A1A1A) padding-box,
        var(--gradient-gold-v)            border-box !important;
}

#gform_submit_button_1 svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* GF footer wrapper */
.brochure-form .gform_footer,
.brochure-form .gform_page_footer {
    padding: 0;
    margin: 0;
}

/* Validation errors */
.brochure-form .gfield_error input,
.brochure-form .gfield_error textarea {
    border-color: #e53e3e;
}

.brochure-form .validation_message,
.brochure-form .gfield_validation_message {
    color: #e53e3e;
    font-size: var(--fs-xs);
    margin-top: var(--space-1);
    padding: 0;
    background: none;
    border: none;
}

/* Confirmation message */
.brochure-form .gform_confirmation_message {
    color: var(--color-text-muted);
    font-size: var(--fs-base);
    text-align: center;
    padding: var(--space-7) 0;
}

@media (max-width: 900px) {
    .brochure-form {
        padding: var(--space-9) var(--space-7);
    }

    /* Stack all half/third/etc. fields on small screens */
    .brochure-form .gfield,
    .brochure-form .gfield--width-half,
    .brochure-form .gfield--width-third,
    .brochure-form .gfield--width-two-thirds,
    .brochure-form .gfield--width-quarter,
    .brochure-form .gfield--width-three-quarter,
    .brochure-form .gfield--width-three-quarters,
    .brochure-form .gf_left_half,
    .brochure-form .gf_right_half,
    .brochure-form .gf_left_third,
    .brochure-form .gf_middle_third,
    .brochure-form .gf_right_third {
        grid-column: 1 / -1 !important;
    }
}

@media (max-width: 560px) {
    .brochure-form {
        padding: var(--space-7) var(--space-6);
    }
}

/* =========================================================
   Single Ruimte template
   ========================================================= */

/* ---- Hero ---- */
.ruimte-hero {
    padding-top: calc(var(--header-height) + var(--space-9));
    padding-bottom: var(--space-8);
    position: relative;
    z-index: 1;
}

.ruimte-hero__back {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--fs-base);
    color: var(--color-text-muted);
    margin-bottom: var(--space-6);
    transition: color var(--transition-base);
}

.ruimte-hero__back:hover {
    color: var(--color-accent);
}

.ruimte-hero__title {
    margin-bottom: var(--space-4);
}

.ruimte-hero__capacity {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--fs-base);
    color: var(--color-text-muted);
    margin: 0;
}

.ruimte-hero__capacity svg {
    color: var(--color-accent);
    flex-shrink: 0;
}

/* ---- Gallery ---- */
.ruimte-gallery {
    padding-block: var(--space-7);
    position: relative;
    z-index: 1;
}

.ruimte-gallery__grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    grid-auto-rows: 200px;
    gap: var(--space-4);
}

.ruimte-gallery__main {
    grid-row: span 3;
    position: relative;
    border-radius: 1px;
    overflow: hidden;
    cursor: pointer;
}

.ruimte-gallery__main img,
.ruimte-gallery__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform var(--transition-slow);
}

.ruimte-gallery__main:hover img,
.ruimte-gallery__thumb:hover img {
    transform: scale(1.03);
}

.ruimte-gallery__thumbs {
    display: contents;
}

.ruimte-gallery__thumb {
    position: relative;
    border-radius: 1px;
    overflow: hidden;
    cursor: pointer;
}

.ruimte-gallery__more {
    position: absolute;
    inset: 0;
    background: rgba(10, 10, 10, 0.7);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    color: var(--color-text);
    font-family: var(--font-body);
    font-size: var(--fs-base);
    font-weight: var(--fw-medium);
    pointer-events: none;
}

.ruimte-gallery__more svg {
    color: var(--color-accent);
}

.ruimte-gallery__vt {
    position: absolute;
    bottom: var(--space-5);
    left: var(--space-5);
    z-index: 2;
    background: rgba(10, 10, 10, 0.6);
}

@media (max-width: 768px) {
    .ruimte-gallery__grid {
        /* Row 1: main image full-width
           Row 2: three thumbs side-by-side */
        grid-template-columns: repeat(3, 1fr);
        grid-auto-rows: auto;
        gap: var(--space-3);
    }

    .ruimte-gallery__main {
        grid-column: 1 / -1;
        grid-row: 1;
        height: 260px;
    }

    .ruimte-gallery__thumb {
        height: 100px;
    }
}

/* ---- Description + Specs ---- */
.ruimte-specs {
    padding-block: var(--space-9);
    position: relative;
    z-index: 1;
}

.ruimte-specs__grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: var(--space-11);
    align-items: start;
}

.ruimte-specs__content p,
.ruimte-specs__left-text p {
    font-size: var(--fs-base);
    color: var(--color-text-muted);
    line-height: var(--lh-base);
}

.ruimte-specs__left-title {
    font-family: var(--font-heading);
    font-size: var(--fs-2xl);
    font-weight: var(--fw-regular);
    line-height: var(--lh-tight);
    margin-bottom: var(--space-5);
}

.ruimte-specs__title {
    font-family: var(--font-body);
    font-size: var(--fs-2xl);
    margin-bottom: var(--space-5);
}

.specs-list {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--color-border);
}

.specs-list__row {
    display: flex;
    justify-content: space-between;
    gap: var(--space-4);
    padding-block: var(--space-4);
    border-bottom: 1px solid var(--color-border);
    font-size: 16px;
}

.specs-list__label {
    color: var(--color-text-muted);
}

.specs-list__value {
    color: var(--color-text);
    text-align: right;
}

@media (max-width: 900px) {
    .ruimte-specs__grid {
        grid-template-columns: 1fr;
        gap: var(--space-8);
    }
}

/* ---- Voorzieningen ---- */
.ruimte-features {
    padding-block: var(--space-9);
}

/* Title + list stacked together, constrained to the left half of the row */
.ruimte-features__inner {
    max-width: calc(50% - var(--space-7));
}

.ruimte-features__title {
    font-family: var(--font-body);
    font-size: var(--fs-2xl);
    margin-bottom: var(--space-6);
    margin-top: 60px;
}

.features-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    list-style: none;
    margin: 0;
    padding: 0;
}

.features-list__item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-size: var(--fs-base);
    color: var(--color-text-muted);
    line-height: var(--lh-base);
}

.features-list__icon {
    color: var(--color-accent);
    flex-shrink: 0;
}

@media (max-width: 900px) {
    .ruimte-features__inner {
        max-width: 100%;
    }
}

/* ---- Contact form (in-page card) ---- */
.ruimte-contact {
    padding-block: var(--space-10);
}

.ruimte-contact__inner {
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    /* Card spans full container width; inner grid (title + form) aligns
       with container--lg edges (same pattern as the testimonial card). */
    padding-block: var(--space-10);
    padding-inline: max(var(--space-11),
        min(
            calc((var(--container-xl) - var(--container-lg)) / 2),
            calc((100vw - var(--container-lg)) / 2)
        ));
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: var(--space-9);
    align-items: start;
}

.ruimte-contact__title {
    font-size: var(--fs-3xl);
    font-weight: var(--fw-regular);
    margin: 0;
}

/* GF inside ruimte-contact — same dark theme as brochure form */
/* GF form layout — force a 12-col grid container so per-field width classes work.
   !important is used here because GF's own stylesheet (when not removed) sets
   display:flex with column direction at higher specificity. */
.ruimte-contact__form .gform_wrapper .gform_fields,
.ruimte-contact__form .gform_fields,
.ruimte-contact__form .gform_body ul,
.ruimte-contact__form .gform-theme--foundation .gform_fields {
    display: grid !important;
    grid-template-columns: repeat(12, 1fr) !important;
    flex-direction: row !important; /* defeat any flex column overrides */
    gap: var(--space-5);
    list-style: none;
    margin: 0;
    padding: 0;
}

.ruimte-contact__form .gfield,
.ruimte-contact__form .gform-field,
.ruimte-contact__form li.gfield {
    margin: 0;
    padding: 0;
    grid-column: 1 / -1 !important; /* full width by default */
    min-width: 0;
    width: auto;
    float: none;
}

/* GF 2.5+ width classes — match what the form editor in the dashboard shows */
.ruimte-contact__form .gfield--width-full,
.ruimte-contact__form li.gfield--width-full           { grid-column: span 12 !important; }
.ruimte-contact__form .gfield--width-three-quarter,
.ruimte-contact__form .gfield--width-three-quarters,
.ruimte-contact__form li.gfield--width-three-quarters { grid-column: span 9  !important; }
.ruimte-contact__form .gfield--width-two-thirds,
.ruimte-contact__form li.gfield--width-two-thirds     { grid-column: span 8  !important; }
.ruimte-contact__form .gfield--width-half,
.ruimte-contact__form li.gfield--width-half           { grid-column: span 6  !important; }
.ruimte-contact__form .gfield--width-third,
.ruimte-contact__form li.gfield--width-third          { grid-column: span 4  !important; }
.ruimte-contact__form .gfield--width-quarter,
.ruimte-contact__form li.gfield--width-quarter        { grid-column: span 3  !important; }

/* Legacy GF classes (pre-2.5) just in case the field group still uses them */
.ruimte-contact__form .gf_left_half,
.ruimte-contact__form .gf_right_half  { grid-column: span 6 !important; }
.ruimte-contact__form .gf_left_third,
.ruimte-contact__form .gf_middle_third,
.ruimte-contact__form .gf_right_third { grid-column: span 4 !important; }

@media (max-width: 640px) {
    /* Stack everything on small screens */
    .ruimte-contact__form .gfield,
    .ruimte-contact__form .gfield--width-half,
    .ruimte-contact__form .gfield--width-third,
    .ruimte-contact__form .gfield--width-two-thirds,
    .ruimte-contact__form .gfield--width-quarter,
    .ruimte-contact__form .gfield--width-three-quarter,
    .ruimte-contact__form .gfield--width-three-quarters,
    .ruimte-contact__form .gf_left_half,
    .ruimte-contact__form .gf_right_half,
    .ruimte-contact__form .gf_left_third,
    .ruimte-contact__form .gf_middle_third,
    .ruimte-contact__form .gf_right_third {
        grid-column: 1 / -1 !important;
    }
}

.ruimte-contact__form .gfield_label,
.ruimte-contact__form .gform-field-label {
    display: block;
    font-size: var(--fs-sm);
    font-weight: var(--fw-regular);
    color: var(--color-text-muted);
    margin-bottom: var(--space-2);
}

.ruimte-contact__form input:not([type="submit"]):not([type="radio"]):not([type="checkbox"]),
.ruimte-contact__form textarea,
.ruimte-contact__form select, .ginput_container.ginput_container_textarea textarea {
    width: 100%;
    background: var(--color-bg-alt);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    color: var(--color-text);
    font-family: var(--font-body);
    font-size: var(--fs-sm);
    line-height: var(--lh-base);
    padding: 12px 16px;
    transition: border-color var(--transition-base);
    appearance: none;
    -webkit-appearance: none;
    box-sizing: border-box;
}

.ruimte-contact__form input:not([type="submit"]):not([type="radio"]):not([type="checkbox"]) {
    height: 52px;
}

.ruimte-contact__form input:focus,
.ruimte-contact__form textarea:focus,
.ruimte-contact__form select:focus {
    outline: none;
    border-color: var(--color-accent);
}

.ruimte-contact__form textarea {
    min-height: 130px;
    resize: vertical;
}

.ruimte-contact__form .gform_footer,
.ruimte-contact__form .gform_page_footer {
    padding: 0;
    margin: 0;
}
.other-ruimtes span.eyebrow {
    text-align: left;
}
/* Submit button — gradient border on the surface card colour */
.ruimte-form__btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    padding: 24px!important;
    font-family: var(--font-body) !important;
    font-size: var(--fs-sm) !important;
    font-weight: var(--fw-regular) !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    border-radius: 1px !important;
    cursor: pointer;
    color: var(--color-text) !important;
    border: 1px solid transparent !important;
    background:
        linear-gradient(#1A1A1A, #1A1A1A) padding-box,
        var(--gradient-gold-h)             border-box !important;
    box-shadow: none !important;
    outline: none;
    transition: color var(--transition-base), background var(--transition-base);
    margin-top: var(--space-5);
    width: auto !important;
}
.brochure-form .gform-footer.gform_footer.top_label {
    margin-top: 0;
}
.ruimte-form__btn:hover {
    color: var(--color-accent) !important;
    background:
        linear-gradient(#1A1A1A, #1A1A1A) padding-box,
        var(--gradient-gold-v)             border-box !important;
}

.ruimte-form__btn svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

@media (max-width: 900px) {
    .ruimte-contact__inner {
        grid-template-columns: 1fr;
        padding: var(--space-9) var(--space-7);
    }
}

/* ---- Other ruimtes carousel ---- */
.other-ruimtes {
    padding-block: var(--space-11);
}

.other-ruimtes__head {
    margin-bottom: var(--space-8);
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-6);
}

.other-ruimtes__title {
    font-size: var(--fs-4xl);
    font-weight: var(--fw-regular);
    margin-top: var(--space-2);
}

.other-ruimtes__nav {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    flex-shrink: 0;
}

.other-ruimtes__nav-btn {
    background: transparent;
    border: none;
    padding: 0;
    color: var(--color-text);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: color var(--transition-base);
}

.other-ruimtes__nav-btn:hover {
    color: var(--color-accent);
}

.other-ruimtes__nav-btn.is-disabled {
    cursor: default;
    pointer-events: none;
}

.other-ruimtes__nav-btn.is-disabled svg path {
    stroke: #9A9A9A !important;
}

.other-ruimtes__nav-divider {
    width: 1px;
    height: 28px;
    background: var(--gradient-gold-v);
}

.other-ruimtes__viewport {
    overflow: hidden;
    /* Extend track to the right viewport edge (full-bleed right) while
       keeping the left edge aligned with the container. */
    margin-right: calc(-50vw + 50%);
}

.other-ruimtes__track {
    display: flex;
    gap: var(--space-5);
    overflow-x: auto;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -ms-overflow-style: none;
    /* End-of-scroll breathing room — matches the gap between cards
       so the last card doesn't sit flush against the viewport edge. */
    padding-right: var(--space-5);
    /* Mouse drag affordance */
    cursor: grab;
    user-select: none;
}

.other-ruimtes__track::-webkit-scrollbar { display: none; }

/* While dragging — disable smooth scroll so JS-driven scrollLeft updates
   are instant (otherwise smooth scrolling fights with the drag delta). */
.other-ruimtes__track.is-grabbing {
    cursor: grabbing;
    scroll-behavior: auto;
}

/* Block the browser from picking up images/links as native drag ghosts. */
.other-ruimtes__track img {
    pointer-events: none;
    -webkit-user-drag: none;
}

.other-ruimtes__track .room-card {
    flex: 0 0 calc((100% - 3 * var(--space-5)) / 3.5);
    min-width: 0;
    scroll-snap-align: start;
}

@media (max-width: 1100px) {
    .other-ruimtes__track .room-card {
        flex: 0 0 calc((100% - 2 * var(--space-5)) / 2.5);
    }
}

@media (max-width: 800px) {
    .other-ruimtes__track .room-card {
        flex: 0 0 calc((100% - var(--space-5)) / 1.8);
    }
    .other-ruimtes__title { font-size: 32px; }
}

@media (max-width: 480px) {
    .other-ruimtes__track .room-card {
        flex: 0 0 82%;
    }
}

/* ---- Lightbox ---- */
.lightbox {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.92);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-7);
}

.lightbox[hidden] {
    display: none;
}

.lightbox__stage {
    max-width: 90vw;
    max-height: 80vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lightbox__img {
    max-width: 100%;
    max-height: 80vh;
    object-fit: contain;
    display: block;
}

.lightbox__close,
.lightbox__nav {
    position: absolute;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid var(--color-border);
    background: rgba(20, 20, 20, 0.8);
    color: var(--color-text);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all var(--transition-base);
}

.lightbox__close:hover,
.lightbox__nav:hover {
    border-color: var(--color-accent);
    color: var(--color-accent);
}

.lightbox__close {
    top: var(--space-6);
    right: var(--space-6);
}

.lightbox__nav--prev { left: var(--space-6); top: 50%; transform: translateY(-50%); }
.lightbox__nav--next { right: var(--space-6); top: 50%; transform: translateY(-50%); }

.lightbox__counter {
    position: absolute;
    bottom: var(--space-6);
    left: 50%;
    transform: translateX(-50%);
    font-size: var(--fs-sm);
    color: var(--color-text-muted);
    letter-spacing: var(--ls-wide);
}

/* ---------- 404 ---------- */
.error-404 {
    padding-block: var(--space-13);
    min-height: 70vh;
    display: flex;
    align-items: center;
    text-align: center;
}

.error-404__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-5);
    margin: 0 auto;
    max-width: 540px;
}

.error-404__code {
    font-family: var(--font-heading);
    font-size: 180px;
    font-weight: var(--fw-regular);
    line-height: 1;
    letter-spacing: -0.02em;
    margin-bottom: var(--space-3);
}


.error-404__text {
    font-size: var(--fs-base);
    color: var(--color-text-muted);
    line-height: var(--lh-base);
    margin: 0 auto;
    max-width: 440px;
}

.error-404__actions {
    display: flex;
    gap: var(--space-4);
    margin-top: var(--space-5);
    flex-wrap: wrap;
    justify-content: center;
}

@media (max-width: 640px) {
    .error-404__code { font-size: 110px; }
}

/* ---------- Final CTA ---------- */
.final-cta {
    padding-block: var(--space-11);
    text-align: center;
}

.final-cta__title {
    font-size: var(--fs-3xl);
    font-weight: var(--fw-regular);
    margin-bottom: var(--space-3);
}

.final-cta__text {
    font-size: var(--fs-base);
    color: var(--color-text-muted);
    max-width: 420px;
    margin: 0 auto var(--space-7);
}

@media (max-width: 560px) {
    .final-cta__title {
        font-size: 26px;
    }
}
p.gform_required_legend {
    display: none;
}

/* =========================================================
   Mobile body-copy font sizes
   --------------------------------------------------------
   Desktop --fs-base is 18px. On mobile we shrink body-copy
   text (not headings/titles) down to var(--fs-md) = 16px
   for readability — without touching h1/h2/etc. so any
   clamp() expressions on titles stay intact.
   ========================================================= */
@media (max-width: 768px) {
    .hero__text p,
    .archive-hero__text,
    .cta-section__text,
    .final-cta__text,
    .content-block__text,
    .testimonial__author-name,
    .ruimte-hero__back,
    .ruimte-hero__capacity,
    .ruimte-specs__content p,
    .ruimte-specs__left-text p,
    .features-list__item {
        font-size: var(--fs-md);
    }
}