/* =========================================================================
   Kontakt — forfinet layout: rolig kontaktinfo + formular som elegant kort.
   ========================================================================= */

.contact__grid{
  display:grid;
  grid-template-columns:0.82fr 1.18fr;
  gap:clamp(40px,6vw,110px);
  align-items:start;
}

/* Venstre: kontaktinfo */
.contact__details{display:flex;flex-direction:column;gap:clamp(30px,4vw,48px)}
.contact__block{display:flex;flex-direction:column;gap:.55rem}
.contact__label{
  font-family:var(--fd);
  font-size:.66rem;
  font-weight:300;
  text-transform:uppercase;
  letter-spacing:.28em;
  color:var(--muted);
}
.contact__big{
  font-family:var(--fd);
  font-size:clamp(1.5rem,1.1rem + 1.5vw,2.3rem);
  font-weight:300;
  line-height:1.12;
  width:fit-content;
  transition:opacity .35s var(--e);
}
.contact__big:hover{opacity:.55}
.contact__addr{
  margin:0;
  font-family:var(--fd);
  font-weight:300;
  font-size:clamp(1.6rem,1.2rem + 1.1vw,2.05rem);
  line-height:1.32;
}
/* Åbningstider */
.contact__hours-list{
  margin:0;
  font-family:var(--fd);
  font-weight:300;
  font-size:clamp(1.1rem,.9rem + .5vw,1.35rem);
  line-height:1.5;
  color:var(--ink);
}
.contact__hours-list span{display:block}
.contact__details .arrow-link{margin-top:.5rem}

/* Højre: formular som forfinet kort */
.contact__form-wrap{
  background:var(--pure);
  border:1px solid var(--line);
  padding:clamp(28px,4vw,52px);
}
.contact__form-wrap > .contact__label{
  display:block;
  font-size:clamp(1.5rem,1.15rem + 1.3vw,2.1rem);
  letter-spacing:.01em;
  text-transform:none;
  color:var(--ink);
}

.contact-form{
  display:flex;
  flex-direction:column;
  gap:clamp(20px,2.6vw,30px);
  margin-top:1.6rem;
}
.field{display:flex;flex-direction:column;gap:.55rem}
.field span{
  font-family:var(--fd);
  font-size:.62rem;
  font-weight:300;
  text-transform:uppercase;
  letter-spacing:.24em;
  color:var(--muted);
}
.field input,
.field textarea{
  font-family:var(--fb);
  font-size:1.02rem;
  color:var(--ink);
  background:transparent;
  border:0;
  border-bottom:1px solid var(--line);
  border-radius:0;
  padding:.7em 0;
  width:100%;
  transition:border-color .35s var(--e);
}
.field textarea{resize:vertical;min-height:130px;line-height:1.6}
.field input::placeholder,
.field textarea::placeholder{color:var(--muted)}
.field input:focus,
.field textarea:focus{outline:none;border-bottom-color:var(--ink)}

.contact-form .btn{width:100%;justify-content:center;margin-top:.7rem}

.form-note{
  margin-top:1.4rem;
  padding:1em 1.2em;
  border:1px solid var(--line);
  background:var(--pure);
  font-size:.95rem;
}
.form-note--ok{border-color:var(--ink);color:var(--ink)}
.form-note--error{border-color:#b04a3a;color:#8c3a2d}

@media(max-width:820px){
  .contact__grid{grid-template-columns:1fr;gap:clamp(36px,8vw,56px)}
}

/* Kvittering efter indsendelse */
.contact__success{
  opacity:0;
  transform:translateY(10px);
  transition:opacity .6s var(--e), transform .6s var(--e);
}
.contact__success.is-in{opacity:1;transform:none}

.contact__thanks{
  border:1px solid var(--line);
  background:var(--pure);
  padding:clamp(30px,4vw,48px);
  text-align:left;
}
.contact__thanks-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:46px;
  height:46px;
  border:1px solid var(--line);
  border-radius:50%;
  color:var(--ink);
  margin-bottom:24px;
}
.contact__thanks-icon svg{width:22px;height:22px}
.contact__thanks-kicker{
  display:block;
  margin-bottom:.85rem;
  font-family:var(--fd);
  font-weight:300;
  text-transform:uppercase;
  letter-spacing:.3em;
  font-size:.66rem;
  color:var(--muted);
}
.contact__thanks-title{
  margin:0 0 1rem;
  font-family:var(--fd);
  font-weight:300;
  font-size:clamp(1.7rem,1.3rem + 1.4vw,2.4rem);
  line-height:1.1;
  color:var(--ink);
}
.contact__thanks-text{
  margin:0 0 1.1rem;
  color:var(--ink-soft);
  font-size:1.02rem;
  line-height:1.7;
}
.contact__thanks-mail{
  margin:0;
  font-size:.92rem;
  line-height:1.6;
  color:var(--muted);
}
.contact__thanks-mail [data-success-email]{color:var(--ink)}

.contact-form .btn.is-sending{opacity:.65;cursor:default}

/* Når beskeden er sendt: kun kvitteringen vises */
.contact__form-wrap.is-sent .contact__form-heading,
.contact__form-wrap.is-sent .contact-form{display:none}