/* =======================
   BASIS SLIDER
======================= */

.slider {
    position: relative;
    width: 100%;
    z-index: 5;
    height: 75vh;       /* vaste slider hoogte */
    overflow: hidden;
    margin-top: 40px;
}

/* Slick intern dwingen */
.slider,
.slider .slick-list,
.slider .slick-track,
.slider .slick-slide {
    height: 100%;
}

/* Afbeeldingen: 15% crop aan onderkant */
.slider img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 15%; /* 15% onderkant afgesneden */
    display: block;
}

/* =======================
   OVERLAY ELEMENTEN
======================= */

.overlay-image {
    position: absolute;
    top: 12%;
    left: 0%;
    width: 320px;
    max-width: 70vw;
    height: 160px;
    object-fit: cover;
    z-index: 10;
    opacity: 0.65;
    clip-path: polygon(0% 0%, 90% 0%, 100% 50%, 90% 100%, 0% 100%);
}

/* Datum balk */
.datum-bar {
    position: absolute;
    top: calc(12% + 160px + 6px); /* onder overlay */
    left: 0%;
    width: 287px;
    height: 36px;
    background-color: #25b4e4;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 11;
    opacity: 0.8;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
    clip-path: polygon(0% 0%, 100% 0%, 96% 100%, 0% 100%);
}

.datum-range {
    margin: 0;
    color: white;
    font-weight: 600;
    font-size: 14px;
}

/* =======================
   NEON ELEMENT
======================= */
.neon-sign {
    display: none;           /* default: niet zichtbaar op mobiel */
}



/* =======================
   BUTTONS – BASIS
======================= */

.button-container {
    position: absolute;
    top: calc(12% + 160px + 48px); /* onder overlay + datum */
    left: 0%;
    display: flex;
    flex-direction: column; /* mobiel default */
    gap: 16px;
    z-index: 15;
    opacity: 0.8;
}

/* VASTE, STABIELE BUTTONS */
.clip-button {
    background-color: #25b4e4;
    color: white;
    border: none;
    cursor: pointer;
    font-size: 15px;
    width: 220px;
    height: 64px;
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
    transition: background-color 0.25s ease, transform 0.25s ease;
}

.clip-button:hover {
    background-color: #1a9bc9;
    transform: scale(1.04);
}

.clip-title {
    font-weight: 700;
    font-size: 15px;
    line-height: 1.2;
}

.clip-sub {
    font-size: 13px;
    font-style: italic;
    opacity: 0.85;
}

/* =======================
   DESKTOP
======================= */

@media (min-width: 1025px) {
    .slider {
        height: 75vh; /* vaste hoogte blijft */
    }

    .button-container {
        flex-direction: row;
        bottom: 140px;                /* onderkant slider */
        top: auto;                  /* reset top */
        left: 50%;
        transform: translateX(-50%);
        gap: 14px;
    }

    .clip-button {
        width: 240px;
        height: 68px;
        border-radius: 8px;
    }

   .neon-sign {
    position: absolute;
    display: block;      /* zichtbaar op desktop */
    bottom: 0;               /* direct boven de slider onderkant */
    right: 0;
    width: auto;             /* laat width automatisch schalen */
    max-width: 30vw;  
    width: 30vw;       /* maximaal ongeveer 45% van het scherm */
    height: auto;            /* hoogte schaalt mee */
    object-fit: contain;      /* hele afbeelding zichtbaar */
    z-index: 12;
    filter: drop-shadow(0 0 6px rgba(255, 60, 150, 0.7))
            drop-shadow(0 0 14px rgba(255, 60, 150, 0.6))
            drop-shadow(0 0 28px rgba(255, 60, 150, 0.4));
}
}

/* =======================
   MOBIEL
======================= */

@media (max-width: 768px) {
    .slider {
        height: 75svh; /* vaste hoogte */
    }

    .overlay-image {
        top: 12%;
        width: 260px;
        height: 120px;
    }

    .datum-bar {
        top: calc(12% + 120px + 6px);
        width: 233px;
        height: 30px;
    }

    .datum-range {
        font-size: 11px;
    }

    .button-container {
        top: calc(12% + 120px + 36px + 25px); /* onder overlay + datum */
        left: 0px;
        flex-direction: column; /* verticaal */
        gap: 12px;
    }

    .clip-button {
        width: 200px;
        height: 56px;
        clip-path: polygon(0% 0%, 90% 0%, 100% 50%, 90% 100%, 0% 100%);
        border-radius: 0px;
    }

    .neon-sign {
        display: none;
    }
}

/* =======================
   LANDSCAPE MOBIEL
======================= */

@media (max-width: 900px) and (orientation: landscape) {
    .slider {
        height: 75svh; /* vaste hoogte behouden */
        min-height: 360px;
    }

    .overlay-image {
        width: 260px;
        top: 20%;
        height: 120px;
    }

    .datum-bar {
        width: 233px;
        top: calc(20% + 120px + 6px); 
        height: 27px;
    }

    .button-container {
        top: calc(20% + 120px + 27px + 15px); /* onder overlay + datum */
        left: 0px;
        flex-direction: column; /* blijft verticaal */
    }

    .neon-sign {
        display: none;
    }
}