@charset "utf-8";

/* =========================
   Variabelen & Basis
   ========================= */
:root {
  --blue: #019bf2;
  --orange: #f3ae62;
  --lightblue: #9fcee8;
  --lightestblue: #f2f8fb;
  --darkblue: #000080;
  --space-sm: 1rem;
  --space-md: 1.5rem;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  width: 100vw;
  max-width: 100vw;
  font-family: 'Golos Text', sans-serif;
  background: var(--lightestblue);
  font-size: 1rem;
}

/* =========================
   Grid-layout
   ========================= */
.grid-container {
  display: grid;
  /* 6 kolommen zodat menu, main en rechterkolom vertrouwd blijven;
     speel gerust met de fr-waarden voor jouw perfecte verhoudingen */
  grid-template-columns: 1.7fr 3fr 3fr 3fr 1.2fr 0.8fr;
  grid-template-areas:
    "header header header header header header"
    "menu   main   main   main   right  right"
    "footer footer footer footer footer footer";
  gap: 10px;
  background: #fff;
  width: 100vw;
  margin: 0;
  padding: 0 1.5vw; /* gelijk wit aan beide zijden */
}

.item1 { grid-area: header; }
.item2 { grid-area: menu; }
.item3 { grid-area: main; }
.item5 { grid-area: footer; }

/* Rechterkolom: wrapper die de grid-plek inneemt; kaarten erin stapelen */
.right-col {
  grid-area: right;
  display: grid;
  gap: 10px;
  align-content: start;
}

/* =========================
   Typografie & Elementen
   ========================= */
body, p, li { word-break: break-word; overflow-wrap: break-word; }
p, li { margin-bottom: 0.7em; line-height: 1.5; }

h1 {
  border: 2.5px solid var(--blue);
  background: antiquewhite;
  text-transform: uppercase;
  text-align: center;
  color: var(--blue);
  margin: 0.2em;
  padding: 1em 0;
  border-radius: 1em;
  box-shadow: 0 2px 12px #eee;
}
h2 {
  border: 1px solid var(--blue);
  background: var(--lightestblue);
  text-align: center;
  color: var(--blue);
  margin-bottom: var(--space-sm);
  padding: 0.5em;
}
h3 {
  background: var(--darkblue);
  text-align: center;
  color: white;
  margin-bottom: var(--space-sm);
  padding: 0.5em;
  margin-top: var(--space-sm);
}

h4 { 
  color: #000; 
  margin-bottom: 0.5rem; 
  padding-top: 1em; 
  text-align: left;
  font-size: 1.3em;
}

img { 
  max-width: 100%; 
  height: auto; 
  display: block; 
  padding-inline-end: 0.2rem;
}

/* header-afbeelding onder H1 */
.header-image {
  width: 100%;
  max-width: 800px;  
  height: auto;
  margin: 1rem auto 0 auto; /* centreren + ruimte boven */
  display: block;
  border-radius: 0.8em;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
@media (max-width: 900px) {
  .header-image { max-width: 100%; }
}

/* responsive handmatige regeleindes in H1 */
.mobiel-br { display: none; }
@media (max-width: 425px) { .mobiel-br { display: inline; } }

/* =========================
   Menu (item2)
   ========================= */

.item2 ul { list-style: none; margin: 0; padding: 0; }
.item2 li { margin-bottom: 7px; }

.item2 a {
  display: block;
  padding: 8px;
  background: var(--darkblue);
  color: #fff;
  text-decoration: none;
  transition: background 0.2s;
  border-radius: 4px;           /* optioneel, ziet er netter uit */
}

.item2 a:hover,
.item2 a:focus { background: var(--blue); }

.item2 a[aria-current="page"] {
  background: var(--blue);      /* actieve pagina */
  font-weight: 600;
}


/* =========================
   Main content
   ========================= */
.item3 > p { margin-bottom: 7px; }
.item3 ul { padding-left: 1em; }

/* =========================
   Rechter kolom kaarten
   ========================= */
.aside-card {
  background: var(--orange);
  padding: 15px;
  color: #000;
}
.aside-card ul { padding-left: 1em; padding-top: 1em; }
.aside-card li { padding: 5px; margin-bottom: 5px; }

/* Variant: Last minutes! */
.aside-card.last-minutes {
  background: var(--darkblue);
  color: #fff;
  border-top: 3px solid #fff;
}

/* =========================
   Footer
   ========================= */
.item5 {
  background: var(--lightestblue);
  text-align: center;
  padding-top: 1rem;
}

/* =========================
   Carrousel – basis
   ========================= */
.carousel-container {
  position: relative;
  margin: 0.5rem 0;
  padding: 0;
  overflow: hidden;
}
.carousel-wrapper { margin: 0; }
.carousel-arrow { display: none; } /* standaard uit; mobiel/tablet aan */

/* “Fietsenplekje” altijd volledig tonen */
img[alt="Fietsenplekje"] {
  object-fit: contain !important;
  background: #fff;
}

/* =========================
   Desktop (≥901px)
   ========================= */

@media (min-width: 901px) {
  .carousel-wrapper.section-woonruimte-landscape,
  .carousel-wrapper.section-keuken-landscape,
  .carousel-wrapper.section-slaapkamers-landscape,
  .carousel-wrapper.section-badkamer-landscape,
  .carousel-wrapper.section-buiten-landscape,
  .carousel-wrapper.section-woonruimte-portrait,
  .carousel-wrapper.section-keuken-portrait,
  .carousel-wrapper.section-slaapkamers-portrait,
  .carousel-wrapper.section-badkamer-portrait,
  .carousel-wrapper.section-buiten-portrait,
  .carousel-wrapper.gallery-landscape,
  .carousel-wrapper.gallery-portrait {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: max-content;
    gap: 0;
    margin: 1rem 0;
    overflow-x: visible;
  }

 

  /* gelijke hoogte op desktop voor gallery’s */
  .carousel-wrapper.gallery-landscape a img,
  .carousel-wrapper.gallery-portrait a img {
    height: 260px;      /* pas gerust aan (200–260) */
    width: auto;
    object-fit: cover;
    border-radius: 0.6em;
    box-shadow: 0 2px 6px #ddd;
  }

  /* sticky rechterkolom */
  .right-col {
    position: sticky;
    top: 20px;
    align-self: start;
    height: fit-content;
    z-index: 1;
  }

  /* pijlen weg op desktop */
  .carousel-arrow { display: none !important; }
  .carousel-container { padding: 0; }
  .carousel-wrapper { overflow-x: visible !important; }
}

/* =========================
   Tablet (601–900px)
   ========================= */
/* Meerdere naast elkaar met auto-fit; swipe mogelijk */
@media (max-width: 900px) and (min-width: 601px) {
  .grid-container {
    grid-template-columns: 1fr;
    grid-template-areas:
      "header"
      "menu"
      "main"
      "right"
      "footer";
    padding: 0;
  }

  .grid-container > div,
  .right-col {
    padding: 0.7em;
    width: 100vw;
    max-width: 100vw;
  }

  h1, h2, h3 {
    font-size: 1.3em;
    margin: 0.7em 0.2em;
    padding: 0 0.3em;
  }

  .carousel-container { padding: 0 1rem; margin: 0.5rem 0; }

  .carousel-wrapper.section-keuken-portrait,
  .carousel-wrapper.section-slaapkamers-portrait,
  .carousel-wrapper.section-badkamer-portrait,
  .carousel-wrapper.section-buiten-portrait,
  .carousel-wrapper.gallery-portrait {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 0 !important;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
  }

  .carousel-wrapper.section-woonruimte-landscape,
  .carousel-wrapper.section-keuken-landscape,
  .carousel-wrapper.section-slaapkamers-landscape,
  .carousel-wrapper.section-badkamer-landscape,
  .carousel-wrapper.section-buiten-landscape,
  .carousel-wrapper.gallery-landscape {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0 !important;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
  }

  .carousel-wrapper a { scroll-snap-align: start; }

  /* gelijke hoogte tablet */
  .carousel-wrapper a img {
    height: 240px;
    width: 100%;
    object-fit: cover;
    border-radius: 0.6em;
    box-shadow: 0 2px 6px #ddd;
  }

  /* sticky uit op tablet */
  .right-col { position: static; top: auto; }
}

/* =========================
   Klein mobiel (≤600px)
   ========================= */
/* Echte carrousel: flex + scroll-snap, zodat er altijd te swipen valt */
@media (max-width: 600px) {
  .grid-container {
    grid-template-columns: 1fr;
    grid-template-areas:
      "header"
      "menu"
      "main"
      "right"
      "footer";
    padding: 0;
  }

  .carousel-container { padding: 0 0.3rem; }
  .carousel-wrapper,
  .carousel-wrapper.gallery-landscape,
  .carousel-wrapper.gallery-portrait {
    display: flex !important;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 0;
  }

  /* elke slide ~85% van het schermbreed – altijd swipe */
  .carousel-wrapper a {
    flex: 0 0 85%;
    scroll-snap-align: start;
  }

  /* uniforme hoogte klein mobiel */
  .carousel-wrapper a img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    border-radius: 0.6em;
    box-shadow: 0 2px 6px #ddd;
  }

  /* pijlen zichtbaar op klein scherm */
  .carousel-arrow {
    display: block !important;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0,0,0,0.4);
    color: #fff;
    border: 0;
    padding: 0.5rem;
    cursor: pointer;
    z-index: 10;
  }
  .carousel-arrow.left  { left: 0.5rem; }
  .carousel-arrow.right { right: 0.5rem; }

  /* sticky uit op mobiel */
  .right-col { position: static; top: auto; }

  /* iets grotere H1 op zeer smal scherm voorkomt ‘schreeuwerig’ beeld */
  h1 { font-size: 1.2em; }

  .item3, .right-col {
    padding: 0 10px;
  }
}

/* Video: responsief 16:9 */
.video-container {
  width: 100%;
  max-width: 900px;           /* pas aan naar smaak (bv. 800–1000px) */
  aspect-ratio: 16 / 9;       /* moderne, simpele manier */
  margin-block: 1.5rem;
  position: relative;
  border-radius: 12px;
  overflow: hidden;           /* rond hoeken werkt dan ook voor de video */
  box-shadow: 0 6px 22px rgba(0,0,0,0.12);
  background: #000;           /* geen wit flitsen vóór embed laadt */
}

.video-container .featured-video {
  position: absolute;
  inset: 0;                   /* top/right/bottom/left: 0 */
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* Tablet: iets compacter als je wilt */
@media (max-width: 900px) {
  .video-container { max-width: 100%; margin: 0.75rem auto; }
}

/* Klein mobiel: extra ruimte aan zijkanten, als je tekst al strak staat */
@media (max-width: 600px) {
  .video-container { margin: 0.75rem 10px; }
}

/* Optioneel: een onderschrift onder de video */
.video-caption {
  max-width: 900px;
  margin: 0.4rem auto 1rem auto;
  text-align: center;
  font-size: 0.95rem;
  color: #444;
}

/* =========================
   OVERRIDES: portrait carrousels
   ========================= */

/* TABLET (601–900px): portrait = hele foto tonen (contain) */
@media (min-width: 601px) and (max-width: 900px) {
  .carousel-wrapper.section-woonruimte-portrait a img,
  .carousel-wrapper.section-keuken-portrait a img,
  .carousel-wrapper.section-slaapkamers-portrait a img,
  .carousel-wrapper.section-badkamer-portrait a img,
  .carousel-wrapper.section-buiten-portrait a img {
    height: 260px;     /* iets hoger dan je generieke 240px */
    width: 100%;
    object-fit: cover;  /* hele foto zichtbaar (geen afsnijden) */
    background: #fff;     /* nette achtergrond achter evt. randen */
  }
}

/* MOBIEL (≤600px): portrait ruimer en 'contain'; landscape blijft cover via je generieke regels */
@media (max-width: 600px) {
  .carousel-wrapper.section-woonruimte-portrait a img,
  .carousel-wrapper.section-keuken-portrait a img,
  .carousel-wrapper.section-slaapkamers-portrait a img,
  .carousel-wrapper.section-badkamer-portrait a img,
  .carousel-wrapper.section-buiten-portrait a img {
    height: 240px;     /* groter dan 180px generiek, oogt minder “afgeknipt” */
    width: 100%;
    object-fit: cover;
    background: #fff;
  }


  /* Portrait-slides iets smaller dan landscape zodat swipen lekker voelt
     en je niet té grote witte randen krijgt bij contain */
  .carousel-wrapper.section-woonruimte-portrait a,
  .carousel-wrapper.section-keuken-portrait a,
  .carousel-wrapper.section-slaapkamers-portrait a,
  .carousel-wrapper.section-badkamer-portrait a,
  .carousel-wrapper.section-buiten-portrait a {
    flex: 0 0 48%; /* i.p.v. generieke 85% (staat in je CSS) */
  }
}
@media (min-width: 2560px) {
    html, body {
    font-size: 1.2rem;
  }
}

@media (min-width: 1024px) {
  .carousel-wrapper[class*="-landscape"] {
    display: flex;
    flex-wrap: nowrap;
    gap: 1rem;
    margin: 1rem 0;
    overflow-x: auto;
  }

  .carousel-wrapper[class*="-landscape"] img {
    width: auto;
    max-height: 220px;
    height: auto;
    object-fit: cover;
  }
}
@media (min-width: 1024px) {
  .carousel-wrapper[class*="-portrait"] {
    display: flex;
    flex-wrap: nowrap;
    gap: 1rem;
    margin: 1rem 0;
    overflow-x: auto;
  }

  .carousel-wrapper[class*="-portrait"] img {
    width: auto;
    max-height: 260px;
    height: auto;
    object-fit: cover;
    border-radius: 0.6em;
    box-shadow: 0 2px 6px #ddd;
  }
}

@media (min-width: 901px) {
  .carousel-wrapper.section-buiten-landscape {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.75rem !important;
    overflow-x: visible;
  }

  .carousel-wrapper.section-buiten-landscape a img {
    height: 220px;
    width: 100%;
    object-fit: cover;
    border-radius: 0.6em;
    box-shadow: 0 2px 6px #ddd;
  }
}

@media (min-width: 1024px) {
  .carousel-wrapper.section-buiten-landscape {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: auto;
    gap: 0.75rem;
  }

  .carousel-wrapper.section-buiten-landscape a:nth-child(1) {
    grid-column: 1;
    grid-row: 1;
  }

  .carousel-wrapper.section-buiten-landscape a:nth-child(2) {
    grid-column: 2;
    grid-row: 1;
  }

  .carousel-wrapper.section-buiten-landscape a:nth-child(3) {
    grid-column: 3;
    grid-row: 1;
  }

  .carousel-wrapper.section-buiten-landscape a:nth-child(4) {
    grid-column: 1 / 2;
    grid-row: 2;
  }

  .carousel-wrapper.section-buiten-landscape a:nth-child(5) {
    grid-column: 2 / 3;
    grid-row: 2;
  }

  .carousel-wrapper.section-buiten-landscape img {
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 0.6em;
    box-shadow: 0 2px 6px #ddd;
  }
}
.reserveer-button {
  display: inline-block;
  background-color: #2a7a2e; /* donkergroen */
  color: #fff;
  text-decoration: none;
  padding: 10px 20px;
  margin-bottom: 10px;
  border-radius: 5px;
  font-weight: bold;
  text-align: center;
  transition: background-color 0.3s ease;
}

.reserveer-button:hover {
  background-color: #246524; /* iets donkerder bij hover */
}
.last-minutes {
  text-align: center; /* zorgt dat alles binnen dit vak gecentreerd staat */
}

.last-minutes .reserveer-button {
  display: inline-block; /* knop blijft een nette 'blok'-knop */
  margin: 0 auto 10px auto; /* boven/onder 0–10px ruimte, links/rechts auto = midden */
}