/* ==================================================
   AANBODPAGINA

   Wordt geladen op /aanbod/minicamping/ en
   /aanbod/vakantiewoning/, want beide pagina's zetten
   hun slug op 'aanbod'.
================================================== */


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

   De eerste foto binnen dezelfde breedte als de rest van
   de pagina, met de titel en een paar kenmerken
   eroverheen. De donkere waas loopt van onder naar boven
   weg, zodat de tekst leesbaar is zonder dat de foto
   verdwijnt.
================================================== */

.offer-hero {
  padding-block: var(--space-s) 0;
}

.offer-hero__inner {
  position: relative;

  display: flex;
  flex-direction: column;
  justify-content: flex-end;

  min-height: clamp(360px, 46vh, 480px);
  padding: var(--space-l);

  background-color: var(--ink);

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

.offer-hero__image {
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;

  object-fit: cover;

  /* iets onder het midden: zo blijft de camping in beeld en niet de lucht */
  object-position: 50% 58%;
}

.offer-hero__inner::after {
  content: "";

  position: absolute;
  inset: 0;

  background: linear-gradient(
    to top,
    color-mix(in srgb, var(--ink) 82%, transparent) 0%,
    color-mix(in srgb, var(--ink) 40%, transparent) 42%,
    color-mix(in srgb, var(--ink) 4%, transparent) 74%
  );
}

.offer-hero__content {
  position: relative;
  z-index: 1;

  /* naast de knop rechtsonder blijven */
  max-width: calc(100% - 10rem);
}

.offer-hero__kicker {
  margin-bottom: var(--content-gap-s);

  color: var(--primary);

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

.offer-hero__title {
  color: var(--white);

  font-size: clamp(2.5rem, 5vw, 4rem);
  line-height: 1.04;
  letter-spacing: -0.025em;
}

.offer-hero__badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--content-gap-s);

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

  list-style: none;
}

.offer-hero__badges li {
  padding: 0.45em 0.9em;

  color: var(--ink);
  background-color: var(--primary);

  border-radius: var(--radius);

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

.offer-hero__all {
  position: absolute;
  right: var(--space-l);
  bottom: var(--space-l);
  z-index: 1;

  padding: 0.6em 1em;

  color: var(--ink);
  background-color: var(--white);

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

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

  cursor: pointer;
}

.offer-hero__all:hover {
  background-color: var(--surface);
}

@media (max-width: 600px) {

  .offer-hero__content {
    max-width: 100%;
  }

  /* onder de kenmerken in plaats van ernaast */
  .offer-hero__all {
    position: static;

    align-self: flex-start;
    margin-top: var(--content-gap-m);
  }

}


/* ==================================================
   FOTOSTRIP

   De overige foto's onder de hero. Klikken opent
   dezelfde weergave als de knop in de hero.
================================================== */

.offer-strip {
  padding-block: var(--space-xs) 0;
}

.offer-strip__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-xs);

  margin: 0;
  padding: 0;

  list-style: none;
}

.offer-strip__button {
  display: block;

  width: 100%;
  padding: 0;

  background: none;
  border: none;
  border-radius: var(--radius);

  overflow: hidden;
  cursor: pointer;
}

.offer-strip__image {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;

  object-fit: cover;

  transition: transform 0.5s ease;
}

.offer-strip__button:hover .offer-strip__image {
  transform: scale(1.04);
}

@media (max-width: 600px) {

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

}


/* ==================================================
   OMSCHRIJVING EN RESERVEREN
================================================== */

.offer__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 30rem);
  align-items: start;
  gap: var(--space-xl);
}

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

/* kop boven de omschrijving */
.offer__lead {
  max-width: 32ch;

  font-size: clamp(1.6rem, 2.8vw, 2.125rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.offer__intro {
  max-width: 62ch;

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

/* het ene ding dat een gast echt moet weten */
.offer__highlight {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--content-gap-xs) var(--space-m);

  margin-top: var(--content-gap-s);
  padding: var(--space-s) var(--space-m);

  background-color: var(--surface);

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

.offer__highlight-title {
  font-weight: 700;
}

.offer__highlight p:last-child {
  flex: 1 1 15rem;

  color: color-mix(in srgb, var(--ink) 78%, transparent);
  font-size: var(--text-small);
}

.offer__block {
  margin-top: var(--space-l);
}

.offer__block h2 {
  margin-bottom: var(--content-gap-m);

  font-size: var(--h4);
}


/* tarieven */

.offer__rates {
  margin: 0;
}

.offer__rate {
  display: flex;
  justify-content: space-between;
  gap: var(--space-m);

  padding-block: var(--content-gap-s);

  border-top: 1px solid var(--border-color-soft);
}

.offer__rate:last-child {
  border-bottom: 1px solid var(--border-color-soft);
}

.offer__rate dt {
  font-weight: 600;
}

.offer__rate dd {
  margin: 0;

  color: var(--ink-muted);
  text-align: right;
}


/* beoordeling */

.offer__rating {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--content-gap-m) var(--space-l);

  margin-top: var(--space-l);
  padding: var(--space-m);

  border: 1px solid var(--border-color-soft);
  border-radius: var(--radius);
}

.offer__rating-score {
  display: flex;
  align-items: baseline;
  gap: 0.3em;
}

.offer__rating-number {
  font-size: var(--h3);
  font-weight: 700;
  line-height: 1;
}

.offer__rating-stars {
  color: var(--secondary);
  letter-spacing: 0.06em;
}

.offer__rating-text {
  flex: 1 1 15rem;

  color: color-mix(in srgb, var(--ink) 78%, transparent);
  font-size: var(--text-small);
}

.offer__rating-text a {
  color: var(--secondary);
  text-decoration: underline;
}

.offer__facilities {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
  gap: var(--content-gap-s) var(--space-l);

  margin: 0;
  padding: 0;

  list-style: none;
}

.offer__facilities li {
  display: flex;
  gap: 0.5em;
}

.offer__facilities li::before {
  content: "✓";

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


/* de kolom die meeloopt tijdens het scrollen */

.offer__reservation {
  position: sticky;
  top: calc(var(--header-height) + var(--space-m));

  background-color: var(--surface);

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

/* de prijs staat als eerste in beeld, groot */

.offer__reservation-head {
  display: flex;
  flex-direction: column;
  gap: var(--content-gap-xs);

  padding: var(--space-m);

  border-bottom: 1px solid var(--border-color-soft);
}

.offer__reservation-head h2 {
  font-size: var(--h4);
}

.offer__price {
  display: flex;
  align-items: baseline;
  gap: 0.4em;
}

.offer__amount {
  font-size: var(--h3);
  font-weight: 700;
  line-height: 1.1;
}

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

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

.offer__reservation-body {
  display: flex;
  flex-direction: column;

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

/* bevestiging na het versturen */

.offer__sent {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--content-gap-s);

  padding-block: var(--content-gap-m);
}

.offer__sent-title {
  font-size: var(--h4);
  font-weight: 700;
}

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

  margin-top: 0;
}

/* kopje boven een groepje velden */
.offer__form-group {
  margin-bottom: calc(var(--content-gap-m) * -0.25);

  color: var(--ink-muted);

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

.offer__form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--content-gap-m);
}

.offer__form-grid .form__field--full {
  grid-column: 1 / -1;
}

.offer__form-note {
  color: var(--ink-muted);

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


/* wat het ongeveer gaat kosten */

.offer__estimate {
  padding: var(--space-s);

  background-color: var(--white);

  border: 1px solid var(--border-color-soft);
  border-radius: var(--radius);
}


.offer__estimate-line {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-s);
}

.offer__estimate-line strong {
  font-size: var(--h4);
}

.offer__estimate-note {
  margin-top: 0.25em;

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

.offer__contact {
  display: flex;
  flex-direction: column;
  gap: var(--content-gap-s);

  margin-top: var(--space-m);
  padding-top: var(--space-m);

  border-top: 1px solid var(--border-color-soft);

  font-style: normal;
}

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

.offer__contact-link {
  display: flex;
  align-items: center;
  gap: 0.6em;
}

.offer__contact-icon {
  flex-shrink: 0;

  width: 1.1em;
  height: 1.1em;

  color: var(--secondary);
}

/*
 * De reserveringskolom is 30rem breed. Blijft er naast
 * die kolom minder dan zo'n 350px over voor de tekst,
 * dan zetten we alles onder elkaar.
 */
@media (max-width: 960px) {

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

  /* onder elkaar heeft meelopen geen zin */
  .offer__reservation {
    position: static;
  }

}


/* ==================================================
   FOTO'S OP WARE GROOTTE
================================================== */

.lightbox {
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  padding: 0;

  background-color: color-mix(in srgb, var(--ink) 95%, transparent);

  border: none;
}

.lightbox::backdrop {
  background-color: rgb(8 29 43 / 95%);
}

.lightbox__figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-s);

  height: 100%;
  margin: 0;
  padding: var(--space-xl) calc(var(--space-xxl) + var(--space-s));
}

.lightbox__image {
  max-width: 100%;
  max-height: 76vh;

  object-fit: contain;

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

.lightbox__caption {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--content-gap-xs);

  color: rgb(255 255 255 / 78%);

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

.lightbox__counter {
  color: rgb(255 255 255 / 50%);
}

.lightbox__close,
.lightbox__nav {
  position: absolute;
  z-index: 1;

  color: var(--white);
  background-color: rgb(255 255 255 / 14%);

  border: none;

  cursor: pointer;
}

.lightbox__close {
  top: var(--space-s);
  right: var(--space-s);

  width: 2.5rem;
  height: 2.5rem;

  background-color: transparent;

  font-size: var(--h3);
  line-height: 1;
}

.lightbox__nav {
  top: 50%;

  width: 2.75rem;
  height: 2.75rem;

  border-radius: 50%;

  font-size: var(--h4);
  line-height: 1;

  translate: 0 -50%;
}

.lightbox__nav--prev {
  left: var(--space-s);
}

.lightbox__nav--next {
  right: var(--space-s);
}

.lightbox__close:hover,
.lightbox__nav:hover {
  background-color: rgb(255 255 255 / 28%);
}