/* ==========================================================================
   page-media.css : «כותבים עלינו» (/media/), loaded on that page only (enqueue convention: page-{id}.css).
   The live page at a smaller scale: per book its cover, in a bay of the book's own colour, beside ONE review at a
   time in a speech bubble that changes by itself (assets/js/page-media.js). The bubble's tail points down at the
   reviewer; under them, the pause button and one dot per review, the current one a pill that fills in the book's
   colour as the time to the next review runs out.
   No script (or a script that failed): every review shows, one under the other, and the controls are not drawn.
   The carousel layout keys on html.js, which the head sets before the first paint, so nothing moves when the
   script arrives. RTL: logical properties only. Tokens from base.css; book shades from .b-<id>.
   ========================================================================== */

.pil-media {
  --pil-cover: 240px;
  --pil-cover-h: 340px;
  --pil-fade: 250ms;
  --pil-interval: 8s;             /* keep equal to INTERVAL in page-media.js */
  --pil-by-start: 22px;           /* the byline's start inset; the tail points at the photo's centre */
  display: grid;
  gap: var(--s-8);
  width: min(940px, 100%);
  margin-inline: auto;
}
@media (prefers-reduced-motion: reduce) {
  .pil-media { --pil-fade: 0s; }
}

/* ---------- a book: the cover's bay and the slider ---------- */
/* the bay keeps to the top (beside the list a page without script shows, it stays in view); the slider centres on it */
.pil-br {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: var(--s-8);
}
.pil-br--nocover { grid-template-columns: minmax(0, 1fr); }
/* The bay has one width on every row (the sliders' edges line up); the cover sits centred in it, as wide as
   --pil-cover and as tall as --pil-cover-h allow at its own ratio (--ratio = width / height, printed by media.php,
   so the box is known before the image arrives). */
.pil-br__bay {
  --pad: 22px;
  display: grid;
  place-items: center;
  align-self: start;
  width: calc(var(--pil-cover) + 2 * var(--pad));
  padding: var(--pad);
  background: var(--book-ground, var(--paper-light));
  border-radius: var(--r-panel);
}
.no-js .pil-br__bay { position: sticky; inset-block-start: var(--s-4); }
.pil-br__cover {
  display: block;
  width: min(var(--pil-cover), var(--pil-cover-h) * var(--ratio, .8));
  box-shadow: var(--shadow-raise);
  transition: box-shadow var(--dur-state) var(--ease-standard);
}
.pil-br__cover:hover { box-shadow: 0 14px 34px -12px rgba(40, 32, 20, .5); }
.pil-br__cover img { display: block; width: 100%; height: auto; }

.pil-slider { align-self: center; max-width: 600px; }
.pil-slides { display: grid; gap: var(--s-7); }   /* the list: every review, one under the other */
.pil-slide { display: flex; flex-direction: column; }

/* ---------- the bubble ---------- */
.pil-bubble {
  position: relative;
  flex: 1 1 auto;                 /* in the carousel every bubble of a book is as tall as its longest one */
  display: flex;
  align-items: center;
  margin-block-end: 20px;         /* room for the tail */
  padding: 22px 26px;
  background: var(--paper-light);
  border-radius: 4px;
  filter: drop-shadow(0 6px 10px rgba(40, 32, 20, .13));
}
.pil-bubble::after {
  content: "";
  position: absolute;
  inset-block-start: calc(100% - 1px);
  inset-inline-start: calc(var(--pil-by-start) + 28px - 12px);   /* centred on the 56px photo */
  width: 24px;
  height: 14px;
  background: inherit;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}
.pil-bubble__text {
  font: italic 400 1.0625rem/1.65 var(--font-body);   /* 17px, the site's body size (the live page's quote is about 20px) */
  color: var(--book-quote, var(--plum));              /* the book's own review colour (a colour from its cover, 4.6:1 or better on the bubble); plum when a book has none */
  text-wrap: pretty;
}
.pil-bubble__text a { display: block; border-radius: 3px; color: inherit; text-decoration: none; }   /* block: the focus ring is one rectangle, not a staircase round each line */
.pil-bubble__text a:hover,
.pil-bubble__text a:focus-visible { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }

/* ---------- the reviewer ---------- */
.pil-by {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 56px;
  padding-inline-start: var(--pil-by-start);
  font-size: var(--t-body);
  line-height: 1.35;
  color: var(--text-muted);
}
.pil-by__photo,
.pil-by__initials {
  flex: none;
  width: 56px;
  height: 56px;
  border-radius: 50%;
}
.pil-by__photo { object-fit: cover; }
.pil-by__initials {
  display: grid;
  place-items: center;
  background: var(--book-ground, var(--pale-blue));
  box-shadow: inset 0 0 0 1.5px var(--book-ink, var(--ink));
  color: var(--book-ink, var(--ink));
  font: 700 1.25rem/1 var(--font-display);
}
.pil-by__who { display: grid; min-width: 0; }
.pil-by__name { font-style: normal; font-weight: 700; color: var(--text); }
.pil-by__role { font-size: var(--t-small); }

/* ---------- the carousel (script on) ---------- */
.js .pil-slider--multi:not(.is-list) .pil-slides { gap: 0; }
/* every review in one grid cell: the cell is as tall as the longest, so nothing moves when they change.
   A cross-fade: the outgoing review fades out while the incoming one fades in (keeping the outgoing one opaque
   under it left the two names on top of each other through the fade: the byline has no ground to cover it). */
.js .pil-slider--multi:not(.is-list) .pil-slide {
  grid-area: 1 / 1;
  z-index: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--pil-fade) var(--ease-standard), visibility 0s linear var(--pil-fade);
}
.js .pil-slider--multi:not(.is-list) .pil-slide.is-current {
  z-index: 1;
  opacity: 1;
  visibility: visible;
  transition: opacity var(--pil-fade) var(--ease-standard), visibility 0s;
}

.pil-slider__nav { display: none; }
.js .pil-slider--multi:not(.is-list) .pil-slider__nav {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin-block-start: 14px;
  padding-inline-start: calc(var(--pil-by-start) - 6px);
}

/* the pause / play button: the shop's secondary button (paper, ink edge; on hover the paper deepens a little and the edge thickens, as every quiet button on the site) */
.pil-play {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-width: 92px;
  min-height: 34px;
  padding: 0 12px;
  border: 0;
  border-radius: var(--r-control);
  background: var(--paper-light);
  box-shadow: inset 0 0 0 1.5px var(--ink);
  color: var(--ink);                                  /* 9.11:1 */
  font: 600 0.9375rem/1 var(--font-body);
  cursor: pointer;
  transition: background-color var(--dur-state) var(--ease-standard), color var(--dur-state) var(--ease-standard);
}
.pil-play:hover, .pil-play:focus-visible { background: #DCE6E3; color: var(--ink); box-shadow: inset 0 0 0 2.5px var(--ink); }
.pil-play__icon { flex: none; }
.pil-play__go { display: none; }
.pil-slider.is-paused .pil-play__pause { display: none; }
.pil-slider.is-paused .pil-play__go { display: inline; }

/* the dots: 28px buttons around an 8px dot; the current one a pill that fills (start to end) as the next review nears */
.pil-dots { display: flex; }
.pil-dot {
  position: relative;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}
/* both marks are a 24 x 8 shape whose size never changes (a change of size would count as a layout shift): a dot is
   the shape clipped to its 8px middle, the current one the whole pill */
.pil-dot::before,
.pil-dot::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 24px;
  height: 8px;
  border-radius: 4px;
}
.pil-dot::before {
  background: var(--text-muted);                      /* 5.63:1 on the paper */
  clip-path: inset(0 8px round 4px);
  transition: background-color var(--dur-state) var(--ease-standard), transform var(--dur-feedback) var(--ease-standard);
}
.pil-dot:hover::before { background: var(--ink); transform: scale(1.3); }
.pil-dot:focus-visible { outline-offset: -1px; }
.pil-dot[aria-current="true"]::before {
  background: var(--book-ground, var(--paper-light));          /* a pale pill that fills deep over the interval, so the current review is marked from the first frame */
  box-shadow: inset 0 0 0 1.5px var(--book-deep, var(--ink));   /* 3.96-5.38:1 on the paper */
  clip-path: inset(0 round 4px);
  transform: none;
}
.pil-dot[aria-current="true"]::after {
  background: var(--book-deep, var(--ink));
  transform-origin: 100% 50%;                         /* RTL: time runs from the start (right) edge */
}
.pil-slider.is-running .pil-dot[aria-current="true"]::after {
  animation: pil-time var(--pil-interval) linear both;
}
.pil-slider.is-running.is-held .pil-dot[aria-current="true"]::after { animation-play-state: paused; }
@keyframes pil-time {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

/* Windows high-contrast (forced colours) strips backgrounds and inset shadows: draw the dots, the pill and the pause edge with borders and system colours */
@media (forced-colors: active) {
  .pil-play { border: 1.5px solid ButtonText; }
  .pil-dot::before { background: ButtonText; forced-color-adjust: none; }
  .pil-dot[aria-current="true"]::before { background: Canvas; box-shadow: none; border: 1.5px solid Highlight; }
  .pil-dot[aria-current="true"]::after { background: Highlight; forced-color-adjust: none; }
  .pil-bubble { border: 1px solid CanvasText; }
  .pil-by__initials { border: 1.5px solid CanvasText; }
}

/* ---------- widths ---------- */
@media (max-width: 1023px) {
  .pil-media { --pil-cover: 200px; --pil-cover-h: 290px; }
  .pil-br { column-gap: var(--s-6); }
}
@media (max-width: 719px) {
  .pil-media { --pil-cover: 160px; --pil-cover-h: 230px; --pil-by-start: 16px; gap: var(--s-7); }
  .pil-br { grid-template-columns: minmax(0, 1fr); row-gap: var(--s-5); }
  .pil-br__bay { --pad: 16px; justify-self: center; }
  .no-js .pil-br__bay { position: static; }
  .pil-slider { max-width: none; }
  .pil-bubble { padding: 18px 20px; }
  .pil-bubble__text { font-size: 1rem; }              /* 16px */
}