/* =============================================================================
   PAGE HERO — inner page banner (navy bg, title, breadcrumb)
   ============================================================================= */

.pn-page-hero {
    background-color: var(--color-primary);
    color: var(--color-btn-text);
    padding-block: var(--space-16) var(--space-12);
    margin-top: 72px; /* offset for fixed header */
}

.admin-bar .pn-page-hero { margin-top: 104px; }

/* Breadcrumb */
.pn-breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2);
    font-size: var(--text-sm);
    color: rgba(245, 244, 242, 0.60);
    margin-bottom: var(--space-5);
}

.pn-breadcrumb a {
    color: rgba(245, 244, 242, 0.60);
    transition: color var(--duration-fast) var(--ease-default);
}

.pn-breadcrumb a:hover { color: var(--color-btn-text); }

.pn-page-hero__title {
    font-size: clamp(var(--text-3xl), 5vw, var(--text-5xl));
    font-weight: var(--weight-extrabold);
    color: var(--color-btn-text);
    line-height: var(--leading-tight);
    margin-bottom: var(--space-4);
}

.pn-page-hero__subtitle {
    font-size: var(--text-lg);
    color: rgba(245, 244, 242, 0.75);
    max-width: 60ch;
    line-height: var(--leading-normal);
}