/* ==========================================================================
   Newsletter signup page (template "newsletter", 16.10.26). Loaded after lp360.css + lp360-sapir.css; every rule scoped
   to body.v-newsletter. The master is the one-screen thanks page (.solo.thanks + its diamond); the 360 form box sits
   under the copy. Only existing tokens and components: no new colours, shapes or textures.
   ========================================================================== */


.v-newsletter .nl__form { grid-area: form; margin-top: 16px; min-width: 0; }
@media (min-width: 768px) { .v-newsletter .nl__form { margin-top: 32px; } }
/* Copy, then "what's inside", then the form - one column at every width (Guy 1.11.26: the cards go under the title) */
.v-newsletter .thanks__grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "copy" "inside" "form"; }
@media (min-width: 1024px) { .v-newsletter .nl__form { margin-top: 40px; } }

/* "מה מחכה לך בכל גיליון" (Guy 1.11.26): four cards in a row under the title, the brand mail icon in each, on a
   card one step up from the dark page (phones: the small cut, no stroke - there is no inner small cut). Phones: one compact row that scrolls sideways (icon beside the title, no
   description, the third card peeks) - 2x2 pushed the button 70px lower; 768: 2x2 with the description; 1024 up:
   four across. */
.v-newsletter .nl-inside { grid-area: inside; min-width: 0; margin-top: 20px; color: var(--text-on-dark); }
.v-newsletter .nl-inside__title { font-size: var(--fs-body); line-height: 1.35; font-weight: var(--fw-semibold); color: var(--text-on-dark); text-wrap: balance; }
.v-newsletter .nl-inside__list { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: 44%; gap: 8px;
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; }
.v-newsletter .nl-inside__list::-webkit-scrollbar { display: none; }
.v-newsletter .nl-inside__item { --box-cut: var(--cut-sm); --box-cut-in: var(--cut-sm); --box-fill: var(--wine-900);
  display: flex; align-items: center; gap: 10px; min-width: 0; padding: 12px; scroll-snap-align: start; }
.v-newsletter .nl-inside__ic { flex: none; display: block; inline-size: 24px; block-size: 24px; }
.v-newsletter .nl-inside__t { min-width: 0; font-size: var(--fs-label); line-height: 1.35; font-weight: var(--fw-semibold); color: var(--text-on-dark); text-wrap: balance; }
.v-newsletter .nl-inside__d { display: none; }
@media (min-width: 768px) {
  .v-newsletter .nl-inside { margin-top: 32px; }
  .v-newsletter .nl-inside__title { font-size: var(--fs-h3); line-height: var(--lh-h3); }
  .v-newsletter .nl-inside__list { margin-top: 16px; gap: 16px; grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; overflow: visible; }
  .v-newsletter .nl-inside__item { --box-cut: var(--cut-md); --box-cut-in: var(--cut-md-in); --box-stroke: var(--border-subtle-dark); flex-direction: column; align-items: flex-start; gap: 0; padding: 24px; }
  .v-newsletter .nl-inside__ic { inline-size: 32px; block-size: 32px; margin-block-end: 16px; }
  .v-newsletter .nl-inside__t { font-size: var(--fs-body); line-height: 1.4; }
  .v-newsletter .nl-inside__d { display: block; margin-top: 6px; font-size: var(--fs-small); line-height: 1.5; color: var(--text-on-dark); text-wrap: pretty; }
}
@media (min-width: 1024px) { .v-newsletter .nl-inside__list { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.v-newsletter .nl__form .formbox { margin-top: 0; }

/* From 768: name + email side by side (each half the box), then the consent, the button, the legal line */
@media (min-width: 768px) {
  .v-newsletter .form--one { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 16px; row-gap: 16px; align-items: start; }
  .v-newsletter .form--one .form__fields,
  .v-newsletter .form--one .form__foot { display: contents; }
  .v-newsletter .form--one .form__checks { grid-column: 1 / -1; grid-row: 2; }
  .v-newsletter .form--one .form__submit { grid-column: 1 / -1; grid-row: 3; margin-top: 8px; justify-self: start; }
  .v-newsletter .form--one .form__legal { grid-column: 1 / -1; grid-row: 4; margin-top: 4px; }
  .v-newsletter .form--one .btn--form { width: auto; min-width: 220px; padding-inline: 32px; }
}
/* From 1024: name, email and the button in one long row; consent and the legal line under it */
@media (min-width: 1024px) {
  .v-newsletter .form--one { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; }
  .v-newsletter .form--one .form__submit { grid-column: 3; grid-row: 1; margin-top: calc(var(--fs-label) * var(--lh-label) + 8px); }
  .v-newsletter .form--one .form__legal { grid-row: 3; }
}

/* "Registered" panel: takes the box's place, same surface so nothing jumps */
.v-newsletter .nl__done { --box-fill: var(--bg-dark); --box-stroke: var(--border-subtle-dark); padding: 32px 24px; color: var(--text-on-dark); }
.v-newsletter .nl__done:focus { outline: none; }
.v-newsletter .nl__done-title { font-size: var(--fs-h3); line-height: var(--lh-h3); font-weight: var(--fw-semibold); }
.v-newsletter .nl__done p { margin-top: 12px; font-size: 18px; line-height: 1.6; font-weight: var(--fw-light); }
.v-newsletter .nl__done .nl__done-note { font-size: var(--fs-small); line-height: 1.5; font-weight: var(--fw-regular); }
@media (min-width: 768px) { .v-newsletter .nl__done { padding: 40px 48px 44px; } }
/* After signup (Guy 16.10.26): on to 360, and Sapir's Instagram when its field is filled */
.v-newsletter .nl__done .nl__done-next { margin-top: 24px; font-size: 18px; }
.v-newsletter .nl__done-cta { margin-top: 16px; }
.v-newsletter .nl__done .nl__done-ig { margin-top: 20px; font-size: var(--fs-body, 17px); }
@media (max-width: 767px) { .v-newsletter .nl__done-cta .btn { width: 100%; } }
/* Desktop (Guy 17.10.26): the "registered" panel spans the whole row, so its content is centred */
@media (min-width: 1024px) {
  .v-newsletter .nl__done { text-align: center; }
  .v-newsletter .nl__done-cta { display: flex; justify-content: center; }
  .v-newsletter .nl__done .nl__done-ig { display: flex; justify-content: center; }
}