/* NOVUS — Page hero --------------------------------------------------------
   The opening of every subpage. Same type scale, plate and drafting marks as
   the homepage hero, but sized to a page header instead of a full screen.
   ------------------------------------------------------------------------- */

.poly-pagehero {
    position: relative;
    background: linear-gradient(180deg, var(--poly-white) 0%, var(--poly-mist) 100%);
    overflow: clip;
}

.poly-pagehero__aura {
    position: absolute;
    top: -22%;
    right: -12%;
    width: min(760px, 70vw);
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(47, 134, 201, .12), rgba(47, 134, 201, 0));
    pointer-events: none;
}

.poly-pagehero__inner {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    align-items: center;
    gap: clamp(40px, 6vw, 104px);
    padding-block: clamp(56px, 7vw, 112px) clamp(72px, 8vw, 128px);
}

.poly-pagehero--text .poly-pagehero__inner { grid-template-columns: minmax(0, 1fr); }
.poly-pagehero--text .poly-pagehero__content { max-width: 60rem; }

/* ----------------------------------------------------------- breadcrumbs */

.poly-pagehero__crumbs { margin-bottom: clamp(1.5rem, 3vw, 2.4rem); }

.poly-pagehero__crumbs ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem .2rem;
    font-size: .8125rem;
    color: var(--poly-muted);
}

.poly-pagehero__crumbs li { display: inline-flex; align-items: center; gap: .2rem; }

.poly-pagehero__crumbs li + li::before {
    content: "";
    width: 6px;
    height: 6px;
    margin-inline: .45rem;
    border-top: 1.4px solid var(--poly-line-strong);
    border-right: 1.4px solid var(--poly-line-strong);
    transform: rotate(45deg);
}

.poly-pagehero__crumbs a {
    color: var(--poly-body);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: color .3s var(--poly-ease), border-color .3s var(--poly-ease);
}

.poly-pagehero__crumbs a:hover { color: var(--poly-brand); border-color: currentColor; }
.poly-pagehero__crumbs [aria-current] { color: var(--poly-title); font-weight: 600; }

/* ------------------------------------------------------------------- copy */

.poly-pagehero__title {
    font-family: var(--poly-font-display);
    font-size: clamp(2.6rem, 5.2vw, 4.6rem);
    font-weight: var(--poly-title-weight);
    line-height: .98;
    letter-spacing: var(--poly-title-tracking);
    color: var(--poly-title);
}

.poly-pagehero__line { display: block; }
.poly-pagehero__line + .poly-pagehero__line { color: var(--poly-brand); }

.poly-pagehero__intro {
    max-width: 56ch;
    margin-top: 1.5rem;
    font-size: clamp(1.02rem, 1.3vw, 1.18rem);
    line-height: 1.7;
    color: var(--poly-body);
}

.poly-pagehero__facts {
    display: flex;
    flex-wrap: wrap;
    gap: .65rem 1.6rem;
    margin-top: 2.25rem;
    padding-top: 1.6rem;
    border-top: 1px solid var(--poly-line);
}

.poly-pagehero__facts li {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    font-size: .9rem;
    font-weight: 500;
    color: var(--poly-title);
}

.poly-pagehero__facts .poly-icon { width: 20px; height: 20px; color: var(--poly-accent); }

/* ------------------------------------------------------------------ media */

.poly-pagehero__media { display: grid; justify-items: end; }

.poly-pagehero__plate {
    position: relative;
    isolation: isolate;
    width: min(100%, 460px);
}

.poly-pagehero__plate::after {
    content: "";
    position: absolute;
    top: -18px;
    right: -18px;
    z-index: -1;
    width: 58%;
    height: 44%;
    background: var(--poly-mist-deep);
    border-radius: var(--poly-radius-lg);
}

.poly-pagehero__plate::before {
    content: "";
    position: absolute;
    left: -18px;
    bottom: -18px;
    z-index: -1;
    width: 62%;
    height: 50%;
    border-left: 1px solid var(--poly-line-strong);
    border-bottom: 1px solid var(--poly-line-strong);
    border-end-start-radius: var(--poly-radius-lg);
}

.poly-pagehero__frame {
    margin: 0;
    aspect-ratio: 4 / 5;
    border-radius: var(--poly-radius-lg);
}

.poly-pagehero__badge {
    position: absolute;
    left: clamp(-56px, -3.4vw, -20px);
    bottom: clamp(28px, 3vw, 44px);
    display: flex;
    align-items: flex-start;
    gap: .85rem;
    max-width: 280px;
    padding: 1rem 1.15rem;
    background: var(--poly-white);
    border: 1px solid var(--poly-line);
    border-radius: var(--poly-radius-lg);
    box-shadow: 0 24px 48px -28px rgba(11, 17, 48, .45);
}

.poly-pagehero__badge-icon {
    display: grid;
    place-items: center;
    flex: none;
    width: 40px;
    height: 40px;
    border-radius: var(--poly-radius);
    background: var(--poly-mist-deep);
    color: var(--poly-brand);
}

.poly-pagehero__badge-icon .poly-icon { width: 20px; height: 20px; }

.poly-pagehero__badge-body { display: grid; gap: .2rem; }

.poly-pagehero__badge-body strong {
    font-family: var(--poly-font-display);
    font-size: .98rem;
    font-weight: 600;
    color: var(--poly-title);
}

.poly-pagehero__badge-body span { font-size: .84rem; line-height: 1.5; color: var(--poly-body); }

/* ------------------------------------------------------------- responsive */

@media (max-width: 1023px) {
    .poly-pagehero__inner { grid-template-columns: minmax(0, 1fr); }
    .poly-pagehero__media { justify-items: start; }
    .poly-pagehero__plate { width: min(100%, 520px); margin-inline: 18px; }
    .poly-pagehero__frame { aspect-ratio: 4 / 3; }
    .poly-pagehero__badge { left: 16px; bottom: -28px; }
}

@media (max-width: 560px) {
    .poly-pagehero__plate { margin-inline: 0; width: calc(100% - 18px); }
    .poly-pagehero__badge { position: relative; left: auto; bottom: auto; margin-top: 1rem; max-width: none; }
    .poly-pagehero__plate::before { left: -10px; bottom: -10px; }
    .poly-pagehero__plate::after { top: -10px; right: -10px; }
}