/* FAAM Cases 2.0 (pilot, 25 oktober 2026): de casepagina met de website centraal. Ontwerp: docs/faam-2.0/cases-2.0/preview.html
   (goedgekeurd door Thomas), op Design System 2.0 van faam.be. Eén bestand voor alle cases; enkel geladen bij ontwerp 2. */
.fc2{
  --fc2-bos:var(--faam2-bos,#20362D);--fc2-diep:#14271F;--fc2-inkt:var(--faam2-inkt,#202B25);--fc2-salie:#4F6B5B;
  --fc2-salie-licht:#E7EDE4;--fc2-zand:var(--faam2-zand,#E9D7BD);--fc2-wit:var(--faam2-wit,#FFFEFA);--fc2-lijn:var(--faam2-lijn,#D9D8CF);
  --fc2-zacht:var(--faam2-zacht,#465249);--fc2-band:#EEF1EB;--fc2-serif:var(--wp--preset--font-family--instrument-serif,Georgia,serif);
  --fc2-zacht-in:cubic-bezier(.22,1,.36,1);
  color:var(--fc2-inkt);margin:0 auto
}
.fc2 img{display:block;max-width:100%;height:auto}
.fc2-binnen{max-width:1456px;margin:0 auto}
.fc2 a:focus-visible{outline:3px solid #B18A3E;outline-offset:3px;border-radius:4px}
body:has(.fc2) .faam-artikel-kop{display:none}
/* De casepagina staat in de smalle kolom van een artikel (760 px); Cases 2.0 gebruikt de volle breedte, tot 1456 px. */
body:has(.fc2) .entry-content:has(> .fc2){max-width:none!important;margin-left:0!important;margin-right:0!important}
.fc2.alignfull{max-width:none;margin-left:0!important;margin-right:0!important}
.fc2 h1,.fc2 h2,.fc2 h3{color:var(--fc2-inkt);margin:0}
.fc2 h1 em,.fc2 h2 em{font-family:var(--fc2-serif)!important;font-style:normal;font-weight:400;letter-spacing:-.02em;color:var(--fc2-bos)!important}
.fc2-oog{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;font-weight:800;color:var(--fc2-salie);margin:0 0 .9rem}
.fc2-oog .fc-voorbeeld{margin-right:.35rem;vertical-align:.08em;letter-spacing:.08em}

/* Kruimelpad */
.fc2-kruimels ol{display:flex;flex-wrap:wrap;gap:.5rem;list-style:none;margin:1rem 0 0;padding:0;font-size:.8rem;color:#5F6D63}
.fc2-kruimels li+li::before{content:"›";margin-right:.5rem;color:#8A968C}
.fc2-kruimels a{color:inherit;text-decoration:none}
.fc2-kruimels a:hover{text-decoration:underline}
.fc2-kruimels [aria-current]{color:var(--fc2-bos);font-weight:700}

/* 1. Bovenaan: de website */
.fc2-held{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(2rem,5vw,5rem);align-items:center;padding:clamp(1.75rem,3vw,2.6rem) 0 clamp(2.5rem,4vw,3.5rem)}
/* Lange woorden ("Interieurarchitectuur", "Verwarmingsinstallateur") breken af in plaats van de kolom open te duwen. */
.fc2 h1,.fc2 h2,.fc2 h3,.fc2 b,.fc2 p,.fc2 li{overflow-wrap:break-word;hyphens:auto}
.fc2 small{overflow-wrap:anywhere}
.fc2-held-tekst{container-type:inline-size}
.fc2-titel{font-size:clamp(2.6rem,5vw,4.8rem)!important;font-size:min(clamp(2.6rem,5vw,4.8rem),100cqi / (var(--fc2-woord,8) * .62))!important;font-weight:800;letter-spacing:-.055em!important;line-height:1.02!important;margin:0 0 1.3rem!important}
.fc2-lead{font-size:clamp(1.05rem,1.35vw,1.2rem);line-height:1.6;color:var(--fc2-zacht);max-width:34rem;margin:0 0 1.4rem}
.fc2-pills{display:flex;flex-wrap:wrap;gap:.5rem;list-style:none;margin:0 0 1.6rem;padding:0}
.fc2-pills li{display:inline-flex;align-items:center;gap:.45rem;padding:.45rem .8rem;border-radius:999px;background:var(--fc2-salie-licht);color:#33503D;font-size:.8rem;font-weight:700}
.fc2-staal{width:.8rem;height:.8rem;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.15)}
.fc2-acties{display:flex;flex-wrap:wrap;align-items:center;gap:1.25rem;margin:0}
.fc2-knop{display:inline-flex;align-items:center;gap:.5rem;background:var(--fc2-bos);color:#fff!important;border-radius:999px;padding:.95rem 1.4rem;font-weight:750;font-size:.9rem;text-decoration:none;transition:background .25s var(--fc2-zacht-in),transform .25s var(--fc2-zacht-in)}
.fc2-knop:hover{background:var(--fc2-diep);transform:translateY(-2px)}
.fc2-link{font-size:.9rem;font-weight:750;color:var(--fc2-inkt)!important;text-decoration:none;border-bottom:1px solid var(--fc2-salie);padding-bottom:.2rem}
.fc2-beeld{margin:0;background:#E6EAE3;border-radius:24px;padding:clamp(1.1rem,2.4vw,2.3rem);min-width:0}
.fc2-beeld-kop{display:flex;justify-content:space-between;gap:.75rem;margin:0 0 1rem;font-size:.7rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:#4F6658}
.fc2-browser{background:var(--fc2-wit);border:1px solid #CDD5CA;border-radius:12px;overflow:hidden;box-shadow:0 22px 48px rgba(20,39,31,.14)}
.fc2-browser-balk{height:30px;display:flex;align-items:center;gap:5px;padding:0 13px;border-bottom:1px solid #E6E9E3}
.fc2-browser-balk i{width:7px;height:7px;border-radius:50%;background:#D0D8CE}
.fc2-browser-balk span{margin:auto;font-size:.62rem;color:#7D8A80}
.fc2-browser img{width:100%}
.fc2-beeld-noot{font-size:.75rem;color:#4A5A4F;text-align:right;margin:.9rem 0 0}

/* Delen */
.fc2-sectie{padding:clamp(3.25rem,6vw,5.5rem) 0}
.fc2 h2{font-size:clamp(2rem,4vw,3.6rem)!important;font-weight:750!important;letter-spacing:-.05em!important;line-height:1.05!important;margin:0 0 2rem!important}
.fc2-twee{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1.4rem}
.fc2-kaart{border-radius:18px;padding:clamp(1.5rem,3.5vw,3rem)}
.fc2-kaart.is-zaak{background:#EDE7DD}
.fc2-kaart.is-wens{background:#E2ECE1}
.fc2-nr{font-size:.7rem;letter-spacing:.12em;font-weight:800;text-transform:uppercase;color:#4D6A57;margin:0 0 1rem}
.fc2-kaart h3{font-size:clamp(1.35rem,2.2vw,2rem)!important;letter-spacing:-.04em!important;line-height:1.12!important;margin:0 0 .8rem!important}
.fc2-kaart p{color:#4C5D51;line-height:1.7;margin:0}
.fc2-wie{display:flex;align-items:center;gap:.8rem;margin-top:1.4rem!important;font-size:.9rem}
.fc2-wie img{width:3.25rem;height:3.25rem;border-radius:50%;object-fit:cover;object-position:50% 20%;flex:none}

/* 3. Wat de website doet */
.fc2-band{background:var(--fc2-band);border-radius:28px;padding:clamp(3.25rem,6vw,5.5rem) clamp(1.25rem,4vw,3.5rem)}
.fc2-functies{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.1rem;list-style:none;margin:0;padding:0}
.fc2-functies.is-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.fc2-functies.is-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.fc2-functie{background:var(--fc2-wit);border:1px solid #E2E6DF;border-radius:18px;padding:1.75rem;min-height:12rem;display:flex;flex-direction:column;gap:1.4rem}
.fc2-teken{width:3rem;height:3rem;display:grid;place-items:center;border-radius:12px;background:var(--fc2-salie-licht);color:#3C6048;font-size:1.4rem}
.fc2-functie h3{font-size:1.25rem!important;letter-spacing:-.03em!important;line-height:1.25!important}

/* 4. In de praktijk */
.fc2-praktijk{display:grid;grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);gap:7%;align-items:center}
.fc2-praktijk.is-zonder-beeld{grid-template-columns:1fr}
.fc2-tijdlijn{list-style:none;margin:0;padding:0;border-top:1px solid var(--fc2-lijn)}
.fc2-tijdlijn li{display:grid;grid-template-columns:9rem minmax(0,1fr);gap:1.1rem;padding:1.15rem 0;border-bottom:1px solid var(--fc2-lijn)}
.fc2-tijdlijn h3{font-size:.75rem!important;letter-spacing:.06em!important;text-transform:uppercase;color:#4D6A57!important;line-height:1.55!important;font-weight:800!important}
.fc2-tijdlijn p{margin:0;font-size:.95rem;color:#4C5D51;line-height:1.65}
.fc2-werk{display:grid;gap:1rem}
.fc2-werk img{width:100%;height:26rem;object-fit:cover;border-radius:16px}
.fc2-werk.is-2 img{height:12.5rem}

/* 5. Bouwblokken */
.fc2-blokken{border-top:1px solid var(--fc2-lijn);padding:2.25rem 0 3.25rem;display:grid;grid-template-columns:minmax(0,.65fr) minmax(0,1fr);gap:2.5rem}
.fc2-blokken h2{font-size:clamp(1.6rem,2.2vw,2rem)!important;margin:0!important}
.fc2-chips{display:flex;flex-wrap:wrap;gap:.55rem;list-style:none;margin:0 0 1rem;padding:0}
.fc2-chips li>*{display:inline-block}
.fc2-chips li{border:1px solid #C9D5C7;border-radius:999px;background:var(--fc2-wit);font-size:.85rem;color:#3F5A48}
.fc2-chips li{padding:.6rem .95rem}
.fc2-chips a{color:inherit;text-decoration:none}
.fc2-chips li:has(a):hover{border-color:var(--fc2-bos)}
.fc2-chips a::after{content:" ↗";color:#6A7F70}
.fc2-klein{font-size:.9rem;margin:.75rem 0 0}
.fc2-klein a{color:var(--fc2-bos);font-weight:750}

/* 6. Oproep */
.fc .fc2-oproep{background:var(--fc2-bos);color:#fff;border-radius:24px;display:grid;grid-template-columns:minmax(0,1.07fr) minmax(0,.93fr);gap:3.5rem;align-items:center;overflow:hidden;padding:clamp(2.5rem,5vw,4.75rem);margin:0 0 1rem}
.fc2-oproep .fc2-oog{color:#C3D5C5}
.fc2 .fc2-oproep h2{color:#fff!important;max-width:30rem;margin:0 0 1.3rem!important}
.fc2-oproep p{color:#D4DFD5;line-height:1.7;max-width:29rem;margin:0 0 1.6rem}
.fc2-oproep .wp-block-buttons{display:flex;flex-wrap:wrap;gap:.75rem;margin:0}
body .fc.fc2 .fc2-oproep .wp-block-button .wp-block-button__link.wp-element-button{display:inline-flex;gap:.5rem;background:var(--fc2-wit);color:var(--fc2-bos);border:1.6px solid var(--fc2-wit);border-radius:999px;font-weight:750}
body .fc.fc2 .fc2-oproep .wp-block-button .wp-block-button__link.wp-element-button:hover{background:#F1E7D5;border-color:#F1E7D5;color:var(--fc2-bos)}
body .fc.fc2 .fc2-oproep .wp-block-button.is-style-outline .wp-block-button__link.wp-element-button{background:transparent;color:#fff;border-color:rgba(255,255,255,.75)}
body .fc.fc2 .fc2-oproep .wp-block-button.is-style-outline .wp-block-button__link.wp-element-button:hover{background:#fff;color:var(--fc2-bos);border-color:#fff}
.fc2-oproep .fc-stijl-noot{color:#C9D6CB;font-size:.85rem;margin:1.1rem 0 0}
.fc2-oproep-beeld{border-radius:13px;box-shadow:0 22px 40px rgba(7,22,11,.35);background:#fff;transform:rotate(3deg)}

/* 7. Meer inspiratie */
.fc2-ook-rij{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1.1rem}
.fc2-ander{display:grid;grid-template-columns:minmax(0,45%) minmax(0,55%);background:var(--fc2-wit);border:1px solid var(--fc2-lijn);border-radius:17px;overflow:hidden;color:inherit;text-decoration:none;transition:border-color .2s,transform .2s var(--fc2-zacht-in)}
a.fc2-ander:hover{transform:translateY(-3px);border-color:#A2B5A3}
.fc2-ander img{width:100%;height:13rem;object-fit:contain;background:#E9EEE8}
.fc2-ander-tekst{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:.7rem;padding:1.5rem}
.fc2-ander small{font-size:.7rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#5F7563}
.fc2-ander b{font-size:1.4rem;letter-spacing:-.04em;line-height:1.18}
.fc2-ander em{font-style:normal;font-weight:750;font-size:.85rem;color:#3E6248}
.fc2 .fc-ai{margin:1.5rem 0 0}

/* Tablet en gsm */
@media (max-width:1180px){.fc2-functies.is-4{grid-template-columns:repeat(2,minmax(0,1fr))}.fc2-ander b{font-size:1.15rem}}
@media (max-width:860px){
  .fc2-held{grid-template-columns:minmax(0,1fr);gap:2rem;padding-top:1.25rem}
  .fc2-twee,.fc2-praktijk,.fc2-blokken,.fc .fc2-oproep,.fc2-ook-rij{grid-template-columns:minmax(0,1fr)}
  .fc2-functies,.fc2-functies.is-2{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .fc2-praktijk{gap:2.2rem}
  .fc2-werk img{height:20rem}
  .fc2-blokken{gap:1rem}
  .fc .fc2-oproep{gap:2rem}
  .fc2-oproep-beeld{max-width:20rem;margin:0 auto}
}
@media (max-width:600px){
  .fc2-titel{font-size:clamp(2.4rem,11vw,3.1rem)!important;font-size:min(clamp(2.4rem,11vw,3.1rem),100cqi / (var(--fc2-woord,8) * .62))!important}
  .fc2-functies,.fc2-functies.is-2,.fc2-functies.is-4{grid-template-columns:minmax(0,1fr)}
  .fc2-functie{min-height:0;padding:1.4rem;flex-direction:row;align-items:center;gap:1rem}
  .fc2-teken{width:2.5rem;height:2.5rem;font-size:1.1rem;flex:none}
  .fc2-functie h3{font-size:1.05rem!important}
  .fc2-tijdlijn li{grid-template-columns:minmax(0,1fr);gap:.35rem}
  .fc2-werk img,.fc2-werk.is-2 img{height:15rem}
  .fc2-band{border-radius:20px}
  .fc2-ander{grid-template-columns:minmax(0,40%) minmax(0,60%)}
  .fc2-ander img{height:9.5rem}
  .fc2-ander-tekst{padding:1rem}
  .fc2-ander b{font-size:1.05rem}
  .fc2-beeld{padding:1rem;border-radius:18px}
}
@media (prefers-reduced-motion:reduce){.fc2 *,.fc2 *::before,.fc2 *::after{transition:none!important}.fc2-knop:hover,a.fc2-ander:hover{transform:none}}