/* calendar.html, יומן שיעורים (31 Oct 2026, in the homepage's language). Linked after site.css.
   Built from the shared inner-page kit (.ih, .ih-stage, .st-card, .feat, .faq3, .closing2) and the homepage's own pieces:
   the calendar's .cl-* parts (window, week, class popup), the trainee app's .ta-* and .pt-note-*. Nothing here is driven by
   site.js: the calendar sits in .ca-cal, not .cl, so the homepage's calendar story never picks it up, and every mockup holds
   its finished state. Page pieces are prefixed ca-. */

.nw { white-space: nowrap; }
.ca-p { max-width: 30em; font-size: 18px; line-height: 1.6; color: var(--ink-2); text-wrap: pretty; }
.ca-feat { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); }
.ca-feat.flip { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); } /* flipped, the picture takes the first track */
@media (max-width: 899px) { .ca-feat, .ca-feat.flip { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Hero: the studio wall, the product's יומן on the week, today's new class open as the product's popup ---------- */
.ca-stage { height: clamp(560px, 52vw, 650px); }
.ca-cal { position: absolute; inset: 0; --cl-end: 40px; --ok: #16A34A;
  --new: #BAFD4F; --new-deep: #84CC16; --new-soft: #F1FDDC; --new-ink: #3F6212; }
.ca-cal .ic { flex: none; width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ca-cal p { margin: 0; }
/* the window: inset from both sides of the stage, cut by its bottom */
.ca-cal .cl-win { top: 40px; bottom: -40px; inset-inline: 40px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .05), 0 50px 90px -40px rgba(40, 30, 10, .5); }
.ca-cal .pd-nav { display: flex; } /* site.css hides any .pd-nav under 760px of container (the homepage's tabs); this page's query does it below */
/* the finished state of the homepage's story: the new class in place and full, the window dimmed behind its list, everyone marked */
.ca-cal .cl-slot { height: 72px; margin-bottom: 0; opacity: 1; }
.ca-cal .cl-full { display: block; }
.ca-cal .cl-tag { display: none; }
.ca-cal .cl-win::after { opacity: 1; }
.ca-cal .cl-dialog { top: 76px; right: 104px; opacity: 1; transform: none; }
.ca-cal .cl-r, .ca-cal .cl-sum, .ca-cal .cl-r em { opacity: 1; transform: none; }
.ca-cal .cl-att i:first-child { background: var(--ok); color: #fff; box-shadow: 0 4px 10px -4px rgba(22, 163, 74, .6); }
.ca-cal .cl-att i:last-child { opacity: .3; }

@container ihs (max-width: 999px) {
  /* tablets: five days, the list a little nearer the edge */
  .ca-cal .cl-win { inset-inline: 28px; top: 28px; }
  .ca-cal .cl-cols { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .ca-cal .cl-col:nth-child(6) { display: none; }
  .ca-cal .cl-dialog { top: 52px; right: 40px; width: 380px; }
  .ca-cal .cl-sum { display: none; } /* narrower, so today's column (the class it opened from) stays in view */
  .ca-cal .cl-th, .ca-cal .cl-r { grid-template-columns: minmax(0, 1fr) 64px 60px; gap: 8px; }
}
@container ihs (max-width: 759px) {
  .ca-cal .cl-win { grid-template-columns: minmax(0, 1fr); }
  .ca-cal .pd-nav, .ca-cal .fl-pill { display: none; }
  .ca-cal .fl-main { padding: 18px; }
}
@container ihs (max-width: 599px) {
  /* phones: three days (yesterday, today, tomorrow), and the class's list rises over them, without the balance */
  .ca-cal .cl-win { top: 12px; inset-inline: 12px; }
  .ca-cal .fl-main { gap: 12px; padding: 14px 12px; }
  .ca-cal .fl-title b { font-size: 18px; }
  .ca-cal .cl-nav, .ca-cal .cl-n svg { display: none; }
  .ca-cal .cl-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-inline: -4px; }
  .ca-cal .cl-col:nth-child(-n+2), .ca-cal .cl-col:nth-child(6) { display: none; }
  .ca-cal .cl-col { gap: 6px; padding: 0 4px 12px; }
  .ca-cal .cl-day { gap: 4px; height: 42px; }
  .ca-cal .cl-c { height: 70px; padding: 0 7px; }
  .ca-cal .cl-new, .ca-cal .cl-slot { height: 86px; }
  .ca-cal .cl-c > b { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; white-space: normal; font-size: 11.5px; line-height: 1.25; }
  .ca-cal .cl-dialog { top: auto; bottom: 12px; left: 12px; right: 12px; width: auto; }
  .ca-cal .cl-d-top { gap: 8px; padding: 14px 16px 12px; }
  .ca-cal .cl-d-body { padding: 12px 14px 14px; }
  .ca-cal .cl-meta span:not(:nth-child(2)), .ca-cal .cl-seg span:last-child, .ca-cal .cl-th span:nth-child(2), .ca-cal .cl-bal { display: none; }
  .ca-cal .cl-th, .ca-cal .cl-r { grid-template-columns: minmax(0, 1fr) 64px; }
  .ca-cal .cl-r { min-height: 50px; padding-block: 5px; }
  .ca-cal .cl-r:nth-child(n+4) { display: none; } /* three of the five, so the class itself stays in view above the list */
  .ca-cal .cl-sum { display: none; }
}
@media (max-width: 599px) { .ca-stage { height: 660px; } }
@media (max-width: 760px) {
  .ca-hero .ih-sub { margin-top: 16px; font-size: 18px; }
  .ca-hero .actions { width: 100%; flex-direction: column; margin-top: 22px; }
  .ca-hero .btn { width: 100%; min-height: 56px; font-size: 17.5px; }
  .ca-hero .ih-note { text-wrap: balance; }
}

/* ---------- Self-booking: the trainee app on the studio-wall photo (the Pilates page's app stage) ---------- */
.ca-app { position: relative; height: 620px; overflow: hidden; isolation: isolate; container: caapp / inline-size; border-radius: 26px; background: #E6DCCD; }
.ca-app-bg { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; object-position: 35% 50%; }
.ca-app-phone { position: absolute; z-index: 2; top: 40px; inset-inline-start: 48px; }
.ca-app-phone .phone { width: 262px; box-shadow: 0 50px 80px -40px rgba(40, 30, 10, .55); }
.ca-app .ta-push { opacity: 1; transform: none; } /* the booking's confirmation, dropped in */
.ca-remind { display: grid; top: 96px; inset-inline-end: 24px; width: 284px; }
.ca-rate { position: absolute; z-index: 3; bottom: 24px; inset-inline-end: 24px; display: grid; gap: 1px; width: 230px; padding: 14px 16px 15px; border-radius: 16px;
  background: #fff; color: #000; box-shadow: 0 0 0 1px rgba(0, 0, 0, .06), 0 20px 40px -20px rgba(0, 0, 0, .5); }
.ca-rate p { margin: 0; }
.ca-rate-n { display: flex; align-items: center; gap: 8px; margin-bottom: 3px; }
.ca-rate-n b { font-family: "Wix Madefor Display", var(--display); font-size: 26px; font-weight: 800; line-height: 1; letter-spacing: -0.02em; }
.ca-rate-n .stars svg { width: 13px; height: 13px; }
.ca-rate small { font-size: 12.5px; line-height: 1.45; color: var(--ink-2); }
@media (max-width: 599px) { .ca-app { height: 680px; } }
@container caapp (max-width: 559px) {
  /* narrower: the reminder on top, the phone under it (its class and its month in view, cut by the stage's bottom), no rating card */
  .ca-remind { top: 16px; inset-inline: 16px; width: auto; }
  .ca-app-phone { inset-inline: 0; display: flex; justify-content: center; top: 196px; }
  .ca-rate { display: none; }
}

/* ---------- Places and the waiting list: the class's popup on its waiting list, tonight's log, the app's notice ---------- */
.ca-wl { position: relative; height: 660px; overflow: hidden; isolation: isolate; container: cawl / inline-size; border-radius: 26px;
  background: #F2F2F3 radial-gradient(rgba(0, 0, 0, .075) 1px, transparent 1.6px) 0 0 / 22px 22px;
  --ok: #16A34A; --pk: #E6004F; --pk-soft: #FCEDF2; --pk-ink: #B0003C; }
.ca-wl p { margin: 0; }
.ca-wl .ic { flex: none; width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
/* the product's popup, in the reformer class's own pink (as on the Pilates page) */
.ca-pop { position: absolute; z-index: 2; top: 28px; right: 24px; width: min(440px, calc(100% - 104px)); overflow: hidden; border-radius: 20px; background: #fff; color: #0B0B0C;
  font-size: 12.5px; line-height: 1.35; box-shadow: 0 0 0 1px rgba(0, 0, 0, .05), 0 30px 60px -20px rgba(0, 0, 0, .35); }
.ca-pop-top { display: grid; gap: 9px; padding: 16px 18px 14px; background: var(--pk-soft); }
.ca-pop .cl-d-h b { font-size: 17px; }
.ca-pop .cl-d-h em { background: var(--pk-ink); color: #fff; }
.ca-pop .cl-meta { gap: 5px 14px; font-size: 11.5px; color: #6E3446; }
.ca-pop-body { padding: 12px 16px 14px; }
.ca-wh, .ca-wr { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; gap: 10px; align-items: center; }
.ca-wh { margin-top: 12px; padding: 0 4px 6px; font-size: 11px; color: var(--ink-2); }
.ca-wh span:first-child { grid-column: span 2; }
.ca-wr { min-height: 52px; padding: 0 4px; border-top: 1px solid #F0F0F3; }
.ca-wn { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #F4F4F6; font-family: "Wix Madefor Text", var(--sans); font-size: 11px; font-weight: 700; }
.ca-wr time { font-size: 12px; font-weight: 600; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.ca-wf { display: flex; align-items: center; gap: 6px; padding: 12px 4px 0; border-top: 1px solid #F0F0F3; font-size: 12px; color: var(--ink-2); }
.ca-wf .ic { width: 16px; height: 16px; color: #000; }
/* tonight, as a frosted card like the hero's */
.ca-log { bottom: 28px; right: 24px; width: calc(50% - 30px); display: grid; gap: 10px; }
.ca-log ol { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.ca-log li { position: relative; display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 8px; padding: 8px 0; border-top: 1px solid rgba(0, 0, 0, .08); font-size: 13.5px; line-height: 1.4; }
.ca-log li:first-child { border-top: 0; padding-top: 2px; }
.ca-log time { font-family: "Wix Madefor Text", var(--sans); font-size: 12px; font-weight: 600; color: var(--ink-2); font-variant-numeric: tabular-nums; padding-top: 1px; }
.ca-log li.ok span { font-weight: 700; }
.ca-log li.ok span::before { content: ""; display: inline-block; width: 15px; height: 15px; margin-inline-end: 6px; vertical-align: -2px; border-radius: 50%; background: #18E588 var(--tick-ink) center / 9px no-repeat; }
/* the trainee app's notice, taken */
.ca-offer { display: grid; bottom: 20px; left: 24px; width: calc(50% - 30px); }
@container cawl (max-width: 519px) {
  /* phones: the popup across the top, the app's notice under it; tonight's log goes */
  .ca-pop { right: 14px; top: 14px; width: calc(100% - 28px); }
  .ca-log { display: none; }
  .ca-offer { left: 50%; bottom: 16px; width: min(300px, calc(100% - 28px)); transform: translateX(-50%); }
}
@media (max-width: 599px) { .ca-wl { height: 620px; } }

/* ---------- The rules: six white cards on grey ---------- */
.ca-rules { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.ca-rules li { display: grid; align-content: start; justify-items: start; gap: 10px; padding: 26px 26px 28px; border-radius: 22px; background: #fff; }
.ca-ri { display: grid; place-items: center; width: 46px; height: 46px; margin-bottom: 6px; border-radius: 50%; background: #000; color: #fff; }
.ca-ri .ic { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ca-rules h3 { font-family: var(--display); font-size: 21px; font-weight: 700; line-height: 1.25; }
.ca-rules p { font-size: 17.5px; line-height: 1.6; color: var(--ink-2); }
.ca-rules .text-link { margin-top: 2px; font-size: 16.5px; }
/* how the cancellation deadline reads in the trainee app, in its own colours */
.ca-rules .ca-snip { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 4px; padding: 10px 12px; border-radius: 12px; background: #F5F5F5; }
.ca-snip span { display: grid; place-items: center; height: 30px; padding: 0 12px; border-radius: 8px; background: #FAE5EC; color: #E6004F; font-size: 13.5px; }
.ca-snip small { font-size: 13px; color: #777; }
@media (max-width: 999px) { .ca-rules { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 639px) {
  /* phones: one column, the icon beside the title so the six stay short */
  .ca-rules { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .ca-rules li { grid-template-columns: 40px minmax(0, 1fr); column-gap: 12px; row-gap: 8px; align-items: center; padding: 18px 18px 20px; }
  .ca-ri { width: 40px; height: 40px; margin: 0; }
  .ca-ri .ic { width: 20px; height: 20px; }
  .ca-rules h3 { font-size: 20px; }
  .ca-rules li > :not(.ca-ri):not(h3) { grid-column: 1 / -1; }
  .ca-rules p { font-size: 17px; }
}
@media (min-width: 600px) and (max-width: 899px) { .ca-wl { height: 600px; } } /* one column: the stage is wide, so the cards sit nearer the popup */