/* The free course page (20.10.26). Yonatan's spec: sapir-admin docs/free-course/DESIGN.md section 1, values from
   design/mock/course.css (copied, then the real-page additions at the end). On top of lp360.css + lp360-sapir.css +
   lp-webinar.css; every rule under body.v-course. Existing tokens and values only. */

/* hero: the lead under the title (the existing .wq-doc__key--big size: 18 / 20 / 22, light, cream) */
.v-course .fc-lead { margin-top: var(--sp-16); max-width: 30em; font-size: 18px; line-height: 1.6; font-weight: var(--fw-light); color: var(--text-on-dark); text-wrap: pretty; }
@media (min-width: 768px) { .v-course .fc-lead { font-size: 20px; } }
@media (min-width: 1200px) { .v-course .fc-lead { font-size: 22px; line-height: 1.55; margin-top: var(--sp-24); } }
@media (max-width: 1199px) { .v-course .fc-lead { margin-inline: auto; text-align: center; } }

/* what you get + who it is for: two columns from 1200 (the 360 .fit__grid values: gap 48, column-gap 96), no photo */
.v-course .fc-about__grid { display: grid; gap: var(--sp-48); }
.v-course .fc-about .icon-list { margin-top: var(--sp-24); gap: 16px; }
.v-course .fc-about .icon-list li { gap: 16px; }
@media (min-width: 1200px) { .v-course .fc-about__grid { grid-template-columns: 1fr 1fr; column-gap: 96px; } }
.v-course .fc-about .t-h2 { text-wrap: balance; }
.v-course .fc-fit-sum { margin-top: var(--space-para); max-width: 30em; text-wrap: pretty; }

/* chapters: prose on wine-night, no cards, no lines; space only */
.v-course .fc-chapters__open { margin-top: var(--space-head); color: var(--text-on-dark); }
.v-course .fc-ch { margin-top: var(--sp-48); display: grid; gap: var(--sp-40); max-width: 40em; padding: 0; list-style: none; }
.v-course .fc-ch__t { font-size: 20px; line-height: 1.4; font-weight: var(--fw-semibold); color: var(--text-on-dark); text-wrap: balance; }
.v-course .fc-ch__num { color: var(--text-accent-on-dark); }
.v-course .fc-ch__len { margin-top: var(--sp-4); font-size: var(--fs-small); line-height: var(--lh-small); color: var(--text-on-dark); }
.v-course .fc-ch__line { margin-top: var(--sp-8); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--text-on-dark); text-wrap: pretty; }
@media (min-width: 768px) { .v-course .fc-ch__t { font-size: 22px; line-height: 1.36; } }
@media (min-width: 1200px) {
  .v-course .fc-ch { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 96px; row-gap: var(--sp-48); max-width: none; }
  .v-course .fc-ch__t { font-size: 24px; line-height: 1.33; }
}

/* the form: 3 fields in a row from 1200, everything else stacked under them, the button last (not in row 1) */
.v-course .web__form .formbox { margin-top: 0; }
.v-course .form__sub { margin-top: var(--sp-8); font-size: var(--fs-small); line-height: var(--lh-small); color: var(--text-on-dark); opacity: .8; max-width: 40em; text-wrap: pretty; }
.v-course .fc-form { display: grid; gap: 0; }
.v-course .fc-form .form__fields { display: grid; gap: var(--sp-20, 20px); }
.v-course .fc-access { margin-top: var(--sp-16); font-size: var(--fs-small); line-height: var(--lh-small); color: var(--text-on-dark); max-width: 46em; text-wrap: pretty; }
.v-course .form__checks { margin-top: var(--sp-24); display: grid; gap: 0; }
.v-course .fc-terms { margin-top: -4px; padding-inline-start: 36px; font-size: var(--fs-fine); line-height: 1.55; color: var(--text-on-dark); text-wrap: pretty; }
.v-course .check-field .field__error { margin-top: 4px; }
.v-course .fc-form .form__legal { margin-top: var(--sp-16); }
.v-course .form__submit { margin-top: var(--sp-24); display: grid; gap: var(--sp-12); justify-items: stretch; }
.v-course .btn--form { width: 100%; }
.v-course .fc-summary, .v-course .form__status { font-size: var(--fs-small); line-height: var(--lh-small); color: var(--state-error-dark); }
@media (min-width: 768px) {
  .v-course .fc-form .form__fields { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--sp-16); }
  .v-course .fc-form .form__fields > [data-k="email"] { grid-column: 1 / -1; }
  .v-course .form__submit { justify-items: start; }
  .v-course .btn--form { width: auto; min-width: 220px; padding-inline: 32px; }
}
@media (min-width: 1200px) {
  /* cancel the 360 row layout of lp360.css (.form: 3 fields + button in row 1, display: contents) */
  .v-course .fc-form { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
  .v-course .fc-form > *, .v-course .fc-form .check-field { grid-column: auto; grid-row: auto; }
  .v-course .fc-form .form__fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .v-course .fc-form .form__submit { display: grid; margin-top: var(--sp-24); }
  .v-course .fc-form .btn--form { width: auto; }
  .v-course .fc-form .form__fields > [data-k="email"] { grid-column: auto; }
}
.v-course .field__input, .v-course .check-field { scroll-margin-block: 96px 24px; }

/* success / already signed up: takes the form box's place, same dark surface, nothing jumps */
.v-course .fc-done { --box-fill: var(--bg-dark); --box-stroke: var(--border-subtle-dark); padding: 32px 24px; color: var(--text-on-dark); }
.v-course .fc-done:focus { outline: none; }
.v-course .fc-done__t { font-size: var(--fs-h3); line-height: var(--lh-h3); font-weight: var(--fw-semibold); text-wrap: balance; }
.v-course .fc-done p { margin-top: var(--sp-12); max-width: 34em; font-size: 18px; line-height: 1.6; font-weight: var(--fw-light); text-wrap: pretty; }
@media (min-width: 768px) { .v-course .fc-done { padding: 40px 48px 44px; } }
/* The panel with JS (Grok A2, 1.11.26): her address, the mail button, then two quiet links. */
.v-course .fc-done__addr { font-weight: var(--fw-semibold); overflow-wrap: anywhere; unicode-bidi: isolate; }
.v-course .fc-done__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-12) var(--sp-24); margin-top: var(--sp-24); }
.v-course .fc-done__mail { width: 100%; }
@media (min-width: 768px) { .v-course .fc-done__mail { width: auto; min-width: 220px; } }
.v-course .fc-done__link {
  min-height: 44px; padding: 0; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: 16px; font-weight: var(--fw-semibold); color: var(--text-on-dark);
  text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px;
}
.v-course .fc-done__link:disabled { cursor: default; text-decoration: none; }
.v-course .fc-done__link:focus-visible { outline: 2px solid var(--state-focus-dark); outline-offset: 4px; }
.v-course .fc-done p.fc-done__status { margin-top: var(--sp-12); font-size: 16px; font-weight: var(--fw-regular); }
.v-course .fc-done__more[hidden], .v-course .fc-done__text[hidden], .v-course .fc-done__status[hidden] { display: none; }


/* real page (not in the mock): hidden states stay hidden whatever the component's display, the loading label is for
   screen readers only (DESIGN 8.5), the chapter list keeps its numbers as text (the "פרק N:" span) */
.v-course .fc-done[hidden], .v-course .formwrap[hidden], .v-course .fc-summary[hidden], .v-course .form__status[hidden] { display: none; }
.v-course .fc-ch > li { margin: 0; }
.v-course .fc-done { scroll-margin-block: 96px 24px; }

/* the webinar package (Guy 21.10.26, Naor's COPY-webinar-package): existing tokens and components only */
/* "על מה דיברנו": the chapters section's prose on wine-night; the three points one under the other */
.v-course .fc-talk__text { margin-top: var(--space-para); color: var(--text-on-dark); text-wrap: pretty; }
.v-course .fc-talk { margin-top: var(--sp-24); gap: var(--sp-16); }
@media (min-width: 1200px) { .v-course .fc-talk { grid-template-columns: minmax(0, 1fr); max-width: 40em; row-gap: var(--sp-16); } }
.v-course .fc-chapters__open--list { margin-top: var(--sp-64); }
/* "מה את מקבלת": the small closing line under the list */
.v-course .fc-get-note { margin-top: var(--space-para); max-width: 30em; font-size: var(--fs-small); line-height: var(--lh-small); color: var(--text-primary); text-wrap: pretty; }
/* the hero's signature line: the webinar page's .web__by, centred with the hero under 1200 */
@media (max-width: 1199px) { .v-course .hero__text .web__by { text-align: center; } }