/* =========================================================
   Contact

   Twee blokken onder elkaar:

   1. De acties — bellen, appen, mailen. Hele kaarten, geen
      lijstje met tekst erachter. Wie op een telefoon staat
      moet één keer kunnen tikken.

   2. De plek — een foto van de zaak met het adres en de
      tijden ernaast. De kaart komt pas in beeld als je erom
      vraagt en neemt dan de plaats van de foto in.
========================================================= */

.ls-contact__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--space-2xl);
  flex-wrap: wrap;
  margin-bottom: clamp(36px, 4.5vw, 56px);
}

.ls-contact__head .kicker {
  margin-bottom: var(--space-lg);
}

.ls-contact__title {
  font-size: var(--fs-h2);
  max-width: 14ch;
  margin: 0;
}

.ls-contact__title em {
  font-style: normal;
  color: var(--color-accent);
}

.ls-contact__lead {
  max-width: 46ch;
  margin: 0;
  color: var(--color-muted);
}


/* =========================================================
   Acties
========================================================= */

.ls-contact__acties {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-gap);

  list-style: none;
  margin: 0 0 var(--space-gap);
  padding: 0;
}

.ls-contact__actie-item {
  margin: 0;
}

/* Tussen 600 en 900 past het raster op twee kaarten. Bij drie acties
   blijft er dan eentje halfbreed onderaan liggen met een gat ernaast.
   Die laten we de rij afmaken. :last-child:nth-child(odd) pakt precies
   dat geval: bij een even aantal gebeurt er niets. */
@media (min-width: 600px) and (max-width: 900px) {
  .ls-contact__acties > :last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
}

.ls-contact__actie {
  height: 100%;
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);

  padding: var(--space-xl);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  background: var(--color-surface-alt);

  text-decoration: none;
  color: inherit;

  transition:
    border-color var(--dur-base) var(--ease-out),
    background    var(--dur-base) var(--ease-out);
}

@media (hover: hover) {
  a.ls-contact__actie:hover {
    border-color: rgba(207, 181, 59, .45);
    background: var(--color-surface-darker);
  }

  a.ls-contact__actie:hover .ls-contact__actie-pijl {
    transform: translateX(4px);
    color: var(--color-accent);
  }
}

a.ls-contact__actie:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}


/* Pictogram in een goudgetint vlakje */
.ls-contact__icoon-vlak {
  flex: none;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;

  background: rgba(207, 181, 59, .14);
  color: var(--color-accent);
}

.ls-contact__icoon {
  width: 22px;
  height: 22px;
}


.ls-contact__actie-tekst {
  flex: 1;
  min-width: 0;
  display: block;
}

.ls-contact__actie-label {
  display: block;
  font-size: var(--fs-2xs);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--color-muted);
  margin-bottom: var(--space-3xs);
}

.ls-contact__actie-waarde {
  display: block;
  font-family: var(--font-heading);
  font-weight: var(--fw-semi);
  font-size: var(--fs-h5);
  line-height: 1.25;
  color: var(--color-text);

  /* Een lang mailadres mag breken, anders duwt het de kaart uit
     elkaar op een smal scherm. */
  overflow-wrap: anywhere;
}

.ls-contact__actie-hint {
  display: block;
  margin-top: var(--space-2xs);
  font-size: var(--fs-2xs);
  line-height: var(--lh-snug);
  color: var(--color-muted);
}

.ls-contact__actie-pijl {
  flex: none;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  margin-top: 13px;
  color: var(--color-muted);
  transition:
    transform var(--dur-base) var(--ease-out),
    color     var(--dur-base) var(--ease-out);
}

.ls-contact__actie-pijl svg {
  width: 100%;
  height: 100%;
}


/* =========================================================
   De plek
========================================================= */

.ls-contact__plek {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: var(--space-gap);
  align-items: stretch;
}

/* Zonder foto is er niets om naast te staan. */
.ls-contact__plek--solo {
  grid-template-columns: 1fr;
}

@media (max-width: 900px) {
  .ls-contact__plek {
    grid-template-columns: 1fr;
  }
}

.ls-contact__figuur {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius-card);
  background: var(--color-surface-alt);
  min-height: 20rem;
}

/* Alleen onder elkaar een vaste verhouding. Naast de gegevens vult het
   vak de cel: met aspect-ratio rekent het zijn breedte uit de rijhoogte
   en past het nooit precies in zijn kolom. */
@media (max-width: 900px) {
  .ls-contact__figuur {
    aspect-ratio: 16 / 11;
    min-height: 0;
  }
}

.ls-contact__figuur img,
.ls-contact__figuur iframe {
  width: 100%;
  height: 100%;
  display: block;
  border: 0;
}

.ls-contact__figuur img {
  object-fit: cover;
}


.ls-contact__gegevens {
  display: flex;
  flex-direction: column;
  align-items: flex-start;

  padding: var(--space-xl);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  background: var(--color-surface-alt);
}

.ls-contact__plek-titel {
  font-size: var(--fs-h3);
  margin: 0 0 var(--space-sm);
}

.ls-contact__adres {
  margin: 0 0 var(--space-lg);
  color: var(--color-muted);
}


/* Openingstijden — dag links, tijd rechts, met een lijn ertussen */
.ls-contact__tijden {
  width: 100%;
  margin: 0 0 var(--space-md);
}

.ls-contact__tijd {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-md);

  padding-block: var(--space-2xs);
  border-bottom: 1px solid var(--color-border);
  font-size: var(--fs-sm);
}

.ls-contact__tijd:last-child {
  border-bottom: 0;
}

.ls-contact__tijd dt {
  color: var(--color-muted);
}

.ls-contact__tijd dd {
  margin: 0;
  color: var(--color-text);
  text-align: right;
}

.ls-contact__tijden-note {
  margin: 0 0 var(--space-lg);
  font-size: var(--fs-2xs);
  color: var(--color-muted);
}


.ls-contact__knoppen {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);

  /* Duwt de knoppen naar de onderkant van het blok, zodat ze op één
     lijn staan met de onderkant van de foto ernaast. */
  margin-top: auto;
  padding-top: var(--space-md);
}


/* =========================================================
   Smal scherm
========================================================= */

@media (max-width: 600px) {
  .ls-contact__actie {
    padding: var(--space-lg);
  }

  .ls-contact__gegevens {
    padding: var(--space-lg);
  }

  .ls-contact__knoppen .btn {
    flex: 1 1 100%;
    justify-content: center;
  }
}