/* =========================================================
   Technoknowledge: books.css  (Books page + flipbook viewer)
   ========================================================= */

/* ---------- book grid ---------- */
.book-grid { list-style: none; padding: 0; display: grid; gap: 28px 20px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 640px) { .book-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1100px) { .book-grid { grid-template-columns: repeat(4, 1fr); gap: 40px 28px; } }
.book-card { display: flex; flex-direction: column; }
.book-card__open { position: relative; display: block; padding: 0; border: 0; background: none; cursor: pointer; perspective: 1200px; text-align: left; }
.book-card__cover {
  position: relative; display: block; aspect-ratio: 420 / 520; border-radius: 4px 10px 10px 4px; overflow: hidden;
  box-shadow: 0 18px 34px rgba(19, 41, 75, 0.22), 0 2px 6px rgba(19, 41, 75, 0.12);
  transform-origin: left center; transition: transform 500ms var(--ease), box-shadow 500ms var(--ease);
}
.book-card__cover::before { /* spine shading */
  content: ""; position: absolute; inset: 0 auto 0 0; width: 9%; z-index: 1;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.22), rgba(255, 255, 255, 0.18) 45%, rgba(0, 0, 0, 0.06));
}
.book-card__cover img { width: 100%; height: 100%; object-fit: cover; }
.book-card__open:hover .book-card__cover, .book-card__open:focus-visible .book-card__cover {
  transform: rotateY(-18deg) translateX(4%); box-shadow: 18px 24px 40px rgba(19, 41, 75, 0.28);
}
.book-card__open:focus-visible { outline: none; }
.book-card__open:focus-visible .book-card__cover { box-shadow: var(--focus-ring), 18px 24px 40px rgba(19, 41, 75, 0.28); }
.book-card__badge {
  position: absolute; z-index: 2; right: 10px; bottom: 10px; display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px; border-radius: 999px; background: var(--navy); color: #fff; font-weight: 700; font-size: var(--fs-xs);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.25); transition: background var(--t-fast), color var(--t-fast);
}
.book-card__badge svg { width: 14px; height: 14px; }
.book-card__open:hover .book-card__badge { background: var(--yellow); color: var(--navy); }
.book-card__grade { margin-top: 16px; font-family: var(--font-heading); font-weight: 800; font-size: 1.125rem; color: var(--navy); }
.book-card__meta { margin-top: 2px; font-size: var(--fs-sm); color: var(--text-muted); }
.book-card__topics { list-style: none; padding: 0; margin-top: 10px; display: flex; flex-wrap: wrap; gap: 6px; }
.book-card__topics li { padding: 4px 10px; border-radius: 999px; background: var(--bg-soft); border: 1px solid var(--border); font-size: 12px; font-weight: 600; color: var(--text); }

/* ---------- chapters by grade ---------- */
.chapters { display: grid; gap: 28px; align-items: start; }
@media (min-width: 1100px) { .chapters { grid-template-columns: 220px 1fr; gap: 40px; } }
.chapters__cover { display: none; }
@media (min-width: 1100px) { .chapters__cover { display: block; width: 100%; border-radius: 4px 10px 10px 4px; box-shadow: var(--shadow-lg); } }
.chapter-list { list-style: none; padding: 0; display: grid; gap: 8px; counter-reset: ch; }
@media (min-width: 640px) { .chapter-list { grid-template-columns: 1fr 1fr; } }
.chapter-list li { display: grid; grid-template-columns: 34px 1fr; gap: 12px; align-items: center; padding: 10px 14px; border-radius: var(--radius-md); background: var(--bg-soft); font-weight: 600; font-size: var(--fs-sm); color: var(--text); }
.chapter-list li::before { counter-increment: ch; content: counter(ch); width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--navy); color: var(--yellow); font-family: var(--font-heading); font-weight: 800; font-size: 13px; }
.chapter-list li.is-extra::before { content: "+"; background: var(--yellow); color: var(--navy); }
.chapters__actions { margin-top: 20px; }
.book-tabs { flex-wrap: wrap; }

/* ---------- books + LMS ---------- */
.lms-shot { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); border: 1px solid var(--border); }

/* =========================================================
   FLIPBOOK VIEWER
   ========================================================= */
html.flipbook-open { overflow: hidden; }
.flipbook {
  width: 100vw; height: 100vh; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0;
  background: radial-gradient(120% 90% at 50% 40%, #1E3A66 0%, #0E1E38 70%); color: #fff;
  display: none; flex-direction: column;
}
.flipbook[open] { display: flex; }
.flipbook::backdrop { background: rgba(8, 18, 36, 0.85); }
.flipbook__bar { display: flex; align-items: center; gap: 12px; padding: 12px clamp(12px, 3vw, 28px); border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
.flipbook__title { font-family: var(--font-heading); font-weight: 800; font-size: 1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.flipbook__count { margin-left: auto; font-size: var(--fs-sm); color: #B9C4D6; white-space: nowrap; }
.flipbook__tools { display: flex; align-items: center; gap: 8px; }
.flipbook__tool { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.16); color: #fff; cursor: pointer; }
.flipbook__tool:hover, .flipbook__tool[aria-pressed="true"] { background: var(--yellow); color: var(--navy); border-color: var(--yellow); }
.flipbook__tool svg { width: 20px; height: 20px; }
.flipbook__cta { display: none; }
@media (min-width: 900px) { .flipbook__cta { display: inline-flex; min-height: 42px; padding-block: 8px; } }
@media (max-width: 639px) { .flipbook__count { display: none; } .flipbook__title { margin-right: auto; } }

.flipbook__stage-wrap { position: relative; flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 14px clamp(8px, 4vw, 64px); }
.flipbook__stage { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; overflow: hidden; perspective: 2400px; }
.flipbook__book {
  position: relative; display: grid; grid-template-columns: 1fr 1fr; cursor: pointer;
  filter: drop-shadow(0 30px 40px rgba(0, 0, 0, 0.45));
  transition: transform 600ms cubic-bezier(0.45, 0.05, 0.25, 1);
}
.flipbook__book.is-single { grid-template-columns: 1fr; }
.flipbook__book.is-cover { transform: translateX(-25%); }   /* centre the closed book */
.flipbook__page { position: relative; background: #fff; overflow: hidden; }
.flipbook__page img { width: 100%; height: 100%; object-fit: contain; display: block; user-select: none; }
.flipbook__page--left { border-radius: 6px 0 0 6px; box-shadow: inset -24px 0 30px -18px rgba(0, 0, 0, 0.35); }
.flipbook__page--right { border-radius: 0 6px 6px 0; box-shadow: inset 24px 0 30px -18px rgba(0, 0, 0, 0.3); }

.flipbook__page.is-empty { background: transparent; box-shadow: none; }
.flipbook__book.is-single .flipbook__page--left { display: none; }
.flipbook__book.is-single .flipbook__page--right { border-radius: 6px; box-shadow: none; }

/* turning leaf */
.flipbook__leaf { position: absolute; top: 0; bottom: 0; width: 50%; transform-style: preserve-3d; transition: transform 700ms cubic-bezier(0.45, 0.05, 0.25, 1); z-index: 5; pointer-events: none; }
.flipbook__leaf.is-forward { left: 50%; transform-origin: left center; transform: rotateY(0deg); }
.flipbook__leaf.is-forward.is-turning { transform: rotateY(-180deg); }
.flipbook__leaf.is-back { left: 0; transform-origin: right center; transform: rotateY(0deg); }
.flipbook__leaf.is-back.is-turning { transform: rotateY(180deg); }
.flipbook__leaf.is-single { left: 0; width: 100%; }
.flipbook__leaf.is-single.is-forward { transform-origin: left center; }
.flipbook__leaf.is-single.is-back { transform-origin: left center; transform: rotateY(-180deg); }
.flipbook__leaf.is-single.is-back.is-turning { transform: rotateY(0deg); }
.flipbook__leaf-face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; background: #fff; overflow: hidden; }
.flipbook__leaf-face img { width: 100%; height: 100%; object-fit: contain; display: block; }
.flipbook__leaf-back { transform: rotateY(180deg); }
.flipbook__leaf-front::after, .flipbook__leaf-back::after { content: ""; position: absolute; inset: 0; pointer-events: none; transition: opacity 700ms; }
.flipbook__leaf-front::after { background: linear-gradient(90deg, rgba(0, 0, 0, 0.18), transparent 30%); opacity: 0; }
.flipbook__leaf.is-turning .flipbook__leaf-front::after { opacity: 1; }

.flipbook__nav { position: absolute; top: 50%; translate: 0 -50%; z-index: 6; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.2); color: #fff; cursor: pointer; transition: background var(--t-fast), color var(--t-fast), opacity var(--t-fast); }
.flipbook__nav:hover:not(:disabled) { background: var(--yellow); color: var(--navy); }
.flipbook__nav:disabled { opacity: 0.25; cursor: default; }
.flipbook__nav svg { width: 24px; height: 24px; }
.flipbook__prev { left: clamp(6px, 1.5vw, 18px); }
.flipbook__next { right: clamp(6px, 1.5vw, 18px); }
@media (max-width: 639px) { .flipbook__nav { top: auto; bottom: 8px; translate: none; width: 44px; height: 44px; background: rgba(14, 30, 56, 0.85); } .flipbook__stage-wrap { padding-bottom: 60px; } }

.flipbook__thumbs { display: flex; gap: 8px; padding: 10px clamp(12px, 3vw, 28px) 14px; overflow-x: auto; scrollbar-width: thin; border-top: 1px solid rgba(255, 255, 255, 0.1); }
.flipbook__thumb { flex: none; position: relative; padding: 0; border: 2px solid transparent; border-radius: 6px; background: #fff; cursor: pointer; opacity: 0.6; transition: opacity var(--t-fast), border-color var(--t-fast), transform var(--t-fast); }
.flipbook__thumb-img { display: block; width: 46px; height: 59.5px; border-radius: 4px; background-repeat: no-repeat; }
.flipbook__thumb span { position: absolute; left: 50%; bottom: -1px; translate: -50% 0; font-size: 10px; font-weight: 800; color: var(--navy); background: rgba(255, 255, 255, 0.9); padding: 0 4px; border-radius: 4px 4px 0 0; }
.flipbook__thumb:hover { opacity: 1; transform: translateY(-2px); }
.flipbook__thumb.is-current { opacity: 1; border-color: var(--yellow); }

/* zoom: one large page that scrolls */
.flipbook.is-zoomed .flipbook__stage { overflow: auto; display: block; }
.flipbook.is-zoomed .flipbook__book { height: auto; width: min(1500px, 190%); aspect-ratio: 2 / 1.294; margin: 0 auto; cursor: default; transform: none; }
.flipbook.is-zoomed .flipbook__book.is-single { width: min(900px, 170%); aspect-ratio: 1 / 1.294; }
.flipbook.is-zoomed .flipbook__nav { opacity: 0.5; }

@media (prefers-reduced-motion: reduce) { .flipbook__leaf { transition: none; } }

/* ---------- hero: clickable book fan ---------- */
.books-hero { min-height: 340px; }
.books-hero__open { position: absolute; inset: 0; padding: 0; border: 0; background: none; cursor: pointer; }
.books-hero .book-fan { position: absolute; inset: 0 0 8% 0; width: auto; height: auto; pointer-events: none; }
.books-hero .book-fan img { width: 46%; border: 4px solid #fff; }
.books-hero .book-fan img:nth-child(1) { left: 2%; bottom: 4%; }
.books-hero .book-fan img:nth-child(2) { left: 27%; bottom: 10%; }
.books-hero .book-fan img:nth-child(3) { right: 2%; bottom: 2%; }
.books-hero__open:hover .book-fan img:nth-child(1), .books-hero__open:focus-visible .book-fan img:nth-child(1) { transform: rotate(-16deg) translate(-6%, 2%); }
.books-hero__open:hover .book-fan img:nth-child(2), .books-hero__open:focus-visible .book-fan img:nth-child(2) { transform: rotate(-3deg) translateY(-12%); }
.books-hero__open:hover .book-fan img:nth-child(3), .books-hero__open:focus-visible .book-fan img:nth-child(3) { transform: rotate(12deg) translate(6%, -2%); }
.books-hero .prog-hero__badge { z-index: 5; }
@media (min-width: 1100px) { .books-hero { min-height: 460px; } }

/* ---------- closing CTA ---------- */
.books-cta { display: grid; gap: 24px; align-items: center; }
@media (min-width: 1100px) { .books-cta { grid-template-columns: 1fr auto; } }
.books-cta h2 { color: #fff; margin-top: 8px; }
.books-cta p { color: #C9D3E3; margin-top: 8px; }
.books-cta .btn--whatsapp svg { width: 20px; height: 20px; }
.grade-panel.chapters { display: grid; grid-template-columns: 1fr; }
.grade-panel.chapters[hidden] { display: none; }
@media (min-width: 1100px) { .grade-panel.chapters { grid-template-columns: 200px 1fr !important; gap: 40px; } }
.flipbook__book.is-cover .flipbook__page--left { visibility: hidden; }

/* ---------- hero: the Grade 8 book opens and its pages flip ---------- */
.books-hero .bk3d { position: absolute; right: 2%; bottom: 2%; width: 46%; aspect-ratio: 420 / 520; z-index: 2; transform: rotate(8deg); transition: transform 500ms var(--ease); perspective: 1600px; transform-style: preserve-3d; }
.books-hero__open:hover .bk3d, .books-hero__open:focus-visible .bk3d { transform: rotate(12deg) translate(6%, -2%); }
.bk3d__base, .bk3d__leaf { position: absolute; inset: 0; }
.bk3d__base, .bk3d__face { border-radius: 6px; overflow: hidden; background: #fff; box-shadow: 0 18px 40px rgba(0,0,0,.4); }
.bk3d__base { border: 4px solid #fff; }
.books-hero .book-fan .bk3d img { position: static !important; display: block; width: 100% !important; height: 100%; object-fit: cover; object-position: top; border: 0 !important; border-radius: 0; box-shadow: none !important; transform: none !important; transition: none; }
.bk3d__leaf { transform-origin: left center; transform-style: preserve-3d; transform: rotateY(0deg) translateZ(calc(var(--d) * 1px)); }
.bk3d__face { position: absolute; inset: 0; border: 4px solid #fff; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.bk3d__face--back { transform: rotateY(180deg); }
/* a soft shade sweeps over a page while it turns */
.bk3d__face::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(0,0,0,.28), rgba(0,0,0,0) 40%); opacity: 0; }
.js .bk3d__leaf:nth-of-type(2) { animation: bk-flip-1 12s cubic-bezier(.45,.05,.35,1) 1.2s infinite; }
.js .bk3d__leaf:nth-of-type(3) { animation: bk-flip-2 12s cubic-bezier(.45,.05,.35,1) 1.2s infinite; }
.js .bk3d__leaf:nth-of-type(4) { animation: bk-flip-3 12s cubic-bezier(.45,.05,.35,1) 1.2s infinite; }
.js .bk3d__face::after { animation: bk-shade 12s ease 1.2s infinite; }
@keyframes bk-flip-1 { 0%, 6% { transform: rotateY(0deg) translateZ(3px); } 16%, 72% { transform: rotateY(-180deg) translateZ(3px); } 84%, 100% { transform: rotateY(0deg) translateZ(3px); } }
@keyframes bk-flip-2 { 0%, 26% { transform: rotateY(0deg) translateZ(2px); } 36%, 68% { transform: rotateY(-180deg) translateZ(2px); } 80%, 100% { transform: rotateY(0deg) translateZ(2px); } }
@keyframes bk-flip-3 { 0%, 44% { transform: rotateY(0deg) translateZ(1px); } 54%, 64% { transform: rotateY(-180deg) translateZ(1px); } 76%, 100% { transform: rotateY(0deg) translateZ(1px); } }
@keyframes bk-shade { 0%, 100% { opacity: 0; } 10% { opacity: 1; } 18% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .js .bk3d__leaf, .js .bk3d__face::after { animation: none; } }

/* the STEM.org pill sits above the books; keep the fan below it */
.books-hero .stem-pill { margin-bottom: 0; }
.books-hero .book-fan { top: 64px; }