/* ============================================================
   KANSŌ Magazin — bladerbare catalogus
   Gebruikt dezelfde tokens als de homepage (kanso-home.css wordt
   meegeladen), hier alleen de onderdelen van het magazine zelf.
   ============================================================ */

.kanso-mag{background:var(--surface-page);color:var(--text-primary);font:var(--type-body)}
.kanso-mag :where(h1,h2,h3,p,ul,li,figure){margin:0;padding:0}
.kanso-mag :where(ul){list-style:none}
.kanso-mag :where(img){max-width:100%;height:auto;display:block}
.kanso-mag :where(a){text-decoration:none}
.kanso-magazin-page #main,.kanso-magazin-page .page-wrapper{padding:0;background:var(--surface-page)}

/* ---------- Kop ---------- */
.mag-head{padding:var(--space-8) 0 var(--space-6);text-align:center}
.mag-head .eyebrow{display:block;margin-bottom:var(--space-4)}
.mag-head h1{font:var(--type-heading-2);letter-spacing:var(--ls-h2);color:var(--kanso-ink);
     max-width:20ch;margin:0 auto var(--space-4)}
.mag-head p{font:var(--type-body-lg);color:var(--text-body);max-width:60ch;margin:0 auto}

/* ---------- Het boek ---------- */
.mag-stage{position:relative;display:flex;align-items:center;justify-content:center;
     padding:0 var(--space-8) var(--space-6)}
/* De breedte wordt ook door de schermhoogte begrensd (92vh ≈ 65vh hoog),
   zodat het boek altijd in beeld past zonder te hoeven scrollen. */
.mag-book{position:relative;width:min(92vw,960px,92vh);aspect-ratio:1414/1000;
     perspective:2600px;transform-style:preserve-3d}

/* Elke bladzijde scharniert aan de linkerkant van de rechterhelft. */
.mag-leaf{position:absolute;top:0;left:50%;width:50%;height:100%;
     transform-origin:left center;transform-style:preserve-3d;
     transition:transform 900ms cubic-bezier(.42,0,.2,1);
     will-change:transform}
.mag-leaf.is-turned{transform:rotateY(-180deg)}

.mag-leaf__face{position:absolute;inset:0;backface-visibility:hidden;overflow:hidden;
     background:var(--kanso-surface);box-shadow:var(--shadow-md)}
.mag-leaf__face img{width:100%;height:100%;object-fit:cover}
.mag-leaf__face--back{transform:rotateY(180deg);background:var(--kanso-surface)}
.mag-leaf__face--back::after{content:"";position:absolute;inset:0 0 0 auto;width:34px;
     background:linear-gradient(270deg,rgba(47,50,46,.16),transparent);pointer-events:none}
/* Bindingschaduw langs de rug */
.mag-leaf__face--front::after{content:"";position:absolute;inset:0 auto 0 0;width:34px;
     background:linear-gradient(90deg,rgba(47,50,46,.16),transparent);pointer-events:none}

/* Statische linkerhelft eronder, zodat het boek altijd twee pagina's lijkt */
.mag-book::before{content:"";position:absolute;top:0;right:50%;width:50%;height:100%;
     background:var(--kanso-sand);box-shadow:var(--shadow-md)}

/* ---------- Bladerknoppen ---------- */
.mag-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:5;
     width:52px;height:52px;border-radius:var(--radius-pill);cursor:pointer;
     border:1px solid var(--border-subtle);background:var(--surface-capsule);
     backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
     display:grid;place-items:center;color:var(--kanso-411c);
     transition:background var(--duration-base),transform var(--duration-base),opacity var(--duration-base)}
.mag-nav:hover{background:#fff;transform:translateY(-50%) scale(1.05)}
.mag-nav[disabled]{opacity:.3;cursor:default;transform:translateY(-50%)}
.mag-nav svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;
     stroke-linecap:round;stroke-linejoin:round}
.mag-nav--prev{left:6px}
.mag-nav--next{right:6px}

/* ---------- Balk met teller, schuif en knoppen ---------- */
.mag-bar{padding:0 0 var(--section-y)}
.mag-bar__inner{display:flex;align-items:center;gap:var(--space-5);flex-wrap:wrap}
.mag-counter{font:var(--type-body-sm);color:var(--text-muted);min-width:64px;white-space:nowrap}
.mag-counter b{color:var(--kanso-ink);font-weight:500}
.mag-range{flex:1 1 220px;appearance:none;height:3px;border-radius:99px;
     background:var(--border-subtle);cursor:pointer}
.mag-range::-webkit-slider-thumb{appearance:none;width:16px;height:16px;border-radius:50%;
     background:var(--kanso-mocha-mousse);border:0;cursor:pointer}
.mag-range::-moz-range-thumb{width:16px;height:16px;border-radius:50%;
     background:var(--kanso-mocha-mousse);border:0;cursor:pointer}
.mag-bar__actions{display:flex;gap:var(--space-3);flex-wrap:wrap}

/* ---------- Slotblok ---------- */
.mag-cta{padding:var(--section-y) 0 var(--section-y-lg)}
.mag-cta__inner{display:grid;grid-template-columns:1.1fr .9fr;gap:var(--space-9);align-items:center;
     background:var(--surface-card);border:1px solid var(--border-faint);
     border-radius:var(--radius-xl);padding:var(--space-9);box-shadow:var(--shadow-sm)}
.mag-cta .eyebrow{display:block;margin-bottom:var(--space-4)}
.mag-cta h2{font:var(--type-heading-3);letter-spacing:var(--ls-h3);color:var(--kanso-ink);margin-bottom:var(--space-4)}
.mag-cta p{color:var(--text-body);margin-bottom:var(--space-6)}
.mag-cta .spec-list{margin-bottom:var(--space-7)}
.mag-cta__media{border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-md)}

/* ---------- Mobiel: één pagina tegelijk, geen 3D-omslag ---------- */
@media (max-width:820px){
  /* Zo min mogelijk wit boven de catalogus: de brochure moet meteen
     in beeld staan, niet onder een scherm vol tekst. */
  .mag-head{padding:var(--space-5) 0 var(--space-4)}
  .mag-head .eyebrow{margin-bottom:8px}
  .mag-head h1{margin-bottom:8px;max-width:none}
  .mag-head p{font:var(--type-body-sm);color:var(--text-soft);max-width:34ch}

  .mag-stage{padding:0 0 var(--space-4)}
  .mag-book{width:min(calc(100vw - 24px),520px,58vh);aspect-ratio:1000/1414;perspective:none;
     touch-action:pan-y}
  .mag-book::before{display:none}
  .mag-leaf{left:0;width:100%;opacity:0;pointer-events:none;
     transition:opacity 260ms var(--ease-standard),transform 260ms var(--ease-standard)}
  .mag-leaf.is-turned{transform:none}
  .mag-leaf.is-current{opacity:1;pointer-events:auto}

  /* Nieuwe pagina schuift mee uit de richting waarin je bladert. */
  .mag-book[data-dir="next"] .mag-leaf.is-current{animation:magIn 340ms var(--ease-standard)}
  .mag-book[data-dir="prev"] .mag-leaf.is-current{animation:magInTerug 340ms var(--ease-standard)}
  /* Tijdens het slepen volgt de pagina de vinger, zonder na-ijlen. */
  .mag-book.is-sleep .mag-leaf.is-current{transition:none;animation:none}
  /* Mobiel tonen we per keer één kant van het blad. */
  .mag-leaf__face{backface-visibility:visible}
  .mag-leaf__face--back{transform:none;display:none}
  .mag-leaf.show-back .mag-leaf__face--front{display:none}
  .mag-leaf.show-back .mag-leaf__face--back{display:block}
  .mag-leaf__face--back::after,
  .mag-leaf__face--front::after{display:none}
  .mag-leaf__face{border-radius:var(--radius-md)}
  .mag-nav{width:44px;height:44px}
  .mag-nav--prev{left:-4px}
  .mag-nav--next{right:-4px}
  .mag-bar__inner{gap:var(--space-4)}
  .mag-bar__actions{width:100%}
  .mag-bar__actions .btn{flex:1;justify-content:center}
  .mag-head h1{font:var(--type-heading-3);letter-spacing:var(--ls-h3)}
}

@keyframes magIn{from{opacity:.2;transform:translateX(30px) scale(.97)}
                 to{opacity:1;transform:none}}
@keyframes magInTerug{from{opacity:.2;transform:translateX(-30px) scale(.97)}
                      to{opacity:1;transform:none}}

@media (prefers-reduced-motion:reduce){
  .mag-leaf{transition:none;animation:none !important}
}