/* =============================================================================
   De Polderhaan - Home page stylesheet
   =============================================================================
   Styles specific to the home page only. Base styles come from base.css.

   Sections:
     1. Hero (fullscreen image with overlay CTAs)
     2. Intro (centered tagline + intro text)
     3. Welcome (two-column: text + photo)
     4. Environment teaser (two-column: photo + text on dark bg)
     5. Impression (photo gallery)
     6. Map & availability (two-column: map + CTA)
   ============================================================================= */


/* =============================================================================
   1. HERO
   ============================================================================= */
.hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-white);
    text-align: center;
    padding: calc(var(--header-height) + var(--space-lg))
             var(--container-padding)
             var(--space-lg);
    overflow: hidden;
}

/* Hero background image - loaded via background-image so it can have an overlay.
   The actual image path is set in a style attribute in the HTML for easy
   per-page customization. */
.hero__bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    z-index: 0;
}

/* Dark overlay to keep text readable on any photo */
.hero__bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.40) 0%,
        rgba(0, 0, 0, 0.60) 100%
    );
}

.hero__content {
    position: relative;
    z-index: 1;
    max-width: 900px;
}

.hero__eyebrow {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 700;
    font-size: 1.25rem;
    margin-bottom: var(--space-sm);
    letter-spacing: 0.02em;
    color: var(--color-white);
}

.hero__title {
    font-size: var(--fs-hero);
    font-weight: 900;
    line-height: 1.1;
    margin-bottom: var(--space-xl);
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
    color: var(--color-white);
}

.hero__cta-group {
    display: flex;
    gap: var(--space-md);
    justify-content: center;
    flex-wrap: wrap;
}


/* =============================================================================
   2. INTRO
   ============================================================================= */
.intro {
    padding: var(--space-xxl) 0;
    text-align: center;
    background: var(--color-white);
}
.intro__heading {
    color: var(--color-text);
    font-size: var(--fs-h1);
    margin-bottom: var(--space-xl);
}
.intro__body {
    max-width: 640px;
    margin: 0 auto;
    color: var(--color-text-muted);
    font-size: 1rem;
    line-height: 1.75;
}


/* =============================================================================
   3. WELCOME (two-column on dark background)
   ============================================================================= */
.welcome {
    display: grid;
    grid-template-columns: 1fr 1fr;
    background-color: var(--color-dark-bg);
    color: var(--color-white);
    min-height: 480px;
}

.welcome__text {
    padding: var(--space-xxl) var(--space-xl);
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.welcome__icon {
    color: var(--color-orange);
    margin-bottom: var(--space-md);
    text-align: center;
}
.welcome__icon svg {
    width: 36px;
    height: 36px;
}
.welcome__heading {
    color: var(--color-orange);
    font-size: var(--fs-h2);
    margin-bottom: var(--space-md);
}
.welcome__body {
    max-width: 560px;
    margin-bottom: var(--space-lg);
}

.welcome__image {
    background-size: cover;
    background-position: center;
    min-height: 400px;
}


/* =============================================================================
   4. ENVIRONMENT TEASER (two-column, reversed)
   ============================================================================= */
.environment {
    display: grid;
    grid-template-columns: 1fr 1fr;
    background-color: var(--color-dark-bg);
    color: var(--color-white);
    min-height: 480px;
}

.environment__image {
    background-size: cover;
    background-position: center;
    min-height: 400px;
}

.environment__text {
    padding: var(--space-xxl) var(--space-xl);
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.environment__icon {
    color: var(--color-orange);
    margin-bottom: var(--space-md);
    text-align: center;
}
.environment__icon svg {
    width: 36px;
    height: 36px;
}
.environment__heading {
    color: var(--color-orange);
    font-size: var(--fs-h2);
    margin-bottom: var(--space-md);
}
.environment__body {
    max-width: 560px;
    margin-bottom: var(--space-lg);
}


/* =============================================================================
   5. IMPRESSION (photo gallery)
   ============================================================================= */
.impression {
    padding: var(--space-xxl) 0;
    text-align: center;
}
.impression__heading {
    color: var(--color-orange);
    font-size: var(--fs-h2);
    margin-bottom: var(--space-xl);
}
.impression__gallery {
    display: flex;
    gap: var(--space-md);
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    cursor: grab;
    /* Hide scrollbar - dots below the reel serve as the indicator. */
    scrollbar-width: none;
    /* Hidden until JS clones items and centres the scroll position. Using
       visibility (not opacity) so there is no fade, just instant reveal
       once layout is correct. Height is preserved by keeping flex flow. */
    visibility: hidden;
}
.impression__gallery.is-ready {
    visibility: visible;
}
.impression__gallery::-webkit-scrollbar {
    display: none;
}
.impression__gallery.is-dragging {
    cursor: grabbing;
    scroll-behavior: auto;
    user-select: none;
}
.impression__gallery.is-dragging .impression__item {
    pointer-events: none;
}

/* Pagination dots below the reel. One dot per image, active dot highlighted. */
.impression__dots {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-top: var(--space-lg);
}
.impression__dot {
    width: 10px;
    height: 10px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--color-border);
    cursor: pointer;
    transition: background var(--transition-base),
                transform var(--transition-base);
}
.impression__dot:hover,
.impression__dot:focus-visible {
    background: var(--color-orange-dark);
}
.impression__dot.is-active {
    background: var(--color-orange);
    transform: scale(1.3);
}

.impression__item {
    flex: 0 0 auto;
    width: clamp(240px, 30vw, 380px);
    aspect-ratio: 4 / 3;
    background-size: cover;
    background-position: center;
    border-radius: var(--radius-md);
    overflow: hidden;
    transition: transform var(--transition-base);
}
.impression__item:hover {
    transform: scale(1.02);
    box-shadow: var(--shadow-lg);
}


/* =============================================================================
   6. MAP & AVAILABILITY
   ============================================================================= */
.availability {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 420px;
}

.availability__map {
    position: relative;
    min-height: 360px;
}
.availability__map iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

.availability__text {
    background-color: var(--color-dark-bg);
    color: var(--color-white);
    padding: var(--space-xxl) var(--space-xl);
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.availability__heading {
    color: var(--color-orange);
    font-size: var(--fs-h2);
    margin-bottom: var(--space-md);
}
.availability__body {
    margin-bottom: var(--space-lg);
    max-width: 520px;
}
.availability__phone {
    font-size: 1rem;
    font-weight: 600;
}
.availability__phone a {
    color: var(--color-orange);
    font-weight: 700;
}


/* =============================================================================
   RESPONSIVE - collapse two-column layouts on tablet and below
   ============================================================================= */
@media (max-width: 960px) {
    .hero {
        min-height: 100vh;
    }

    .welcome,
    .environment,
    .availability {
        grid-template-columns: 1fr;
    }

    /* On small screens, image goes above text for better flow */
    .environment__image {
        order: -1;
    }

    .impression__item {
        width: clamp(220px, 70vw, 320px);
    }
}

@media (max-width: 560px) {
    .hero__cta-group {
        flex-direction: column;
        align-items: stretch;
    }
    .hero__cta-group .btn {
        width: 100%;
    }

    .welcome__text,
    .environment__text,
    .availability__text {
        padding: var(--space-xl) var(--space-lg);
    }
}