/* Free ebook landing pages (/ebook/30-hari-anak-ringan-tulang/, /en/ebook/30-day-chores-reset/).
   Loads after site.css and seasons.css and reuses s-hero, s-head, s-split and s-shot. Adds the cover
   in a simple page frame, the inside list and download block, the chapter grid, the sample page and
   the ages table. Tokens only; the cover and sample are real renders of the PDF, nothing drawn. */

/* hero: what is inside, then one big download ----------------------------------------------------- */
.e-inside-h { margin: var(--s8) 0 var(--s3); font-size: var(--t-body); line-height: 1.4; }
.e-dots { list-style: none; padding: 0; margin: 0; max-width: 60ch; }
.e-dots li { position: relative; margin: 0 0 var(--s2); padding-left: var(--s5); line-height: 1.5; }
.e-dots li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .7; }
.e-get { margin-top: var(--s8); }
.e-get .btn { min-height: 52px; padding: 0 var(--s8); font-size: 1.0625rem; font-weight: var(--wt-strong); }
.e-get .note { margin: var(--s3) 0 0; max-width: none; }
.e-get .note a { font-weight: var(--wt-medium); white-space: nowrap; }

/* cover: the rendered first page in a plain page frame on the grey stage ------------------------ */
.e-stage { margin: 0 auto; width: min(100%, 460px); background: var(--tile); border-radius: var(--radius-card); padding: var(--s12) var(--s10); display: flex; justify-content: center; }
.e-book { position: relative; display: block; width: min(100%, 300px); transform: rotate(-2deg); transition: transform .5s var(--ease); }
.e-book img { display: block; width: 100%; height: auto; border-radius: 2px 6px 6px 2px; box-shadow: 0 1px 3px rgba(29, 29, 31, .1), 0 30px 50px -24px rgba(29, 29, 31, .45); }
/* the spine: a soft shade down the left edge, so it reads as a booklet, not a screenshot */
.e-book::after { content: ""; position: absolute; inset: 0 auto 0 0; width: 14px; border-radius: 2px 0 0 2px; background: linear-gradient(90deg, rgba(29, 29, 31, .18), rgba(29, 29, 31, 0)); }
.e-stage:hover .e-book { transform: rotate(0deg) translateY(-6px); }

/* chapter grid: eight hairline rows, two columns on wide screens -------------------------------- */
.e-toc { list-style: none; padding: 0; margin: 0; max-width: none; display: grid; grid-template-columns: 1fr; column-gap: var(--s10); counter-reset: ch; }
@media (min-width: 46rem) { .e-toc { grid-template-columns: repeat(2, 1fr); } }
.e-toc li { counter-increment: ch; display: grid; grid-template-columns: 40px 1fr; column-gap: var(--s3); margin: 0; padding: var(--s5) 0; border-top: 1px solid var(--border); }
.e-toc li::before { content: counter(ch); grid-row: 1 / span 2; font-weight: var(--wt-strong); color: var(--muted); }
.e-toc b { font-weight: var(--wt-strong); }
.e-toc span { margin-top: var(--s1); color: var(--muted); font-size: var(--t-small); }

/* sample page beside its description ------------------------------------------------------------ */
.e-sample { display: grid; gap: var(--s10); align-items: center; background: var(--tile); border-radius: var(--radius-card); padding: var(--s10) var(--pad-card); }
.e-sample > * { min-width: 0; }
.e-sample h2 { font-size: clamp(1.75rem, 1.3rem + 1.8vw, 2.75rem); }
.e-sample p { color: var(--muted); }
@media (min-width: 60rem) { .e-sample { grid-template-columns: 1fr 1.15fr; gap: var(--s16); } }
.e-sheet { margin: 0; justify-self: center; width: min(100%, 360px); }
.e-sheet img { display: block; width: 100%; height: auto; border-radius: 6px; box-shadow: 0 1px 3px rgba(29, 29, 31, .08), 0 30px 50px -26px rgba(29, 29, 31, .4); transform: rotate(2deg); transition: transform .5s var(--ease); }
.e-sample:hover .e-sheet img { transform: rotate(0deg) translateY(-6px); }

/* ages table: sheds the example column on phones ------------------------------------------------ */
.e-table table { font-size: var(--t-body); }
.e-table tbody th { width: 18%; white-space: nowrap; }
@media (max-width: 39.99rem) { .e-shed { display: none; } .e-table tbody th { width: 40%; } }

/* who it is for, with a second download --------------------------------------------------------- */
.e-who .e-dots { margin-bottom: var(--s8); }
.e-who .e-dots li { font-size: var(--t-lead); line-height: 1.5; }

@media (max-width: 39.99rem) {
  .e-stage { padding: var(--s8) var(--s6); }
  .e-book { width: min(100%, 240px); }
  .e-sample { padding: var(--s8) var(--s5); }
}
@media (prefers-reduced-motion: reduce) { .e-book, .e-sheet img { transition: none; } }