/* Vertical rhythm (31.10.2026). Several redesign layers stacked their own spacing: section padding (48px),
   plus padding on every .container inside it (18px each side, redesign.css), plus padding on the inner
   articles (64-72px). Between two blocks this added up to 110-230px of empty page.
   This layer loads last and sets one compact scale. Measured with gaps.mjs on every page template.
   Selectors carry :not(#rh) so they outrank the older !important rules without a selector arms race.
   Rollback: remove the <link> in includes/header.php. */

:root {
  --rh-section: clamp(20px, 2vw, 30px);    /* top/bottom of a page section */
  --rh-block: clamp(16px, 1.6vw, 24px);    /* between sub-blocks inside a section */
  --rh-hero-end: clamp(20px, 2.2vw, 32px); /* below a page hero */
}

/* 1. Top-level page sections. */
html body:not(.page-home):not(#rh) main > section:not(.hero):not(.home-tech-news),
html body:not(.page-home):not(#rh) main > .section,
html body:not(.page-home):not(#rh) main > article,
html body:not(.page-home):not(#rh) main > div:not([class*="hero"]) {
  padding-top: var(--rh-section) !important;
  padding-bottom: var(--rh-section) !important;
}

/* 2. Containers and inner wrappers carry no vertical padding of their own: the section already does. */
html body:not(.page-home):not(#rh) main > * > .container,
html body:not(.page-home):not(#rh) main > * > [class*="-grid"],
html body:not(.page-home):not(#rh) main > * > [class*="-inner"] {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* 3. Page heroes: keep the top, shorten the tail. */
html body:not(.page-home):not(#rh) main > :is(header, section, div)[class*="hero"] {
  padding-bottom: var(--rh-hero-end) !important;
}
html body:not(.page-home):not(#rh) main > :is(header, section, div)[class*="hero"] > .container,
html body:not(.page-home):not(#rh) main > :is(header, section, div)[class*="hero"] > [class*="-inner"],
html body:not(.page-home):not(#rh) main > :is(header, section, div)[class*="hero"] > [class*="-grid"] {
  padding-bottom: 0 !important;
}

/* 4. Stacked text sections (legal pages, institutional pages, services, publications). */
html body:not(#rh) main .content-section,
html body:not(#rh) main .institutional-section,
html body:not(#rh) main .missions-group,
html body:not(#rh) main .donations-ledger-row {
  padding-top: var(--rh-block) !important;
  padding-bottom: var(--rh-block) !important;
}
html body:not(#rh) main .content-list { padding-bottom: 0 !important; }
html body:not(#rh) main .legal-document-header { margin-top: var(--rh-block) !important; }
html body:not(#rh) main .edu-heading { margin-bottom: var(--rh-block) !important; }

/* 5. Pages whose own stylesheet set very tall bands. */
html body:not(#rh) main .donations-priorities > .container,
html body:not(#rh) main .donations-measure > .container { padding-top: 0 !important; padding-bottom: 0 !important; }
html body:not(#rh) main .coopit-main .section { padding-block: var(--rh-section) !important; }

/* 6. Second-level sections (pages wrap their sections in .cpx-main, .edu-main, .tools-page, .obs…). */
html body:not(.page-home):not(#rh) main > * > section:not([class*="hero"]),
html body:not(.page-home):not(#rh) main > * > * > section.section,
html body:not(#rh) main section.guide-section,
html body:not(#rh) main section.dnsbl-section {
  padding-top: var(--rh-section) !important;
  padding-bottom: var(--rh-section) !important;
}
html body:not(.page-home):not(#rh) main :is(header, section)[class*="hero"] > :is(.container, [class*="-inner"], [class*="-grid"]) {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
html body:not(.page-home):not(#rh) main :is(header, section):is([class$="-hero"], [class*="-hero "]) {
  padding-bottom: var(--rh-hero-end) !important;
}

/* 7. Rows stacked inside a section (articles divided by rules, list items revealed one by one). */
html body:not(#rh) main section > div > article:not([class*="card"]):not([class*="-cta"]),
html body:not(#rh) main section > article:not([class*="card"]):not([class*="-cta"]),
html body:not(#rh) main section .container > article:not([class*="card"]):not([class*="-cta"]) {
  padding-top: var(--rh-block) !important;
  padding-bottom: var(--rh-block) !important;
}
html body:not(#rh) main :is(ol, ul) > li.in {
  padding-top: clamp(12px, 1.2vw, 18px) !important;
  padding-bottom: clamp(12px, 1.2vw, 18px) !important;
}

/* 8. Single oversized values found by the measurement. */
html body:not(#rh) main .training-heading,
html body:not(#rh) main .coopit-section-head { margin-bottom: var(--rh-block) !important; }
html body:not(#rh) main .training-path { padding-top: clamp(22px, 2.2vw, 32px) !important; padding-bottom: clamp(22px, 2.2vw, 32px) !important; }
html body:not(#rh) main figure.coopit-flow { padding-top: var(--rh-block) !important; padding-bottom: var(--rh-block) !important; }
html body:not(#rh) main article.coopit-case { margin-top: var(--rh-section) !important; }
html body:not(#rh) main .coopit-case-head { padding-top: var(--rh-block) !important; padding-bottom: var(--rh-block) !important; }
html body:not(#rh) main .coopit-case-timeline { padding-top: var(--rh-block) !important; padding-bottom: var(--rh-block) !important; }
html body:not(#rh) main .coopit-flow-services { margin-top: var(--rh-block) !important; }
html body:not(#rh) main .rd-scope-row { padding-top: var(--rh-block) !important; padding-bottom: var(--rh-block) !important; }
html body:not(#rh) main .rd-out-scope { margin-top: var(--rh-block) !important; padding-top: var(--rh-block) !important; }
html body:not(#rh) main :is(.rd-rules-allowed, .rd-rules-prohibited) { padding-top: var(--rh-block) !important; padding-bottom: var(--rh-block) !important; }
html body:not(#rh) main .rd-stop-rule { margin-top: var(--rh-block) !important; }
html body:not(#rh) main .watch-overview-inner { padding-top: var(--rh-section) !important; padding-bottom: var(--rh-section) !important; }
html body:not(#rh) main :is(.watch-grades-wrap, .watch-suspicious, .watch-ai-analysis) { padding-top: var(--rh-section) !important; }
html body:not(#rh) main .watch-foot-grid { margin-top: var(--rh-section) !important; }
html body:not(#rh) main :is(.techblog-sources, .techblog-related, .techblog-comments) { margin-top: clamp(24px, 2.4vw, 36px) !important; padding-top: 0 !important; }
html body:not(#rh) main :is(.techblog-sources, .techblog-related, .techblog-comments) > h2:first-child,
html body:not(#rh) main :is(#techblog-sources-title, #techblog-related-title, #techblog-comments-title) { margin-top: 0 !important; }

/* 9. Home page: chapters stacked chapter padding + section padding + chapter-head padding. */
html body.page-home:not(#rh) main .home-chapter .section,
html body.page-home:not(#rh) main .home-chapter > section {
  padding-top: clamp(22px, 2.2vw, 32px) !important;
  padding-bottom: clamp(22px, 2.2vw, 32px) !important;
}
html body.page-home:not(#rh) main .home-chapter { padding-bottom: clamp(16px, 1.6vw, 24px) !important; }
html body.page-home:not(#rh) main .home-chapter-head { padding-top: clamp(26px, 2.6vw, 38px) !important; }
html body.page-home:not(#rh) main .home-tech-news { padding-bottom: clamp(12px, 1.2vw, 18px) !important; }

/* 10. Rows at any depth inside a section, and no double padding where a row meets the section edge. */
html body:not(#rh) main section article:not([class*="card"]):not([class*="-cta"]):not([class*="watch-"]):not([class*="hgv"]) {
  padding-top: var(--rh-block) !important;
  padding-bottom: var(--rh-block) !important;
}
html body:not(#rh) main section :is(.container, [class*="-list"], [class*="-grid"], [class*="-rows"]) > :is(article, li.in, .content-section):last-child:not([class*="card"]) {
  padding-bottom: 0 !important;
}
html body:not(#rh) main [class*="hero"] .hero-actions { margin-bottom: 0 !important; }
html body:not(#rh) main .partners-hero-copy { padding-top: var(--rh-block) !important; }
html body:not(#rh) main :is(.content-callout, .commercial-notice) { margin-top: var(--rh-block) !important; }
html body:not(#rh) main dl.contact-details { margin-bottom: var(--rh-block) !important; }
html body:not(#rh) main .ai-lab-editorial { row-gap: var(--rh-section) !important; }
html body:not(#rh) main .donations-ledger { margin-top: var(--rh-block) !important; }
html body.page-home:not(#rh) main .home-tech-news > .container { padding-top: 12px !important; padding-bottom: 12px !important; }
html body.page-home:not(#rh) main .home-estimate-inner { padding-bottom: clamp(20px, 2vw, 28px) !important; }

/* 11. Section heads and columns with oversized padding of their own (a generic head rule would add margin
   where the grid gap already spaces the head, so these stay explicit). */
html body:not(#rh) main .cpx-models-head { padding-bottom: var(--rh-block) !important; }
html body:not(#rh) main .cpx-exchange-column { padding-top: var(--rh-block) !important; padding-bottom: var(--rh-block) !important; }
html body:not(#rh) main .content-list > aside.content-callout { margin-bottom: var(--rh-block) !important; }
html body:not(#rh) main .partners-models-head { margin-bottom: var(--rh-block) !important; }
html body:not(#rh) main .cpx-programmes { margin-top: var(--rh-block) !important; }
html body:not(#rh) main .rd-response-objectives { margin-top: var(--rh-block) !important; }
html body:not(#rh) main section > header:first-child[class=""],
html body:not(#rh) main article.partner-model > header { padding-top: 0 !important; }
html body.page-home:not(#rh) main .home-hygiene .hgv { margin-bottom: 0 !important; }

/* 12. Phone heroes (pre-existing, noticed during this pass): the chip touched the title and the text touched
   the buttons; the two buttons had different widths. */
@media (max-width: 760px) {
  html body:not(#rh) main [class*="hero"] h1 { margin-top: 10px !important; }
  html body:not(#rh) main [class*="hero"] .hero-actions {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px !important;
    margin-top: 18px !important;
  }
  html body:not(#rh) main [class*="hero"] .hero-actions > :is(a, button) { width: 100% !important; justify-content: center; }
  /* Commercial heroes capped text and buttons at ~58% of the phone width, leaving the right side empty. */
  html body:not(#rh) main .page-hero-inner > :is(p, .hero-actions) { max-width: none !important; }
}