/* ===== flipbook.css — 3D kniha podľa CodePen WNrmpdz (namespacované) =====
   - žiadne konflikty s .cover/.book inde v appke
   - hrúbka knihy = --d; predná obálka = <img>; strany = ::before; zadná doska = ::after
*/

:root{
  --paper:       #ffffff;
  --paper-edge:  #f0f2f7;
  --paper-line:  rgba(0,0,0,.08);

  --backboard:   #cdd3df;      /* zadná doska */
  --board-shadow:#6666;        /* tieň */

  --pad: 3px;                  /* vnútorný „okraj“ pre strany */
}

/* wrapper s perspektívou */
.book3d{
  --w: 200px;      /* šírka obálky (ako CodePen) */
  --h: 300px;      /* výška */
  --d: 50px;       /* hrúbka knihy (bok) */
  --r: 4px;        /* zaoblenie pravých rohov */
  perspective: 800px;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

/* veľkosti podla data-size */
.book3d[data-size="sm"]{ --w: 180px; --h: 270px; --d:42px; }
.book3d[data-size="md"]{ --w: 200px; --h: 300px; --d:50px; }
.book3d[data-size="lg"]{ --w: 260px; --h: 380px; --d:58px; }

.fb-book{
  position: relative;
  width: var(--w);
  height: var(--h);
  transform-style: preserve-3d;
  transform: rotateY(-30deg);
  transition: transform 1s ease;
  animation: 1s ease 0s 1 fbInit;
}

/* správanie ako na CodePen – hover vyrovná dopredu */
.fb-book:hover,
.fb-book.is-front{
  transform: rotateY(0deg);
}

@keyframes fbInit {
  0%   { transform: rotateY(0deg); }
  100% { transform: rotateY(-30deg); }
}

/* predná obálka = priamy <img> vo vnútri */
.fb-book > .fb-cover{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;           /* pokryť bez deformácie */
  background: #d7dbe6;         /* jemný fallback */
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px;
  box-shadow: 5px 5px 20px var(--board-shadow);
  backface-visibility: hidden; /* nech sa „nezrkadlí“ pri rotácii */
}

/* BOK (strany) = ::before — presne podľa vzorca z CodePen + jemné prúžky */
.fb-book::before{
  content: "";
  position: absolute;
  top: var(--pad);
  height: calc(var(--h) - 2*var(--pad));
  width: var(--d);
  background:
    repeating-linear-gradient(
      to right,
      var(--paper-line) 0px,
      var(--paper-line) 1px,
      transparent 1px,
      transparent 6px
    ),
    var(--paper-edge);
  /* Tento transform je kľúčový – stránka je otočená o 90° a posunutá na pravú hranu */
  transform:
    translateX(calc(var(--w) - var(--d)/2 - var(--pad)))
    rotateY(90deg)
    translateX(calc(var(--d)/2));
  border-radius: 2px;
}

/* ZADNÁ DOSKA = ::after — posunutá dozadu o hrúbku knihy */
.fb-book::after{
  content: "";
  position: absolute;
  left: 0;
  width: var(--w);
  height: var(--h);
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px;
  background: var(--backboard);
  transform: translateZ(calc(-1 * var(--d)));
  box-shadow: -10px 0 50px 10px var(--board-shadow);
  backface-visibility: hidden;
}

/* ovládanie */
.book3d-ctrl{ display:flex; gap:8px; }
.book3d-toggle{
  display:inline-flex; align-items:center; gap:8px;
  padding: 6px 10px;
  font: inherit;
  border-radius: 10px;
  border: 1px solid var(--border, #ddd);
  background: var(--card, #fff);
  cursor: pointer;
}

/* Dark režim – len trochu silnejší tieň */
html[data-theme="dark"] .fb-book > .fb-cover{
  box-shadow: 8px 8px 28px rgba(0,0,0,.45);
}