/* ============================================================
   EIGEN PRODUCTEN: CMStandem, Ranktandem, Adstandem
   Geladen op de homepage (kaart in de fietssectie) en op de productpagina's.
   Bouwt voort op style.css: zelfde panels, knoppen, typografie en reveal-animaties.
   ============================================================ */

:root {
  --cms: #4caf7d;       /* accentkleur CMStandem: vlakken, lijnen, iconen */
  --cms-deep: #1d7a4b;  /* groen voor tekst op wit (contrast > 4.5:1) */
  --cms-night: #0a1913; /* donkere ondergrond met groene zweem */
  --rank: #ff7a1a;
  --ads: #d9dce3;
}

/* ---------- Kaart in de fietssectie (home) ---------- */
.media--cms { background: var(--paper); } /* zelfde kleur als de rand van de video */
.media--cms .media__logo { background: var(--cms-night); box-shadow: 0 0 0 1.5px rgba(76, 175, 125, .55), 0 12px 24px -10px rgba(0, 0, 0, .6); }
.media--cms .media__logo img { width: 92%; }
.media--cms .media__el { object-fit: cover; scale: 1.2; transform-origin: 30% 12%; } /* inzoomen op het CMS-paneel; de video heeft brede lege randen */
.media--cms .media__logo { left: 10px; top: 10px; width: 44px; height: 44px; border-radius: 12px; } /* klein houden: de video eronder is het verhaal */
.stop__new { display: inline-block; vertical-align: middle; margin-left: 6px; font-family: var(--f-mono); font-size: 10px; letter-spacing: .06em; text-transform: none; padding: 4px 8px; border-radius: 999px; background: var(--cms); color: var(--ink); }
.stop__cta { margin-top: 16px; font-size: 15px; }
.stop__cta:hover { color: var(--cms-deep); }
.stop--cms .stop__body h3 a:hover { color: var(--cms-deep); }

/* ---------- Producthero ---------- */
.pt-hero {
  --pt: var(--cms);
  position: relative; isolation: isolate; overflow: clip;
  background: var(--cms-night); color: var(--paper);
  padding: clamp(124px, 13vw, 170px) 0 clamp(96px, 10vw, 140px);
  --accent: var(--pt);
}
.pt-hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(900px 560px at 82% 12%, color-mix(in srgb, var(--pt) 38%, transparent), transparent 70%),
    radial-gradient(700px 420px at 0% 100%, rgba(31, 77, 255, .22), transparent 70%),
    linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px) 0 0 / 100% 88px;
}
.pt-hero--rank { --pt: var(--rank); background: #140c06; }
.pt-hero--ads { --pt: var(--ads); background: #0c0d11; }
.pt-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(40px, 5vw, 88px); align-items: center; }
.pt-hero__brand { display: flex; align-items: center; gap: 16px; margin-bottom: 28px; }
.pt-hero__brand img { width: 72px; height: 72px; flex: none; }
.pt-hero__name { font-family: var(--f-mono); font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; color: rgba(243, 240, 232, .82); line-height: 1.5; }
.pt-hero__name b { display: block; color: var(--paper); font-size: 15px; letter-spacing: .04em; }
.pt-hero__title {
  font-family: var(--f-display); font-weight: 800; font-variation-settings: "wdth" 80, "opsz" 96;
  font-size: clamp(2.5rem, 5.4vw, 5.4rem); line-height: .92; letter-spacing: -.03em; text-wrap: balance;
}
.pt-hero__title em { color: var(--pt); }
.pt-hero__sub { margin-top: 24px; max-width: 560px; font-size: clamp(1.05rem, 1.3vw, 1.2rem); line-height: 1.6; color: rgba(243, 240, 232, .88); }
.pt-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }
.pt-hero__status { display: inline-flex; align-items: center; gap: 8px; margin-top: 22px; font-size: 14px; color: rgba(243, 240, 232, .75); }
.pt-hero__status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--pt); box-shadow: 0 0 0 4px color-mix(in srgb, var(--pt) 25%, transparent); }
.pt-hero__visual { position: relative; }
.pt-hero__frame { display: block; overflow: hidden; aspect-ratio: 16 / 9; border-radius: 18px; background: var(--paper); box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .7), 0 0 0 1px rgba(255, 255, 255, .12); rotate: -1.5deg; transition: rotate .8s var(--ease-spring); }
.pt-hero__visual:hover .pt-hero__frame { rotate: 0deg; }
.pt-hero__video { display: block; width: 100%; height: 100%; object-fit: cover; scale: 1.3; transform-origin: 41% 13%; } /* inzoomen op het CMS-paneel */
.pt-hero__logo-big { width: min(100%, 380px); margin: 0 auto; filter: drop-shadow(0 30px 60px color-mix(in srgb, var(--pt) 35%, transparent)); }
.pt-hero + .panel { margin-top: calc(var(--panel-radius) * -1); }
html:not(.no-js) .pt-hero .reveal { opacity: 1; transform: none; animation: headerIn .9s var(--ease-out) both; }
html:not(.no-js) .pt-hero .reveal[data-delay="120"] { animation-delay: .12s; }
html:not(.no-js) .pt-hero .reveal[data-delay="240"] { animation-delay: .24s; }
@media (max-width: 960px) {
  .pt-hero__grid { grid-template-columns: 1fr; }
  .pt-hero__visual { max-width: 640px; }
}
@media (max-width: 560px) { .pt-hero__actions .btn { width: 100%; white-space: normal; } }

.btn--cms { --bg: var(--cms); --fg: var(--ink); --bg-h: var(--paper); --fg-h: var(--ink); }
.btn--pt { --bg: var(--pt); --fg: var(--ink); --bg-h: var(--paper); --fg-h: var(--ink); }

/* Productpagina: groene iconen in de bestaande kaarten, verder de huisstijl */
.pt-page .feat__icon { background: var(--cms); color: var(--ink); }
.pt-page .feat:hover { background: var(--cms-night); box-shadow: 0 30px 50px -24px rgba(29, 122, 75, .55); }
.pt-page .feat:hover .feat__icon { background: var(--paper); color: var(--cms-deep); }
.pt-page .panel--paper .title-blue, .pt-page .panel--white .title-blue, .pt-page .panel--paper .section-title em, .pt-page .panel--white .section-title em { color: var(--cms-deep); }

/* ---------- Demo: aanpassen → voorbeeld → publiceren ---------- */
.cms-flow__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; counter-reset: flow; }
.cms-flow__step { position: relative; padding: 14px 14px 28px; border-radius: 24px; background: var(--paper); box-shadow: 0 0 0 1.5px var(--line); }
.cms-flow__step::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: 0 0 0 2.5px var(--cms); opacity: 0; pointer-events: none; }
.cms-flow__screen { container-type: inline-size; position: relative; aspect-ratio: 4 / 3; border-radius: 14px; overflow: hidden; background: #f5f6f8; box-shadow: 0 0 0 1px #e1e4ea; line-height: 1.3; color: #1d2433; }
.cms-flow__body { padding: 22px 12px 0; }
.cms-flow__num { font-family: var(--f-mono); font-size: 12px; letter-spacing: .08em; color: var(--cms-deep); font-weight: 600; }
.cms-flow__body h3 { font-family: var(--f-display); font-weight: 800; font-variation-settings: "wdth" 88; font-size: 1.6rem; line-height: 1.05; letter-spacing: -.015em; margin: 6px 0 10px; }
.cms-flow__body p { font-size: 15.5px; color: var(--ink-2); }
/* Om de beurt licht een stap op (9 s per ronde) */
.cms-flow__step { animation: flowStep 9s var(--ease) infinite; }
.cms-flow__step::after { animation: flowRing 9s var(--ease) infinite; }
.cms-flow__step:nth-child(2), .cms-flow__step:nth-child(2)::after { animation-delay: 3s; }
.cms-flow__step:nth-child(3), .cms-flow__step:nth-child(3)::after { animation-delay: 6s; }
@keyframes flowStep { 0%, 30% { translate: 0 -8px; background: var(--white); } 36%, 100% { translate: 0 0; background: var(--paper); } }
@keyframes flowRing { 0%, 30% { opacity: 1; } 36%, 100% { opacity: 0; } }
@media (max-width: 900px) { .cms-flow__list { grid-template-columns: 1fr; max-width: 520px; } }

/* Mini-schermen (zelfde teksten als het echte paneel) */
.cmsf { position: absolute; inset: 0; font-size: 4.2cqi; padding: 1.1em; display: flex; flex-direction: column; gap: .5em; }
.cmsf__lbl { font-size: .72em; font-weight: 700; }
.cmsf__in { position: relative; height: 2.2em; border-radius: .4em; background: #fff; box-shadow: inset 0 0 0 1.5px var(--cms); }
.cmsf__in span { position: absolute; left: .7em; top: 50%; translate: 0 -50%; white-space: nowrap; font-size: .85em; }
.cmsf__in--plain { box-shadow: inset 0 0 0 1.5px #c9ced6; }
.cmsf__row { display: flex; gap: .4em; justify-content: flex-end; margin-top: auto; }
.cmsf__btn { padding: .4em .75em; border-radius: .35em; font-size: .7em; font-weight: 700; background: #fff; color: #1d7a4b; box-shadow: inset 0 0 0 1.5px #1d7a4b; white-space: nowrap; }
.cmsf__btn--pub { background: var(--cms); color: #062b18; box-shadow: none; }
.cmsf__toast { font-size: .66em; padding: .6em .75em; border-radius: .45em; background: #e3f4ea; color: #145c38; box-shadow: 0 0 0 1px #bfe3cd; }
.cmsf--site { padding: 0; gap: 0; background: #fff; }
.cmsf__banner { font-size: .62em; padding: .7em 1em; background: #fff4d1; color: #6b4a00; border-bottom: 1px solid #f0dca0; }
.cmsf__hero { margin: .9em; padding: .9em; border-radius: .5em; background: #f5f6f8; display: grid; gap: .4em; }
.cmsf__hero b { font-size: 1.05em; line-height: 1.15; }
.cmsf__hero i { display: block; height: .45em; border-radius: 999px; background: #d7dbe2; }
.cmsf__hero i:last-child { width: 60%; }
.cmsf__pic { margin: 0 .9em; flex: 1; border-radius: .5em; background: radial-gradient(130% 70% at 25% 115%, #3f8f57 55%, transparent 56%), linear-gradient(#cfe8f1, #b5dfc0); }
.cmsf--dialog { justify-content: center; background: rgba(245, 246, 248, .6); backdrop-filter: blur(2px); }
.cmsf__dialog { background: #fff; border-radius: .7em; padding: 1em; box-shadow: 0 1.2em 2.4em -1em rgba(12, 15, 29, .35), 0 0 0 1px #e1e4ea; display: grid; gap: .5em; }
.cmsf__dialog b { font-size: 1.05em; }
.cmsf__p { font-size: .66em; color: #4b5263; }
.cmsf__dialog .cmsf__row { justify-content: flex-start; margin-top: .2em; }
.cmsf__pill { justify-self: start; display: inline-flex; align-items: center; gap: .4em; font-size: .68em; font-weight: 700; padding: .35em .75em; border-radius: 999px; background: #dcf3e6; color: #17683f; }
.cmsf__pill::before { content: ""; width: .55em; height: .55em; border-radius: 50%; background: currentColor; }
/* stap 1: tekst wordt getypt; stap 3: na de klik verschijnt "Gepubliceerd" */
.cmsf__typed { clip-path: inset(0 100% 0 0); animation: cmsfType 9s steps(24, end) infinite; }
.cmsf__toast { opacity: 0; animation: cmsfToast 9s infinite; }
.cmsf__pill { opacity: 0; animation: cmsfPill 9s infinite 6s; }
.cmsf__dialog .cmsf__btn--pub { animation: cmsfPress 9s infinite 6s; }
@keyframes cmsfType { 0%, 3% { clip-path: inset(0 100% 0 0); } 18%, 100% { clip-path: inset(0 0 0 0); } }
@keyframes cmsfToast { 0%, 22% { opacity: 0; translate: 0 6px; } 26%, 100% { opacity: 1; translate: 0 0; } }
@keyframes cmsfPill { 0%, 14% { opacity: 0; } 18%, 100% { opacity: 1; } }
@keyframes cmsfPress { 0%, 10% { scale: 1; } 12% { scale: .9; } 14%, 100% { scale: 1; } }

/* ---------- Hoe je CMStandem krijgt ---------- */
.pt-note { margin-top: clamp(28px, 3vw, 40px); max-width: 70ch; font-size: 15.5px; color: rgba(243, 240, 232, .88); }

/* ---------- Andere producten (compacte productpagina's) ---------- */
.pt-others { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.pt-other { display: flex; align-items: center; gap: 16px; padding: 18px 20px; border-radius: 20px; background: var(--white); box-shadow: inset 0 0 0 1.5px var(--line); transition: transform .5s var(--ease-spring), box-shadow .3s; }
.pt-other img { width: 56px; height: 56px; flex: none; }
.pt-other b { display: block; font-family: var(--f-display); font-weight: 800; font-size: 1.25rem; letter-spacing: -.01em; }
.pt-other span { font-size: 14.5px; color: var(--ink-2); }
.pt-other:hover { transform: translateY(-4px) rotate(-1deg); box-shadow: inset 0 0 0 2px var(--ink); }
@media (max-width: 860px) { .pt-others { grid-template-columns: 1fr; } }

@media (prefers-reduced-motion: reduce) {
  .cms-flow__step, .cms-flow__step::after, .cmsf * { animation: none !important; }
  .cmsf__typed { clip-path: none; }
  .cmsf__toast, .cmsf__pill { opacity: 1; }
  .pt-hero__frame { rotate: 0deg; }
}