/* ============================================================
   MOYNE ROSS — Viewport Hero Frame
   Shared first-screen composition for public editorial pages.

   Principle:
   - desktop/laptop: nav + page proposition compose as one viewport
   - mobile: preserve the same deliberate first-screen rhythm without
     forcing content into a fixed height
   - page-specific graphics/content stay unique; only the frame is shared
   ============================================================ */

.mr-viewport-hero {
  box-sizing: border-box;
  width: 100%;
  min-height: 100vh;
  min-height: 100svh;
}

/* ------------------------------------------------------------
   Insights: on desktop the masthead + featured paper form the opening
   composition. On portrait/mobile the masthead owns the first screen and
   featured research begins naturally below it.
   ------------------------------------------------------------ */
.page-insights .publication-shell {
  padding-top: 0;
}

.page-insights .publication-opening {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: calc(var(--nav-height, 68px) + clamp(18px, 2.7vh, 34px));
  padding-bottom: clamp(28px, 3.6vh, 48px);
}

.page-insights .publication-opening .publication-masthead {
  flex: 0 0 auto;
  max-width: 1040px;
  padding: 0 0 clamp(22px, 2.7vh, 38px);
}

.page-insights .publication-opening .featured-research {
  flex: 0 0 auto;
  padding-top: 14px;
}

.page-insights .publication-opening .publication-section-head {
  margin-bottom: clamp(14px, 1.7vh, 22px);
}

.page-insights .publication-opening .research-feature {
  padding-top: 6px;
  padding-bottom: 0;
}

.page-insights .publication-opening .research-feature-media {
  min-height: clamp(310px, 43vh, 465px);
}

/* Short desktop/laptop screens: preserve the whole opening composition. */
@media (min-width: 1041px) and (max-height: 820px) {
  .page-insights .publication-opening {
    padding-top: calc(var(--nav-height, 68px) + 16px);
    padding-bottom: 24px;
  }
  .page-insights .publication-opening .publication-masthead {
    padding-bottom: 20px;
  }
  .page-insights .publication-opening .publication-masthead h1 {
    font-size: clamp(48px, 4.35vw, 72px);
  }
  .page-insights .publication-opening .publication-thesis {
    margin-top: 12px;
    font-size: clamp(22px, 1.75vw, 29px);
  }
  .page-insights .publication-opening .publication-dek {
    margin-top: 8px;
  }
  .page-insights .publication-opening .research-feature-media {
    min-height: clamp(280px, 38vh, 350px);
  }
  .page-insights .publication-opening .research-feature h2 {
    font-size: clamp(34px, 2.7vw, 48px);
  }
  .page-insights .publication-opening .research-feature-dek {
    font-size: clamp(16px, 1.05vw, 19px);
  }
  .page-insights .publication-opening .feature-evidence-value {
    font-size: clamp(44px, 3.5vw, 62px);
  }
}

/* ------------------------------------------------------------
   About: title + monumental image are one first-screen proposition.
   ------------------------------------------------------------ */
.page-about .prn-opening.mr-viewport-hero {
  min-height: 100vh;
  min-height: 100svh;
  padding-top: calc(var(--nav-height, 68px) + clamp(34px, 4.2vh, 66px));
  padding-bottom: clamp(36px, 4.2vh, 66px);
  align-items: center;
}

.page-about .prn-opening .prn-visual {
  min-height: 0;
  height: clamp(430px, 62vh, 660px);
}

@media (min-width: 981px) and (max-height: 800px) {
  .page-about .prn-opening.mr-viewport-hero {
    padding-top: calc(var(--nav-height, 68px) + 24px);
    padding-bottom: 28px;
  }
  .page-about .prn-opening .prn-hero h1 {
    font-size: clamp(50px, 4.2vw, 72px);
  }
  .page-about .prn-opening .prn-visual {
    height: min(60vh, 520px);
  }
  .page-about .prn-visual .prn-churchill p {
    font-size: clamp(22px, 1.85vw, 31px);
  }
}

/* ------------------------------------------------------------
   Methodology pages: title + methodology graphic form one full frame.
   ------------------------------------------------------------ */
.page-methodology .method-hero-shell.mr-viewport-hero {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: calc(var(--nav-height, 68px) + clamp(32px, 4.2vh, 64px));
  padding-bottom: clamp(44px, 5vh, 76px);
}

/* Capital Register — keep the complete six-part anatomy visible together. */
.page-register .cr-hero-shell .cr-hero {
  padding-top: 0;
}
.page-register .cr-hero-shell .cr-hero-visual {
  margin-top: clamp(38px, 4.8vh, 68px);
}

/* MR Index — keep title and the entire five-band strip in one frame. */
.page-mri .mri-hero-shell .mri-hero {
  padding-top: 0;
}
.page-mri .mri-hero-shell .mri-scale {
  margin-top: clamp(38px, 4.8vh, 62px);
}

@media (min-width: 761px) and (max-height: 780px) {
  .page-methodology .method-hero-shell.mr-viewport-hero {
    padding-top: calc(var(--nav-height, 68px) + 20px);
    padding-bottom: 30px;
  }
  .page-register .cr-hero-shell .cr-hero h1,
  .page-mri .mri-hero-shell .mri-hero h1 {
    font-size: clamp(48px, 4.2vw, 72px);
  }
  .page-register .cr-hero-shell .cr-hero-sub,
  .page-mri .mri-hero-shell .mri-hero-sub {
    margin-top: 12px;
    font-size: clamp(18px, 1.3vw, 22px);
  }
  .page-register .cr-hero-shell .cr-hero-visual,
  .page-mri .mri-hero-shell .mri-scale {
    margin-top: 30px;
  }
}

/* ------------------------------------------------------------
   Tablet/mobile: same principle, portrait composition. min-height is a
   floor, never a crop — if type wraps or accessibility text grows, the hero
   simply becomes taller.
   ------------------------------------------------------------ */
@media (max-width: 1040px) {
  .page-insights .publication-opening.mr-viewport-hero {
    min-height: auto;
    padding-top: 0;
    padding-bottom: 0;
  }
  .page-insights .publication-opening .publication-masthead {
    box-sizing: border-box;
    min-height: 100vh;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-top: calc(var(--nav-height, 68px) + 36px);
    padding-bottom: 52px;
  }
  .page-insights .publication-opening .featured-research {
    padding-top: 17px;
  }
  .page-insights .publication-opening .research-feature-media {
    min-height: 0;
  }
}

@media (max-width: 980px) {
  .page-about .prn-opening.mr-viewport-hero {
    min-height: 100vh;
    min-height: 100svh;
    padding-top: calc(var(--nav-height, 68px) + 42px);
    padding-bottom: 42px;
    align-content: center;
  }
  .page-about .prn-opening .prn-visual {
    height: auto;
    min-height: clamp(300px, 48vw, 520px);
  }
}

@media (max-width: 760px) {
  .page-insights .publication-shell {
    padding-top: 0;
  }
  .page-insights .publication-opening .publication-masthead {
    /* On phones, let the next section just enter the first screen.
       The masthead still reads as a composed hero, but avoids a large
       empty lower field around a relatively compact text proposition. */
    min-height: 88svh;
    padding-top: calc(var(--nav-height, 68px) + 24px);
    padding-bottom: 32px;
  }

  .page-about .prn-opening.mr-viewport-hero {
    gap: clamp(24px, 4vh, 34px);
    padding-top: calc(var(--nav-height, 68px) + 30px);
    padding-bottom: 30px;
  }
  .page-about .prn-opening .prn-visual {
    min-height: clamp(260px, 66vw, 420px);
  }

  .page-methodology .method-hero-shell.mr-viewport-hero {
    min-height: 100vh;
    min-height: 100svh;
    padding-top: calc(var(--nav-height, 68px) + 34px);
    padding-bottom: 38px;
  }
  .page-register .cr-hero-shell .cr-hero-visual,
  .page-mri .mri-hero-shell .mri-scale {
    margin-top: clamp(28px, 4vh, 38px);
  }
}

@media (max-width: 520px) {
  .page-insights .publication-opening .publication-masthead {
    min-height: 86svh;
    padding-top: calc(var(--nav-height, 68px) + 20px);
    padding-bottom: 26px;
  }
  .page-about .prn-opening.mr-viewport-hero,
  .page-methodology .method-hero-shell.mr-viewport-hero {
    padding-left: 18px;
    padding-right: 18px;
  }
}

/* Landscape phones and very short devices: never clip; use natural height. */
@media (max-height: 560px) and (orientation: landscape) {
  .mr-viewport-hero,
  .page-insights .publication-opening .publication-masthead {
    min-height: auto;
  }
}
/* ============================================================
   INSIGHTS — MOBILE EXCEPTION
   The publication hub already had a strong editorial mobile flow.
   Below 760px, remove the viewport-hero behaviour completely and
   allow Featured Research to follow the masthead naturally.
   Desktop/tablet treatment above this breakpoint is unchanged.
   ============================================================ */
@media (max-width: 760px) {
  .page-insights .publication-shell {
    padding-top: calc(var(--nav-height, 68px) + 28px);
  }

  .page-insights .publication-opening.mr-viewport-hero {
    display: block;
    min-height: 0;
    padding: 0;
  }

  .page-insights .publication-opening .publication-masthead {
    display: block;
    min-height: 0;
    max-width: 820px;
    padding: 16px 0 42px;
  }

  .page-insights .publication-opening .featured-research {
    padding-top: 17px;
  }
}

@media (max-width: 460px) {
  .page-insights .publication-opening .publication-masthead {
    padding-top: 12px;
    padding-bottom: 36px;
  }
}