/* ============================================================
   SECTION SYSTEM — Responsive Design Senior + Frontend Architect
   Mobile-first. Fluid spacing via clamp(). Wave dividers via SVG.
   ============================================================ */

/* ─── Fluent Section Padding ─────────────────────────────────
   clamp(min, preferred, max) ensures spacing scales with viewport:
   mobile: ~48px | tablet: ~80px | desktop: ~120px
   ──────────────────────────────────────────────────────────── */
section {
  position: relative;
  padding-top: clamp(3rem, 8vw, 7.5rem);    /* 48px → 120px */
  padding-bottom: clamp(3rem, 8vw, 7.5rem);
  overflow: hidden;  /* clip wave SVGs */
}

/* ─── Section Alternating Backgrounds ──────────────────────── */
section.section--white   { background: #ffffff; }
section.section--soft    { background: #f7f8fc; }
section.section--brand   { background: var(--brand-night); color: var(--text-inverse); }

/* ─── Section Header (title + subtitle block) ───────────────── */
.section-header {
  text-align: center;
  max-width: 700px;
  margin: 0 auto clamp(2rem, 5vw, 4rem);
}

.section-header h2 {
  font-size: clamp(1.75rem, 4vw, 2.75rem);
  font-weight: 800;
  line-height: 1.2;
  margin-bottom: 0.75rem;
  letter-spacing: -0.5px;
}

.section-header p {
  font-size: clamp(1rem, 1.5vw, 1.2rem);
  color: var(--text-secondary);
  line-height: 1.7;
  margin: 0;
}

/* ─── Wave Divider ───────────────────────────────────────────
   Rendered as inline SVG <div class="wave-divider wave--down">
   Two variants: wave--down (waves going down), wave--up (going up)
   ──────────────────────────────────────────────────────────── */
.wave-divider {
  display: block;
  width: 100%;
  overflow: hidden;
  line-height: 0;
  /* Remove any gap */
  font-size: 0;
}

.wave-divider svg {
  display: block;
  width: 100%;
  height: clamp(40px, 6vw, 80px);
}

/* Top of a white section after a soft section */
.wave-divider--soft-to-white svg { fill: #ffffff; }
/* Top of a soft section after a white section */
.wave-divider--white-to-soft svg { fill: #f7f8fc; }
/* Top of a brand/dark section */
.wave-divider--to-brand svg     { fill: var(--brand-night); }
/* After dark section back to white */
.wave-divider--brand-to-white svg { fill: #ffffff; }

/* ─── Service Card uniform min-height ──────────────────────── */
.service-card {
  background: var(--bg-primary);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  padding: clamp(1.25rem, 3vw, 2rem);
  transition: box-shadow var(--transition-fast), transform var(--transition-fast);
  display: flex;
  flex-direction: column;
}

.service-card:hover {
  box-shadow: var(--shadow-raised);
  transform: translateY(-4px);
}

/* ─── Social preview cards uniform height ────────────────────── */
.social-preview-card {
  min-height: 420px;
}

/* ─── Responsive: single column on very small screens ─────────── */
@media (max-width: 480px) {
  .section-header h2 { font-size: clamp(1.5rem, 6vw, 2rem); }
  section { padding-inline: var(--space-sm); }
}