/* ==========================================================================
   The page's small things (Ben, 2026-09-30: "דגש על כל הפרטים הקטנים"), on top of base, sections and look.
   ========================================================================== */

/* a touch screen keeps the bars' look without the live blur behind them: blurring what scrolls under a
   bar is the most a phone does on every frame of a scroll */
@media (hover: none) and (pointer: coarse) {
  .topbar.is-solid { background: rgba(22, 20, 18, .95); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .buybar { background: rgba(22, 20, 18, .96); -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* the section that slides over the film is a page laid on it: its top edge catches the light */
.js .cinema > .film3 + *::after {
  content: ""; position: absolute; inset: 0 0 auto; block-size: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(230, 165, 59, .45) 30%, rgba(243, 190, 98, .7) 50%, rgba(230, 165, 59, .45) 70%, transparent);
}

/* the week on a phone: the dish's name had a column of 94 px beside the steppers, and "פסטה שמנת פטריות"
   broke into three lines; the steppers and the plate take a little less, the name gets a line or two */
@media (max-width: 480px) {
  .week__row { grid-template-columns: 52px minmax(0, 1fr) auto; gap: 12px; }
  .week__row img { inline-size: 52px; block-size: 52px; }
  .week__name { font-size: 18px; line-height: 1.25; }
  .stepper { gap: 4px; }
  .stepper button { inline-size: 44px; block-size: 44px; font-size: 20px; }
  .stepper output { min-inline-size: 30px; font-size: 24px; }
}

/* the buy bar arriving with the film: a glint crosses its button once, as on a computer's hover */
@media (hover: none) {
  html.film-on .buybar.is-on .btn--gold::after { animation: bar-glint 1.1s var(--ease) .5s 1 both; }
  @keyframes bar-glint { from { transform: translateX(-120%) } to { transform: translateX(120%) } }
}

/* the coach's section in the page's own rhythm: the same room above and below as every section, and its
   heading in the page's heading type */
.coach-offer { padding-block: clamp(100px, 12vw, 180px); }
.coach-offer h2 { font-weight: 900; line-height: 1.04; text-wrap: balance; }