/* uitzendbureau-hero 1.0.0 · block-port van ReactBitsPro Blocks/hero-3 met ReactBitsPro Components/chroma-current
   (origineel gecompileerd, three uit _shared/vendor) als achtergrond in plaats van de three-shader uit de bron.
   Maten uit de bron: donkere laag van 30 % over de achtergrond, inhoud met padding 4vmax en een kader van 4vmax in de
   oppervlaktekleur, kopregel max(1.2rem, 1.3vmax), pill-link op wit 10 % met backdrop blur, h1 op 5vmax met strakke
   regelafstand, paneel met een linkerbovenhoek van 3vmax en omgekeerde hoekstukken van 48 px, lijst van drie links op
   50 % dekking (100 % bij hover) met een onderstreep die in 0,3 s uitgroeit. Fonts levert de site via assets/fonts.css. */
.msm-uitzendbureau-hero {
  --uh-surface: var(--m-surface, #ffffff);
  --uh-ink: var(--m-ink, #17262d);
  --uh-text: var(--m-surface, #ffffff);
  --uh-frame: 4vmax;
  box-sizing: border-box;
  position: relative;
  isolation: isolate;
  width: 100%;
  overflow: hidden;
  background: var(--uh-surface);
  color: var(--uh-text);
  font-family: var(--m-font-body, 'Public Sans', ui-sans-serif, system-ui, sans-serif);
  line-height: 1.5;
}
.msm-uitzendbureau-hero *,
.msm-uitzendbureau-hero *::before,
.msm-uitzendbureau-hero *::after { box-sizing: border-box; }
.msm-uitzendbureau-hero a { color: inherit; text-decoration: none; }
.msm-uitzendbureau-hero p,
.msm-uitzendbureau-hero h1,
.msm-uitzendbureau-hero ul { margin: 0; padding: 0; }

/* Achtergrond: foto als terugval, chroma-current als WebGL-laag (de bron zet zijn canvas fixed; hier blijft hij in de sectie). */
.msm-uitzendbureau-hero .uh-backdrop { position: absolute; inset: 0; z-index: 0; background: var(--uh-ink); }
.msm-uitzendbureau-hero .uh-fallback,
.msm-uitzendbureau-hero .uh-fallback img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 42% 50%;
}
.msm-uitzendbureau-hero .uh-fallback { transition: opacity .6s ease-in-out; }
.msm-uitzendbureau-hero .uh-current { position: absolute; inset: 0; opacity: 0; transition: opacity .8s ease-in-out; }
.msm-uitzendbureau-hero.is-current .uh-current { opacity: 1; }
.msm-uitzendbureau-hero.is-current .uh-fallback { opacity: 0; }
/* Originele component-CSS van chroma-current, gescoped. */
.msm-uitzendbureau-hero .chroma-current { position: relative; isolation: isolate; width: 100%; height: 100%; min-height: 320px; overflow: hidden; }

/* De donkere laag van 30 % met de inhoud, kolom met padding 4vmax, minimaal schermhoogte. */
.msm-uitzendbureau-hero .uh-stage {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  min-height: max(560px, 100vh);
  min-height: max(560px, 100dvh);
  padding: var(--uh-frame);
  background: rgba(0, 0, 0, .3);
}
.msm-uitzendbureau-hero .uh-top { position: relative; flex: 1; width: 100%; min-height: 160px; }
.msm-uitzendbureau-hero .uh-topbar {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  padding: calc(var(--uh-frame) + 56px) var(--uh-frame) var(--uh-frame);
  font-size: max(1.2rem, 1.3vmax);
  line-height: 1.25;
}
.msm-uitzendbureau-hero .uh-kicker { max-width: 24em; font-weight: 500; text-wrap: balance; }
.msm-uitzendbureau-hero .uh-pill {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 16px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .1);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  font-size: max(.9rem, 1vmax);
  font-weight: 500;
  white-space: nowrap;
  transition: background-color .2s;
}
.msm-uitzendbureau-hero .uh-pill:hover { background: rgba(255, 255, 255, .2); }

/* Hoekstukken: een vierkant van 48 px met een kwartcirkel uitgespaard, zodat het kader rond in de donkere laag overloopt. */
.msm-uitzendbureau-hero .uh-corner {
  position: absolute;
  width: 48px;
  height: 48px;
  pointer-events: none;
  transform: translateZ(0);
}
.msm-uitzendbureau-hero .uh-corner-top-tl { top: 0; left: 0; background: radial-gradient(circle at bottom right, transparent 48px, var(--uh-surface) 48px); }
.msm-uitzendbureau-hero .uh-corner-top-tr { top: 0; right: 0; background: radial-gradient(circle at bottom left, transparent 48px, var(--uh-surface) 48px); }
.msm-uitzendbureau-hero .uh-corner-top-br { bottom: 0; right: 0; background: radial-gradient(circle at top left, transparent 48px, var(--uh-surface) 48px); }
.msm-uitzendbureau-hero .uh-corner-stage-bl { bottom: var(--uh-frame); left: var(--uh-frame); background: radial-gradient(circle at top right, transparent 48px, var(--uh-surface) 48px); }
.msm-uitzendbureau-hero .uh-corner-head-br { bottom: 0; right: 0; background: radial-gradient(circle at top left, transparent 48px, var(--uh-surface) 48px); }
.msm-uitzendbureau-hero .uh-corner-head-bl { bottom: 0; left: 0; background: radial-gradient(circle at top right, transparent 48px, var(--uh-surface) 48px); }
.msm-uitzendbureau-hero .uh-corner-panel-bl { bottom: 0; left: 0; transform: translateX(-100%) translateZ(0); background: radial-gradient(circle at top left, transparent 48px, var(--uh-surface) 48px); }
.msm-uitzendbureau-hero .uh-corner-panel-tr { top: 0; right: 0; transform: translateY(-100%) translateZ(0); background: radial-gradient(circle at top left, transparent 48px, var(--uh-surface) 48px); }
.msm-uitzendbureau-hero .uh-only-wide { display: none; }

/* Onderrij: kop links, paneel rechts (onder 768 px gestapeld, paneel rechts uitgelijnd zoals self-end in de bron). */
.msm-uitzendbureau-hero .uh-bottom { display: flex; flex-direction: column; align-items: flex-start; }
.msm-uitzendbureau-hero .uh-headblock { position: relative; padding: 0 var(--uh-frame) var(--uh-frame); }
.msm-uitzendbureau-hero .uh-title {
  font-family: var(--m-font-display, 'Archivo', ui-sans-serif, system-ui, sans-serif);
  font-size: 5vmax;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -.02em;
  text-wrap: balance;
}
.msm-uitzendbureau-hero .uh-role {
  margin-top: .35em;
  color: var(--m-primary, #e26c35);
  font-family: var(--m-font-display, 'Archivo', ui-sans-serif, system-ui, sans-serif);
  font-size: max(1.05rem, 1.6vmax);
  font-weight: 500;
  line-height: 1.3;
}
.msm-uitzendbureau-hero .uh-intro {
  max-width: 34em;
  margin-top: 1em;
  font-size: max(.95rem, 1.05vmax);
  line-height: 1.55;
  opacity: .88;
}
.msm-uitzendbureau-hero .uh-panel {
  position: relative;
  align-self: flex-end;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  padding: var(--uh-frame) 0 0 var(--uh-frame);
  border-top-left-radius: 3vmax;
  background: var(--uh-surface);
  color: var(--uh-ink);
  font-size: max(1rem, 1.4vmax);
  font-weight: 300;
}
.msm-uitzendbureau-hero .uh-links {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: max(.7rem, .8vmax);
  list-style: none;
  opacity: .5;
  transition: opacity .3s;
}
.msm-uitzendbureau-hero .uh-links:hover,
.msm-uitzendbureau-hero .uh-links:focus-within { opacity: 1; }
.msm-uitzendbureau-hero .uh-links a {
  position: relative;
  display: flex;
  align-items: center;
  gap: max(.6rem, .8vmax);
  padding-bottom: max(.1rem, .2vmax);
  color: var(--uh-ink);
}
.msm-uitzendbureau-hero .uh-links a span { position: relative; }
.msm-uitzendbureau-hero .uh-links a span::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 2px;
  background: var(--uh-ink);
  transition: width .3s;
}
.msm-uitzendbureau-hero .uh-links a:hover span::after,
.msm-uitzendbureau-hero .uh-links a:focus-visible span::after { width: 100%; }
.msm-uitzendbureau-hero .uh-links svg {
  width: max(1rem, 1.4vmax);
  height: max(1rem, 1.4vmax);
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.msm-uitzendbureau-hero :focus-visible { outline: 2px solid var(--m-primary, #e26c35); outline-offset: 4px; border-radius: 4px; }

/* Het kader van 4vmax in de oppervlaktekleur over de padding van de donkere laag. */
.msm-uitzendbureau-hero .uh-frame { position: absolute; inset: 0; pointer-events: none; }
.msm-uitzendbureau-hero .uh-bar { position: absolute; background: var(--uh-surface); }
.msm-uitzendbureau-hero .uh-bar-top { top: 0; left: 0; width: 100%; height: var(--uh-frame); }
.msm-uitzendbureau-hero .uh-bar-bottom { bottom: 0; left: 0; width: 100%; height: var(--uh-frame); }
.msm-uitzendbureau-hero .uh-bar-left { top: 0; bottom: 0; left: 0; width: var(--uh-frame); }
.msm-uitzendbureau-hero .uh-bar-right { top: 0; bottom: 0; right: 0; width: var(--uh-frame); }

/* Entree (Web Animations API in module.js): de li's komen 20 px van rechts binnen na 1,4 s, 1,5 s en 1,6 s;
   de kop, de kopregel en het paneel 20 px omhoog na 0,1 s, 0,2 s en 0,4 s. Zonder JavaScript staat alles er meteen. */
.msm-uitzendbureau-hero.is-pending [data-uh-in],
.msm-uitzendbureau-hero.is-pending [data-uh-link] { opacity: 0; }

@media (min-width: 768px) {
  .msm-uitzendbureau-hero .uh-only-wide { display: block; }
  .msm-uitzendbureau-hero .uh-only-narrow { display: none; }
  .msm-uitzendbureau-hero .uh-bottom { flex-direction: row; align-items: flex-end; }
  .msm-uitzendbureau-hero .uh-headblock { flex: 0 1 auto; max-width: 64%; }
  .msm-uitzendbureau-hero .uh-panel { flex: 1 1 0; min-width: 0; align-self: stretch; }
}
@media (max-width: 767px) {
  .msm-uitzendbureau-hero .uh-topbar { padding-top: calc(var(--uh-frame) + 64px); }
  .msm-uitzendbureau-hero .uh-title { font-size: clamp(30px, 8.6vw, 5vmax); }
  .msm-uitzendbureau-hero .uh-panel { align-self: flex-end; max-width: 100%; }
}
@media (max-width: 560px) {
  .msm-uitzendbureau-hero .uh-topbar { flex-direction: column; }
  .msm-uitzendbureau-hero .uh-pill { align-self: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  .msm-uitzendbureau-hero .uh-fallback,
  .msm-uitzendbureau-hero .uh-current,
  .msm-uitzendbureau-hero .uh-links,
  .msm-uitzendbureau-hero .uh-links a span::after,
  .msm-uitzendbureau-hero .uh-pill { transition-duration: .01ms; }
  .msm-uitzendbureau-hero.is-pending [data-uh-in],
  .msm-uitzendbureau-hero.is-pending [data-uh-link] { opacity: 1; }
}