/* Shared geometry for editorial inner-page heroes. Loaded after family styles. */
:root { --inner-hero-grid: min(1180px, calc(100% - 64px)); }

main > .hero-grid {
  position: relative;
  display: block;
  min-height: 660px;
  overflow: hidden;
  box-sizing: border-box;
}

main > .hero-grid.hero-grid > .shell,
main > .hero-grid.hero-grid > .campus-shell {
  position: relative;
  z-index: 2;
  box-sizing: border-box;
  width: var(--inner-hero-grid);
  max-width: none;
  margin-inline: auto;
  padding: 184px 0 76px;
}

main > .hero-grid .breadcrumbs.breadcrumbs {
  position: absolute;
  z-index: 3;
  top: 105px;
  right: auto;
  left: 50%;
  width: var(--inner-hero-grid);
  max-width: none;
  margin: 0;
  transform: translateX(-50%);
  flex-wrap: wrap;
  white-space: normal;
}

main > .hero-grid :is(.fr-hero__copy, .values-hero__copy, .calendar-hero__copy, .philosophy-hero__copy) {
  max-width: 760px;
}

main > .hero-grid .eyebrow,
main > .hero-grid .campus-eyebrow {
  margin: 0 0 16px;
}

main > .hero-grid h1 {
  max-width: 760px;
  margin: 0 0 20px;
  font-size: clamp(3rem, 5vw, 4.5rem);
  line-height: 1.04;
  letter-spacing: -.04em;
}

main > .hero-grid h1 + p,
main > .hero-grid .fr-hero__copy > p:not(.eyebrow) {
  max-width: 640px;
  margin: 0;
  font-size: 1.08rem;
  line-height: 1.7;
}

main > .hero-grid :is(.button-row, .campus-actions) { margin-top: 28px; }
main > .hero-grid h1 + p + .button { margin-top: 28px; }

/* Keep editorial side media while putting its copy on the same left grid. */
main > .calendar-hero.hero-grid { min-height: 660px; padding: 0; }
main > .calendar-hero.hero-grid > .shell { display: grid; align-items: start; }
main > .calendar-hero.hero-grid .breadcrumbs { color: #526173; }
main > .parent-hero.hero-grid > .shell { padding-right: 43%; }
main > .parent-hero.hero-grid .breadcrumbs { color: #5b6470; }

@media (max-width: 760px) {
  :root { --inner-hero-grid: calc(100% - 40px); }
  main > .hero-grid { min-height: 650px; }
  main > .hero-grid.hero-grid > .shell,
  main > .hero-grid.hero-grid > .campus-shell { padding: 160px 0 60px; }
  main > .hero-grid .breadcrumbs.breadcrumbs { top: 92px; }
  main > .hero-grid h1 {
    max-width: 100%;
    font-size: clamp(2.35rem, 10.5vw, 3.05rem);
    line-height: 1.06;
  }
  main > .hero-grid h1 + p,
  main > .hero-grid .fr-hero__copy > p:not(.eyebrow) { font-size: 1rem; }
  main > .sl-hero.hero-grid { padding-top: 0; }
  main > .sl-hero.hero-grid > img { height: 100%; }
  main > .sl-hero.hero-grid::after {
    inset: 0;
    height: auto;
    background: none;
  }
  main > .parent-hero.hero-grid > img { inset: 0; width: 100%; height: 100%; }
  main > .parent-hero.hero-grid .parent-hero__veil {
    background: linear-gradient(90deg, rgba(251,247,240,.96), rgba(251,247,240,.82));
  }
  main > .parent-hero.hero-grid > .shell { padding-right: 0; }
  main > .calendar-hero.hero-grid > .shell { padding-top: 160px; }
}