/* ─────────────────────────────────────────────────────────────────
   UX-SWEEP — Section Rhythm (Team-RHYTHM, 2026-05-08)
   ─────────────────────────────────────────────────────────────────
   Goal: a single, consistent section-padding scale across the seven
   visible homepage modules + a single mobile gutter, so the page
   reads as ONE rhythm rather than seven different ones.

   Modules covered (home page, top-to-bottom):
     1. .block-hero                  (hero)
     2. .block-brand                 (brand strip)
     3. .block-cro-block-7           (cro pain tabs)
     4. .block-slider                (slider)
     5. .block-cro-block-3           (cro hero video)
     6. .block-cro-block-9           (cro timeline)
     7. .block-cro-block-17          (cro comparison)

   Rhythm scale:
     • Vertical:   clamp(56px, 8vh, 104px)    — symmetric top + bottom.
     • Horizontal: clamp(20px, 4vw, 64px)     — never <20px on mobile.
     • Inner .container padding-inline reset to 0 (single source of
       horizontal rhythm, no double-gutter).

   Specificity strategy:
     The seven module CSS files use selectors up to (0,2,1) — e.g.
     `main > .section.block-cro-block-9` — and Bootstrap utility
     classes on the hero (.py-2, .pt-lg-8) use !important. To win
     against BOTH simultaneously we:
       (a) chain three classes: `.section-cls.section-cls.section-cls`
           → (0,3,0) which beats every module CSS selector on column 2.
       (b) mark padding-block / padding-inline !important so utility
           classes (and the existing !important in cro-hero-video.css
           L161) cannot overrule us.
     We use !important ONLY on outer-section padding-block /
     padding-inline. We never !important inner element padding —
     that is Team-POLISH's territory.
   ───────────────────────────────────────────────────────────── */


/* ── Shared rhythm tokens ──────────────────────────────────────── */
:where(
  .block-hero,
  .block-brand,
  .section.block-cro-block-7,
  .block-slider,
  .section.block-cro-block-3,
  .section.block-cro-block-9,
  .block-cro-block-17
) {
  --rhythm-py: clamp(56px, 8vh, 104px);
  --rhythm-px: clamp(20px, 4vw, 64px);
}


/* ── 1. HERO ───────────────────────────────────────────────────── */
/* Was: var(--ds-space-8)≈68px desktop, smaller on mobile, plus
   admin-set Bootstrap utility classes (.py-2 .pt-lg-8) that ship
   `!important` padding-top: 3.4rem and padding-bottom: 0.5rem. We
   override both with !important + (0,3,0) specificity. */
.block-hero.block-hero.block-hero {
  padding-block: clamp(56px, 8vh, 104px) !important;
  padding-inline: clamp(20px, 4vw, 64px) !important;
}


/* ── 2. BRAND ──────────────────────────────────────────────────── */
/* Was: clamp(60px, 8vh, 96px) / clamp(20px, 5vw, 64px). Already
   close; unify to the shared rhythm. */
.block-brand.block-brand.block-brand {
  padding-block: clamp(56px, 8vh, 104px) !important;
  padding-inline: clamp(20px, 4vw, 64px) !important;
}


/* ── 3. CRO PAIN TABS (block-7) ────────────────────────────────── */
/* Was: relies on .section-lg → 4.25rem desktop / 2.75rem mobile.
   Plus base.css applies clamp(16px,5vw,32px) inline. Lift to
   rhythm. Triple-class beats main > .section.block-cro-block-7
   (0,2,1) without needing main descendant chain. */
.section.block-cro-block-7.block-cro-block-7,
.block-cro-block-7.block-cro-block-7.block-cro-block-7 {
  padding-block: clamp(56px, 8vh, 104px) !important;
  padding-inline: clamp(20px, 4vw, 64px) !important;
}
.section.block-cro-block-7 > .container,
.section.block-cro-block-7 > .container-fluid,
.block-cro-block-7 > .container,
.block-cro-block-7 > .container-fluid {
  padding-left: 0 !important;
  padding-right: 0 !important;
}


/* ── 4. SLIDER ─────────────────────────────────────────────────── */
/* Was: clamp(60px,8vh,100px)/clamp(20px,5vw,64px) on `main >
   .section.block-slider` (0,2,1). Beat with triple-class. */
.section.block-slider.block-slider,
.block-slider.block-slider.block-slider {
  padding-block: clamp(56px, 8vh, 104px) !important;
  padding-inline: clamp(20px, 4vw, 64px) !important;
}


/* ── 5. CRO HERO VIDEO (block-3) ───────────────────────────────── */
/* Was: relies on .section-lg (≈68px) plus a hostile rule in
   cro-hero-video.css line 161:
       .section-hero-compact-video { padding: 0 !important; }
   Beat with !important + chained classes on every variant. */
.section.block-cro-block-3.block-cro-block-3,
.block-cro-block-3.block-cro-block-3.block-cro-block-3,
.section.cro-hero-video.cro-hero-video,
.modular-row.section-hero-compact-video.section-hero-compact-video,
.section-hero-compact-video.section-hero-compact-video.section-hero-compact-video {
  padding-block: clamp(56px, 8vh, 104px) !important;
  padding-inline: clamp(20px, 4vw, 64px) !important;
}
.section.block-cro-block-3 > .container,
.section.block-cro-block-3 > .container-fluid,
.block-cro-block-3 > .container,
.block-cro-block-3 > .container-fluid {
  padding-left: 0 !important;
  padding-right: 0 !important;
}


/* ── 6. CRO TIMELINE (block-9) ─────────────────────────────────── */
/* Was: clamp(80px, 12vh, 140px). Drop to 56–104. Beat
   `.section.block-cro-block-9` (0,2,1) with triple-class. */
.section.block-cro-block-9.block-cro-block-9,
.block-cro-block-9.block-cro-block-9.block-cro-block-9 {
  padding-block: clamp(56px, 8vh, 104px) !important;
  padding-inline: clamp(20px, 4vw, 64px) !important;
}


/* ── 7. CRO COMPARISON (block-17) ──────────────────────────────── */
/* Was: clamp(80px, 12vh, 140px). Same fix. */
.section.block-cro-block-17.block-cro-block-17,
.block-cro-block-17.block-cro-block-17.block-cro-block-17 {
  padding-block: clamp(56px, 8vh, 104px) !important;
  padding-inline: clamp(20px, 4vw, 64px) !important;
}


/* ── Mobile gutter floor — universal hard guarantee ────────────── */
/* At ≤480px every visible section keeps ≥20px gutter. The clamp
   already produces ~20px at this width (4vw of 480 = 19.2 → floor
   20), but pin it explicitly as a guard against any downstream
   rule shrinking it. Hero needs !important to clear Bootstrap
   utility classes. */
@media (max-width: 480px) {
  .block-hero.block-hero.block-hero,
  .block-brand.block-brand.block-brand,
  .section.block-cro-block-7.block-cro-block-7,
  .section.block-slider.block-slider,
  .section.block-cro-block-3.block-cro-block-3,
  .section.block-cro-block-9.block-cro-block-9,
  .block-cro-block-17.block-cro-block-17.block-cro-block-17,
  .section-hero-compact-video.section-hero-compact-video {
    padding-inline: 20px !important;
  }
}


/* ── Inner container neutralisation (catch-all) ────────────────── */
/* Bootstrap's .container ships with its own 12-15px padding-inline
   that compounds with our section gutter. Zero out container's own
   padding inside the seven rhythm-scoped sections, AND clamp it to
   the design-system container max-width so content centers. */
.block-hero > .container,
.block-brand > .container,
.section.block-cro-block-7 > .container,
.block-slider > .container,
.section.block-cro-block-3 > .container,
.section.block-cro-block-9 > .container,
.block-cro-block-17 > .container,
.block-hero > .container-fluid,
.block-brand > .container-fluid,
.section.block-cro-block-7 > .container-fluid,
.block-slider > .container-fluid,
.section.block-cro-block-3 > .container-fluid,
.section.block-cro-block-9 > .container-fluid,
.block-cro-block-17 > .container-fluid {
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: auto;
  margin-right: auto;
  max-width: var(--ds-container-lg, 1280px);
  width: 100%;
}