/*
 * Contact pagina — Junto Media
 * Alleen classes die uniek zijn aan de contactpagina.
 */

/* ==========================================================================
 * HERO — Contact variant
 * ========================================================================== */
.hero--contact {
  display: block;
  min-height: auto;
  padding: 100px 0 80px;
  border-bottom: 1px solid var(--border);
  position: relative;
  overflow: hidden;
}
.hero--contact .hero__inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--pad);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}
.hero--contact .hero-headline {
  font-size: clamp(52px, 7vw, 96px);
  line-height: 0.92;
  letter-spacing: -3px;
  margin-bottom: 32px;
}
.hero--contact .hero-sub {
  font-size: 17px;
  line-height: 1.8;
  color: var(--text-subtle);
  max-width: 440px;
  margin-top: 32px;
}
.hero--contact .hero-sub strong {
  color: var(--text);
}
.hero--contact .hero-img {
  display: none;
}
.hero--contact .hero-img::before,
.hero--contact .hero-img::after {
  display: none;
}

/* ==========================================================================
 * INTENTIE KAARTEN
 * ========================================================================== */
.intentie-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 16px;
}
.intentie-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2px;
}
.intentie-card {
  /* Button reset (was div) */
  width: 100%;
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  text-align: left;
  border-radius: 0;
  /* Component styling */
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 28px 32px;
  background: var(--dark-card);
  border: 1px solid var(--border);
  cursor: pointer;
  transition: background 0.3s, border-color var(--t-base);
  border-left: 3px solid transparent;
}
.intentie-card:hover {
  background: var(--dark2);
}
.intentie-card.active {
  border-left-color: var(--pink);
  background: var(--dark2);
}
.intentie-card-left {
  display: flex;
  align-items: center;
  gap: 20px;
}
.intentie-num {
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 900;
  color: var(--text-faint);
  width: 24px;
  flex-shrink: 0;
}
.intentie-card.active .intentie-num {
  color: var(--pink);
}
.intentie-title {
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 900;
  letter-spacing: -0.3px;
  color: var(--muted5);
  transition: color var(--t-fast);
}
.intentie-card.active .intentie-title {
  color: var(--text);
}
.intentie-card:hover .intentie-title {
  color: var(--text-muted);
}
.intentie-sub {
  font-size: 13px;
  color: var(--muted3);
  margin-top: 4px;
  transition: color var(--t-fast);
}
.intentie-card.active .intentie-sub {
  color: var(--muted5);
}
.intentie-arrow {
  font-size: 20px;
  color: var(--text-faint);
  transition: color 0.3s, transform var(--t-base);
}
.intentie-card.active .intentie-arrow {
  color: var(--pink);
  transform: translateX(4px);
}

/* ==========================================================================
 * FORMULIER SECTIE
 * ========================================================================== */
.form-sectie {
  padding: 80px 0;
  border-bottom: 1px solid var(--border);
}
.form-inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--pad);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: start;
}
.form-lbl {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--pink);
  margin-bottom: 12px;
  display: block;
}
.form-title {
  font-family: var(--font-heading);
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 900;
  letter-spacing: -1px;
  line-height: 1.1;
  margin-bottom: 16px;
}
.form-desc {
  font-size: 15px;
  color: var(--muted5);
  line-height: 1.7;
  margin-bottom: 40px;
  max-width: 360px;
}

/* Contactinfo links */
/* Geen gap tussen de blokken: de padding van elk blok verzorgt de ruimte al,
   en een gap valt er aan de ONDERkant nog eens bovenop. Dat gaf 20px boven de
   inhoud en 36px eronder, waardoor alleen het laatste blok (met een eigen
   onderrand en dus geen gap erachter) gecentreerd oogde. Nu overal 20/20. */
.contact-blokken {
  display: flex;
  flex-direction: column;
}
.contact-blok {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 20px 0;
  border-top: 1px solid var(--border);
}
.contact-blok:last-child {
  border-bottom: 1px solid var(--border);
}
.contact-blok-lbl {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-faint);
}
.contact-blok-val {
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  text-decoration: none;
  transition: color var(--t-fast);
  display: inline-block;
}
.contact-blok-val:hover {
  color: var(--pink);
}

/* Honeypot: verborgen voor mensen, zichtbaar voor bots. Bewust geen
   display:none of hidden — daar kijken de betere bots overheen. Uit de
   documentstroom halen werkt beter en houdt het veld toch onbereikbaar. */
.jm-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Formulier velden */
.field-panel {
  display: none;
  flex-direction: column;
  gap: 2px;
}
.field-panel.active {
  display: flex;
}
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.form-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}
.form-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--muted);
}
.form-input {
  background: var(--dark-card);
  border: 1px solid var(--muted2);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 15px;
  padding: 14px 20px;
  outline: none;
  transition: border-color 0.25s, box-shadow 0.25s;
  width: 100%;
  border-radius: 0;
}
.form-input:focus {
  border-color: var(--pink);
  box-shadow: 0 0 0 3px rgba(196,0,88,0.1);
}
.form-input:hover:not(:focus) {
  border-color: #3a3a3a;
}
.form-input::placeholder {
  color: var(--muted4);
}
.form-textarea {
  resize: vertical;
  min-height: 120px;
}
.form-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%23666' d='M5 6L0 0h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 20px center;
  cursor: pointer;
}
.btn-submit {
  background: var(--pink);
  color: #fff;
  padding: 18px 40px;
  border: none;
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: pointer;
  width: 100%;
  transition: transform 0.2s, box-shadow var(--t-fast);
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 8px;
}
.btn-submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(196,0,88,0.35);
}
.btn-submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* Inline error feedback boven submit knop */
.form-error {
  display: none;
  padding: 14px 18px;
  margin-bottom: 16px;
  background: rgba(220, 38, 38, 0.08);
  border-left: 3px solid #dc2626;
  color: #fca5a5;
  font-size: 14px;
  line-height: 1.5;
}
.form-error.show {
  display: block;
}
.is-hybrid .form-error {
  background: rgba(220, 38, 38, 0.06);
  color: #b91c1c;
}

.form-meta-tekst {
  font-size: 11px;
  color: var(--text-faint);
  margin-top: 12px;
  text-align: center;
}

/* Succes state */
.form-success {
  display: none;
  padding: var(--section-pad-y-sm) 0;
  text-align: center;
}
.form-success.show {
  display: block;
}
.success-ring {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  border: 2px solid var(--pink);
  background: rgba(196,0,88,0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 32px;
}
.success-ring svg {
  width: 30px;
  height: 30px;
  stroke: var(--pink);
  fill: none;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 40;
  stroke-dashoffset: 40;
  transition: stroke-dashoffset 0.7s ease var(--t-fast);
}
.success-ring svg.animate {
  stroke-dashoffset: 0;
}
.success-title {
  font-family: var(--font-heading);
  font-size: 30px;
  font-weight: 900;
  letter-spacing: -1px;
  margin-bottom: 12px;
}
.success-title span {
  color: var(--pink);
}
.success-sub {
  font-size: 15px;
  color: var(--muted5);
  line-height: 1.7;
  max-width: 400px;
  margin: 0 auto;
}

/* ==========================================================================
 * TEAM + STATUS
 * ========================================================================== */
/* Kop-rij van de contactgegevens-sectie: avatars, tekst en statuspill.
   Geen space-between meer: de pill hoort bij de tekst en stond anders aan de
   andere kant van het scherm (720px ertussen op 1440px breed). */
.contact-team {
  max-width: var(--max);
  margin: 0 auto 56px;
  padding: 0 var(--pad);
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
}
.team-blok {
  display: flex;
  align-items: center;
  gap: 16px;
}
.team-avatars {
  display: flex;
}
.team-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid var(--dark);
  margin-left: -10px;
}
.team-avatar:first-child {
  margin-left: 0;
}
.team-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Fallback: als geen aparte avatar is geüpload en we de full-body foto
   tonen, schalen we naar gezicht. Bij dedicated avatar (vierkant) is dit
   niet nodig — die wordt 1:1 weergegeven. */
.team-avatar--full img {
  object-position: center top;
  transform: scale(1.6);
  transform-origin: center top;
}
.team-tekst strong {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  display: block;
  margin-bottom: 2px;
}
.team-tekst span {
  font-size: 13px;
  color: var(--muted4);
}
.status-pill {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 20px;
}
.status-pill.open {
  background: rgba(34,197,94,0.12);
  color: #22c55e;
}
.status-pill.gesloten {
  background: rgba(249,115,22,0.12);
  color: #f97316;
}

/* ==========================================================================
 * ADRES
 * ========================================================================== */
.adres {
  padding: 80px 0;
  border-bottom: 1px solid var(--border);
}
.adres-inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--pad);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 80px;
}
.adres-blok-lbl {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--pink);
  margin-bottom: 16px;
  display: block;
}
.adres-blok-title {
  font-family: var(--font-heading);
  font-size: 22px;
  font-weight: 900;
  letter-spacing: -0.5px;
  margin-bottom: 16px;
}
.adres-blok-body {
  font-size: 14px;
  line-height: 1.9;
  color: var(--muted5);
}
/* Alinea's i.p.v. dubbele <br> voor de ruimte tussen de tekstblokjes:
   zo staat de afstand op één plek en is hij overal gelijk. */
.adres-blok-body p {
  margin: 0 0 20px;
}
.adres-blok-body p:last-child {
  margin-bottom: 0;
}
.adres-blok-body a {
  color: var(--muted5);
  text-decoration: none;
  transition: color var(--t-fast);
}
.adres-blok-body a:hover {
  color: var(--pink);
}

/* ==========================================================================
 * RESPONSIVE
 * ========================================================================== */
@media (max-width: 1024px) {
  .hero--contact .hero__inner {
    grid-template-columns: 1fr;
    gap: 48px;
  }
  .form-inner {
    grid-template-columns: 1fr;
    gap: 48px;
  }
  .adres-inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .contact-team {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 40px;
  }
}

@media (max-width: 640px) {
  .hero--contact {
    padding: 80px 0 60px;
  }
  .form-row {
    grid-template-columns: 1fr;
  }
  .intentie-card {
    padding: 20px 24px;
  }
}

/* ==========================================================================
 * HYBRID THEME — Contact pagina (lichte secties: formulier + adres)
 * Hero en team-status blijven donker.
 * ========================================================================== */

/* Formulier sectie — lichte achtergrond, witte velden voor card-effect */
.is-hybrid .form-sectie {
  background: var(--light-bg);
  border-bottom-color: var(--light-border);
}
.is-hybrid .form-title { color: var(--light-text); }
.is-hybrid .form-desc { color: var(--light-muted); }
.is-hybrid .contact-blok {
  border-top-color: var(--light-border);
}
.is-hybrid .contact-blok:last-child {
  border-bottom-color: var(--light-border);
}
.is-hybrid .contact-blok-lbl { color: var(--light-text-faint); }
.is-hybrid .contact-blok-val { color: var(--light-text); }
.is-hybrid .form-label { color: var(--light-muted); }
.is-hybrid .form-input {
  background: #fff;
  border-color: var(--light-border);
  color: var(--light-text);
}
.is-hybrid .form-input:hover:not(:focus) {
  border-color: var(--light-text-num);
}
.is-hybrid .form-input::placeholder {
  color: var(--light-text-num);
}
.is-hybrid .form-meta-tekst { color: var(--light-text-faint); }
.is-hybrid .success-title { color: var(--light-text); }
.is-hybrid .success-sub { color: var(--light-muted); }

/* Teamrij zit in de adres-sectie, dus die heeft geen eigen achtergrond meer. */
.is-hybrid .team-tekst strong { color: var(--light-text); }
.is-hybrid .team-tekst span { color: var(--light-muted); }
.is-hybrid .team-avatar { border-color: var(--light-bg); }

/* Adres sectie — lichte achtergrond, info kolommen leesbaar */
.is-hybrid .adres {
  background: var(--light-bg);
  border-bottom-color: var(--light-border);
}
.is-hybrid .adres-blok-title { color: var(--light-text); }
.is-hybrid .adres-blok-body { color: var(--light-muted); }
.is-hybrid .adres-blok-body a { color: var(--light-muted); }
.is-hybrid .adres-blok-body a:hover { color: var(--pink); }

/* Smooth transitions */
.is-hybrid .form-sectie,
.is-hybrid .adres {
  transition: background var(--t-slow), border-color var(--t-slow);
}
.is-hybrid .form-input,
.is-hybrid .contact-blok {
  transition: background var(--t-slow), border-color var(--t-slow), color var(--t-slow);
}

/* ==========================================================================
 * NIEUWE STYLE — alleen op pages met body.homepage-v2.is-hybrid
 * (contact wordt sinds de redesign behandeld als "nieuwe style" pagina,
 * net als de homepage). Hero light + intentie-kaarten tussenvorm.
 * ========================================================================== */

/* HERO — contact light variant */
.homepage-v2.is-hybrid .hero--contact {
  background: var(--light-bg);
  border-bottom-color: var(--light-border);
}
.homepage-v2.is-hybrid .hero--contact .hero-headline { color: var(--light-text); }
.homepage-v2.is-hybrid .hero--contact .hero-headline .outline {
  -webkit-text-stroke-color: var(--light-text);
  color: transparent;
}
.homepage-v2.is-hybrid .hero--contact .hero-sub { color: var(--light-muted); }
.homepage-v2.is-hybrid .hero--contact .hero-sub strong { color: var(--light-text); }
.homepage-v2.is-hybrid .intentie-label { color: var(--light-text-faint); }

/* INTENTIE-KAARTEN — light variant. Vorm + spacing zijn IDENTIEK aan
   dark (gap, padding, border-radius blijven baseline). Alleen kleur
   wordt omgedraaid. Active state: pink border-left blijft visueel anker. */
.homepage-v2.is-hybrid .intentie-card {
  background: #fff;
  border-color: var(--light-border);
}
.homepage-v2.is-hybrid .intentie-card:hover {
  background: var(--light-bg2);
}
.homepage-v2.is-hybrid .intentie-card.active {
  background: rgba(196, 0, 88, 0.04);
  /* border-color override hierboven raakt ook border-left — expliciet pink terugzetten */
  border-left-color: var(--pink);
}
.homepage-v2.is-hybrid .intentie-num { color: var(--light-text-num); }
.homepage-v2.is-hybrid .intentie-card.active .intentie-num { color: var(--pink); }
.homepage-v2.is-hybrid .intentie-title { color: var(--light-text); }
.homepage-v2.is-hybrid .intentie-card.active .intentie-title { color: var(--pink); }
.homepage-v2.is-hybrid .intentie-sub { color: var(--light-muted); }
.homepage-v2.is-hybrid .intentie-card.active .intentie-sub { color: var(--light-text-num); }
.homepage-v2.is-hybrid .intentie-arrow { color: var(--light-text-num); }
.homepage-v2.is-hybrid .intentie-card.active .intentie-arrow { color: var(--pink); }

/* Form fields: pink focus border in light. Radius blijft uit baseline. */
.homepage-v2.is-hybrid .form-input:focus,
.homepage-v2.is-hybrid .form-textarea:focus,
.homepage-v2.is-hybrid .form-select:focus {
  border-color: var(--pink);
}

/* Sectie alternering in lightmode — 2 tinten light-bg / light-bg2 voor
   visueel ritme (zoals op de homepage variant). Hero blijft bg1. */
.homepage-v2.is-hybrid .form-sectie { background: var(--light-bg2); }
/* Contactgegevens (incl. teamrij) op de lichtste tint: geeft een duidelijke
   bandwisseling na het formulier. Was light-bg2, maar dat is dezelfde tint als
   het formulier erboven — sinds de teamrij (die op light-bg stond) hierin is
   opgegaan, zouden de twee anders in elkaar overlopen. */
.homepage-v2.is-hybrid .adres       { background: var(--light-bg); }