/* Interior-page hero rhythm.
   The homepage remains its own editorial/live composition. Interior routes share
   a restrained opening cadence even when their content model differs. */
:root {
  --interior-hero-title: clamp(1.9rem, 4vw, 2.75rem);
  --interior-hero-pad-top: 1.15rem;
  --interior-hero-pad-bottom: 1.15rem;
}

/* Standard SOR hero family: Playoff and SOR vs Polls. Preserve the existing
   gold/blue rule while giving both pages the same footprint and title scale. */
.rankings-hero:not(.rankings-hero-compact) {
  padding-top: var(--interior-hero-pad-top);
  padding-bottom: var(--interior-hero-pad-bottom);
}

.rankings-hero:not(.rankings-hero-compact) h1 {
  font-size: var(--interior-hero-title);
  line-height: 1.04;
}

.poll-bias-hero.rankings-hero:not(.rankings-hero-compact),
.poll-bias-hero.rankings-hero:not(.rankings-hero-compact) h1 {
  /* Deliberately inherit the shared interior rhythm rather than introducing
     a separate utility-page scale. */
}

/* Rooting Guide is rendered by the fan-tool surface rather than rankings-hero.
   Match the same opening cadence and remove the former oversized/loose feel. */
.fan-tool-heading {
  padding-top: var(--interior-hero-pad-top);
  padding-bottom: var(--interior-hero-pad-bottom);
}

.fan-tool-heading h1 {
  font-size: var(--interior-hero-title);
  line-height: 1.04;
  margin-block: .35rem .65rem;
}

.fan-tool-heading .fan-tool-lede {
  margin-bottom: .75rem;
}

/* Methodology uses the generic page-heading component. Scope this only to the
   methodology route so ordinary page headings elsewhere keep their behavior. */
.methodology > .page-heading {
  padding-top: var(--interior-hero-pad-top);
  padding-bottom: var(--interior-hero-pad-bottom);
}

.methodology > .page-heading h1 {
  font-size: var(--interior-hero-title);
  line-height: 1.04;
}

.methodology > .page-heading p {
  margin-bottom: 0;
}

/* Intelligence has a richer two-column hero, but it should enter and exit on
   the same cadence as the other interior routes. Its copy can wrap naturally. */
.si-hero {
  padding-top: var(--interior-hero-pad-top);
  padding-bottom: var(--interior-hero-pad-bottom);
}

.si-hero h1 {
  font-size: var(--interior-hero-title);
  line-height: 1.02;
}

@media (max-width: 760px) {
  :root {
    --interior-hero-title: clamp(1.85rem, 8vw, 2.4rem);
    --interior-hero-pad-top: .85rem;
    --interior-hero-pad-bottom: .9rem;
  }

  .fan-tool-heading h1,
  .methodology > .page-heading h1,
  .rankings-hero:not(.rankings-hero-compact) h1,
  .si-hero h1 {
    font-size: var(--interior-hero-title);
  }
}


/* Shared SOR page signature. Interior product heroes use the same blue-to-gold
   rule and compact visual scale established by the homepage. */
.rankings-hero:not(.rankings-hero-compact),
.page-heading.page-hero,
.fan-tool-heading,
.si-hero {
  position: relative;
  padding-left: 1.5rem;
  border-left: 6px solid var(--color-brand-blue);
}

.rankings-hero:not(.rankings-hero-compact)::after,
.page-heading.page-hero::after,
.fan-tool-heading::after,
.si-hero::after {
  position: absolute;
  left: -6px;
  bottom: 0;
  width: 6px;
  height: 42%;
  content: "";
  background: var(--color-brand-gold);
}

@media (max-width: 760px) {
  .rankings-hero:not(.rankings-hero-compact),
  .page-heading.page-hero,
  .fan-tool-heading,
  .si-hero {
    padding-left: 1rem;
  }
}


.page-heading.page-hero {
  display: block;
  max-width: 980px;
  margin-bottom: 1rem;
  padding-top: var(--interior-hero-pad-top);
  padding-bottom: var(--interior-hero-pad-bottom);
  border-bottom: 0;
}

.page-heading.page-hero h1 {
  font-size: var(--interior-hero-title);
  line-height: 1.04;
}

.page-heading.page-hero p {
  max-width: 680px;
  margin: .35rem 0 0;
}