/* /contact/ | twee blokken die alleen op deze pagina staan: het adresblok met de kaart
   en de vier contactkaarten in één breed paneel. Alle kleuren, radii en schaduwen komen
   uit de tokens van style.css, zodat de pagina meebeweegt met de rest van de site.
   CLAUDE-PAGINAS LEAD-504 */

/* ============ ADRES, KAART EN GEGEVENS ============ */
.ct-kaart{padding-block:clamp(2.6rem,6vw,4.5rem);background:var(--paper)}
.ct-kaart__head{max-width:52ch}
.ct-kaart__head .eyebrow{margin-bottom:.8rem}
.ct-kaart__head h2{font-size:clamp(1.6rem,3vw,2.3rem);margin:0}
.ct-kaart__head p{margin-top:1.1rem;color:var(--muted);font-size:1.05rem;line-height:1.65}

.ct-kaart__row{margin-top:clamp(1.8rem,4vw,2.8rem);display:grid;grid-template-columns:1.32fr 1fr;
  gap:clamp(1.2rem,2.6vw,2rem);align-items:stretch}

.ct-kaart__frame{border-radius:calc(var(--radius) + 4px);overflow:hidden;box-shadow:var(--shadow);
  background:var(--paper-2);min-height:420px;position:relative}
.ct-kaart__frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}

.ct-paneel{background:#1D75BD;color:var(--white);border-radius:calc(var(--radius) + 4px);
  padding:clamp(1.6rem,2.6vw,2.2rem);box-shadow:var(--shadow);display:flex;flex-direction:column}
.ct-paneel h3{margin:0 0 1.4rem;font-size:1.25rem;letter-spacing:-.02em}
.ct-paneel__rij{display:flex;gap:.9rem;padding-block:.9rem;border-top:1px solid rgba(255,255,255,.18)}
.ct-paneel__rij:first-of-type{border-top:0;padding-top:0}
.ct-paneel__ic{flex:0 0 38px;width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.14);
  display:grid;place-items:center}
.ct-paneel__ic svg{width:19px;height:19px;fill:var(--white)}
.ct-paneel__lbl{font-size:.74rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:rgba(255,255,255,.95)}   /* op #1D75BD haalt wit zelf 4,88; onder .95 zakt de regel door 4,5 heen */
.ct-paneel__val{margin-top:.2rem;font-weight:600;line-height:1.45}
.ct-paneel__val span{display:block;font-weight:400;font-size:.94rem;color:rgba(255,255,255,.95);margin-top:.15rem}
.ct-paneel a{color:var(--white);text-decoration-line:underline;text-underline-offset:3px;
  text-decoration-color:rgba(255,255,255,.45)}
.ct-paneel a:hover{text-decoration-color:var(--white)}
.ct-paneel__cta{margin-top:auto;padding-top:1.4rem}
.ct-paneel__cta .btn{width:100%;justify-content:center;text-decoration:none}

@media(max-width:860px){
  .ct-kaart__row{grid-template-columns:1fr}
  .ct-kaart__frame{min-height:300px}
}

/* ============ VIER CONTACTKAARTEN ============ */
.ct-kanalen{padding-block:0 clamp(2.6rem,6vw,4.5rem);background:var(--paper)}
.ct-kanalen__paneel{background:var(--ink);color:var(--white);border-radius:calc(var(--radius) + 4px);
  box-shadow:var(--shadow-lg);overflow:hidden;display:grid;grid-template-columns:repeat(4,1fr)}
.ct-kanaal{padding:clamp(1.5rem,2.4vw,2.1rem);border-left:1px solid rgba(255,255,255,.14);
  display:flex;flex-direction:column}
.ct-kanaal:first-child{border-left:0}
.ct-kanaal__kop{display:flex;align-items:center;gap:.7rem}
.ct-kanaal__ic{flex:0 0 40px;width:40px;height:40px;border-radius:12px;background:rgba(247,148,29,.18);
  display:grid;place-items:center}
.ct-kanaal__ic svg{width:21px;height:21px;fill:var(--orange)}
.ct-kanaal__kop h3{margin:0;font-size:1.12rem;letter-spacing:-.02em}
.ct-kanaal p{margin:.9rem 0 0;color:rgba(255,255,255,.82);font-size:.96rem;line-height:1.6}
.ct-kanaal__link{margin-top:auto;padding-top:1.1rem;display:inline-flex;align-items:center;gap:.4rem;
  color:var(--orange);font-weight:700;font-size:1rem;text-decoration-line:underline;
  text-underline-offset:4px;text-decoration-color:rgba(247,148,29,.45)}
.ct-kanaal__link:hover{text-decoration-color:var(--orange)}
.ct-kanaal__link svg{width:15px;height:15px;fill:currentColor;flex:0 0 auto}
.ct-kanaal__sub{margin-top:.5rem;font-size:.85rem;color:rgba(255,255,255,.72)}
.ct-kanaal__sub a{color:rgba(255,255,255,.82)}

/* Vier naast elkaar: de kleine regel twee regels hoog houden, anders staan de vier
   uitgelichte links op verschillende hoogtes omdat ze vanaf de onderkant uitlijnen. */
@media(min-width:981px){.ct-kanaal__sub{min-height:3.2em}}

@media(max-width:980px){
  .ct-kanalen__paneel{grid-template-columns:1fr 1fr}
  .ct-kanaal:nth-child(3){border-left:0}
  .ct-kanaal:nth-child(n+3){border-top:1px solid rgba(255,255,255,.14)}
}
@media(max-width:560px){
  .ct-kanalen__paneel{grid-template-columns:1fr}
  .ct-kanaal{border-left:0}
  .ct-kanaal + .ct-kanaal{border-top:1px solid rgba(255,255,255,.14)}
}