.huts{
    padding:80px 0;
}

.huts-wrapper{
    display:flex;
    gap:80px;
    align-items:flex-start;
    justify-content: flex-end;
    padding-left:120px;
    margin-left: auto;   /* pushes it to the right */

}

.swiper-wrapper {
    display: flex;
    align-items: stretch;
}

.huts-title{
    writing-mode:vertical-rl;
    transform:rotate(180deg);
    font-size:64px;
    font-weight:500;
    letter-spacing:-1px;
    color:#3f6a45;
}

.swiper{
    width:100%;
    overflow:visible;
}

.swiper-slide{
    width:420px !important;
    text-decoration: none;
    color: inherit;
    opacity: 0; 
    transform: translateY(50px);
    display: flex !important;
    height: auto !important;
}

.hut-card{
    display: flex;
    flex-direction: column;
    flex: 1 !important;
    width: 100%;
    height: 100% !important; 
    background: white;
    border-radius: 20px;
    overflow: hidden;
    border:#f7f7f7 1px solid;
}

.hut-image {
  display: grid;
  overflow: hidden;
  position: relative;
}

.hut-image img{
  grid-area: 1 / 1;
  width: 100%;
  transition: transform 0.5s ease;
}

.collab-badge {
    position: absolute;
    bottom: 20px;    /* Afstand van de onderkant */
    right: 20px;     /* Afstand van de rechterkant */
    width: 60px;     /* Grootte van de cirkel */
    height: 60px;
    background-color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 15px rgba(0,0,0,0.15);
    z-index: 10;
    transition: transform 0.3s ease;
}

/* Het Font Awesome icoon zelf */
.collab-badge i {
    color: #3f6a45;  /* Jouw groene kleur */
    font-size: 28px;
}

/* Leuke extra: laat het icoontje een beetje 'poppen' als je over de kaart hovert */
.swiper-slide:hover .collab-badge {
    transform: scale(1.1) rotate(-5deg);
}
/* startposities */
.img1 {
  transform: translateY(0);
}

.img2 {
  transform: translateY(100%);
}

/* hover */
.swiper-slide:hover .img1 {
  transform: translateY(-100%);
}

.swiper-slide:hover .img2 {
  transform: translateY(0);
}

.hut-info{
    padding: 22px 26px 30px;
    display: flex;
    flex-direction: column;
    flex: 1 !important; 
}

.hut-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:10px;
}

.hut-header h3{
    font-size:23px;
    font-weight:500;
}

.price{
    font-size:14px;
    color:#8e8e8e;
}

.hut-info p{
    font-size:18px;
    line-height:1.6;
    color:#6d6d6d;
    font-weight: 200;
        flex-grow: 0 !important;
    margin-bottom: 0;
}

.swiper-scrollbar {
  position: relative !important;
  max-width: 320px;
  margin: 40px auto;
  height: 4px !important;
  background: #e6ded4 !important; /* light track */
  border-radius: 10px !important;
}

/* green draggable bar */
.swiper-scrollbar-drag {
  background: #3f6a45 !important; /* green color */
  border-radius: 10px;
}

/* Specifieke styling voor de samenwerkingskaart */
.collab-slide .hut-card {
    background: #fdfbf8; /* Iets warmere/andere tint wit dan de rest */
    border: 2px dashed #d1c7bc; /* Een subtiele stippellijn geeft een 'invite' gevoel */
}

.collab-image {
    position: relative;
    background-color: #3f6a45; /* De groene merkkleur als fallback */
}

.collab-image img {
    opacity: 0.7; /* Maakt de foto iets rustiger zodat de tekst opvalt */
    filter: grayscale(20%);
}

.overlay-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 40px;
    opacity: 0.8;
}

.collab-link {
    margin-top: 15px;
    font-weight: 500;
    color: #3f6a45;
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.collab-slide:hover .collab-image img {
    transform: scale(1.05); 
    opacity: 0.9;
}

.collab-slide:hover .hut-card {
    border-color: #3f6a45;
    background: #ffffff;
}

@media screen and (max-width: 1150px) {
    .huts {
        padding: 60px 0;
    }
    .huts-wrapper {
        flex-direction: column;
        gap: 20px;
    }
  
    .huts-title {
        writing-mode: horizontal-tb;
        transform: rotate(0);
        font-size:40px;

    }
}

@media screen and (max-width: 1050px) {
    .huts {
        padding-top: 30px;
    }
}

@media screen and (max-width: 800px) {
    .huts {
        padding-top: 0;
    }
    .huts-wrapper {
        padding: 0 20px;
    }
    .huts-title {
        font-size: 32px;
    }
}

@media screen and (max-width: 500px) {
    .huts {
        padding: 0;
    }

    .huts-wrapper {
        padding-left: 15px; /* Verwijder de 120px padding */
        padding-right: 15px;
        margin-left: 0;
        display: block; /* Geen flex meer nodig voor de wrapper op mobiel */
    }

    .swiper {
        overflow: hidden; /* Voorkom dat kaarten buiten de schermrand de pagina breder maken */
    }

    .swiper-slide {
        /* Overschrijf de 420px met de volledige breedte van het scherm minus padding */
        width: 100% !important; 
        transform: translateY(0) !important; /* Zorg dat ze zichtbaar zijn */
        opacity: 1 !important;
    }

    .hut-card {
        width: 100%;
        border-radius: 15px; /* Iets subtielere hoeken op mobiel */
    }

    .hut-info {
        padding: 15px 20px 25px; /* Iets compactere padding */
    }

    .hut-header h3 {
        font-size: 20px; /* Iets kleinere titel voor mobiel */
    }

    .hut-info p {
        font-size: 16px; /* Betere leesbaarheid op kleine schermen */
    }

    .huts-title {
        font-size: 28px;
        margin-bottom: 20px;
        writing-mode: horizontal-tb;
        transform: none;
    }

    .collab-badge {
        width: 50px;
        height: 50px;
        bottom: 15px;
        right: 15px;
    }
}