/* Super Stubborn — Contact
   HANDGESCHREVEN (dit blok komt niet uit de mockup).

   Let op: hier staat bijna geen CSS voor het formulier zelf. Dat wordt gethemed
   via zijn eigen design-tokens in de formulierdefinitie (data/seed.json → forms);
   de module zet die als inline CSS-variabelen op het <form>. Alleen wat de module
   niet uit tokens haalt — de typografie van de labels en de knopvorm — wordt hier
   bijgesteld, gescoped onder .ssx-contact zodat andere formulieren op de site er
   niet door veranderen. */

.ssx-contact__grid{
  display:grid;
  gap:var(--ss-sp-8);
}

@media (min-width:900px){
  .ssx-contact__grid{
    grid-template-columns:0.85fr 1.15fr;
    gap:var(--ss-sp-9);
    align-items:start;
  }
}

.ssx-contact__intro{ margin:0; }

/* ---- Gegevens ---- */
.ssx-contact__details{
  margin:var(--ss-sp-7) 0 0;
  display:grid;
  gap:var(--ss-sp-5);
}

.ssx-contact__row{
  display:grid;
  gap:var(--ss-sp-2);
  padding-top:var(--ss-sp-4);
  border-top:1px solid var(--ss-hairline);
}

.ssx-contact__label{ margin:0; color:var(--ss-text-faint); }

.ssx-contact__value{
  margin:0;
  font-family:var(--ss-display);
  font-size:var(--ss-fs-h3);
  font-weight:700;
  letter-spacing:-.01em;
  line-height:1.2;
  color:var(--ss-beige);
  /* Een lang e-mailadres mag afbreken, anders duwt het de kolom open. */
  overflow-wrap:anywhere;
}

/* .ss-link is een micro-caps labelstijl: kleine letters in kapitalen met veel
   letterafstand. Op een e-mailadres leest dat slecht ("HELLO@…") en het maakt de
   gelinkte waarden kleiner dan de niet-gelinkte. Hier dus alleen de
   onderstreping-animatie van .ss-link overnemen, niet de typografie. Inline
   in plaats van inline-flex, anders kan een lang adres niet afbreken. */
.ssx-contact__value .ss-link{
  display:inline;
  font-family:inherit;
  font-size:inherit;
  font-weight:inherit;
  text-transform:none;
  letter-spacing:inherit;
  overflow-wrap:anywhere;
}

.ssx-contact__note{
  margin:var(--ss-sp-6) 0 0;
  color:var(--ss-text-faint);
}

/* ---- Formulier ---- */
.ssx-contact__form-title{
  margin:0 0 var(--ss-sp-6);
  font-family:var(--ss-display);
  text-transform:uppercase;
  font-size:var(--ss-fs-h2);
  font-weight:700;
  letter-spacing:-.01em;
  line-height:1.1;
  color:var(--ss-beige);
}

/* De module geeft het formulier max-width:620px, margin:0 auto en 32px padding —
   bedoeld voor een formulier dat los op een pagina staat. In deze kolom betekent
   het dat de velden 64px naar binnen springen t.o.v. de kop erboven. Hier dus
   neutraliseren, zodat kop, velden en knop op één linkerlijn staan. De
   achtergrond van het formulier is de sectiekleur, dus er valt geen kader weg. */
.ssx-contact .sf-form{
  max-width:none;
  margin:0;
  padding:0;
  border-radius:0;
}

/* Labels in dezelfde micro-caps als de rest van de site. */
.ssx-contact .sf-form-label{
  font-family:var(--ss-body);
  font-size:var(--ss-fs-label);
  text-transform:uppercase;
  letter-spacing:.2em;
  font-weight:700;
}

/* De knop van de module is rechthoekig; op deze site zijn knoppen pillen. */
.ssx-contact .sf-form button,
.ssx-contact .sf-form [type="submit"]{
  border-radius:var(--ss-r-pill);
  text-transform:uppercase;
  letter-spacing:.16em;
  font-weight:600;
  font-size:var(--ss-fs-label);
  padding:.9rem 1.8rem;
  cursor:pointer;
}

.ssx-contact__missing{
  color:var(--ss-orange);
  border:1px solid var(--ss-hairline-accent);
  border-radius:var(--ss-r-md);
  padding:var(--ss-sp-5);
}