/* =====================================================================
   section.css — Docokids section rhythm.

   The vertical padding and hairline divider used by every content section.
   Page-agnostic: any page composes sections with these classes.
     .home-section      standard section padding (top + bottom)
     .section--hero     taller top padding for a page's opening section
     .section--hairline 1px top divider between stacked sections

   NOTE: the mockup writes `.row.mb-6` before each section header, but
   Bootstrap 5.3.3 ships no `.mb-6` utility, so there it is inert (0 margin).
   We deliberately do NOT define `.mb-6` — adding it would push every section
   header 4rem from its content, which the mockup never does.
   ===================================================================== */
.home-section {
  padding-top: var(--space-7);
  padding-bottom: var(--space-7);
}
.section--hero {
  padding-top: var(--space-8);
  padding-bottom: var(--space-7);
}
.section--hairline { border-top: 1px solid var(--hairline); }

@media (max-width: 767.98px) {
  /* Tighter vertical rhythm on phones (~37% less): less scrolling between
     sections without losing the editorial breathing room. One token step
     down each (space-6 → space-5, space-7 → space-6). */
  .home-section {
    padding-top: var(--space-5);
    padding-bottom: var(--space-5);
  }
  .section--hero {
    padding-top: var(--space-6);
    padding-bottom: var(--space-5);
  }
}