/*
 * Interior pages
 *
 * Shared layouts and typography for:
 *
 * - Meet Joshua
 * - Record
 * - Priorities
 * - News
 * - Get Involved
 * - Donate
 * - Press
 * - Privacy
 * - Accessibility
 */


/*
 * Interior hero typography
 *
 * components.css supplies the shared hero structure.
 * Interior pages override only the display scale and measure.
 */

.hero--interior .hero__heading {
    max-width: 15ch;

    font-size: var(--type-display-page);
    font-weight: var(--font-display-weight);
    line-height: 1.02;

    letter-spacing: var(--font-display-tracking-tight);
}

.hero--interior .hero__body {
    max-width: 44rem;
}


/*
 * Shared sections
 */

.interior-section {
    padding-block: var(--space-9);

    background: var(--color-paper);
}

.interior-section--cream {
    background: var(--color-cream);
}

/*
 * Retain the legacy class name so existing page markup remains
 * valid, but map it into the current gold/cream visual system.
 */
.interior-section--aqua {
    background: var(--color-cream);
}

.interior-section--dark {
    background: var(--color-ink);
    color: var(--color-cream);
}


/*
 * Interior typography
 */

.interior-eyebrow {
    margin:
        0
        0
        var(--space-3);

    color: var(--color-coral);

    font-size: 0.75rem;
    font-weight: 800;

    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.interior-heading {
    max-width: 18ch;

    margin: 0;

    font-family: var(--font-display);
    font-size: var(--type-display-section);
    font-weight: var(--font-display-weight);
    line-height: 1.03;

    letter-spacing: var(--font-display-tracking-tight);
}

.interior-split .interior-heading {
    max-width: 16ch;

    font-size: var(--type-display-split);
}

.interior-copy {
    max-width: 46rem;

    margin-top: var(--space-5);

    color: var(--color-ink-soft);

    font-size: 1rem;
    line-height: 1.7;
}

.interior-copy p {
    margin:
        0
        0
        var(--space-4);
}

.interior-copy p:last-child {
    margin-bottom: 0;
}

.interior-section--dark .interior-copy {
    color: rgba(247, 230, 189, 0.74);
}


/*
 * Split editorial layout
 */

.interior-split {
    display: grid;
    grid-template-columns:
        minmax(0, 0.9fr)
        minmax(22rem, 1.1fr);

    align-items: center;

    gap: var(--space-8);
}

.interior-media {
    display: grid;
    place-items: center;

    min-height: 30rem;

    padding: var(--space-6);

    border-radius: var(--radius-sm);

    background: var(--color-gold);
    color: var(--color-ink);

    font-size: 0.72rem;
    font-weight: 800;

    letter-spacing: 0.1em;
    text-align: center;
    text-transform: uppercase;
}

.interior-media--coral {
    background: var(--color-coral);
    color: var(--color-cream);
}


/*
 * Record / accomplishment panels
 */

.interior-panel-grid {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 1px;

    margin-top: var(--space-7);

    background: var(--color-border);
}

.interior-panel {
    display: flex;
    flex-direction: column;

    min-height: 19rem;

    padding: var(--space-5);

    background: var(--color-paper);
}

.interior-section--dark .interior-panel-grid {
    background: rgba(247, 230, 189, 0.18);
}

.interior-section--dark .interior-panel {
    background: var(--color-ink);
}

.interior-panel--featured {
    background: var(--color-gold);
    color: var(--color-ink);
}

.interior-section--dark .interior-panel--featured {
    background: var(--color-gold);
    color: var(--color-ink);
}

.interior-panel__number {
    margin: 0;

    color: var(--color-coral);

    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: var(--font-display-weight);
    line-height: 1;
}

.interior-panel--featured .interior-panel__number {
    color: var(--color-ink);
}

.interior-panel__title {
    margin:
        auto
        0
        0;

    padding-top: var(--space-6);

    font-family: var(--font-display);
    font-size: var(--type-display-card);
    font-weight: var(--font-display-weight);
    line-height: 1.08;

    letter-spacing: var(--font-display-tracking);
}

.interior-panel--featured .interior-panel__title {
    font-size: var(--type-display-card-featured);
}

.interior-panel__body {
    margin:
        var(--space-3)
        0
        0;

    color: var(--color-ink-soft);

    line-height: 1.6;
}

.interior-section--dark
    .interior-panel:not(.interior-panel--featured)
    .interior-panel__body {
    color: rgba(247, 230, 189, 0.7);
}


/*
 * Priority / numbered lists
 */

.interior-list {
    margin-top: var(--space-7);

    border-top: 1px solid currentColor;
}

.interior-list__item {
    display: grid;
    grid-template-columns:
        3.5rem
        minmax(0, 1fr);

    gap: var(--space-5);

    padding-block: var(--space-5);

    border-bottom: 1px solid currentColor;
}

.interior-list__number {
    margin: 0;

    color: var(--color-coral);

    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: var(--font-display-weight);
}

.interior-list__title {
    margin: 0;

    font-family: var(--font-display);
    font-size: var(--type-display-card);
    font-weight: var(--font-display-weight);
    line-height: 1.08;

    letter-spacing: var(--font-display-tracking);
}

.interior-list__body {
    max-width: 44rem;

    margin:
        var(--space-2)
        0
        0;

    color: var(--color-ink-soft);

    line-height: 1.6;
}


/*
 * News and action grids
 */

.interior-news-grid,
.action-grid {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: var(--space-4);

    margin-top: var(--space-6);
}

.interior-news-card,
.action-card {
    display: flex;
    flex-direction: column;

    min-height: 15rem;

    padding: var(--space-5);

    border-top: 4px solid var(--color-ink);

    background: var(--color-cream);
}

.interior-news-card:first-child {
    border-top-color: var(--color-coral);
}

.action-card:nth-child(2) {
    border-top-color: var(--color-gold);
}

.action-card:nth-child(3) {
    border-top-color: var(--color-coral);
}

.interior-news-card__meta,
.action-card__eyebrow {
    margin:
        0
        0
        var(--space-5);

    color: var(--color-coral);

    font-size: 0.72rem;
    font-weight: 800;

    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.action-card:nth-child(2) .action-card__eyebrow {
    color: var(--color-ink-soft);
}

.interior-news-card__title,
.action-card__title {
    margin: 0;

    font-family: var(--font-display);
    font-size: var(--type-display-card);
    font-weight: var(--font-display-weight);
    line-height: 1.08;

    letter-spacing: var(--font-display-tracking);
}

.interior-news-card__body,
.action-card__body {
    margin:
        var(--space-3)
        0
        0;

    color: var(--color-ink-soft);

    line-height: 1.6;
}


/*
 * Utility pages
 */

.utility-prose {
    max-width: 52rem;
}

.utility-prose h2 {
    margin:
        var(--space-7)
        0
        var(--space-3);

    font-family: var(--font-display);
    font-size: var(--type-display-card-featured);
    font-weight: var(--font-display-weight);
    line-height: 1.08;

    letter-spacing: var(--font-display-tracking);
}

.utility-prose h2:first-child {
    margin-top: 0;
}

.utility-prose p {
    margin:
        0
        0
        var(--space-4);

    color: var(--color-ink-soft);

    line-height: 1.7;
}

.utility-prose a {
    font-weight: 700;

    text-underline-offset: 0.2rem;
}


/*
 * Page-specific density
 */

.page-news .interior-section {
    padding-block:
        var(--space-8)
        var(--space-9);
}

.page-news .interior-news-grid {
    margin-top: 0;
}

.page-donate .interior-section {
    padding-block: var(--space-8);
}

.page-donate .utility-prose {
    max-width: 44rem;
}

.page-record
    main
    > .interior-section:last-of-type {
    padding-block: var(--space-8);
}

.page-record
    main
    > .interior-section:last-of-type
    .interior-copy {
    max-width: 40rem;
}


/*
 * Tablet
 */

@media (max-width: 56rem) {
    .interior-section {
        padding-block: var(--space-8);
    }

    .interior-split {
        grid-template-columns: 1fr;

        gap: var(--space-7);
    }

    .interior-split .interior-heading {
        max-width: 18ch;
    }

    .interior-panel-grid,
    .interior-news-grid,
    .action-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .interior-panel-grid
        > :last-child:nth-child(odd),
    .interior-news-grid
        > :last-child:nth-child(odd),
    .action-grid
        > :last-child:nth-child(odd) {
        grid-column: 1 / -1;
    }

    .interior-panel,
    .interior-news-card,
    .action-card {
        min-height: 0;
    }

    .interior-media {
        min-height: 26rem;
    }

    .page-news .interior-section,
    .page-donate .interior-section,
    .page-record
        main
        > .interior-section:last-of-type {
        padding-block: var(--space-8);
    }
}


/*
 * Mobile
 */

@media (max-width: 40rem) {
    .hero--interior .hero__heading {
        max-width: 13ch;
    }

    .interior-section,
    .page-news .interior-section,
    .page-donate .interior-section,
    .page-record
        main
        > .interior-section:last-of-type {
        padding-block: var(--space-7);
    }

    .interior-heading,
    .interior-split .interior-heading {
        max-width: 14ch;
    }

    .interior-copy {
        margin-top: var(--space-4);
    }

    .interior-panel-grid,
    .interior-news-grid,
    .action-grid {
        grid-template-columns: 1fr;

        gap: var(--space-3);

        margin-top: var(--space-5);
    }

    .page-news .interior-news-grid {
        margin-top: 0;
    }

    .interior-panel-grid
        > :last-child:nth-child(odd),
    .interior-news-grid
        > :last-child:nth-child(odd),
    .action-grid
        > :last-child:nth-child(odd) {
        grid-column: auto;
    }

    .interior-panel,
    .interior-news-card,
    .action-card {
        min-height: 0;

        padding: var(--space-5);
    }

    .interior-panel__title {
        margin-top: var(--space-6);
        padding-top: 0;
    }

    .interior-list {
        margin-top: var(--space-6);
    }

    .interior-list__item {
        grid-template-columns:
            2.5rem
            minmax(0, 1fr);

        gap: var(--space-3);

        padding-block: var(--space-4);
    }

    .interior-media {
        min-height: 22rem;
    }
}