/* ==================================================
   HOMEPAGE

   Wordt automatisch geladen op de homepage, omdat de
   header /css/<slug>.css inleest en de slug van de
   webroot 'home' is. Dezelfde regel geldt voor
   /contact/ -> css/contact.css.

   Alleen wat écht bij deze pagina hoort. Wat op
   meerdere pagina's terugkomt, hoort in global.css.
================================================== */

:root {
  /* hoever de foto's onder de hero uit steken */
  --hero-overlap: min(300px, 25vw);

  /* hoeveel de linkerfoto lager staat dan de rechter */
  --hero-offset: var(--space-xxl);
}


/* ==================================================
   INTRO

   Het kopblok dat boven de hero én boven de
   uitgelichte punten staat: bovenkop en kop links,
   korte inleiding rechts.
================================================== */

.intro {
  display: grid;
  grid-template-columns: 2fr 1fr;
  align-items: center;
  gap: var(--space-l);
}

.intro__heading-wrapper {
  display: flex;
  flex-direction: column;
  gap: var(--content-gap-m);
}

.intro__kicker {
  font-size: var(--text-small);
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: 0.095em;
}

.intro__heading {
  color: var(--ink);

  /* ook de h2 van een sectie krijgt hier het formaat van een h1 */
  font-size: var(--h1);
}

@media (max-width: 900px) {

  .intro {
    grid-template-columns: 1fr;
  }

}


/* ==================================================
   HERO

   Boven het intro-blok, daaronder twee foto's waarvan
   de linker een stuk lager begint. De fotogroep steekt
   met een negatieve marge onder de sectie uit. Wat
   erop volgt krijgt die ruimte er in padding weer bij,
   zodat de tekst niet onder de foto's verdwijnt.
================================================== */

.hero {
  gap: var(--space-xl);

  padding-bottom: 0;
}

.hero + * {
  padding-top: calc(var(--space-xxl) + var(--hero-overlap));
}

/* is de hero het laatste blok, dan houdt de footer zelf afstand */
main > .hero:last-child {
  padding-bottom: var(--hero-overlap);
}

.hero__images {
  position: relative;
  z-index: 1;

  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-l);

  margin-bottom: calc(var(--hero-overlap) * -1);
}

.hero__figure {
  margin: 0;
}

.hero__figure--offset {
  margin-top: var(--hero-offset);
}

.hero__image {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 3.5;

  object-fit: cover;

  border-radius: var(--radius);
}

@media (max-width: 600px) {

  .hero__images {
    gap: var(--space-m);
  }

  .hero__figure--offset {
    margin-top: calc(var(--hero-offset) / 2);
  }

}


/* ==================================================
   UITGELICHT

   Vier korte punten naast elkaar. Deze sectie heeft
   een grijze ondergrond en de hero een witte: de
   foto's uit de hero hangen over die grens heen, en
   dat verschil maakt de overlap zichtbaar. De witte
   kaartjes komen daar bovenop.
================================================== */

.features {
  gap: var(--space-xl);

  background-color: var(--surface);
}

.features__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-l);

  margin: 0;
  padding: 0;

  list-style: none;
}

.feature-card {
  display: flex;
  flex-direction: column;
  gap: var(--content-gap-m);

  padding: var(--space-l);

  background-color: var(--white);

  border-radius: var(--radius);
  box-shadow: var(--card-shadow);
}

.feature-card__icon {
  width: 2.5em;
  height: 2.5em;

  color: var(--ink);
}

.feature-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--content-gap-s);
}

.feature-card__heading {
  color: var(--ink);

  /* vier kolommen naast elkaar zijn smal: iets kleiner dan een gewone h3 */
  font-size: var(--h4);
}

@media (max-width: 900px) {

  .features__grid {
    grid-template-columns: repeat(2, 1fr);
  }

}

@media (max-width: 600px) {

  .features__grid {
    grid-template-columns: 1fr;
  }

}


/* ==================================================
   FOTOSTROOK

   Twee rijen van vier foto's, elk met een eigen
   verhouding en kolombreedte. De rijen zijn een stukje
   breder dan de container en staan iets naar links, zodat
   de buitenste foto's aan weerskanten van het beeld af
   lopen. Onder de 900px worden het per rij twee keer twee
   foto's.
================================================== */

.gallery {
  gap: var(--space-xs);

  /* de rijen steken buiten de container: nooit een schuifbalk */
  overflow-x: clip;
}

.gallery__inner {
  /* de galerij loopt door tot de sectiepadding, dus breder
     dan de gewone container */
  max-width: none;

  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.gallery__row {
  --bleed: 2em;

  display: grid;
  gap: var(--space-xs);

  width: calc(100% + var(--bleed));

  translate: calc(var(--bleed) / -2) 0;
}

.gallery__row--one {
  grid-template-columns: 0.75fr 1.5fr 1fr 0.5fr;
  align-items: end;
}

.gallery__row--two {
  grid-template-columns: 0.5fr 1fr 1.5fr 0.75fr;
}

.gallery__image {
  width: 100%;
  height: auto;
  aspect-ratio: var(--ratio, 1 / 1);

  object-fit: cover;

  border-radius: var(--radius);
}

.gallery__row--one .gallery__image:nth-child(2) {
  --ratio: 16 / 9;
}

.gallery__row--one .gallery__image:nth-child(3) {
  --ratio: 6 / 4;
}

.gallery__row--two .gallery__image:nth-child(2) {
  --ratio: 6 / 4;
}

.gallery__row--two .gallery__image:nth-child(3) {
  --ratio: 16 / 9;
}

@media (max-width: 900px) {

  .gallery__row {
    grid-template-columns: repeat(5, 1fr);
  }

  .gallery__row .gallery__image:nth-child(1) {
    --ratio: 1 / 1;
    grid-column: 1 / 3;
  }

  .gallery__row .gallery__image:nth-child(2) {
    --ratio: 16 / 10;
    grid-column: 3 / 6;
  }

  .gallery__row .gallery__image:nth-child(3) {
    --ratio: 16 / 10;
    grid-row: 2;
    grid-column: 1 / 4;
  }

  .gallery__row .gallery__image:nth-child(4) {
    --ratio: 1 / 1;
    grid-row: 2;
    grid-column: 4 / 6;
  }

}

/* ==================================================
   AANBOD

   Twee kaarten naast elkaar met de foto bovenaan en de
   knoppen onderaan uitgelijnd, ook als de ene kaart meer
   voorzieningen heeft dan de andere. Het raster telt zelf
   uit wanneer de kaarten onder elkaar moeten: onder de
   848px past er nog maar één naast elkaar.
================================================== */

.offers {
  gap: var(--space-xl);

  background-color: var(--surface);
}


/* kop van de sectie */

.offers__header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-m) var(--space-xl);

  padding-bottom: var(--space-m);

  border-bottom: 1px solid rgb(8 29 43 / 14%);
}

.offers__kicker {
  margin-bottom: var(--content-gap-xs);

  color: var(--ink-muted);

  font-size: var(--text-small);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.offers__heading h2 {
  font-size: var(--h2);
  line-height: 1.05;
  letter-spacing: -0.025em;
}

.offers__intro {
  flex: 0 1 24rem;

  color: var(--ink-muted);
  line-height: 1.6;
}


/* het raster */

.offers__grid {
  display: grid;
  /* min(25rem, 100%): op een smal scherm mag de kaart smaller
     dan 25rem worden, anders loopt de pagina over */
  grid-template-columns: repeat(auto-fit, minmax(min(25rem, 100%), 1fr));
  align-items: stretch;
  gap: var(--space-l);

  margin: 0;
  padding: 0;

  list-style: none;
}


/* de kaart */

.offer-card {
  display: flex;
  flex-direction: column;

  background-color: var(--white);

  border-radius: 6px;
  box-shadow: var(--card-shadow-soft);

  overflow: hidden;
}

.offer-card__image {
  width: 100%;
  height: 16.25rem;

  object-fit: cover;
}

.offer-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;

  padding: var(--space-m) var(--space-m) var(--space-l);
}


/* titel met het type verblijf ernaast */

.offer-card__title {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--content-gap-xs) var(--space-s);
}

.offer-card__title h3 {
  letter-spacing: -0.015em;
}

.offer-card__type {
  color: var(--ink-muted);
  font-size: var(--text-small);
}


/* prijs */

.offer-card__price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--content-gap-xs) var(--content-gap-s);

  margin-top: var(--content-gap-l);
}

.offer-card__amount {
  font-size: var(--h3);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.offer-card__unit {
  color: var(--ink-muted);
}

.offer-card__season {
  margin-left: auto;
  padding: 0.35em 0.8em;

  color: var(--secondary);
  background-color: var(--surface);

  border-radius: 999px;

  font-size: var(--text-small);
  font-weight: 600;
}

.offer-card__included {
  margin-top: var(--content-gap-xs);

  color: var(--ink-muted);
  font-size: var(--text-small);
}

.offer-card__text {
  margin-top: var(--content-gap-l);

  color: color-mix(in srgb, var(--ink) 80%, transparent);
  line-height: 1.65;
}


/* voorzieningen */

.offer-card__facilities {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr));
  gap: var(--content-gap-s) var(--space-m);

  margin: var(--content-gap-l) 0 0;
  padding: var(--content-gap-l) 0 0;

  list-style: none;

  border-top: var(--hairline);
}

.offer-card__facilities li {
  display: flex;
  align-items: baseline;
  gap: 0.5em;

  font-size: var(--text-small);
}

.offer-card__facilities li::before {
  content: "✓";

  color: var(--secondary);
  font-weight: 700;
}


/* knoppen onderaan, op gelijke hoogte tussen de kaarten */

.offer-card__actions {
  margin-top: auto;
  padding-top: var(--space-m);
}

.offer-card__buttons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--content-gap-m);
}

.offer-card__button {
  flex: 1 1 12rem;

  padding: 0.8em 1.2em;

  font-weight: 600;
}

.offer-card__note {
  margin-top: var(--content-gap-m);

  color: var(--ink-muted);
  font-size: var(--text-small);
}


/* ==================================================
   RECENSIES

   Kaartjes die uitwaaieren over de breedte. Een lange
   recensie staat op drie regels en klapt open met
   'Lees meer'. Dat gaat met een verborgen checkbox, dus
   het werkt ook als het JavaScript niet laadt.
================================================== */

.reviews {
  gap: var(--space-xl);
}

.reviews__intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--content-gap-m);
}

.reviews__heading {
  max-width: 40ch;

  color: var(--ink);
  text-align: center;
}

.reviews__grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-l);

  margin: 0;
  padding: 0;

  list-style: none;
}

.review-card {
  display: flex;
  flex-direction: column;
  flex: 1 1 21%;
  gap: var(--content-gap-s);

  min-width: 16rem;
  padding: var(--space-m);

  background-color: var(--surface);

  border-radius: var(--radius);
}

.review-card__text {
  line-height: 1.8;
}

.review-card__text--clamped {
  --lines: 3;

  max-height: calc(var(--lines) * 1em * 1.8);

  overflow: hidden;
}

.review-card__toggle:checked ~ .review-card__text--clamped {
  max-height: none;
}


/* de knop zelf: de checkbox ernaast is verborgen */

.review-card__more {
  align-self: flex-start;

  color: var(--secondary);

  font-size: var(--text-small);
  font-weight: 700;

  cursor: pointer;
}

.review-card__more:hover {
  text-decoration: underline;
}

.review-card__less-label,
.review-card__toggle:checked ~ .review-card__more .review-card__more-label {
  display: none;
}

.review-card__toggle:checked ~ .review-card__more .review-card__less-label {
  display: inline;
}

/* de verborgen checkbox kan focus krijgen: laat dat op de knop zien */
.review-card__toggle:focus-visible ~ .review-card__more {
  outline: 2px solid var(--secondary);
  outline-offset: 2px;
}


/* de naam sluit aan op de tekst; kaarten die door een
   uitgeklapte buur meegroeien houden de ruimte onderaan */

.review-card__name {
  padding-top: var(--content-gap-xs);

  font-style: italic;
}

@media (max-width: 600px) {

  .reviews__intro {
    align-items: flex-start;
  }

  .reviews__heading {
    text-align: left;
  }

}