/* Free ebook landing pages (/ebook/cakap-anak-dengar/, /en/ebook/talk-so-kids-hear/). Loads after site.css,
   seasons.css, answers.css and printables.css and reuses their tiles (s-hero, s-feature, s-split, s-shot,
   p-dots, p-sheet, p-hero-cta). Adds the cover in a page frame, the inside list and the chapter cards.
   Tokens only; the cover is the real rendered PDF page. */

/* hero: the rendered cover on a grey stage, a thin page edge behind it ------------------------------ */
.e-stage { margin: 0 auto; width: min(100%, 460px); background: var(--tile); border-radius: var(--radius-card); padding: var(--s10) var(--s8); display: grid; place-items: center; }
.e-book { position: relative; display: block; width: min(78%, 300px); }
.e-book picture { display: block; }
.e-book::before { content: ""; position: absolute; inset: 6px -6px -6px 6px; background: var(--bg); border-radius: 6px; box-shadow: 0 1px 3px rgba(29, 29, 31, .08); }
.e-book img { position: relative; display: block; width: 100%; height: auto; border-radius: 6px; box-shadow: 0 1px 3px rgba(29, 29, 31, .1), 0 30px 50px -24px rgba(29, 29, 31, .45); transition: transform .5s var(--ease); }
.e-stage:hover .e-book img { transform: translateY(-6px) rotate(-1deg); }
.e-inside { margin: var(--s6) 0; }
.e-inside li { font-size: var(--t-body); color: var(--text); line-height: 1.5; }
.e-cta .btn { min-width: 15rem; justify-content: center; }

/* chapters: five tiles, a sixth for the extras so rows stay full ------------------------------------ */
.e-chapters { list-style: none; padding: 0; margin: 0; max-width: none; display: grid; gap: var(--s4); grid-template-columns: 1fr; counter-reset: ch; }
@media (min-width: 46rem) { .e-chapters { grid-template-columns: repeat(2, 1fr); gap: var(--s5); } }
@media (min-width: 64rem) { .e-chapters { grid-template-columns: repeat(3, 1fr); } }
.e-chapters > li { margin: 0; background: var(--tile); border-radius: var(--radius-card); padding: var(--s6); min-width: 0; display: flex; flex-direction: column; }
.e-chapters .e-n { display: block; font-size: var(--t-meta); font-weight: var(--wt-strong); color: var(--muted); margin-bottom: var(--s2); }
.e-chapters h3 { font-size: var(--t-h3); line-height: 1.22; margin: 0 0 var(--s3); }
.e-chapters p { margin: 0; color: var(--muted); font-size: var(--t-small); line-height: 1.5; }
.e-chapters q { display: block; margin-top: auto; padding-top: var(--s4); font-weight: var(--wt-medium); color: var(--text); quotes: "\201C" "\201D"; }
.e-chapters img { width: 64px; height: 64px; margin: 0 0 var(--s4); }

/* phrase table: before and after side by side, sheds nothing (two short columns) -------------------- */
.e-table { max-width: 880px; }
.e-table th, .e-table td { padding: var(--s4) var(--s5) var(--s4) 0; line-height: 1.45; text-align: left; vertical-align: top; }
.e-table td:last-child, .e-table th:last-child { padding-right: 0; }
.e-table tbody th { font-weight: var(--wt-strong); width: 11rem; }
.e-table td.e-old { color: var(--muted); }
@media (max-width: 39.99rem) { .e-table tbody th { width: auto; } .e-table th, .e-table td { padding-right: var(--s3); } }

/* who it is for: two short lists side by side ------------------------------------------------------ */
.e-who { display: grid; gap: var(--s6) var(--s8); grid-template-columns: 1fr; margin: 0; max-width: 880px; }
@media (min-width: 46rem) { .e-who { grid-template-columns: repeat(2, 1fr); } }
.e-who > div { padding-top: var(--s4); border-top: 1px solid var(--border); min-width: 0; }
.e-who h3 { font-size: var(--t-body); line-height: 1.35; margin: 0 0 var(--s3); }
.e-who .p-dots li { font-size: var(--t-body); line-height: 1.5; }

@media (max-width: 39.99rem) {
  .e-stage { padding: var(--s8) var(--s5); }
  .e-chapters > li { padding: var(--s5); }
}
@media (prefers-reduced-motion: reduce) { .e-book img { transition: none; } }