/* Glas is versiering: deze dekkende vlakken dragen tekst en contrast zelfstandig. */
:root {
  --glas-vlak-doorschijnend: oklch(27.215% 0.02303 284.464 / 0.92);
}

:root[data-thema="licht"] {
  --glas-vlak-doorschijnend: oklch(96.500% 0.00400 284.464 / 0.92);
}

.glas-nav,
.glas-kaart,
.glas-cta {
  color: var(--kleur-inkt);
  background-color: var(--kleur-vlak-1);
  border: 1px solid var(--kleur-rand);
  box-shadow: var(--schaduw-m);
}

.glas-nav {
  position: sticky;
  z-index: 10;
  top: var(--ruimte-3);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ruimte-4);
  max-width: var(--maat-pagina);
  margin: var(--ruimte-3) auto 0;
  padding: var(--ruimte-3) var(--ruimte-4);
  border-radius: var(--radius-rond);
}

.glas-kaart,
.glas-cta {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-l);
}

.glas-kaart {
  padding: var(--ruimte-6);
}

.glas-kaart::before {
  position: absolute;
  inset: -45% 25% 45% -25%;
  border-radius: 50%;
  background: radial-gradient(circle, oklch(73.993% 0.12154 201.689 / 0.16), transparent 68%);
  content: "";
  pointer-events: none;
  transform: translate3d(-8%, -6%, 0);
  transition: transform var(--duur) var(--curve);
}

.glas-kaart > * {
  position: relative;
}

.glas-kaart:hover::before,
.glas-kaart:focus-within::before {
  transform: translate3d(30%, 18%, 0);
}

.glas-cta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--ruimte-6);
  padding: var(--ruimte-6);
}

.glas-knop {
  display: inline-flex;
  min-height: 2.75rem;
  align-items: center;
  justify-content: center;
  padding: var(--ruimte-3) var(--ruimte-5);
  color: var(--kleur-accent-inkt);
  background-color: var(--kleur-accent);
  border: 1px solid var(--kleur-accent);
  border-radius: var(--radius-rond);
  font: inherit;
  font-weight: var(--gewicht-vet);
  text-decoration: none;
}

.glas-knop:focus-visible {
  outline: 3px solid var(--kleur-focus);
  outline-offset: 3px;
}

@supports (backdrop-filter: blur(1px)) {
  .glas-nav,
  .glas-kaart,
  .glas-cta {
    background-color: var(--glas-vlak-doorschijnend);
    backdrop-filter: blur(18px) saturate(135%);
  }
}

/* Een Chromium-extra: het SVG-filter verandert alleen het beeld achter het vlak. */
@supports (backdrop-filter: url("#glas-breking")) {
  .glas-nav,
  .glas-cta {
    backdrop-filter: url("#glas-breking") blur(18px) saturate(135%);
  }
}

@media (prefers-reduced-transparency: reduce) {
  .glas-nav,
  .glas-kaart,
  .glas-cta {
    background-color: var(--kleur-vlak-1);
    backdrop-filter: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .glas-kaart::before {
    transform: none;
    transition: none;
  }
}

@media (max-width: 42rem) {
  .glas-nav {
    margin-inline: var(--ruimte-3);
  }

  .glas-cta {
    grid-template-columns: 1fr;
  }
}