/* ==================================================
   ARRANGEMENTEN + RESERVEREN

   Links de uitleg (accordeon, belangrijk, groot
   gezelschap), rechts het formulier dat meescrolt.
   Op tablet en mobiel onder elkaar: eerst de uitleg,
   dan het formulier.
================================================== */

.arrangements__inner {
  display: grid;
  grid-template-columns: minmax(0, 54fr) minmax(0, 46fr);
  align-items: start;
  gap: var(--grid-gap);
}

.arrangements__info {
  display: flex;
  flex-direction: column;
  gap: calc(var(--container-gap) / 1.8);

  padding-top: var(--space-s);
}

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

.arrangements h1 {
  font-size: var(--h2);
}

.booking {
  position: sticky;
  top: var(--content-gap);

  display: flex;
  flex-direction: column;
  gap: var(--content-gap);

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

@media (max-width: 991px) {

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

  .booking {
    position: static;
  }

}


/* ==================================================
   ACCORDEON

   Gewone <details>-elementen: openen en sluiten werkt
   zonder JavaScript. Met name="arrangement" gaat het
   andere item vanzelf dicht. Browsers die het kunnen,
   schuiven het open in plaats van het te laten
   verspringen.
================================================== */

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

  width: 100%;
}

.arrangement__header {
  display: grid;
  grid-template-columns: 1fr auto auto;
  grid-template-areas:
    "title price icon"
    "meta  price icon";
  align-items: center;
  column-gap: var(--space-s);

  padding: var(--space-s);

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

  list-style: none;
  cursor: pointer;

  transition: background-color 0.2s ease;
}

.arrangement__header::-webkit-details-marker {
  display: none;
}

.arrangement__header:hover,
.arrangement[open] .arrangement__header {
  background-color: var(--secondary);
}

.arrangement__header:focus-visible {
  outline: 2px solid var(--black);
  outline-offset: 2px;
}

.arrangement__title {
  grid-area: title;

  font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.5625rem);
}

.arrangement__meta {
  grid-area: meta;

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

.arrangement__price {
  grid-area: price;

  font-size: var(--text-xs);
  font-weight: 700;
  white-space: nowrap;
}

.arrangement__icon {
  grid-area: icon;

  width: 1.75rem;
  height: 1.75rem;

  fill: currentColor;

  transition: transform 0.3s ease;
}

.arrangement[open] .arrangement__icon {
  transform: rotate(180deg);
}

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

  padding-top: var(--space-s);
}

.arrangement__body h3 {
  font-size: var(--h4);
}

.arrangement__body h4 {
  margin-bottom: 0.4em;

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

.arrangement__body a {
  text-decoration: underline;
}

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

@supports (interpolate-size: allow-keywords) {

  .arrangement {
    interpolate-size: allow-keywords;
  }

  .arrangement::details-content {
    block-size: 0;
    overflow: hidden;

    transition: block-size 0.3s ease, content-visibility 0.3s allow-discrete;
  }

  .arrangement[open]::details-content {
    block-size: auto;
  }

}

@media (prefers-reduced-motion: reduce) {

  .arrangement::details-content,
  .arrangement__icon {
    transition: none;
  }

}

@media (max-width: 478px) {

  .arrangement__header {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "title icon"
      "meta  icon"
      "price icon";
  }

}


/* ==================================================
   FOTO'S IN HET ACCORDEON

   Een strook die je met de vinger of de pijlen
   doorschuift. Zonder JavaScript blijft vegen en
   scrollen werken; de pijlen verschijnen pas als
   reserveren.js draait.
================================================== */

.carousel {
  position: relative;

  background-color: #e6e7e8;
}

.carousel__track {
  display: flex;

  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
}

.carousel__track::-webkit-scrollbar {
  display: none;
}

.carousel__track img {
  flex: 0 0 100%;

  width: 100%;
  height: auto;
  aspect-ratio: 1140 / 740;

  object-fit: cover;
  scroll-snap-align: start;
}

.carousel__button {
  position: absolute;
  top: 50%;

  display: grid;
  place-items: center;

  width: 2.5rem;
  height: 2.5rem;
  padding: 0;

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

  border: none;
  border-radius: 50%;
  box-shadow: 0 0.25rem 0.75rem rgb(0 0 0 / 20%);

  cursor: pointer;
  transform: translateY(-50%);
  transition: opacity 0.2s ease;
}

.carousel__button svg {
  width: 1.5rem;
  height: 1.5rem;

  fill: currentColor;
}

.carousel__button:disabled {
  opacity: 0.4;
  cursor: default;
}

.carousel__button--prev {
  left: var(--space-xs);
}

.carousel__button--next {
  right: var(--space-xs);
}

@media (prefers-reduced-motion: reduce) {

  .carousel__track {
    scroll-behavior: auto;
  }

}


/* ==================================================
   RESERVERINGSFORMULIER

   Drie stappen. Met JavaScript krijgt het formulier
   .is-stepped en is alleen de huidige stap zichtbaar.
================================================== */

.reservation {
  display: flex;
  flex-direction: column;
  gap: var(--space-m);

  margin-top: 0;
}

.reservation__progress {
  color: var(--text-muted);
  font-size: var(--text-xs);
}

.reservation__step {
  min-width: 0;
  margin: 0;
  padding: 0;

  border: none;
}

.reservation.is-stepped .reservation__step:not(.is-current) {
  display: none;
}

.reservation__legend {
  margin-bottom: var(--space-s);
  padding: 0;

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

.reservation__legend:focus {
  outline: none;
}

.reservation__fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-s);
}

.reservation__fields > .form__error,
.reservation__group,
.reservation__price,
.reservation__nav {
  grid-column: 1 / -1;
}

.reservation__group {
  margin-top: var(--space-xs);

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

.reservation__group:first-child {
  margin-top: 0;
}

.reservation__price {
  display: flex;
  justify-content: space-between;
  gap: var(--space-s);

  padding-top: 0.6rem;

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

.reservation__price output {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.reservation__price--total {
  margin-top: var(--space-xs);

  font-size: var(--h4);
  font-weight: 700;

  border-top: 2px solid var(--black);
}

.reservation__nav {
  display: flex;
  gap: var(--content-gap);

  margin-top: var(--space-xs);
}

.reservation__nav .btn {
  flex: 1;
}

@media (max-width: 600px) {

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

}