/* ============================================================================================
   MedView · figma variant · section 4 "Alles vanaf één plek." (index-figma.html, #tonen)
   Three visuals for the client to choose from, switched with ?schermen=1|2|3 (1 by default):
   1 · the reverse shot of the hero's room: the reception monitor runs MedView, the waiting-room TV follows
   2 · three rooms (Wachtzaal, Onthaal, Gang) under one tekstband switch
   3 · the hero's room with a real console fragment over the photo's edge
   Shared: photos carry live HTML screens placed in % of the photo (the stage); a figma-style named cursor types the
   tekstband and switches it on; the bands slide in on every screen; the kaarten keep playing. Light only.
   ============================================================================================ */
.sch { position: relative; margin-top: clamp(48px, 5.6vw, 84px); }
.sch-v { position: relative; display: none; }
html:not([data-sch]) .sch-v1, html[data-sch="1"] .sch-v1, html[data-sch="2"] .sch-v2, html[data-sch="3"] .sch-v3 { display: block; }

/* ---------------------------------------------------------------- a photo with live screens
   The frame (.sch-ph / .sch-card) crops; the stage (.sch-st) keeps the photo's own aspect and coordinates.
   --cx: where the crop starts, --cw: how much of the photo's width it keeps (fractions of the photo). */
.sch-ph, .sch-card { --cx: 0; --cw: 1; position: relative; overflow: hidden; isolation: isolate; background: #E9E6DE; }
.sch-ph { border-radius: 20px; aspect-ratio: 1672 / 941; box-shadow: 0 1px 0 rgb(30 28 26 / .04), 0 44px 80px -52px rgb(52 62 14 / .6); }
.sch-st { position: absolute; top: 0; bottom: 0; left: calc(-100% * var(--cx) / var(--cw)); width: calc(100% / var(--cw)); }
.sch-st img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sch-tv, .sch-mon { position: absolute; left: calc(var(--l) * 1%); top: calc(var(--t) * 1%); width: calc(var(--w) * 1%); height: calc(var(--h) * 1%); }

/* a lit screen in the photo: the kaarten of the TV, a faint glass sheen */
.sch-scr { position: absolute; inset: 0; container-type: inline-size; overflow: hidden; background: #F7F6F1; border-radius: 1px; }
.sch-scr::after { content: ""; position: absolute; inset: 0; z-index: 6; pointer-events: none;
  background: linear-gradient(118deg, rgb(255 255 255 / .16) 0%, rgb(255 255 255 / 0) 36%), linear-gradient(0deg, rgb(30 28 26 / .05), rgb(30 28 26 / 0) 45%); }
.sch-scr > .lk { opacity: 0; transition: opacity .8s ease; }
.sch-scr > .lk.is-on { opacity: 1; }
.sch-scr .lk-foot { bottom: 15.5cqw; transition: bottom .6s var(--ease); }
.sch-scr .lk-mid { translate: 0 -4.2cqw; transition: translate .6s var(--ease); }
.sch-band { transition: transform .6s var(--ease) calc(var(--i, 0) * 110ms); }
/* before the tekstband is switched on (only with JS): no band, the kaart sits in its usual place */
.fg-js .sch-v:not(.is-live) .sch-band { transform: translateY(101%); }
.fg-js .sch-v:not(.is-live) .sch-scr .lk-foot { bottom: 6.4cqw; }
.fg-js .sch-v:not(.is-live) .sch-scr .lk-mid { translate: none; }

/* figma's selection: a forest frame with handles and a name tag over the screen that just changed */
.sch-sel { --hs: 7px; inset: -5px; border: 1.5px solid var(--forest); transition: opacity .3s ease .35s; }
.sch-tag { position: absolute; left: -5px; bottom: calc(100% + 10px); z-index: 4; display: inline-flex; align-items: center; gap: 7px; height: 24px; padding: 0 9px 0 8px;
  border-radius: 6px; background: var(--forest); color: #FFFFFF; font: 500 12.5px/1 var(--f-sans); letter-spacing: -.004em; white-space: nowrap;
  transition: opacity .3s ease .45s, translate .5s var(--ease) .45s; }
.sch-tag i { width: 6px; height: 6px; border-radius: 50%; background: #A8E3B6; }
.fg-js .sch-v:not(.is-live) .sch-sel, .fg-js .sch-v:not(.is-live) .sch-tag { opacity: 0; transition-delay: 0s; }
.fg-js .sch-v:not(.is-live) .sch-tag { translate: 0 5px; }

/* the named cursor (figma's multiplayer cursor) */
.sch-cur { position: absolute; z-index: 9; left: 0; top: 0; width: 0; height: 0; pointer-events: none; opacity: 0;
  translate: var(--x, 0px) var(--y, 0px); transition: translate 1.05s cubic-bezier(.5, .05, .2, 1), opacity .3s ease; }
.sch-cur.is-on { opacity: 1; }
.sch-cur.is-still { transition: opacity .25s ease; }   /* scrubbed: the scroll moves it, only its fade eases */
.sch-cur svg { position: absolute; left: -3px; top: -2px; width: 19px; height: 23px; fill: var(--forest); stroke: #FFFFFF; stroke-width: 1.4; stroke-linejoin: round;
  transform-origin: 3px 2px; transition: scale .12s ease; filter: drop-shadow(0 1px 1.5px rgb(30 28 26 / .3)); }
.sch-cur b { position: absolute; left: 13px; top: 19px; display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 2px 7px 7px 7px;
  background: var(--forest); color: #FFFFFF; font: 500 12.5px/1 var(--f-sans); letter-spacing: -.004em; white-space: nowrap; box-shadow: 0 2px 6px -2px rgb(30 28 26 / .35); }
.sch-cur.is-press svg { scale: .84; }
/* near the right edge the name tag sits left of the arrow */
.sch-cur.is-flip b { left: auto; right: 4px; border-radius: 7px 2px 7px 7px; }

/* small parts: switch, caret, chip, text field */
.sch-tg { position: relative; flex: none; display: inline-block; width: 2.15em; height: 1.25em; border-radius: 999px; background: #D6D3CA; transition: background-color .2s ease; }
.sch-tg > i { position: absolute; left: .16em; top: .16em; width: .93em; height: .93em; border-radius: 50%; background: #FFFFFF; box-shadow: 0 1px 2px rgb(30 28 26 / .25); transition: translate .28s var(--ease); }
.sch-tg.is-on { background: var(--ok); }
.sch-tg.is-on > i { translate: .9em 0; }
.sch-caret { display: inline-block; width: max(1px, .09em); height: 1.12em; margin-left: .05em; vertical-align: -.2em; background: var(--forest); animation: sch-caret 1.05s steps(1, end) infinite; }
.sch-v.is-typed .sch-caret { visibility: hidden; animation: none; }
@keyframes sch-caret { 50% { opacity: 0; } }
.sch-chip { display: inline-flex; align-items: center; flex: none; border-radius: 999px; background: #FFFFFF; box-shadow: inset 0 0 0 1px rgb(30 28 26 / .13); font-weight: 500; white-space: nowrap; }
.sch-field { position: relative; min-width: 0; background: #FFFFFF; transition: box-shadow .2s ease; }

/* ================================================================ 1 · the reverse shot */
.sch-v1 .sch-tv { z-index: 2; }
.sch-mon { container-type: inline-size; overflow: hidden; border-radius: 1px; background: #FBFAF7; }
.sch-con { position: absolute; inset: 0; display: grid; grid-template-rows: 7.2cqw minmax(0, 1fr); font-family: var(--f-sans); color: var(--ink); background: #FBFAF7; }
.sch-con::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(120deg, rgb(255 255 255 / .1), rgb(255 255 255 / 0) 40%); }
.sch-con-top { display: flex; align-items: center; gap: 1.3cqw; padding: 0 3cqw; background: #FFFFFF; border-bottom: max(1px, .16cqw) solid var(--hair); }
.sch-con-top svg { width: 3.1cqw; height: 3.1cqw; color: #004E23; }
.sch-con-top b { font-weight: 600; font-size: 2.1cqw; letter-spacing: -.01em; }
.sch-con-top span { margin-left: auto; font-size: 1.8cqw; color: var(--ui-2); }
.sch-con-body { display: grid; grid-template-columns: 7.2cqw minmax(0, 1fr); min-height: 0; }
.sch-con-nav { display: flex; flex-direction: column; align-items: center; gap: 1.7cqw; padding-top: 2.8cqw; background: #FFFFFF; border-right: max(1px, .16cqw) solid var(--hair); }
.sch-con-nav i { display: grid; place-items: center; width: 4.2cqw; height: 4.2cqw; border-radius: .9cqw; color: var(--ui-2); }
.sch-con-nav i.is-on { background: #E3F0E5; color: var(--forest); }
.sch-con-nav svg { width: 2.5cqw; height: 2.5cqw; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.sch-con-main { display: flex; flex-direction: column; gap: 1.7cqw; min-width: 0; padding: 3.6cqw 4.4cqw 3.4cqw; }
.sch-con-h { font-weight: 600; font-size: 3.3cqw; line-height: 1.1; letter-spacing: -.024em; }
.sch-con-s { margin-top: -.9cqw; font-size: 1.9cqw; color: var(--ui-2); }
.sch-con .sch-field { min-height: 13.2cqw; padding: 2cqw 2.4cqw 4.8cqw; border-radius: 1.2cqw; box-shadow: inset 0 0 0 .2cqw rgb(30 28 26 / .14);
  font-size: 2.55cqw; line-height: 1.32; font-weight: 450; letter-spacing: -.01em; }
.sch-v1.is-focus .sch-field { box-shadow: inset 0 0 0 .26cqw var(--forest), 0 0 0 .9cqw rgb(62 138 87 / .15); }
.sch-cnt { position: absolute; right: 2.4cqw; bottom: 1.7cqw; font-size: 1.7cqw; color: var(--ui-2); }
.sch-cnt b { font-weight: 400; }
.sch-ctl { display: flex; align-items: center; gap: 1.4cqw; font-size: 2.2cqw; font-weight: 500; }
.sch-con .sch-chip { margin-left: auto; height: 4.4cqw; padding: 0 1.9cqw; font-size: 1.85cqw; box-shadow: inset 0 0 0 .18cqw rgb(30 28 26 / .13); }
.sch-scrs { display: flex; gap: 2.6cqw; margin-top: auto; font-size: 1.85cqw; color: var(--ui); }
.sch-scrs span { display: inline-flex; align-items: center; gap: .9cqw; }
.sch-scrs i { width: 1.25cqw; height: 1.25cqw; border-radius: 50%; background: var(--ok); }

/* ================================================================ 2 · three rooms */
.sch-v2 { padding-top: 4px; }
.sch-bar { position: relative; z-index: 2; display: flex; align-items: center; gap: 14px; width: min(760px, 100%); margin: 0 auto 22px; padding: 10px 12px 10px 18px;
  border-radius: 16px; background: #FFFFFF; box-shadow: 0 0 0 1px rgb(30 28 26 / .06), 0 22px 44px -28px rgb(52 62 14 / .5); font-size: 15.5px; }
.sch-bar-l { display: inline-flex; align-items: center; gap: 8px; flex: none; font-weight: 600; letter-spacing: -.01em; }
.sch-bar-l i { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); }
.sch-bar-f { flex: 1; min-width: 0; height: 40px; display: flex; align-items: center; padding: 0 12px; border-radius: 10px; background: #F6F5F1; font-weight: 450; letter-spacing: -.01em;
  white-space: nowrap; overflow: hidden; transition: box-shadow .2s ease, background-color .2s ease; }
.sch-v2.is-focus .sch-bar-f { background: #FFFFFF; box-shadow: inset 0 0 0 1.5px var(--forest), 0 0 0 4px rgb(62 138 87 / .14); }
.sch-bar .sch-chip { height: 32px; padding: 0 12px; font-size: 13.5px; }
.sch-bar .sch-tg { font-size: 19px; }
.sch-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
/* square crops, centred on the TVs: --cw = 941 / 1672 */
.sch-card { --cx: .218; --cw: .5628; margin: 0; aspect-ratio: 1; border-radius: 18px; }
.sch-loc { position: absolute; left: 14px; bottom: 14px; z-index: 3; display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 13px 0 11px; border-radius: 999px;
  background: rgb(255 255 255 / .92); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); font: 500 14px/1 var(--f-sans); letter-spacing: -.006em; color: var(--ink); }
.sch-loc i { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 3px rgb(62 138 87 / .18); }

/* ================================================================ 3 · the hero's room + a console fragment */
.sch-ph3 { margin-left: 22%; aspect-ratio: 3200 / 1792; }
.sch-c3 { position: absolute; z-index: 3; left: 0; top: 50%; translate: 0 -50%; width: min(400px, 34%); padding: 8px; border-radius: 18px; background: #FFFFFF;
  box-shadow: 0 0 0 1px rgb(30 28 26 / .06), 0 30px 60px -32px rgb(40 50 14 / .55); font-size: 15px; }
.sch-c3-h { display: flex; align-items: baseline; justify-content: space-between; padding: 10px 12px 10px; }
.sch-c3-h b { font-weight: 600; font-size: 17px; letter-spacing: -.014em; }
.sch-c3-h span { font-size: 13.5px; color: var(--ui-2); }
.sch-c3-r { position: relative; padding: 13px 14px; border-radius: 12px; }
.sch-c3-r + .sch-c3-r { margin-top: 2px; }
.sch-c3-r.is-on { background: #F3F6EF; padding-bottom: 15px; }
.sch-c3-t { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.sch-c3-t b { font-weight: 600; font-size: 15.5px; letter-spacing: -.01em; }
.sch-c3 .fg-ok { font-size: 13px; }
.sch-now { display: flex; gap: 8px; margin-top: 8px; font-size: 13.5px; line-height: 1.35; min-width: 0; }
.sch-now span { flex: none; color: var(--ui-2); }
.sch-now b { min-width: 0; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: opacity .3s ease; }
.sch-prog { position: absolute; left: 14px; right: 14px; bottom: 7px; height: 3px; border-radius: 3px; background: rgb(30 28 26 / .08); overflow: hidden; }
.sch-prog i { position: absolute; inset: 0; background: var(--ok); transform-origin: 0 50%; scale: 0 1; }
.sch-prog i.is-run { animation: sch-prog var(--dur, 5s) linear forwards; }
@keyframes sch-prog { to { scale: 1 1; } }
.sch-c3-tb { margin-top: 8px; padding: 12px 12px 12px 14px; border-radius: 12px; background: #E4ECE0; }
.sch-c3-tbh { display: flex; align-items: center; gap: 10px; }
.sch-c3-tbh b { font-weight: 600; font-size: 14.5px; letter-spacing: -.01em; margin-right: auto; }
.sch-c3 .sch-chip { height: 26px; padding: 0 10px; font-size: 12.5px; }
.sch-c3 .sch-tg { font-size: 17px; }
.sch-c3 .sch-field { margin-top: 10px; min-height: 44px; padding: 11px 12px; border-radius: 9px; font-size: 14.5px; line-height: 1.35; font-weight: 450; letter-spacing: -.008em;
  box-shadow: inset 0 0 0 1px rgb(30 28 26 / .1); }
.sch-v3.is-focus .sch-field { box-shadow: inset 0 0 0 1.5px var(--forest), 0 0 0 4px rgb(62 138 87 / .14); }

/* ================================================================ responsive */
@media (max-width: 1099px) {
  .sch-row { gap: 12px; }
  .sch-loc { left: 10px; bottom: 10px; height: 28px; font-size: 13px; }
  .sch-ph3 { margin-left: 18%; }
  .sch-c3 { width: min(360px, 40%); }
}
@media (max-width: 860px) {
  /* 3: the photo full width, cropped on the TV; the console card under it, over its lower edge */
  .sch-ph3 { --cx: .15; --cw: .70; margin-left: 0; aspect-ratio: 2240 / 1792; }
  .sch-c3 { position: relative; top: auto; left: auto; translate: none; width: auto; max-width: 440px; margin: -64px 12px 0; }
}
@media (max-width: 720px) {
  .sch-ph { border-radius: 14px; }
  /* 1: keep the TV and the monitor, drop the receptionist's shoulder */
  .sch-v1 .sch-ph { --cx: .28; --cw: .70; aspect-ratio: 1170 / 941; }
  .sch-tag { height: 20px; font-size: 11px; gap: 5px; padding: 0 7px; bottom: calc(100% + 7px); }
  .sch-cur b { height: 20px; font-size: 11.5px; padding: 0 7px; }
  /* 2: one big room, two small ones; the bar wraps */
  .sch-bar { flex-wrap: wrap; gap: 10px 10px; padding: 12px; margin-bottom: 16px; font-size: 15px; }
  .sch-bar-f { order: 3; flex: 1 0 100%; }
  .sch-bar .sch-chip { margin-left: auto; }
  .sch-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
  .sch-card:first-child { grid-column: 1 / -1; }
  .sch-card { border-radius: 14px; }
  .sch-card:not(:first-child) .sch-loc { left: 8px; bottom: 8px; height: 26px; padding: 0 10px 0 9px; font-size: 12.5px; }
}

@media (prefers-reduced-motion: reduce) {
  .sch-scr > .lk, .sch-band, .sch-scr .lk-foot, .sch-scr .lk-mid, .sch-sel, .sch-tag, .sch-cur, .sch-tg, .sch-tg > i { transition: none !important; }
  .sch-caret { animation: none; }
}

/* pinned at the centre of the viewport: on short screens the photo must fit in it */
.sch-v1 { max-width: max(520px, calc((100svh - 150px) * 1672 / 941)); margin-inline: auto; }