/**
 * Newsletter block (Elementor template "newsletter-tulirytmika"; the class tr-newsletter comes
 * from custom/newsletter/NewsletterBlock.php). The pages set different margins on the block
 * (80/80, 160/80, 80/0) on top of the previous section's 120px and the footer's 80px, so the
 * white gaps around it ran from 120 to 200px. One rhythm instead: 120px above the heading and
 * below the form on desktop, 70px up to Elementor's tablet breakpoint (1024px).
 * Elementor keeps container margins in CSS variables, hence both the variable and the property.
 */

/* the section before the block */
#content .elementor > :has(+ .tr-newsletter) {
  --margin-bottom: 8rem;
  margin-bottom: 8rem;
}

#content .elementor > .tr-newsletter {
  --margin-top: 8rem;
  --margin-bottom: 8rem;
  margin-top: 8rem;
  margin-bottom: 8rem;
}

/* last block before the footer (or two newsletter variants there): the footer adds its own 8rem */
#content .elementor > .tr-newsletter:last-child,
#content .elementor > .tr-newsletter:has(+ .tr-newsletter:last-child) {
  --margin-bottom: 2rem;
  margin-bottom: 2rem;
}

/* Phones and tablets: 70px above the heading (6rem + the block's 1rem inset) and below the form (1rem + 1rem + the footer's 4rem) */
@media (max-width: 1024px) {
  #content .elementor > :has(+ .tr-newsletter) {
    --margin-bottom: 6rem;
    margin-bottom: 6rem;
  }

  #content .elementor > .tr-newsletter {
    --margin-top: 6rem;
    --margin-bottom: 6rem;
    margin-top: 6rem;
    margin-bottom: 6rem;
  }

  #content .elementor > .tr-newsletter:last-child,
  #content .elementor > .tr-newsletter:has(+ .tr-newsletter:last-child) {
    --margin-bottom: 1rem;
    margin-bottom: 1rem;
  }
}