/* ==================================================
   CONTACT

   De sectie vult het scherm met de luchtfoto, met een
   lichtblauwe sluier eroverheen. Daarboven staat een
   raster van drie blokken: de kop linksboven, de witte
   kaart met het formulier rechts over de volle hoogte,
   en daaronder links de plattegrond.

   Onder de 900px vallen die blokken onder elkaar in de
   volgorde waarin ze in de html staan.
================================================== */

.contact-golf {
  position: relative;

  /* houdt de z-index van de achtergrond binnen de sectie */
  isolation: isolate;

  overflow: hidden;
}


/* achtergrond */

.contact-golf__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
}

.contact-golf__bg img {
  width: 100%;
  height: 100%;

  object-fit: cover;
}

/* de sluier haalt de drukte uit de foto */
.contact-golf__bg::after {
  content: "";

  position: absolute;
  inset: 0;

  background-color: color-mix(in srgb, var(--primary) 62%, transparent);
}


/* raster */

.contact-golf__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  gap: var(--space-m);

  align-items: start;
}

.contact-golf__intro {
  grid-column: 1;
  grid-row: 1;
}

.contact-golf__card {
  grid-column: 2;

  /* loopt van de kop tot onder de plattegrond */
  grid-row: 1 / -1;
}

.contact-golf__map {
  grid-column: 1;
  grid-row: 2;

  /* rekt mee tot de onderkant van de witte kaart */
  align-self: stretch;
}


/* kop */

.contact-golf__title {
  font-size: clamp(2.5rem, 1.9rem + 2.6vw, 4.25rem);
}

.contact-golf__lead {
  max-width: 32rem;
  margin-top: var(--content-gap-m);
}


/* de witte kaart */

.contact-golf__card {
  padding: var(--space-l);

  background-color: var(--white);

  border-radius: calc(var(--radius) * 2);
  box-shadow: var(--card-shadow);

  /* zodat het formulier op de breedte van de kaart kan reageren */
  container-type: inline-size;
}

.contact-golf__card-title {
  font-size: var(--h3);
}

.contact-golf__form {
  /* in de kaart is de breedtebeperking van .form niet nodig */
  max-width: none;
  margin-top: var(--space-m);

  /* standaard onder elkaar; twee kolommen alleen als het past */
  grid-template-columns: 1fr;
}

/*
 * Een mediaquery zou naar het scherm kijken, en op een breed
 * scherm staat de kaart nog steeds in een smalle kolom. Deze
 * vraag gaat over de kaart zelf.
 */
@container (min-width: 23rem) {

  .contact-golf__form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

}

.contact-golf__form textarea {
  min-height: 8rem;
}


/* telefoon, mail en adres onder het formulier */

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

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

  border-top: var(--hairline);

  font-style: normal;
}

.contact-golf__detail {
  display: flex;
  align-items: center;
  gap: 0.75em;

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

.contact-golf__detail:hover {
  color: var(--secondary);
}

.contact-golf__icon {
  flex: 0 0 auto;

  width: 1.15em;
  height: 1.15em;

  color: var(--secondary);
}


/* ==================================================
   PLATTEGROND

   Zolang er niet op 'Kaart laden' is geklikt staat er
   alleen deze placeholder en gaat er niets naar Google.
   js/contact.js zet de iframe er daarna in.
================================================== */

.map {
  position: relative;

  height: 100%;
  min-height: 20rem;

  background-color: var(--white);

  border-radius: calc(var(--radius) * 2);
  box-shadow: var(--card-shadow-soft);

  overflow: hidden;
}

.map iframe {
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;

  border: 0;
}

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

  height: 100%;
  padding: var(--space-m);

  text-align: center;
}

.map__pin {
  width: 2rem;
  height: 2rem;

  color: var(--secondary);
}

.map__address {
  font-weight: 600;
}

.map__note {
  max-width: 24rem;

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

.map__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--content-gap-m);

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

.map__load {
  cursor: pointer;
  border: none;
}

.map__link {
  color: var(--secondary);

  font-size: var(--text-small);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}


/* ==================================================
   SMALLER SCHERM
================================================== */

@media (max-width: 900px) {

  .contact-golf__inner {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    gap: var(--space-l);
  }

  .contact-golf__intro,
  .contact-golf__card,
  .contact-golf__map {
    grid-column: 1;
    grid-row: auto;
  }

  .contact-golf__map {
    min-height: 18rem;
  }

}