/* ==========================================================================
   Єдиний ритм блоків для всіх сторінок
   Підключається останнім у base.html, після extra_css сторінки.

   Мобільний (<768px): бокові поля 0.75rem, відстань між блоками 1.25rem
   Планшет (768-1199px): відстань 3rem
   Десктоп (>=1200px): відстань 4rem
   ========================================================================== */

:root {
  --block-gutter: 0.75rem;
  --block-gap: 1.25rem;
}

@media (width >= 768px) {
  :root {
    --block-gutter: 1.5rem;
    --block-gap: var(--section-spacing-mobile);
  }
}

@media (width >= 1200px) {
  :root {
    --block-gap: var(--section-spacing-desktop);
  }
}

/* --------------------------------------------------------------------------
   Мобільна колонка: однакові бокові поля і однакова відстань між блоками
   -------------------------------------------------------------------------- */
@media (width < 768px) {
  .hero-content,
  .about-page,
  .faq-page,
  .kids-page,
  .premium-page,
  .corp-page,
  .programs-content,
  .programs-list-page,
  .news-content,
  .news-list-page,
  .contacts-content-wrapper,
  .contacts-page,
  .feedback-page,
  .job-page,
  .shares-page,
  .city-page,
  .school-location-page,
  .testing-page {
    width: auto;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
    box-sizing: border-box;
  }

  .hero-content > *,
  .about-page > *,
  .faq-page > *,
  .kids-page > *,
  .premium-page > *,
  .corp-page > *,
  .programs-list-page > *,
  .news-list-page > *,
  .contacts-page > *,
  .feedback-page > *,
  .job-page > *,
  .shares-page > *,
  .city-page > *,
  .school-location-page > *,
  .testing-page > * {
    width: auto;
    max-width: none;
    margin: 0 var(--block-gutter) var(--block-gap);
    box-sizing: border-box;
  }

  /* Обгортки без власної рамки не додають ще один відступ */
  .programs-content,
  .news-content,
  .contacts-content-wrapper {
    margin-bottom: 0;
  }

  .programs-content > .programs-list-page,
  .news-content > .news-list-page,
  .contacts-content-wrapper > .contacts-page {
    margin: 0;
  }

  /* Перший блок відступає від шапки, останній - від нижньої навігації */
  .hero-content > *:first-child,
  .about-page > *:first-child,
  .faq-page > *:first-child,
  .kids-page > *:first-child,
  .premium-page > *:first-child,
  .corp-page > *:first-child,
  .programs-list-page > *:first-child,
  .news-list-page > *:first-child,
  .contacts-page > *:first-child,
  .feedback-page > *:first-child,
  .job-page > *:first-child,
  .shares-page > *:first-child,
  .city-page > *:first-child,
  .school-location-page > *:first-child,
  .testing-page > *:first-child {
    margin-top: var(--block-gap);
  }

  /* Фонові шари не беруть участі в ритмі */
  .parallax-container,
  .programs-background,
  .news-background {
    margin: 0;
    padding: 0;
  }
}

/* --------------------------------------------------------------------------
   Планшет і десктоп: однакова вертикальна відстань між блоками
   -------------------------------------------------------------------------- */
@media (width >= 768px) {
  .hero-content > section,
  .hero-content > div.glass-section,
  .about-page > section,
  .faq-page > section,
  .kids-page > section,
  .premium-page > section,
  .corp-page > section,
  .programs-list-page > section,
  .news-list-page > section,
  .contacts-page > section,
  .feedback-page > section,
  .job-page > section,
  .shares-page > section,
  .city-page > section,
  .school-location-page > section {
    width: 100%;
    max-width: min(calc(100% - 2 * var(--block-gutter)), var(--content-max-width));
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
  }

  .hero-content > section,
  .hero-content > div.glass-section,
  .about-page > section,
  .faq-page > section,
  .kids-page > section,
  .premium-page > section,
  .corp-page > section,
  .programs-list-page > section,
  .news-list-page > section,
  .contacts-page > section,
  .feedback-page > section,
  .job-page > section,
  .shares-page > section,
  .city-page > section,
  .school-location-page > section {
    margin-top: 0;
    margin-bottom: var(--block-gap);
  }
}