/* Korporate4Kidz™: the shelf, and the picture-book reader */

:root {
  --paper: #FBF7EE;
  --paper-edge: #EFE6D2;
  --story-ink: #2B2A33;
  --story: "Literata", Georgia, "Times New Roman", serif;
}

.k4k-trust { font-size: var(--fs-small); color: var(--on-dark-soft); }

/* ---------- Shelf ---------- */
.k4k-shelf { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(20px, 2.4vw, 32px); align-items: start; }
.k4k-book { display: grid; gap: 24px; }
.k4k-book--live { grid-column: 1 / -1; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); background: var(--white); border-radius: var(--radius-lg); padding: clamp(20px, 3vw, 40px); box-shadow: var(--shadow); align-items: center; }
.k4k-book--live .k4k-book-body h3 { font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.2rem); }
.k4k-book--live .k4k-book-body > p:not(.k4k-sub) { font-size: 1.05rem; max-width: 58ch; }
.k4k-book--soon { grid-template-columns: minmax(0, 200px) minmax(0, 1fr); align-items: start; }
.k4k-book-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; align-content: start; justify-items: start; }
.k4k-book-body h3 { font-family: var(--display); font-size: var(--fs-h3); font-weight: 800; line-height: 1.2; color: var(--ink); }
.k4k-book-body p { color: var(--ink-soft); font-size: .98rem; }
.k4k-book-body .k4k-sub { font-family: var(--display); font-weight: 700; color: var(--blue-deep); margin-top: -6px; }
.k4k-book-body .btn { margin-top: 8px; }

.k4k-status { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-micro); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint); background: var(--white); border: 1px solid var(--line); border-radius: 999px; padding: 5px 11px; }
.k4k-status--live { color: #1F7A4D; background: #E8F6EE; border-color: #BFE5CF; }
.k4k-status--live i { width: 7px; height: 7px; border-radius: 50%; background: #2BA36A; box-shadow: 0 0 0 3px rgba(43,163,106,.18); }

.k4k-meta { display: grid; gap: 6px; margin: 4px 0 2px; font-size: var(--fs-small); width: 100%; }
.k4k-meta div { display: grid; grid-template-columns: 6.5em minmax(0, 1fr); gap: 10px; padding-top: 6px; border-top: 1px solid var(--line); }
.k4k-meta dt { color: var(--ink-faint); font-weight: 600; }
.k4k-meta dd { color: var(--ink); }

/* Covers: a real picture with the title as live text, or a plain coloured book */
.k4k-cover { position: relative; display: block; aspect-ratio: 3 / 4; border-radius: 6px 14px 14px 6px; overflow: hidden; text-decoration: none; isolation: isolate;
  box-shadow: inset 6px 0 0 rgba(0,0,0,.10), inset 8px 0 0 rgba(255,255,255,.22), 0 2px 4px rgba(20,25,56,.08), 0 18px 36px rgba(20,25,56,.16);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease); }
.k4k-cover:hover { transform: translateY(-4px) rotate(-.6deg); box-shadow: inset 6px 0 0 rgba(0,0,0,.10), inset 8px 0 0 rgba(255,255,255,.22), 0 4px 8px rgba(20,25,56,.1), 0 28px 54px rgba(20,25,56,.22); }
.k4k-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.k4k-cover--art::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(251,247,238,.96) 0%, rgba(251,247,238,.86) 22%, rgba(251,247,238,0) 44%); }
.k4k-cover-title { position: absolute; left: 0; right: 0; top: 0; padding: 9% 9% 0 11%; display: grid; gap: 6px; }
.k4k-cover-title b { font-family: var(--display); font-weight: 800; font-size: clamp(1.15rem, .8rem + 1.1vw, 1.7rem); line-height: 1.08; letter-spacing: -.02em; color: var(--midnight); text-wrap: balance; }
.k4k-cover-title i { font-style: normal; font-family: var(--display); font-weight: 700; font-size: clamp(.78rem, .7rem + .3vw, .95rem); color: var(--blue-deep); }
.k4k-cover-badge { position: absolute; right: 7%; bottom: 6%; font-family: var(--display); font-weight: 800; font-size: .72rem; letter-spacing: .04em; color: var(--midnight); background: var(--gold); border-radius: 999px; padding: 6px 10px; box-shadow: 0 2px 6px rgba(0,0,0,.15); }
.k4k-cover-badge::before { content: "Korporate4Kidz\2122 \00B7 "; font-weight: 700; }

.k4k-cover--plain { background: var(--midnight); }
.k4k-cover--plain .k4k-cover-title { top: auto; bottom: 22%; }
.k4k-cover--plain .k4k-cover-title b { color: var(--white); }
.k4k-cover--plain .k4k-cover-title i { color: var(--ice); }
.k4k-cover--plain::after { content: ""; position: absolute; left: 11%; top: 19%; width: 26%; aspect-ratio: 1; border-radius: 50%; opacity: .9; }
.k4k-cover--gold { background: radial-gradient(90% 60% at 80% 10%, rgba(194,163,107,.55), transparent 70%), linear-gradient(160deg, #2A2F63, #141938); }
.k4k-cover--gold::after { background: radial-gradient(circle at 35% 35%, #F3E6C8, #C2A36B 70%); box-shadow: 0 0 40px rgba(194,163,107,.5); }
.k4k-cover--violet { background: radial-gradient(90% 60% at 20% 10%, rgba(136,96,208,.6), transparent 70%), linear-gradient(160deg, #2B2160, #141938); }
.k4k-cover--violet::after { left: auto; right: 12%; background: radial-gradient(circle at 35% 35%, #CFE9F6, #84CEEB 55%, #5680E9); box-shadow: 0 0 40px rgba(132,206,235,.45); }
.k4k-book--soon .k4k-cover { filter: saturate(.92); }
.k4k-book--soon .k4k-cover-title b { font-size: clamp(1rem, .85rem + .5vw, 1.2rem); overflow-wrap: anywhere; }
.k4k-book--soon .k4k-cover-title i { font-size: .78rem; }
.k4k-book--soon .k4k-cover::before { content: "Coming soon"; position: absolute; top: 7%; right: 7%; font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--white); border: 1px solid rgba(255,255,255,.4); border-radius: 999px; padding: 4px 9px; }

.k4k-meta { grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr)); column-gap: 24px; max-width: 620px; } /* two columns only when each has room */
@media (max-width: 980px) {
  .k4k-shelf { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 680px) {
  .k4k-book--live { grid-template-columns: minmax(0, 1fr); }
  .k4k-book--live .k4k-cover { max-width: 320px; width: 100%; }
  .k4k-meta { grid-template-columns: minmax(0, 1fr); }
  .k4k-book--soon { grid-template-columns: 120px minmax(0, 1fr); gap: 16px; }
  .k4k-book--soon .k4k-cover-title b { font-size: .82rem; }
  .k4k-book--soon .k4k-cover-title i, .k4k-book--soon .k4k-cover-badge, .k4k-book--soon .k4k-cover::before { display: none; }
}

/* ---------- Learning outcomes ---------- */
.k4k-facts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--line-dark); border-radius: var(--radius-lg); overflow: hidden; }
.k4k-facts li { background: var(--midnight); padding: clamp(22px, 2.4vw, 34px); display: grid; gap: 6px; }
.k4k-facts b { font-family: var(--display); font-weight: 800; font-size: clamp(2.2rem, 1.6rem + 2vw, 3.4rem); line-height: 1; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.k4k-facts span { color: var(--on-dark-soft); }
@media (max-width: 760px) { .k4k-facts { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

/* ---------- Reader ---------- */
html.k4k-open, html.k4k-open body { overflow: hidden; }
.k4k-reader { position: fixed; inset: 0; z-index: 200; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto auto; background: radial-gradient(120% 80% at 50% 0%, #232A5C 0%, #141938 60%); color: var(--on-dark); opacity: 0; transition: opacity .3s var(--ease); }
.k4k-reader.is-on { opacity: 1; }
.k4k-reader[hidden] { display: none; }

.k4k-reader-bar { display: flex; align-items: center; gap: 16px; padding: max(12px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) 12px max(16px, env(safe-area-inset-left)); }
.k4k-reader-brand { font-family: var(--display); font-weight: 800; color: var(--gold); white-space: nowrap; }
.k4k-reader-title { flex: 1; min-width: 0; font-size: var(--fs-small); color: var(--on-dark-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.k4k-close, .k4k-turn { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255,255,255,.22); background: rgba(255,255,255,.06); color: var(--white); cursor: pointer; transition: background .2s, border-color .2s, opacity .2s; }
.k4k-close:hover, .k4k-turn:hover:not(:disabled) { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.45); }
.k4k-close svg, .k4k-turn svg { width: 20px; height: 20px; }
.k4k-turn:disabled { opacity: .3; cursor: default; }

.k4k-stage { display: grid; place-items: center; padding: 4px max(16px, env(safe-area-inset-right)) 8px max(16px, env(safe-area-inset-left)); min-height: 0; }
.k4k-spread { width: min(100%, 1260px, calc((100vh - 170px) * 1.86)); display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); background: var(--paper); border-radius: 6px 10px 10px 6px; overflow: hidden; box-shadow: 0 30px 80px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.06); }
@supports (height: 100dvh) { .k4k-spread { width: min(100%, 1260px, calc((100dvh - 170px) * 1.86)); } }
.k4k-art { position: relative; aspect-ratio: 4 / 3; background: var(--paper-edge); }
.k4k-art > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .35s var(--ease); }
.k4k-art > img.is-in { opacity: 1; }
.k4k-art.is-portrait { background: linear-gradient(135deg, #EDE3CC, #F7F1E3); }

.k4k-art-cover { position: absolute; inset: 5% 0; display: none; justify-content: center; }
.k4k-art.is-portrait .k4k-art-cover { display: flex; }
.k4k-art.is-portrait > img { display: none; }
.k4k-art-cover .k4k-cover { height: 100%; width: auto; }
.k4k-art-cover .k4k-cover:hover { transform: none; }
.k4k-art-cover .k4k-cover { container-type: inline-size; }
.k4k-art-cover .k4k-cover-title { gap: 1.5cqi; }
.k4k-art-cover .k4k-cover-title b { font-size: 8.4cqi; }
.k4k-art-cover .k4k-cover-title i { font-size: 4.4cqi; }
.k4k-art-cover .k4k-cover-badge { font-size: 3.6cqi; padding: 1.6cqi 2.8cqi; white-space: nowrap; }
.k4k-art::after { content: ""; position: absolute; top: 0; bottom: 0; right: 0; width: 26px; background: linear-gradient(90deg, transparent, rgba(43,42,51,.14)); pointer-events: none; }

.k4k-page { position: relative; display: flex; flex-direction: column; justify-content: center; padding: clamp(24px, 3.4vw, 54px); color: var(--story-ink); overflow-y: auto; background: linear-gradient(90deg, rgba(43,42,51,.07), transparent 22px), var(--paper); }
.k4k-text { display: grid; gap: .8em; font-family: var(--story); font-size: clamp(1.08rem, .82rem + .78vw, 1.5rem); line-height: 1.55; text-wrap: pretty; }
.k4k-folio { position: absolute; bottom: 16px; right: 22px; font-family: var(--story); font-size: .9rem; color: #9C9482; }
.k4k-page.is-title, .k4k-page.is-end { gap: 14px; }
.k4k-page h2 { font-family: var(--display); font-weight: 800; font-size: clamp(1.7rem, 1.1rem + 1.8vw, 2.6rem); line-height: 1.08; letter-spacing: -.02em; color: var(--midnight); text-wrap: balance; }
.k4k-series { font-size: var(--fs-micro); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #A07F42; }
.k4k-subtitle { font-family: var(--display); font-weight: 700; font-size: 1.15rem; color: var(--blue-deep); }
.k4k-age, .k4k-page.is-end p { font-family: var(--story); color: #5D5A66; font-size: 1.02rem; }
.k4k-page .btn { align-self: flex-start; margin-top: 8px; }
.k4k-end-actions { display: flex; flex-wrap: wrap; gap: 10px 12px; align-items: center; margin-top: 6px; }
.k4k-end-actions .btn { margin: 0; }
.k4k-link { background: none; border: 0; padding: 8px 2px; font: inherit; font-weight: 600; color: var(--blue-deep); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.k4k-page .k4k-share-note { font-family: var(--body); font-size: var(--fs-small); color: #1F7A4D; min-height: 1.2em; }

.k4k-controls { display: flex; align-items: center; justify-content: center; gap: 22px; padding: 6px 16px 10px; }
.k4k-count { min-width: 9em; text-align: center; font-size: var(--fs-small); color: var(--on-dark-soft); font-variant-numeric: tabular-nums; }
.k4k-progress { height: 3px; background: rgba(255,255,255,.08); margin-bottom: env(safe-area-inset-bottom); }
.k4k-progress i { display: block; height: 100%; width: 0; background: var(--grad); transition: width .35s var(--ease); }

@media (max-width: 820px), (max-aspect-ratio: 1/1) {
  .k4k-stage { place-items: start center; overflow-y: auto; padding-top: 0; }
  .k4k-spread { width: min(100%, 640px); grid-template-columns: minmax(0, 1fr); }
  .k4k-art::after { display: none; }
  .k4k-page { overflow: visible; justify-content: flex-start; padding: 22px 22px 40px; background: var(--paper); }
  .k4k-folio { bottom: 12px; right: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .k4k-reader, .k4k-art img, .k4k-progress i, .k4k-cover { transition: none; }
}

/* Desktop: the left page turns back, the right page turns forward */
.k4k-spread.is-clickable .k4k-art { cursor: w-resize; }
.k4k-spread.is-clickable .k4k-page { cursor: e-resize; }
.k4k-spread.is-clickable .k4k-page.is-end { cursor: auto; }
.k4k-spread.is-clickable .k4k-page button { cursor: pointer; }
.k4k-spread.is-clickable .k4k-art.is-portrait { cursor: auto; }
.k4k-spread.is-clickable .k4k-art:not(.is-portrait):hover::after { width: 60px; background: linear-gradient(90deg, transparent, rgba(43,42,51,.2)); }
.k4k-art::after { transition: width .25s var(--ease), background .25s var(--ease); }