/* Northstar Pathway overview — page-specific styles.
   Mirrors the established Learning-module page formula seen in
   hiring-process.css and working-at-northstar.css:
   full-height hero, light two-col intro, cream bordered pillar grid,
   yellow CTA band. Relies on learning-navigation.css for the sidebar,
   page-intro.css for mobile title spacing, and interactions.css/home.css
   for reveal + hover primitives. The three program profiles (NEY, NEX,
   NDS) now live on their own pages and are styled by program-profiles.css. */
.program-page {
    background: var(--paper)
}

/* Hero */
.program-hero {
    min-height: 92svh;
    padding: 10rem 1.4rem 2rem;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-bottom: 1px solid
}

.program-hero__meta {
    display: flex;
    justify-content: space-between;
    gap: 2rem;
    font: 500 .55rem var(--mono);
    text-transform: uppercase
}

.program-hero h1 {
    margin: auto 0;
    line-height: .78;
    letter-spacing: -.09em
}

.program-hero h1 span,
.program-hero h1 em {
    display: block
}

.program-hero h1 em {
    margin-left: 9vw;
    color: var(--orange);
    font-style: normal
}

.program-hero__bottom {
    padding-top: 1rem;
    display: grid;
    grid-template-columns: minmax(16rem, 37rem) auto;
    justify-content: space-between;
    gap: 3rem;
    align-items: end;
    border-top: 1px solid
}

.program-hero__bottom p {
    margin: 0;
    font: .78rem/1.7 var(--mono)
}

.program-hero__links {
    display: flex;
    gap: 1.4rem
}

.program-hero__links a {
    display: flex;
    gap: 2rem;
    width: max-content;
    padding: 1rem 1.2rem;
    font: 500 .58rem var(--mono);
    text-transform: uppercase;
    transition: transform .2s, box-shadow .2s, background-color .2s
}

.program-hero__links a:first-child {
    border: 1px solid
}

.program-hero__links a:first-child:hover {
    background: var(--cream)
}

.program-hero__links a:last-child {
    color: var(--paper);
    background: var(--ink);
    box-shadow: 5px 5px 0 var(--yellow)
}

.program-hero__links a:last-child:hover {
    transform: translate(5px, 5px);
    box-shadow: none
}

/* Intro (light, two-column — mirrors future-intro / working-intro) */
.program-intro {
    min-height: 62vh;
    padding: clamp(6rem, 10vw, 10rem) 1.4rem;
    display: grid;
    grid-template-columns: 1fr minmax(20rem, .46fr);
    gap: 6vw;
    align-items: center;
    /* border-bottom: 1px solid */
}

.program-intro>div:first-child>span {
    font: 500 .55rem var(--mono);
    text-transform: uppercase
}

.program-intro h2 {
    max-width: 11ch;
    margin: 0;
    font-size: clamp(4rem, 7vw, 7.2rem);
    line-height: .87;
    letter-spacing: -.075em
}

.program-intro__copy {
    padding-top: 1rem;
    border-top: 1px solid
}

.program-intro__copy p {
    margin: 0;
    font: .76rem/1.8 var(--mono)
}

.program-intro__copy p+p {
    margin-top: 1.5rem
}

/* Northstar Pathway — box design carried over from the homepage (.pathways--programs).
   Base .pathway / .pathways rules come from home.css and interactions.css. */
.program-page .pathways--programs {
    --section-space: clamp(3.5rem, 6vw, 6rem);
    padding: 0;
    background: var(--paper);
    border-top: 0;
    border-bottom: 0
}

.program-page .pathways__intro {
    margin: 0 1.4rem;
    padding: var(--section-space) 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(16rem, .38fr);
    gap: 3rem;
    align-items: end
}

.program-page .pathways__kicker {
    display: block;
    margin-bottom: 1.4rem;
    font: 500 .55rem var(--mono);
    text-transform: uppercase
}

.program-page .pathways__intro h2 {
    max-width: 14ch;
    margin: 0;
    font-size: clamp(4rem, 7.8vw, 8rem);
    line-height: .98;
    letter-spacing: -.05em
}

.program-page .pathways__intro p {
    max-width: 32rem;
    margin: 0;
    font: 400 .72rem/1.65 var(--mono)
}

.program-page .pathways--programs .pathways__list {
    max-width: none;
    container-type: inline-size;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-top: 1px solid var(--ink);
    border-bottom: 1px solid var(--ink)
}

.program-page .pathways--programs .pathway {
    position: relative;
    min-width: 0;
    min-height: clamp(24rem, 30vw, 30rem);
    padding: clamp(1.4rem, 2.2vw, 2.25rem);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    border-bottom: 0;
    background: var(--cream);
    transition: color .35s var(--ease), background-color .35s var(--ease), opacity var(--motion-slow) var(--ease), transform var(--motion-slow) var(--ease)
}

.program-page .pathways--programs .pathway:not(:last-child) {
    border-right: 1px solid var(--ink)
}

.program-page .pathways--programs .pathway:nth-child(odd):hover,
.program-page .pathways--programs .pathway:nth-child(odd):focus-visible {
    color: var(--ink);
    background: var(--yellow)
}

.program-page .pathways--programs .pathway:nth-child(even):hover,
.program-page .pathways--programs .pathway:nth-child(even):focus-visible {
    color: var(--paper);
    background: var(--ink)
}

.program-page .pathway__stage {
    width: max-content;
    max-width: 100%;
    padding-bottom: .45rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    border-bottom: 2px solid currentColor;
    letter-spacing: -.04em;
    text-transform: none
}

.program-page .pathway__stage strong {
    font: 700 clamp(1rem, 1.55vw, 1.35rem)/1.15 var(--sans)
}

.program-page .pathway__stage small {
    margin-top: .3rem;
    font: 500 .62rem/1.2 var(--mono);
    letter-spacing: .02em
}

.program-page .pathways--programs .pathway>div {
    margin: auto 0 0
}

.program-page .pathways--programs .pathway h3 {
    font-size: clamp(1.15rem, 1.7vw, 2.4rem);
    font-size: clamp(1.15rem, 2.1cqi, 2.6rem);
    line-height: .98;
    letter-spacing: -.05em;
    white-space: nowrap
}

.program-page .pathways--programs .pathway p {
    margin-top: 1.5rem;
    font: 400 .72rem/1.6 var(--mono)
}

.program-page .pathways--programs .pathway b {
    position: absolute;
    top: clamp(1.4rem, 2.2vw, 2.25rem);
    right: clamp(1.4rem, 2.2vw, 2.25rem);
    width: 3rem;
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    border: 1px solid;
    border-radius: 50%;
    font-size: 1.4rem;
    font-weight: 400;
    transition: transform .35s var(--ease)
}

.program-page .pathways--programs .pathway:hover b,
.program-page .pathways--programs .pathway:focus-visible b {
    transform: rotate(45deg)
}

/* Pillars — paper band, bordered 2x2 grid (mirrors .approach-contrast) */
.pathway-pillars {
    padding: clamp(6rem, 10vw, 10rem) 1.4rem;
    background: var(--paper);
    border-bottom: 1px solid
}

.pathway-pillars__top {
    display: flex;
    justify-content: space-between;
    gap: 3rem;
    align-items: end;
    margin-bottom: 4rem
}

.pathway-pillars__top>span {
    font: 500 .55rem var(--mono);
    text-transform: uppercase
}

.pathway-pillars__top h2 {
    max-width: 15ch;
    margin: 0;
    font-size: clamp(3.7rem, 6vw, 6.5rem);
    line-height: .9;
    letter-spacing: -.07em
}

.pathway-pillars__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border: 1px solid
}

.pathway-pillar {
    min-height: 20rem;
    padding: 1.4rem;
    display: flex;
    flex-direction: column
}

.pathway-pillar:nth-child(odd) {
    border-right: 1px solid
}

.pathway-pillar:nth-child(-n+2) {
    border-bottom: 1px solid
}

.pathway-pillar h3 {
    margin: auto 0 1.5rem;
    font-size: clamp(1.6rem, 2.6vw, 2.3rem);
    font-weight: 600;
    letter-spacing: -.03em
}

.pathway-pillar p {
    max-width: 30rem;
    margin: 0;
    font: .7rem/1.7 var(--mono)
}

/* Program comparison table */
.programs-table-wrap {
    padding: clamp(6rem, 9vw, 9rem) 1.4rem;
    border-bottom: 1px solid
}

.programs-table__top {
    display: flex;
    justify-content: space-between;
    gap: 3rem;
    align-items: end;
    margin-bottom: 3rem
}

.programs-table__top>span {
    font: 500 .55rem var(--mono);
    text-transform: uppercase
}

.programs-table__top h2 {
    max-width: 16ch;
    margin: 0;
    font-size: clamp(2.8rem, 4.6vw, 4.4rem);
    line-height: .96;
    letter-spacing: -.065em
}

.programs-table {
    width: 100%;
    border-collapse: collapse;
    font: .68rem/1.6 var(--mono)
}

.programs-table th,
.programs-table td {
    padding: 1rem;
    text-align: left;
    vertical-align: top;
    border: 1px solid
}

.programs-table thead th {
    font: 500 .55rem var(--mono);
    text-transform: uppercase;
    background: var(--ink);
    color: var(--paper)
}

.programs-table tbody th {
    font-weight: 600
}

.programs-table__row-label {
    display: flex;
    align-items: center;
    gap: .6rem;
    transition: color .35s var(--ease)
}

a.programs-table__row-label:hover,
a.programs-table__row-label:focus-visible {
    color: var(--orange)
}

a.programs-table__row-label:focus-visible {
    outline: 2px solid var(--orange);
    outline-offset: 4px
}

.programs-table__dot--ney,
.programs-table__dot--nex,
.programs-table__dot--nds {
    width: .55rem;
    height: .55rem;
    flex: none;
    border-radius: 50%
}

.programs-table__dot--ney {
    background: var(--yellow)
}

.programs-table__dot--nex {
    background: var(--orange)
}

.programs-table__dot--nds {
    background: var(--ink)
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0
}

/* CTA band (mirrors .hiring-cta / .future-cta / .working-cta) */
.program-cta {
    padding: clamp(5rem, 8vw, 8rem) 1.4rem;
    display: grid;
    grid-template-columns: 1fr minmax(18rem, .35fr) auto;
    gap: 3rem;
    align-items: end;
    background: var(--yellow);
    border-top: 1px solid;
    border-bottom: 1px solid
}

.program-cta>div>span {
    font: 500 .55rem var(--mono);
    text-transform: uppercase
}

.program-cta h2 {
    margin: 1rem 0 0;
    font-size: clamp(3.4rem, 5.6vw, 5.8rem);
    line-height: .9;
    letter-spacing: -.07em
}

.program-cta>p {
    margin: 0;
    font: .7rem/1.7 var(--mono)
}

.program-cta a {
    display: flex;
    gap: 3rem;
    width: max-content;
    padding: 1rem 1.2rem;
    color: var(--paper);
    background: var(--ink);
    box-shadow: 5px 5px 0 var(--orange);
    font: 500 .58rem var(--mono);
    text-transform: uppercase;
    transition: transform .2s, box-shadow .2s
}

.program-cta a:hover {
    transform: translate(5px, 5px);
    box-shadow: none
}

/* Related pages (dark band) */
.related {
    padding: clamp(5rem, 8vw, 8rem) 1.4rem;
    color: var(--paper);
    background: var(--ink)
}

.related__inner {
    max-width: 1450px;
    margin: auto
}

.related__top {
    display: flex;
    justify-content: space-between;
    margin-bottom: 3rem;
    font: 500 .55rem var(--mono);
    text-transform: uppercase
}

.related__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    border-top: 1px solid rgba(255, 255, 255, .4)
}

.related-link {
    min-height: 14rem;
    padding: 1.3rem;
    display: flex;
    flex-direction: column;
    border-right: 1px solid rgba(255, 255, 255, .4);
    transition: color .25s, background .25s
}

.related-link:last-child {
    border-right: 0
}

.related-link:hover {
    color: var(--ink);
    background: var(--yellow)
}

.related-link strong {
    margin: auto 0 0;
    font-size: clamp(1.8rem, 2.8vw, 3rem);
    letter-spacing: -.05em
}

.related-link i {
    align-self: flex-end;
    font-size: 1.5rem;
    font-style: normal
}

/* Compact CTA */
.compact-cta {
    padding: 3rem 1.4rem;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 3rem;
    align-items: center;
    background: var(--yellow);
    border-top: 1px solid
}

.compact-cta p {
    margin: 0;
    font-size: clamp(1.8rem, 3vw, 3rem);
    font-weight: 700;
    letter-spacing: -.05em
}

.compact-cta p span {
    display: block;
    margin-top: .4rem;
    font: .6rem var(--mono);
    letter-spacing: 0;
    text-transform: uppercase
}

.compact-cta a {
    display: flex;
    gap: 3rem;
    padding: 1rem 1.3rem;
    color: var(--paper);
    background: var(--ink);
    font: 500 .62rem var(--mono);
    text-transform: uppercase;
    box-shadow: 5px 5px 0 var(--orange)
}

@media(max-width: 1100px) {
    .related__grid {
        grid-template-columns: 1fr
    }

    .related-link {
        min-height: 10rem;
        border-right: 0;
        border-bottom: 1px solid rgba(255, 255, 255, .4)
    }
}

@media(max-width: 900px) {

    .program-intro,
    .program-cta {
        grid-template-columns: 1fr
    }

    .program-page .pathways--programs .pathway {
        min-height: 22rem
    }

    .program-page .pathways--programs .pathways__list {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }

    .program-page .pathways--programs .pathway:nth-child(even) {
        border-right: 0
    }

    .program-page .pathways--programs .pathway:nth-child(-n+2) {
        border-bottom: 1px solid var(--ink)
    }

    .program-page .pathways--programs .pathway h3 {
        font-size: clamp(1.5rem, 4.5vw, 2.6rem);
        font-size: clamp(1.6rem, 5.4cqi, 2.6rem)
    }

    .pathway-pillars__top {
        display: block
    }

    .pathway-pillars__top h2 {
        margin-top: 1.5rem
    }

    .pathway-pillars__grid {
        grid-template-columns: 1fr
    }

    .pathway-pillar:nth-child(odd) {
        border-right: 0
    }

    .pathway-pillar:nth-child(n) {
        border-bottom: 1px solid
    }

    .pathway-pillar:last-child {
        border-bottom: 0
    }

    .programs-table__top {
        display: block
    }

    .programs-table__top h2 {
        margin-top: 1.5rem
    }
}

@media(max-width: 640px) {
    .program-hero {
        min-height: 49rem;
        padding-top: 10.5rem
    }

    .program-hero__meta>span:last-child {
        display: none
    }

    .program-hero h1 em {
        margin-left: 0
    }

    .program-hero__bottom {
        grid-template-columns: 1fr;
        gap: 2rem
    }

    .program-hero__links {
        flex-wrap: wrap
    }

    .program-intro {
        min-height: 0
    }

    .program-intro h2 {
        font-size: clamp(3.3rem, 14vw, 4.6rem)
    }

    .program-page .pathways__intro {
        grid-template-columns: 1fr;
        gap: 1.5rem;
        margin-inline: 1.2rem
    }

    .program-page .pathways__intro h2 {
        font-size: clamp(3.7rem, 15vw, 5rem)
    }

    .program-page .pathways--programs .pathways__list {
        grid-template-columns: 1fr
    }

    .program-page .pathways--programs .pathway {
        min-height: 0
    }

    .program-page .pathways--programs .pathway:not(:last-child) {
        border-right: 0;
        border-bottom: 1px solid var(--ink)
    }

    .program-page .pathways--programs .pathway>div {
        margin-top: 2rem
    }

    .program-page .pathways--programs .pathway h3 {
        margin-top: 0;
        font-size: clamp(1.4rem, 7vw, 2.6rem);
        font-size: clamp(1.5rem, 8.6cqi, 2.6rem)
    }

    .program-page .pathways--programs .pathway p {
        margin-top: 1rem;
        font-size: .875rem
    }

    .pathway-pillar {
        min-height: 0
    }

    .programs-table-wrap {
        overflow-x: auto
    }

    .programs-table {
        min-width: 34rem
    }

    .program-cta h2 {
        font-size: clamp(3.3rem, 14vw, 4.6rem)
    }

    .related {
        padding-inline: 1.2rem
    }

    .related__grid {
        grid-template-columns: 1fr
    }

    .related-link {
        min-height: 10rem;
        border-right: 0;
        border-bottom: 1px solid rgba(255, 255, 255, .4)
    }

    .related-link:last-child {
        border-bottom: 0
    }

    .compact-cta {
        grid-template-columns: 1fr
    }

    .compact-cta a {
        width: max-content
    }
}

/* UX spacing and readability refinements — matches the pattern already
   applied across admission-faqs.css / hiring-process.css. */
@media (max-width: 640px) {

    .program-intro,
    .pathway-pillars,
    .programs-table-wrap {
        min-height: 0;
        padding-block: 3rem;
        row-gap: 2rem;
        align-content: start;
    }
}

/* Pathway boxes: share rows so titles and descriptions line up across boxes. */
@supports (grid-template-rows: subgrid) {
    .program-page .pathways--programs .pathways__list {
        grid-template-rows: auto minmax(3rem, 1fr) auto auto
    }

    .program-page .pathways--programs .pathway {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: subgrid;
        grid-row: span 4
    }

    .program-page .pathways--programs .pathway>div {
        display: contents
    }

    .program-page .pathways--programs .pathway__stage {
        grid-row: 1;
        justify-self: start;
        align-self: start
    }

    .program-page .pathways--programs .pathway h3 {
        grid-row: 3
    }

    .program-page .pathways--programs .pathway p {
        grid-row: 4
    }

    @media (max-width: 900px) {
        .program-page .pathways--programs .pathways__list {
            grid-template-rows: repeat(2, auto minmax(3rem, 1fr) auto auto)
        }
    }

    @media (max-width: 640px) {
        .program-page .pathways--programs .pathways__list {
            grid-template-rows: none
        }

        .program-page .pathways--programs .pathway {
            display: flex;
            grid-row: auto
        }

        .program-page .pathways--programs .pathway>div {
            display: block
        }
    }
}