/* ==========================================================
   CLINICAL STUDY — PREMIUM SEAMLESS STORY FLOW v77
   Purpose:
   1) restore a tight eyebrow → H2 relationship,
   2) keep the sticky section index clear of headings/anchors,
   3) make the six clinical chapters read as one continuous story.
   ========================================================== */

/* The fixed site header is 78px on desktop. The Clinical index
   sits immediately below it rather than floating into content. */
body.clinical-v77 .study-index {
  position: sticky !important;
  top: 78px !important;
  z-index: 72 !important;
  min-height: 44px !important;
  margin: 0 !important;
  background: rgba(247,243,237,.975) !important;
  border-top: 0 !important;
  border-bottom: 1px solid rgba(31,28,28,.10) !important;
  box-shadow: 0 8px 18px rgba(25,20,22,.025) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
}

body.clinical-v77 .study-index__inner {
  min-height: 44px !important;
}

/* Anchor navigation must account for both sticky bars.
   This stops the menu covering the eyebrow/H2 after clicking a tab. */
html {
  scroll-padding-top: 140px;
}

body.clinical-v77 #programme-at-a-glance,
body.clinical-v77 #study-journey,
body.clinical-v77 #evidence-layers,
body.clinical-v77 #age-group-analysis,
body.clinical-v77 #volunteer-feedback,
body.clinical-v77 #study-video {
  scroll-margin-top: 140px !important;
}

/* ----------------------------------------------------------
   GLOBAL CLINICAL HEADING RHYTHM
   Eyebrow + H2 must read as a single typographic unit.
   ---------------------------------------------------------- */
body.clinical-v77 main > .section .eyebrow {
  margin: 0 0 14px !important;
}

/* Split headings: eyebrow/H2 live in the same left wrapper. */
body.clinical-v77 .section-heading--split > div > .eyebrow {
  margin: 0 0 14px !important;
}

body.clinical-v77 .section-heading--split > div > h2 {
  margin: 0 !important;
}

/* Programme was the main problem:
   old `gap:` created 50–118px of vertical space between eyebrow and H2.
   Keep the generous horizontal split but use a precise 14px row gap. */
body.clinical-v77 .programme__heading {
  column-gap: clamp(50px, 8vw, 118px) !important;
  row-gap: 14px !important;
  align-items: start !important;
  padding-top: 0 !important;
  padding-bottom: 48px !important;
}

body.clinical-v77 .programme__heading .eyebrow {
  grid-column: 1 / -1 !important;
  margin: 0 !important;
}

body.clinical-v77 .programme__heading h2 {
  margin: 0 !important;
}

body.clinical-v77 .programme__heading > p:last-child {
  align-self: start !important;
  margin: 4px 0 0 !important;
  max-width: 36ch !important;
}

/* Non-split editorial headings: stable H2 → intro relationship. */
body.clinical-v77 .evidence__heading > p:last-child,
body.clinical-v77 .feedback__heading > p:last-child {
  margin-top: 24px !important;
}

/* Split heading right-hand intro aligns to the visual body of the title,
   rather than floating far below or above it. */
body.clinical-v77 .section-heading--split {
  align-items: start !important;
}

body.clinical-v77 .section-heading--split > p {
  margin-top: 30px !important;
}

/* ----------------------------------------------------------
   ONE CONTINUOUS CLINICAL STORY
   Dark hero
   → warm Programme
   → dark Journey
   → one uninterrupted light evidence chapter (03–05)
   → dark Films
   → shared warm pre-footer
   ---------------------------------------------------------- */

/* A consistent chapter cadence — spacious, but not disconnected. */
body.clinical-v77 main > .section {
  padding-top: 88px !important;
  padding-bottom: 96px !important;
}

/* 01 Programme — warm paper opening chapter. */
body.clinical-v77 .programme {
  background: linear-gradient(180deg,#fbf8f3 0%,#f7f2ec 100%) !important;
  border-top: 0 !important;
}

/* 02 Journey — deliberate dark transition, not a floating card chapter. */
body.clinical-v77 .journey {
  background:
    radial-gradient(circle at 86% 18%,rgba(158,36,55,.20),transparent 30%),
    radial-gradient(circle at 10% 94%,rgba(225,178,103,.055),transparent 28%),
    linear-gradient(135deg,#111014 0%,#191318 68%,#111014 100%) !important;
  border-top: 0 !important;
  border-bottom: 0 !important;
}

/* 03–05 = one evidence chapter. No colour reset between sections. */
body.clinical-v77 .evidence,
body.clinical-v77 .trec,
body.clinical-v77 .feedback {
  background: #f7f2ec !important;
  border-top: 0 !important;
  border-bottom: 0 !important;
}

/* Use only a fine editorial rule to mark progress through the same chapter. */
body.clinical-v77 .trec::before,
body.clinical-v77 .feedback::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: max(32px, calc((100% - 1280px) / 2)) !important;
  right: max(32px, calc((100% - 1280px) / 2)) !important;
  height: 1px !important;
  background: rgba(32,29,31,.10) !important;
  pointer-events: none !important;
}

/* Reduce the inter-chapter sense between 03, 04 and 05 by using
   complementary padding rather than three identical isolated blocks. */
body.clinical-v77 .evidence {
  padding-bottom: 82px !important;
}

body.clinical-v77 .trec {
  padding-top: 82px !important;
  padding-bottom: 82px !important;
}

body.clinical-v77 .feedback {
  padding-top: 82px !important;
}

/* 06 Films — the human, dark conclusion. */
body.clinical-v77 .films {
  background:
    radial-gradient(circle at 15% 15%,rgba(158,36,55,.13),transparent 25%),
    linear-gradient(135deg,#151216 0%,#1d171b 100%) !important;
  border-top: 0 !important;
}

/* Keep the shared site pre-footer as the soft landing after Films. */
body.clinical-v77 .clinical-cta.global-prefooter-v260 {
  margin-top: 0 !important;
  border-top: 1px solid rgba(143,29,44,.10) !important;
}

/* ----------------------------------------------------------
   RESPONSIVE
   ---------------------------------------------------------- */
@media (max-width: 1020px) {
  body.clinical-v77 .study-index {
    top: 72px !important;
  }

  html {
    scroll-padding-top: 128px;
  }

  body.clinical-v77 #programme-at-a-glance,
  body.clinical-v77 #study-journey,
  body.clinical-v77 #evidence-layers,
  body.clinical-v77 #age-group-analysis,
  body.clinical-v77 #volunteer-feedback,
  body.clinical-v77 #study-video {
    scroll-margin-top: 128px !important;
  }

  body.clinical-v77 main > .section {
    padding-top: 78px !important;
    padding-bottom: 84px !important;
  }

  body.clinical-v77 .programme__heading {
    grid-template-columns: 1fr !important;
    column-gap: 0 !important;
    row-gap: 0 !important;
    padding-bottom: 38px !important;
  }

  body.clinical-v77 .programme__heading .eyebrow {
    margin-bottom: 14px !important;
  }

  body.clinical-v77 .programme__heading > p:last-child,
  body.clinical-v77 .section-heading--split > p {
    margin-top: 22px !important;
  }

  body.clinical-v77 .trec::before,
  body.clinical-v77 .feedback::before {
    left: 24px !important;
    right: 24px !important;
  }
}

@media (max-width: 600px) {
  body.clinical-v77 .study-index {
    top: 68px !important;
  }

  html {
    scroll-padding-top: 120px;
  }

  body.clinical-v77 #programme-at-a-glance,
  body.clinical-v77 #study-journey,
  body.clinical-v77 #evidence-layers,
  body.clinical-v77 #age-group-analysis,
  body.clinical-v77 #volunteer-feedback,
  body.clinical-v77 #study-video {
    scroll-margin-top: 120px !important;
  }

  body.clinical-v77 main > .section {
    padding-top: 68px !important;
    padding-bottom: 74px !important;
  }

  body.clinical-v77 .programme__heading {
    padding-bottom: 30px !important;
  }

  body.clinical-v77 .evidence,
  body.clinical-v77 .trec,
  body.clinical-v77 .feedback {
    padding-top: 68px !important;
    padding-bottom: 68px !important;
  }

  body.clinical-v77 .trec::before,
  body.clinical-v77 .feedback::before {
    left: 18px !important;
    right: 18px !important;
  }
}