/* The inner pages' hero (layout/page_hero.html), in place of the old photo
   header. It follows the gradient hero of the University pages
   (university/static/university/css/public-relations.css and its siblings):
   the site's brand blue and the Roboto Slab font from base.html. */

.page-hero {
    --page-hero-primary-dark: #0987c2;
    --page-hero-primary-deep: #075e87;
    position: relative;
    color: #fff;
    padding: clamp(48px, 8vw, 104px) 0 clamp(44px, 7vw, 84px);
    background:
        radial-gradient(120% 120% at 85% 0%, rgba(255, 255, 255, .16), transparent 55%),
        linear-gradient(135deg, var(--bs-primary) 0%, var(--page-hero-primary-dark) 45%, var(--page-hero-primary-deep) 100%);
    overflow: hidden;
}

/* the text paints over the motif, which comes first */
.page-hero__inner {
    position: relative;
}

.page-hero__inner > * {
    position: relative;
}

.page-hero a:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 3px;
    border-radius: 6px;
}

/* ---------- Motif of the section ---------- */
/* from 992px only: on a narrower hero it would sit behind the text */
.page-hero__inner > .page-hero__motif {
    display: none;
    position: absolute;
    right: 0;
    top: 50%;
    height: clamp(220px, 22vw, 290px);
    width: auto;
    aspect-ratio: 1;
    transform: translateY(-50%);
    pointer-events: none;
}

.page-hero__orbit {
    fill: none;
    stroke: rgba(255, 255, 255, .16);
    stroke-width: 1.5;
    stroke-dasharray: 4 8;
}

.page-hero__route {
    fill: none;
    stroke: rgba(255, 255, 255, .55);
    stroke-width: 4;
    stroke-linecap: round;
    stroke-dasharray: 2 12;
}

.page-hero__line {
    fill: none;
    stroke: rgba(255, 255, 255, .7);
    stroke-width: 7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.page-hero__shape {
    fill: rgba(255, 255, 255, .16);
    stroke: #fff;
    stroke-width: 4;
    stroke-linejoin: round;
}

.page-hero__dot {
    fill: #fff;
}

@media (min-width: 992px) {
    .page-hero__inner > .page-hero__motif {
        display: block;
    }
}

@media (prefers-reduced-motion: no-preference) {
    /* the lines are drawn once; pathLength="100" on each */
    .page-hero__line {
        stroke-dasharray: 100;
        stroke-dashoffset: 100;
        animation: page-hero-draw .9s ease-out .2s forwards;
    }
}

@keyframes page-hero-draw {
    to {
        stroke-dashoffset: 0;
    }
}

/* ---------- Breadcrumb, eyebrow, title ---------- */
.page-hero__breadcrumb .breadcrumb {
    background: transparent;
    padding: 0;
    font-size: 14px;
    flex-wrap: wrap;
}

.page-hero__breadcrumb .breadcrumb-item,
.page-hero__breadcrumb .breadcrumb-item a,
.page-hero__breadcrumb .breadcrumb-item.active {
    color: rgba(255, 255, 255, .85);
}

.page-hero__breadcrumb .breadcrumb-item + .breadcrumb-item::before {
    color: rgba(255, 255, 255, .55);
}

.page-hero__eyebrow {
    text-transform: uppercase;
    letter-spacing: .16em;
    font-size: 13px;
    font-weight: 600;
    opacity: .85;
    margin: 18px 0 10px;
}

.page-hero__title {
    max-width: 680px;
    font-size: clamp(30px, 5vw, 54px);
    font-weight: 800;
    line-height: 1.12;
    margin: 0;
    color: #fff;
}

/* a page with no eyebrow: the title keeps the eyebrow's distance from the trail */
.page-hero__breadcrumb + .page-hero__title {
    margin-top: 18px;
}