/* ==========================================================================
   Page hero — shared inner-page banner (includes/page-hero.php)
   Same design as the Our Graduates hero: navy star lattice, breadcrumb,
   serif title, lede, gold rule and an optional overlapping stat card.
   Scoped under .ph so it cannot leak into Bootstrap 3 / style-v1.css.
   ========================================================================== */

.ph {
    --ph-navy: #243a73;
    --ph-navy-deep: #1a2b57;
    --ph-gold: #faa619;
    --ph-gold-soft: #fbe3b3;
    --ph-ink: #1c2541;
    --ph-muted: #586074;
    --ph-line: #e6e3da;
    --ph-card: #ffffff;
    --ph-radius: 14px;
    --ph-shadow: 0 1px 2px rgba(28, 37, 65, .04), 0 2px 8px rgba(28, 37, 65, .04);
    --ph-serif: "Noto Serif", Georgia, "Times New Roman", serif;
    --ph-sans: "Open Sans", "Segoe UI", Arial, sans-serif;

    display: block;
    margin: 0 0 40px;
    font-family: var(--ph-sans);
    /* style-v1.css sets body line-height in em, which would inherit as a fixed px value */
    line-height: 1.6;
}

.ph *,
.ph *::before,
.ph *::after {
    box-sizing: border-box;
}

.ph :focus-visible {
    outline: 3px solid var(--ph-gold);
    outline-offset: 2px;
}

.ph__hero {
    padding: 56px 0;
    color: #fff;
    background-color: var(--ph-navy);
    /* Faint eight-point-star lattice */
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='.07'%3E%3Crect x='16' y='16' width='40' height='40'/%3E%3Crect x='16' y='16' width='40' height='40' transform='rotate(45 36 36)'/%3E%3Ccircle cx='36' cy='36' r='8'/%3E%3C/g%3E%3C/svg%3E"),
        linear-gradient(180deg, var(--ph-navy) 0%, var(--ph-navy-deep) 100%);
    background-size: 72px 72px, auto;
    text-align: center;
}

/* Gold rule under the heading block */
.ph__hero > .container::after {
    content: "";
    display: block;
    width: 72px;
    height: 2px;
    margin: 30px auto 0;
    background: var(--ph-gold);
    opacity: .9;
}

.ph--stats .ph__hero {
    padding-bottom: 64px;
}

/* --------------------------------------------------------------------------
   Breadcrumb
   -------------------------------------------------------------------------- */

.ph__crumbs ol {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    margin: 0 0 18px;
    padding: 0;
    list-style: none;
    font-size: 13px;
    letter-spacing: .02em;
    color: rgba(255, 255, 255, .72);
}

.ph__crumbs li {
    margin: 0;
}

.ph__crumbs li + li::before {
    content: "›";
    margin-right: 6px;
    color: rgba(255, 255, 255, .5);
}

.ph__crumbs a {
    color: #fff;
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, .35);
}

.ph__crumbs a:hover,
.ph__crumbs a:focus {
    color: #fff;
    text-decoration: none;
    border-bottom-color: var(--ph-gold);
}

/* --------------------------------------------------------------------------
   Title, Urdu title, lede
   -------------------------------------------------------------------------- */

.ph .ph__title {
    margin: 0 0 14px;
    font-family: var(--ph-serif);
    font-size: clamp(30px, 5vw, 52px);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -.01em;
    text-transform: none;
    color: #fff;
}

/* Jameel Noori's glyphs sit small in their em box (an alef is ~half the
   font-size), so it needs a much larger size than Latin text to read at a
   comparable weight next to the title. */
.ph .ph__urdu {
    margin: -6px 0 12px;
    font-family: "Jameel Noori Nastaleeq", "Noto Nastaliq Urdu", serif;
    font-size: clamp(34px, 3.6vw, 48px);
    font-weight: 400;
    line-height: 1.5;
    color: var(--ph-gold-soft);
}

.ph .ph__lede {
    max-width: 620px;
    margin: 0 auto;
    font-size: clamp(16px, 1.8vw, 18px);
    line-height: 1.65;
    color: rgba(255, 255, 255, .86);
}

/* --------------------------------------------------------------------------
   Optional stat card, overlapping the bottom of the hero
   -------------------------------------------------------------------------- */

.ph__stats-wrap {
    position: relative;
    z-index: 1;
    margin-top: -44px;
}

.ph__stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    max-width: 880px;
    margin: 0 auto;
    padding: 0;
    background: var(--ph-card);
    border: 1px solid var(--ph-line);
    border-radius: var(--ph-radius);
    box-shadow: var(--ph-shadow);
}

.ph__stat {
    display: flex;
    flex-direction: column-reverse;
    justify-content: flex-end;
    align-items: center;
    gap: 2px;
    padding: 22px 18px;
    text-align: center;
}

.ph__stat + .ph__stat {
    border-left: 1px solid var(--ph-line);
}

.ph .ph__stat-value {
    margin: 0;
    font-family: var(--ph-serif);
    font-size: 34px;
    font-weight: 700;
    line-height: 1.1;
    color: var(--ph-navy);
}

.ph .ph__stat-label {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--ph-muted);
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
    .ph {
        margin-bottom: 28px;
    }

    .ph__hero {
        padding: 40px 0 44px;
    }

    .ph__hero > .container::after {
        margin-top: 24px;
    }

    .ph--stats .ph__hero {
        padding-bottom: 56px;
    }

    .ph__stat {
        padding: 16px 10px;
    }

    .ph .ph__stat-value {
        font-size: 28px;
    }
}

@media (max-width: 520px) {
    .ph__stats {
        grid-template-columns: 1fr;
    }

    .ph__stat + .ph__stat {
        border-left: 0;
        border-top: 1px solid var(--ph-line);
    }
}