/* ============ wbp-specialisatie.html — glaseffect ============
   Bouwt voort op index-glass.css (.glass-page levert de kleurgloed en het
   donkere glas van de footer). Hieronder de paneelstijlen voor deze pagina. */
.wbp-glass{--gl-bg:rgba(255,255,255,0.58);--gl-bg-hi:rgba(255,255,255,0.72);--gl-brd:rgba(255,255,255,0.78);--gl-blur:blur(26px) saturate(1.7);--gl-sh:inset 0 1px 0 rgba(255,255,255,0.9),0 18px 44px -28px rgba(31,45,77,0.45)}
.wbp-glass::before{background:radial-gradient(56% 42% at 8% 4%,rgba(180,123,184,0.24),transparent 70%),radial-gradient(52% 38% at 92% 12%,rgba(127,184,212,0.28),transparent 70%),radial-gradient(58% 44% at 84% 58%,rgba(157,211,223,0.22),transparent 70%),radial-gradient(50% 38% at 10% 80%,rgba(166,206,137,0.20),transparent 70%)}

/* hero laat de gloed erdoorheen */
.wbp-glass .intro-hero{background:linear-gradient(180deg,rgba(230,240,248,0.72) 0%,rgba(242,247,251,0.42) 48%,transparent 100%)}
.wbp-glass .intro-boog{opacity:.42;filter:saturate(1.15)}
.wbp-glass .intro-ankers a{background:rgba(255,255,255,0.55);-webkit-backdrop-filter:blur(16px) saturate(1.5);backdrop-filter:blur(16px) saturate(1.5);border-color:rgba(255,255,255,0.8);box-shadow:inset 0 1px 0 rgba(255,255,255,0.85),0 6px 18px -14px rgba(31,45,77,0.6)}
.wbp-glass .intro-ankers a:hover{background:var(--ink-900);border-color:var(--ink-900)}

/* algemene glaspanelen */
.wbp-glass .intro-card,.wbp-glass .intro-index,.wbp-glass .opdracht,.wbp-glass .werkplek,.wbp-glass .wdw{background:var(--gl-bg);-webkit-backdrop-filter:var(--gl-blur);backdrop-filter:var(--gl-blur);border:1px solid var(--gl-brd);box-shadow:var(--gl-sh)}
.wbp-glass .intro-card:hover{background:var(--gl-bg-hi)}
.wbp-glass .intro-cards.drie .intro-card:hover,.wbp-glass .intro-cards.vier .intro-card:hover,.wbp-glass .visie-card:hover{box-shadow:var(--gl-sh)}

/* icoontegel */
.wbp-glass .intro-card img.ic{box-sizing:border-box;width:58px;height:58px;padding:9px;border-radius:17px;background:rgba(255,255,255,0.62);border:1px solid rgba(255,255,255,0.85);box-shadow:inset 0 1px 0 rgba(255,255,255,0.9),0 8px 20px -14px rgba(31,45,77,0.7)}

/* werkplekkaarten */
.wbp-glass .werkplek{box-shadow:var(--gl-sh),0 30px 60px -46px rgba(31,45,77,0.6)}
.wbp-glass .werkplek figure{overflow:hidden}
.wbp-glass .werkplek img{transition:transform .5s cubic-bezier(.2,.7,.3,1)}
.wbp-glass .werkplek:hover img{transform:scale(1.03)}
.wbp-glass .werkplek-meta{border-top-color:rgba(255,255,255,0.8)}

/* wie-doet-wat tabel */
.wbp-glass .wdw-tabel thead th{background:rgba(255,255,255,0.42);border-bottom-color:rgba(255,255,255,0.75)}
.wbp-glass .wdw-tabel thead .wdw-kol{border-left-color:rgba(255,255,255,0.75)}
.wbp-glass .wdw-tabel tbody th,.wbp-glass .wdw-tabel tbody td{border-bottom-color:rgba(255,255,255,0.65);border-left-color:rgba(255,255,255,0.65)}
.wbp-glass .wdw-tabel tbody td.ja{background:var(--wdw-tint)}
.wbp-glass .wdw-vink{box-shadow:inset 0 1px 0 rgba(255,255,255,0.4),0 6px 14px -6px rgba(31,45,77,0.55)}

/* filter + index */
.wbp-glass .opdracht-filter button{background:rgba(255,255,255,0.55);-webkit-backdrop-filter:blur(16px) saturate(1.5);backdrop-filter:blur(16px) saturate(1.5);border-color:rgba(255,255,255,0.8);box-shadow:inset 0 1px 0 rgba(255,255,255,0.85)}
.wbp-glass .opdracht-filter button[aria-pressed="true"]{background:var(--ink-900);border-color:var(--ink-900);box-shadow:0 10px 24px -16px rgba(31,45,77,0.9)}
.wbp-glass .intro-index a{background:rgba(255,255,255,0.5);border-color:rgba(255,255,255,0.78);box-shadow:inset 0 1px 0 rgba(255,255,255,0.8)}
.wbp-glass .intro-index a:has(.bitm){background:linear-gradient(135deg,rgba(76,122,56,.16) 0%,rgba(255,255,255,.44) 60%,rgba(255,255,255,.52) 100%);border-color:rgba(76,122,56,.26)}
.wbp-glass .intro-index a:has(.se){background:linear-gradient(135deg,rgba(123,79,168,.16) 0%,rgba(255,255,255,.44) 60%,rgba(255,255,255,.52) 100%);border-color:rgba(123,79,168,.26)}
.wbp-glass .intro-index a:has(.bitm):hover{background:linear-gradient(135deg,rgba(76,122,56,.26) 0%,rgba(255,255,255,.56) 62%,rgba(255,255,255,.66) 100%);border-color:rgba(76,122,56,.48)}
.wbp-glass .intro-index a:has(.se):hover{background:linear-gradient(135deg,rgba(123,79,168,.26) 0%,rgba(255,255,255,.56) 62%,rgba(255,255,255,.66) 100%);border-color:rgba(123,79,168,.48)}

/* opdrachtkaarten met trackkleur */
.wbp-glass .opdracht{position:relative;isolation:isolate;overflow:hidden;transition:transform .25s cubic-bezier(.2,.7,.3,1),box-shadow .25s,background .25s}
.wbp-glass .opdracht::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(70% 90% at 0% 0%,color-mix(in oklab,var(--tr),transparent 82%),transparent 62%)}
.wbp-glass .opdracht::after{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:linear-gradient(180deg,var(--tr),color-mix(in oklab,var(--tr),transparent 65%))}
.wbp-glass .opdracht[data-track="bitm"]{--tr:#4C7A38}
.wbp-glass .opdracht[data-track="se"]{--tr:#7B4FA8}
.wbp-glass .opdracht:hover{background:var(--gl-bg-hi);box-shadow:var(--gl-sh),0 26px 54px -40px color-mix(in oklab,var(--tr),transparent 40%)}
.wbp-glass .opdracht-blok table{background:rgba(255,255,255,0.42);border:1px solid rgba(255,255,255,0.7)}
.wbp-glass .opdracht-blok th,.wbp-glass .opdracht-blok td{border-bottom-color:rgba(255,255,255,0.7)}
.wbp-glass .opdracht-nav{border-top-color:rgba(255,255,255,0.75)}
.wbp-glass .opdracht-nav a{background:rgba(255,255,255,0.5);border-color:rgba(255,255,255,0.8)}
.wbp-glass .opdracht-nav a:hover{background:rgba(255,255,255,0.75)}
.wbp-glass .intro-groep .lijn{background:linear-gradient(90deg,rgba(255,255,255,0.9),rgba(31,45,77,0.12))}

/* studenttags */
.wbp-glass .student-tags li{background:rgba(255,255,255,0.46);border-color:rgba(255,255,255,0.8)}
.wbp-glass .student-tags li:has(.rol){background:rgba(255,255,255,0.66);border-color:rgba(58,135,175,.3);box-shadow:inset 0 1px 0 rgba(255,255,255,0.85)}

/* geen backdrop-filter of minder transparantie gewenst */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.wbp-glass .intro-card,.wbp-glass .intro-index,.wbp-glass .opdracht,.wbp-glass .werkplek,.wbp-glass .wdw{background:rgba(255,255,255,0.93)}.wbp-glass .opdracht-filter button,.wbp-glass .intro-ankers a{background:rgba(255,255,255,0.9)}}
@media (prefers-reduced-transparency:reduce){.wbp-glass .intro-card,.wbp-glass .intro-index,.wbp-glass .opdracht,.wbp-glass .werkplek,.wbp-glass .wdw{background:rgba(255,255,255,0.95);-webkit-backdrop-filter:none;backdrop-filter:none}}