/* ============================================================================
   /aanbod/ only (11-11 visual pass). Loaded after home.css, BEFORE pages.css,
   so overrides of pages.css .of-* rules are scoped under .of-grid.
   1. package cards: colour hover, device mockup, brand-book mockup
   2. the €79 block as five tiles with small html scenes
   Text never sits straight on a chip colour except ink #101010 on the light chips
   (7.1–13.8:1); the blue stage only carries white cards.
   ========================================================================== */

:root { --pk-ease: cubic-bezier(.22, 1, .36, 1); }

/* ---------- 1. package cards: colour hover ---------- */
.of-grid .of-card {
  transition: background-color .22s ease-out, box-shadow .22s ease-out, translate .22s ease-out;
}
.of-grid .of-media > img, .of-grid .of-media > video { transition: scale .25s ease-out; }
.of-grid .of-stage { transition: background-color .22s ease-out; }
.of-grid .mk-browser, .of-grid .mk-phone, .of-grid .bb-book, .of-grid .bb-card { transition: translate .25s ease-out, rotate .25s ease-out; }

@media (hover: hover) {
  .of-grid .of-card:hover { translate: 0 -4px; }
  .of-grid .of-card:not(.of-card--pick):hover { background: color-mix(in srgb, var(--hue) 22%, var(--surface)); }
  .of-grid .of-card:not(.of-card--pick):hover .of-for { color: #4F4C47; } /* 6.0:1 on the tint */
  .of-grid .of-card:hover .of-stage { background: var(--hue); }
  .of-grid .of-card:hover .of-media > img, .of-grid .of-card:hover .of-media > video { scale: 1.04; }
  .of-grid .of-card:hover .mk-browser { translate: -3% -2%; }
  .of-grid .of-card:hover .mk-phone { translate: 0 -6%; }
  .of-grid .of-card:hover .bb-book { rotate: -2deg; }
  .of-grid .of-card:hover .bb-card { translate: 4% -6%; rotate: 2deg; }
  .of-grid .of-card--pick:hover { box-shadow: inset 0 0 0 2px var(--hue); }
  .of-grid .of-card--pick:hover .of-eur { color: var(--hue); } /* 14.1:1 on --dark */
}
/* keyboard: the only focusable thing in a card is its link, so a focused link lights the card */
.of-grid .of-card:has(:focus-visible):not(.of-card--pick) { background: color-mix(in srgb, var(--hue) 22%, var(--surface)); }
.of-grid .of-card:has(:focus-visible):not(.of-card--pick) .of-for { color: #4F4C47; }
.of-grid .of-card:has(:focus-visible) .of-stage { background: var(--hue); }

/* ---------- 1b. stages (css-built media) ---------- */
.of-grid .of-stage {
  container-type: inline-size;
  background: color-mix(in srgb, var(--hue) 18%, #E9E7E0);
}

/* website: browser window + phone */
.mk-browser {
  position: absolute; left: 7%; top: 10%; width: 136%;
  border-radius: 2.6cqw; overflow: hidden; background: #fff;
  box-shadow: 0 2cqw 6cqw -1cqw rgba(16,16,16,.28);
}
.mk-bar { display: flex; align-items: center; gap: 1.2cqw; height: 6.4cqw; padding: 0 2.6cqw; background: #F1F0EC; border-bottom: 1px solid var(--line); }
.mk-bar > i { width: 1.6cqw; height: 1.6cqw; border-radius: 50%; background: #D3D0C8; }
.mk-url {
  display: inline-flex; align-items: center; gap: .9cqw; margin-left: 2.4cqw;
  padding: .7cqw 2.6cqw; border-radius: 9999px; background: #fff;
  font-size: 2.7cqw; line-height: 1; color: #101010; letter-spacing: .02em;
}
.mk-url .ic { width: 2.4cqw; height: 2.4cqw; }
.mk-browser img { width: 100%; height: auto; display: block; }
.mk-phone {
  position: absolute; right: 6%; top: 24%; width: 27%;
  aspect-ratio: 322 / 704; border-radius: 5cqw; overflow: hidden;
  background: #101010; border: 1.2cqw solid #101010;
  box-shadow: 0 3cqw 8cqw -2cqw rgba(16,16,16,.45);
}
.mk-phone img { width: 100%; height: 100%; object-fit: cover; border-radius: 3.6cqw; }

/* huisstijl: open brand book + business card (fictional practice "tandzorg veldhove") */
.bb-book {
  position: absolute; left: 6%; top: 9%; width: 74%; aspect-ratio: 1.5;
  display: grid; grid-template-columns: 1fr 1fr;
  rotate: -5deg; border-radius: 1.4cqw;
  /* page block: three thin page edges under the spread, then the drop shadow */
  box-shadow: 0 .5cqw 0 #E4E1DA, 0 1cqw 0 #F7F6F2, 0 1.5cqw 0 #DCD9D1, 0 4cqw 7cqw -2cqw rgba(16,16,16,.35);
}
.bb-page {
  position: relative; display: flex; flex-direction: column; gap: 2cqw;
  padding: 5cqw 4.4cqw; background: #FBFAF7; color: #101010;
}
.bb-l { border-radius: 1.4cqw 0 0 1.4cqw; background: linear-gradient(90deg, #FBFAF7 72%, #ECEAE4); }
.bb-r { border-radius: 0 1.4cqw 1.4cqw 0; background: linear-gradient(90deg, #E9E7E1, #FBFAF7 22%); }
.bb-cap { font-size: 2.5cqw; line-height: 1; letter-spacing: .08em; color: #5F5C57; }
.bb-logo { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2.4cqw; }
.bb-mark {
  display: grid; place-items: center; width: 11cqw; aspect-ratio: 1; border-radius: 3cqw;
  background: #2C7A8C; color: #fff; font-size: 5.2cqw; font-weight: 400; letter-spacing: -.04em; line-height: 1;
}
.bb-word { display: flex; flex-direction: column; align-items: center; line-height: 1.05; font-size: 4cqw; font-weight: 300; letter-spacing: -.01em; color: #13222A; }
.bb-word b { font-weight: 500; }
.bb-foot { font-size: 2.2cqw; line-height: 1; color: #5F5C57; }
.bb-sw { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2cqw; height: 13cqw; }
.bb-sw i { background: var(--c); border-radius: 1cqw; box-shadow: inset 0 0 0 1px rgba(16,16,16,.08); }
.bb-type { display: flex; align-items: flex-end; gap: 2.4cqw; }
.bb-aa { font-size: 11cqw; line-height: .8; font-weight: 400; letter-spacing: -.04em; color: #13222A; }
.bb-abc { font-size: 2.3cqw; line-height: 1.35; color: #45423D; letter-spacing: .04em; }
.bb-card {
  position: absolute; right: 4%; bottom: 5%; width: 36%; aspect-ratio: 1.72;
  display: flex; align-items: center; gap: 2cqw; padding: 0 3.6cqw;
  background: #13222A; border-radius: 1.4cqw; rotate: 8deg;
  box-shadow: 0 3cqw 6cqw -2cqw rgba(16,16,16,.5);
}
.bb-card .bb-mark { width: 7cqw; border-radius: 2cqw; font-size: 3.4cqw; }
.bb-card .bb-word { align-items: flex-start; font-size: 2.9cqw; color: #F3EEE6; }

/* ---------- 2. the €79 block ---------- */
.pk-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s4);
  align-items: stretch;
}
.pk {
  display: flex; flex-direction: column;
  background: var(--surface); border-radius: var(--radius-panel);
  padding: var(--s2) var(--s2) var(--s6);
}
.pk > .pk-h, .pk > .pk-p { margin-left: var(--s4); margin-right: var(--s4); }
.pk-h { font-size: 19px; font-weight: 400; line-height: 1.3; letter-spacing: -.01em; max-width: 34ch; }
.pk-p { margin-top: var(--s2); color: #64615B; font-weight: 300; max-width: 52ch; } /* 5.27:1 on --surface */

.pk--edit { grid-column: span 2; }

/* the dark summary tile: number, what it is, fine print */
.pk--sum { background: var(--dark); color: var(--dark-text); padding: var(--s6) var(--s6) var(--s6); }
.pk-num { font-size: clamp(72px, 7.4vw, 116px); font-weight: 300; line-height: .95; letter-spacing: -.05em; font-variant-numeric: tabular-nums; }
.pk-per { margin-top: var(--s3); font-size: 17px; font-weight: 300; color: var(--dark-text); }
.pk-lede { margin-top: var(--s5); font-weight: 300; color: var(--dark-muted); max-width: 34ch; }
.pk-fine { margin-top: auto; padding-top: var(--s6); font-size: 13.5px; font-weight: 300; color: var(--dark-muted); max-width: 52ch; } /* 9.6:1 */

/* scene stage */
.pk-vis {
  position: relative; overflow: hidden; height: 216px; margin-bottom: var(--s5);
  display: flex; align-items: center; justify-content: center; gap: var(--s4);
  padding: var(--s5); border-radius: 14px; background: var(--hue); color: #101010;
}
.pk-vis .ic { width: 16px; height: 16px; flex: 0 0 auto; }
/* /aanbod/ only (11-11, Maxim "tone them down"; merk.md: chip colours ≈ 0.1 %): the stage
   rests on a soft tint of its chip colour and takes the full colour on hover. No text sits
   on the stage itself (only white cards + ink pills), so contrast is unchanged either way.
   /aanpak/ .pk-grid--dark keeps full-colour stages; .pk-grid--why has its own tint rule in pages.css. */
body[data-page="aanbod"] .pk-vis {
  background: color-mix(in srgb, var(--hue) 20%, var(--surface));
  transition: background-color .25s ease-out;
}
@media (hover: hover) {
  body[data-page="aanbod"] .pk:hover .pk-vis { background: var(--hue); }
}

/* scene: chat → hours updated */
.pk-chat { display: flex; flex-direction: column; gap: var(--s2); width: 52%; max-width: 340px; }
.pk-msg { display: block; max-width: 92%; padding: 10px 12px 8px; border-radius: var(--radius-msg); font-size: 13.5px; line-height: 1.4; font-weight: 300; }
.pk-msg--in { background: #fff; color: #101010; border-bottom-left-radius: 4px; box-shadow: 0 2px 8px rgba(16,16,16,.08); }
.pk-msg--out { align-self: flex-end; background: #101010; color: #F6F5F1; border-bottom-right-radius: 4px; }
.pk-meta { display: flex; align-items: center; justify-content: flex-end; gap: 4px; margin-top: 2px; font-size: 11px; color: #6F6C66; } /* 5.3:1 on white */
.pk-msg--out .pk-meta { color: #B9B6AF; }
.pk-meta .ic { width: 14px; height: 14px; color: #1B62E4; }
.pk-hours {
  display: flex; flex-direction: column; width: 38%; max-width: 250px;
  padding: 12px 14px; border-radius: 12px; background: #fff; color: #101010;
  font-size: 13px; line-height: 1.3; box-shadow: 0 2px 8px rgba(16,16,16,.08);
}
.pk-hours-h { display: flex; align-items: center; gap: 6px; padding-bottom: 8px; font-size: 11px; letter-spacing: .06em; color: #5F5C57; }
.pk-hours-h .ic { width: 14px; height: 14px; }
.pk-hrow { display: flex; justify-content: space-between; gap: var(--s3); padding: 7px 0; border-top: 1px solid var(--line); }
.pk-swap { display: inline-flex; gap: 8px; align-items: baseline; }
.pk-old { position: relative; color: #6F6C66; }
.pk-old::after { content: ""; position: absolute; left: -1px; right: -1px; top: 52%; height: 1px; background: currentColor; transform-origin: left; }
.pk-new { font-weight: 500; }
.pk-live {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 5px; margin-top: 8px;
  padding: 5px 10px 5px 8px; border-radius: 9999px; background: #101010; color: #F6F5F1; font-size: 11.5px;
}
.pk-live .ic { width: 13px; height: 13px; color: #80ED99; }

/* scene: domain bar */
.pk--host .pk-vis { flex-direction: column; gap: var(--s4); }
.pk-addr {
  display: flex; align-items: center; gap: var(--s3); width: 88%; max-width: 300px;
  padding: 10px 12px; border-radius: 12px; background: #fff; box-shadow: 0 2px 8px rgba(16,16,16,.1);
}
.pk-dots { display: inline-flex; gap: 4px; }
.pk-dots i { width: 7px; height: 7px; border-radius: 50%; background: #D3D0C8; }
.pk-url {
  flex: 1; display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 9999px; background: #F1F0EC; font-size: 15px; line-height: 1; color: #101010;
}
.pk-url .ic { width: 14px; height: 14px; }
.pk-state { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px 6px 10px; border-radius: 9999px; background: #101010; color: #F6F5F1; font-size: 13px; font-weight: 300; }
.pk-state .ic { width: 14px; height: 14px; color: #1CD2F4; }

/* scene: status panel */
.pk-panel {
  display: flex; flex-direction: column; width: 88%; max-width: 300px;
  padding: 6px 14px; border-radius: 12px; background: #fff; box-shadow: 0 2px 8px rgba(16,16,16,.1);
}
.pk-srow { display: flex; align-items: center; gap: 10px; padding: 9px 0; font-size: 14px; line-height: 1.2; }
.pk-srow + .pk-srow { border-top: 1px solid var(--line); }
.pk-srow > span { flex: 1; }
.pk-srow b { font-weight: 400; font-size: 12px; padding: 4px 8px; border-radius: 9999px; background: var(--hue); color: #101010; } /* 13.1:1 */

/* scene: phone call */
.pk-callcard {
  display: flex; align-items: center; gap: var(--s3); width: 88%; max-width: 300px;
  padding: 14px; border-radius: 16px; background: #fff; box-shadow: 0 2px 8px rgba(16,16,16,.1);
}
.pk-av {
  position: relative; display: grid; place-items: center; flex: 0 0 auto;
  width: 44px; height: 44px; border-radius: 50%; background: #101010; color: #F6F5F1; font-size: 18px; line-height: 1;
}
.pk-av::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 2px solid #101010; opacity: 0; }
.pk-who { flex: 1; display: flex; flex-direction: column; gap: 2px; font-size: 15px; line-height: 1.2; }
.pk-who b { font-weight: 500; }
.pk-who span { font-size: 12px; color: #6F6C66; }
.pk-btn { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #80ED99; color: #101010; }
.pk-btn .ic { width: 18px; height: 18px; }

/* ---------- 2b. scenes play once (only when JS armed them; reduced motion never arms) ---------- */
.pk-armed .pk-msg, .pk-armed .pk-new, .pk-armed .pk-live, .pk-armed .pk-state,
.pk-armed .pk-srow b, .pk-armed .pk-callcard {
  opacity: 0; translate: 0 8px;
  transition: opacity .35s var(--pk-ease), translate .35s var(--pk-ease);
}
.pk-armed .pk-old::after { transform: scaleX(0); transition: transform .3s ease-out; }
.pk-armed .pk-url { clip-path: inset(0 100% 0 0); transition: clip-path .9s steps(14); }
.pk-armed .is-live .pk-msg, .pk-armed .is-live .pk-new, .pk-armed .is-live .pk-live, .pk-armed .is-live .pk-state,
.pk-armed .is-live .pk-srow b, .pk-armed .is-live .pk-callcard { opacity: 1; translate: 0 0; }
.pk-armed .is-live .pk-old::after { transform: scaleX(1); transition-delay: 1.5s; }
.pk-armed .is-live .pk-url { clip-path: inset(0 0 0 0); transition-delay: .2s; }
.pk-armed .is-live .pk-msg--in { transition-delay: .15s; }
.pk-armed .is-live .pk-msg--out { transition-delay: .95s; }
.pk-armed .is-live .pk-new { transition-delay: 1.8s; }
.pk-armed .is-live .pk-live { transition-delay: 2.3s; }
.pk-armed .is-live .pk-state { transition-delay: 1.25s; }
.pk-armed .is-live .pk-srow:nth-child(1) b { transition-delay: .3s; }
.pk-armed .is-live .pk-srow:nth-child(2) b { transition-delay: .6s; }
.pk-armed .is-live .pk-srow:nth-child(3) b { transition-delay: .9s; }
.pk-armed .is-live .pk-srow:nth-child(1) .ic { animation: pk-spin .8s ease-out .1s 1; }
.pk-armed .is-live .pk-callcard { transition-delay: .2s; }
.pk-armed .is-live .pk-av::after { animation: pk-ring 1.2s ease-out .7s 2; }
/* hover replay (/aanpak/): for one frame the scene jumps back to its start without transitions,
   then plays from zero. Children only, so the stage's own colour fade on hover stays smooth. */
.pk-armed .is-snap *, .pk-armed .is-snap *::before, .pk-armed .is-snap *::after { transition: none !important; }
@keyframes pk-spin { to { rotate: 360deg; } }
@keyframes pk-ring { 0% { opacity: .5; scale: .9; } 100% { opacity: 0; scale: 1.35; } }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .pk-grid { grid-template-columns: repeat(2, 1fr); }
  .pk--edit { grid-column: span 1; }
  .pk--call { grid-column: span 2; }
  .pk--edit .pk-vis { height: auto; min-height: 216px; flex-direction: column; align-items: stretch; }
  .pk-chat, .pk-hours { width: 100%; max-width: none; }
}
@media (max-width: 700px) {
  .pk-grid { grid-template-columns: 1fr; }
  .pk--call { grid-column: auto; }
  .pk--sum { padding: var(--s6) var(--s5); }
  .pk-vis { height: 184px; padding: var(--s4); }
  .pk--call .pk-vis { height: 152px; }
  .pk--edit .pk-vis { height: auto; }
  .pk > .pk-h, .pk > .pk-p { margin-left: var(--s3); margin-right: var(--s3); }
}

@media (prefers-reduced-motion: reduce) {
  .of-grid .of-card, .of-grid .of-media > img, .of-grid .of-media > video, .of-grid .of-stage,
  .of-grid .mk-browser, .of-grid .mk-phone, .of-grid .bb-book, .of-grid .bb-card { transition: none; }
  .of-grid .of-card:hover { translate: none; }
  .of-grid .of-card:hover .of-media > img, .of-grid .of-card:hover .of-media > video { scale: none; }
  .of-grid .of-card:hover .mk-browser, .of-grid .of-card:hover .mk-phone, .of-grid .of-card:hover .bb-card { translate: none; }
  .of-grid .of-card:hover .bb-book { rotate: -5deg; }
  .of-grid .of-card:hover .bb-card { rotate: 8deg; }
}