/*
 * contactCta — de witte kaart met het contactformulier.
 *
 * De onderste 30% van de sectie is donkerblauw, zodat de kaart met zijn
 * onderrand op de footer aansluit. Maten 1-op-1 van samdesign.nl (R9).
 */

.contactCta {
  background: linear-gradient(rgba(255, 255, 255, 0) 70%, var(--colorFooter) 0);
}

.contactCtaCard {
  position: relative;
  padding: 73.5px 171px 81px 114px;
  border-radius: 5px;
  background: var(--colorWhite);
  box-shadow: 0 3px 40px rgba(6, 19, 39, 0.08);
}

.contactCtaTitle {
  margin-bottom: 35px;
}

.contactCtaIntro {
  max-width: 509px;
  margin: 0 0 20px;
  font-size: var(--textSize);
  line-height: var(--textLine);
}

/* ------------------------------------------------------------------
   De specialist die uit de kaart steekt
   ------------------------------------------------------------------ */

.contactCtaSpecialist {
  position: absolute;
  top: -68px;
  right: 140px;
  display: flex;
  align-items: flex-end;
  column-gap: 5px;
}

.contactCtaLabel {
  width: 199px;
  height: auto;
  margin-bottom: 45px;
}

.contactCtaPhoto {
  flex: none;
  width: 270px;
  height: 270px;
  border: 11px solid var(--colorWhite);
  border-radius: 100%;
  background: #1b223e;
  box-shadow: 0 3px 10px rgba(70, 70, 70, 0.08);
}

/* ------------------------------------------------------------------
   Het formulier
   ------------------------------------------------------------------ */

.contactFormFields {
  display: flex;
  flex-wrap: wrap;
  margin-inline: -30.5px;
}

.contactFormField {
  flex: 0 0 25%;
  max-width: 25%;
  padding-inline: 30.5px;
  margin-bottom: 20px;
}

.contactFormLabel {
  display: block;
  padding-bottom: 10px;
  font-size: 16px;
  line-height: 19px;
}

.contactFormRequired {
  color: var(--colorPink);
}

.contactFormInput {
  width: 100%;
  height: 40px;
  padding: 0;
  border: 0;
  border-bottom: 1px solid #babcc5;
  border-radius: 0;
  background: var(--colorWhite);
  color: var(--colorNavy);
  font-family: inherit;
  font-size: 13px;
  line-height: 33px;
}

.contactFormInput:focus-visible {
  border-bottom-color: var(--colorNavy);
}

.contactFormFieldError {
  margin: 6px 0 0;
  color: var(--colorPink);
  font-size: 14px;
  line-height: 20px;
}

.contactFormError,
.contactFormDone {
  margin: 0 0 20px;
  font-size: var(--textSize);
  line-height: var(--textLine);
  font-weight: 500;
}

.contactFormError {
  color: var(--colorPink);
}

.contactFormSubmit {
  padding: 15px 52px;
  font-weight: 400;
  letter-spacing: normal;
}

/* Op deze knop staat het pijltje iets ruimer dan op de andere. */
.contactFormSubmit .buttonIcon {
  margin-left: 10px;
}

/*
 * Het honeypot-veld staat buiten beeld en niet op display:none: bots slaan
 * verborgen velden soms juist over.
 */
.contactFormTrap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ==================================================================
   Kleiner dan 1440
   ================================================================== */

@media (max-width: 1175px) {
  .contactCtaSpecialist {
    top: -110px;
    right: -20px;
    transform: scale(0.8);
  }
}

@media (max-width: 1024px) {
  /* Gemeten op samdesign.nl: 70px boven en onder, 40px aan de zijkanten. */
  .contactCtaCard {
    padding: 70px 40px;
  }

  .contactFormField {
    flex-basis: 50%;
    max-width: 50%;
  }
}

@media (max-width: 767px) {
  /*
   * Onder 768px is de kaart op samdesign.nl niet meer zo breed als de pagina
   * maar 400px, gecentreerd, en zonder padding bovenaan — de specialist vult
   * die ruimte. Gemeten: 400@183.5 op 767 en 350@20 op 390.
   */
  /*
   * flex, en niet zomaar: de kaart heeft hier geen padding bovenaan, en dan
   * klapt de negatieve bovenmarge van de specialist samen met de kaart in
   * plaats van hem eruit te tillen. Een flexcontainer klapt geen marges samen,
   * dus steekt de foto boven de kaart uit — precies zoals op samdesign.nl,
   * waar deze kaart ook een flexcontainer is.
   */
  .contactCtaCard {
    display: flex;
    flex-direction: column;
    width: min(400px, 100%);
    margin-inline: auto;
    padding: 0 40px 60px;
  }

  .contactCtaSpecialist {
    position: relative;
    top: 0;
    right: 0;
    justify-content: center;
    column-gap: 25px;
    margin-top: -50px;
    margin-bottom: 20px;
    transform: none;
  }

  .contactCtaLabel {
    width: 140px;
    margin-bottom: 20px;
  }

  .contactCtaPhoto {
    width: min(270px, calc(100% - 140px));
    height: auto;
    aspect-ratio: 1;
  }

  .contactFormField {
    flex-basis: 100%;
    max-width: 100%;
  }

  /*
   * Label en veld zijn hier 15/25 in plaats van 16/19; de ruimte naast een veld
   * blijft wél 30.5px, dus daar staat hier bewust geen kleinere waarde.
   */
  .contactFormLabel,
  .contactFormInput {
    font-size: 15px;
    line-height: 25px;
  }
}

/* ==================================================================
   De donkerblauwe kaart
   ------------------------------------------------------------------
   Dezelfde sectie, andere vorm: geen witte kaart met de specialist maar een
   donkerblauw vlak met de meedraaiende stempel erboven uit, en een formulier
   met velden op een lichte vulling. Zo staat "Daag ons uit!" onderaan
   /over-ons/. Maten 1-op-1 van samdesign.nl (R9), gemeten op 1440, 1024, 767
   en 390px.
   ================================================================== */

/* De donkerblauwe kaart staat plat op de sectie: op samdesign.nl heeft hij, in
   tegenstelling tot de witte, geen slagschaduw. */
.contactCtaBand .contactCtaCard {
  padding: 75px 115px;
  border-radius: 0;
  background: var(--colorNavy);
  box-shadow: none;
}

/* ------------------------------------------------------------------
   De stempel
   ------------------------------------------------------------------ */

/*
 * Een blok zonder hoogte bovenaan de kaart, met de schijf 125px daarboven. Zo
 * steekt de stempel boven de kaart uit zonder iets te verschuiven; de 20px
 * eronder is de ruimte naar de kop.
 */
/*
 * display: flex en niet gewoon block: de negatieve bovenmarge van de schijf zou
 * anders samenklappen met dit blok en de hele kaartinhoud 125px omhoog trekken.
 * Een flexcontainer klapt geen marges samen met zijn items.
 */
.contactCtaBand .contactCtaStamp {
  position: relative;
  display: flex;
  height: 0;
  margin-bottom: 20px;
}

.contactCtaBand .contactCtaStamp .stamp {
  position: relative;
  right: auto;
  bottom: auto;
  width: 185px;
  height: 185px;
  margin: -125px 0 0 auto;
}

.contactCtaBand .contactCtaStamp .stampText {
  width: 185px;
  height: 185px;
}

/* ------------------------------------------------------------------
   Kop en tekst
   ------------------------------------------------------------------ */

.contactCtaBand .contactCtaTitle {
  margin-bottom: 20px;
  color: var(--colorWhite);
}

.contactCtaBand .contactCtaIntro {
  color: var(--colorWhite);
}

/* ------------------------------------------------------------------
   Het formulier
   ------------------------------------------------------------------ */

.contactCtaBand .contactFormFields {
  margin: 0 -10px -15px;
}

.contactCtaBand .contactFormField {
  margin-bottom: 15px;
  padding-inline: 10px;
}

.contactCtaBand .contactFormLabel {
  padding-bottom: 0;
  color: var(--colorWhite);
  font-size: 16px;
  line-height: 33px;
}

/*
 * Geen rand maar een vulling van 5% wit, en de tekst grijsblauw — ook de tekst
 * die de bezoeker zelf typt, precies als op samdesign.nl.
 */
.contactCtaBand .contactFormInput {
  height: auto;
  padding: 18px 0 18px 28px;
  border: 0;
  background: rgba(243, 243, 245, 0.05);
  color: #6e7485;
  font-size: var(--textSize);
  line-height: var(--textLine);
}

.contactCtaBand .contactFormInput:focus-visible {
  outline-offset: 2px;
}

.contactCtaBand .contactFormError,
.contactCtaBand .contactFormDone {
  color: var(--colorWhite);
}

/* ------------------------------------------------------------------
   De verzendknop
   ------------------------------------------------------------------ */

/*
 * Vierkante hoeken, één roze verloop dat blijft staan en een raketje erachter.
 * Geen zwevende stand: deze knop verandert bij hover niet van kleur.
 */
/*
 * De 16px erboven: op samdesign.nl staat tussen de veldenrij en de knop een
 * onzichtbaar reCAPTCHA-veld van 1px met 15px marge eronder. Wij hebben dat
 * veld niet (§15) maar wel de ruimte, want zonder die 16px is de donkerblauwe
 * kaart 16px lager dan daar en staat de knop 16px te hoog.
 */
.contactFormSubmitBand {
  margin-top: 16px;
  padding: 21px 32px;
  border-radius: 0;
  background-image: linear-gradient(90deg, var(--colorPink) 0%, #fc3865 100%);
  color: var(--colorWhite);
  font-weight: 500;
  line-height: 33px;
  letter-spacing: -0.05em;
}

/*
 * Het raketje staat recht en draait niet mee met de pijl van .buttonIcon. De
 * 11px links is 6px ruimte plus de 5px die op samdesign.nl van de witruimte
 * tussen de twee spans komt — zo is de knop even breed als daar.
 */
.contactFormSubmitBand .buttonIcon {
  top: 2px;
  width: 17px;
  height: auto;
  margin-left: 11px;
  transform: none;
}

.contactFormSubmitBand:hover .buttonIcon {
  transform: none;
}

/* ==================================================================
   Kleiner dan 1440
   ================================================================== */

@media (max-width: 767px) {
  /*
   * De donkerblauwe kaart blijft hier zo breed als de sectie: hij krimpt niet
   * naar 400px zoals de witte, want er is geen specialist die daarboven uit
   * moet steken.
   */
  .contactCtaBand .contactCtaCard {
    display: block;
    width: auto;
    margin-inline: 0;
    padding: 50px 41px;
  }

  .contactCtaBand .contactCtaStamp .stamp {
    width: 102px;
    height: 102px;
    margin-top: -95px;
  }

  .contactCtaBand .contactCtaStamp .stampText {
    width: 102px;
    height: 102px;
  }

  .contactCtaBand .contactCtaStamp .stampLogo {
    width: 27px;
    height: 41px;
  }

  /* Het label houdt hier zijn maat; alleen het veld zakt mee met de body. */
  .contactCtaBand .contactFormLabel {
    font-size: 16px;
    line-height: 33px;
  }

  /* De knop loopt hier van rand tot rand van de kaart. */
  .contactCtaBand .contactFormSubmit {
    width: 100%;
  }

  .contactCtaBand .contactFormInput {
    font-size: var(--textSize);
    line-height: var(--textLine);
  }
}