/* Peek inside: swipe through the first pages of a book, with the words underneath so you can read along.
   Markup: <div class="flip" data-peek="mommy|ourkids"> <button class="nav-btn prev">  <div class="track"> figure.pg ... </div>  <button class="nav-btn next"> </div>
           followed by <div class="dots"></div> and <p class="swipe-hint">. Behavior lives in /assets/peek.js. */
.peek-block { margin: 0 0 1rem; }
.flip { position: relative; }
.flip .track { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; -webkit-overflow-scrolling: touch;
  padding: 4px 4px 14px; margin: 0 -4px; scrollbar-width: none; overscroll-behavior-x: contain; text-align: center; }
.flip .track::-webkit-scrollbar { display: none; }
.flip .pg { flex: 0 0 calc(50% - 7px); scroll-snap-align: start; margin: 0; background: #fff; border: 1px solid var(--line); border-radius: 16px; overflow: hidden;
  box-shadow: 0 8px 20px rgba(75,59,102,.12); display: flex; flex-direction: column; }
.flip .pg img { width: 100%; height: auto; display: block; background: var(--peach); }
.flip .pg figcaption { padding: .85rem 1rem 1rem; font-family: 'Baloo 2', cursive; font-weight: 600; color: var(--plum); font-size: 1.12rem; line-height: 1.3;
  text-align: center; flex: 1; display: flex; align-items: center; justify-content: center; font-style: normal; margin: 0; }
/* Book two is painted in two-page spreads: one spread per card. */
.flip.wide .pg { flex-basis: calc(100% - 8px); }
.flip .pg.end { background: var(--plum); color: #fff; justify-content: center; text-align: center; padding: 1.3rem 1.2rem; gap: .25rem; align-items: center; }
.flip .pg.end img { border-radius: 10px; background: var(--cream); margin: .5rem 0 .3rem; max-width: 520px; }
.flip .pg.end h3 { color: #fff; font-size: 1.6rem; margin: 0; }
.flip .pg.end p { margin: 0; color: #e9e2f7; font-size: 1rem; }
.flip .pg.end .btn { margin-top: .9rem; }
.flip .nav-btn { position: absolute; top: 40%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(255,248,238,.95);
  color: var(--plum); font-size: 1.5rem; font-weight: 800; box-shadow: 0 4px 12px rgba(47,37,71,.25); cursor: pointer; z-index: 2; line-height: 1; padding: 0; }
.flip .nav-btn:disabled { opacity: 0; pointer-events: none; }
.flip .nav-btn.prev { left: -10px; } .flip .nav-btn.next { right: -10px; }
.peek-block .dots { display: flex; justify-content: center; gap: 7px; margin-top: .2rem; }
.peek-block .dots button { width: 9px; height: 9px; padding: 0; border-radius: 50%; border: 0; background: rgba(75,59,102,.22); cursor: pointer; }
.peek-block .dots button[aria-current="true"] { background: var(--coral-dark); width: 22px; border-radius: 6px; }
.peek-block .swipe-hint { text-align: center; font-size: .88rem; font-weight: 700; color: var(--muted); margin: .45rem 0 0; }
.peek-block .swipe-hint .m { display: none; }
/* Two books on one page: tabs to switch between them */
.peek-tabs { display: flex; justify-content: center; gap: .5rem; flex-wrap: wrap; margin: 0 0 1rem; }
.peek-tabs button { font-family: 'Baloo 2', cursive; font-weight: 800; font-size: 1rem; padding: .5rem 1.1rem; border-radius: 999px; border: 1.5px solid var(--line);
  background: #fff; color: var(--plum-soft); cursor: pointer; }
.peek-tabs button[aria-selected="true"] { background: var(--plum); border-color: var(--plum); color: #fff; }
@media (max-width: 800px) {
  .flip .track { margin: 0 -1.25rem; padding: 4px 1.25rem 14px; scroll-padding-left: 1.25rem; }
  .flip .pg { flex-basis: 84%; }
  .flip.wide .pg { flex-basis: 92%; }
  .flip .nav-btn { display: none; }
  .peek-block .swipe-hint .m { display: inline; } .peek-block .swipe-hint .d { display: none; }
}
/* Spreads are short and wide: let each card be as tall as its own content instead of the tallest card. */
.flip.wide .track { align-items: flex-start; }

@media (max-width: 800px) { .flip .pg.end img[style] { max-width: 150px !important; } }
@media (max-width: 800px) { .flip.wide .pg.end img { display: none; } }