/* ==========================================================================
   Webinar page (template "webinar"). Loaded after lp360.css + lp360-sapir.css; every rule scoped to body.v-webinar.
   Direction A (Sapir, 12.10.26): one dark screen in the 360 hero's language, the form on white under it.
   Only existing tokens and components: no new colours, shapes or textures.
   ========================================================================== */

/* Hero: the photo + diamond above the text on a phone (smaller than on 360, so the title stays in the first screen) */
.v-webinar .hero__grid--sapir .hero__art { order: 0; width: min(100%, 260px); margin-top: 8px; }
.v-webinar .hero__grid--sapir .hero__text { order: 1; margin-top: 24px; }
.v-webinar .hero__cta { order: 2; }
.v-webinar .hero__title--long { margin-top: 20px; }
.v-webinar .hero__sub { margin-top: 16px; }
.v-webinar .web__body { margin-top: 24px; }
/* The four facts as 360 tiles (on-dark, facet cut) with the brand's facet icons: 2 x 2 on a phone, 4 in a row on desktop */
.v-webinar .web__facts { grid-template-columns: 1fr 1fr; gap: 12px; margin: 32px 0 0; padding: 0; list-style: none; }
.v-webinar .web__fact { padding: 18px 12px 16px; gap: 10px; justify-items: center; text-align: center; font-size: var(--fs-body, 17px); line-height: 1.3; font-weight: var(--fw-semibold); color: var(--text-on-dark); }
.v-webinar .web__fact .ic { width: 40px; height: 40px; }
@media (min-width: 768px) { .v-webinar .web__facts { grid-template-columns: repeat(4, 1fr); } }
.v-webinar .web__by { margin-top: 12px; font-size: var(--fs-small, 15px); color: var(--text-on-dark); opacity: .8; }

/* Desktop: text on the right, photo on the left (the 360 grid), the button under the text */
@media (min-width: 1200px) {
  .v-webinar .hero__grid--sapir .hero__art { width: 440px; margin: 0; }
  .v-webinar .hero__grid--sapir { grid-template-columns: minmax(0, 1fr) 440px; }
  .v-webinar .hero__grid--sapir .hero__text { margin-top: 0; }
}

/* Form section: the 360 form box at the full grid width (Yonatan 13.10.26: 3 fields + button in a row from 1200, as on 360);
   the "registered" panel takes its place on success, same width so nothing jumps */
.v-webinar .web__form .formbox { margin-top: 0; }
.v-webinar .web__form .formwrap,
.v-webinar .web__done { max-width: none; }
/* The WhatsApp line under the form title (was a note under the card): title, 8, line, 24 (.form), labels */
.v-webinar .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-webinar .web__done { --box-fill: var(--white); --box-stroke: var(--border-subtle); padding: 40px 32px; text-align: center; }
.v-webinar .web__done p { margin-top: var(--space-para); }
/* Not a .cta-row: on a phone html.jf-on turns section CTAs secondary, but this is the one next step after signup */
.v-webinar .web__done-cta { display: flex; justify-content: center; margin-top: var(--space-cta); }
.v-webinar .web__done:focus { outline: none; }
@media (min-width: 768px) {
  .v-webinar .web__done { padding: 40px 48px 44px; text-align: start; }
  .v-webinar .web__done-cta { justify-content: flex-start; }
}
/* Spacing (Yonatan 13.10.26), desktop: 96 of dark under the hero button (the 360 grid's 96 + the hero's 56 made 152),
   and under the form card the section's 64 + the footer's 64 = 128, the same as above the card (was 192) */
@media (min-width: 1200px) {
  .v-webinar .hero__cta { padding-bottom: 0; }
  .v-webinar #s1 { padding-bottom: var(--sp-96); }
  .v-webinar .web__form { padding-bottom: var(--sp-64); }
}