/* ============================================================
   dividers.css — Organic curved section dividers

   Smooth, symmetrical SVG curves that replace hard horizontal
   boundaries between sections. Each divider is absolutely
   positioned at the bottom of the upper section.

   Hill (∩): lower section color pushes up into upper section.
   Valley (∪): lower section color dips down from upper section.

   Both are placed at bottom: 0 of the upper section, filled
   with the lower section's color. This ensures the straight
   bottom edge aligns with the section boundary, keeping the
   drop-shadow natural (falling downward into the next section).

   The SVGs use preserveAspectRatio="none" so the curve stretches
   to any viewport width while maintaining a fixed CSS height.
   ============================================================ */


/* ── Shared base ── */

.section-divider {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  line-height: 0;
  pointer-events: none;
  z-index: 0;
}

.section-divider svg {
  display: block;
  width: 100%;
  height: 120px;
  filter: drop-shadow(var(--shadow-divider));
}


/* ── Responsive height adjustments ── */

/* Tablet */
@media (max-width: 1359px) and (min-width: 768px) {
  .section-divider svg {
    height: 80px;
  }
}

/* Mobile */
@media (max-width: 767px) {
  .section-divider svg {
    height: 60px;
  }
}