/* mission.css — section padding and heading style come from all.css.
   Everything below is scoped to #mission-statement. */

#GlobalNavWrapper {
    --hero-image: url("../../assets/image9.jpg");
}

#mission-statement {

    h2 {
        max-width: 22ch;
        margin-bottom: var(--space-lg);
    }

    /* Tab strip */

    .pillar-tabs {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr));
        margin-bottom: var(--space-lg);
        border-top: 2px solid var(--titan-blue);
        border-bottom: 2px solid var(--titan-blue);

        [role="tab"] {
            position: relative;
            display: flex;
            flex-direction: column;
            gap: var(--space-xs);
            align-items: flex-start;
            padding: 18px 16px;
            border: 0;
            border-right: 2px solid var(--titan-blue);
            color: var(--titan-blue);
            background: transparent;
            font-family: inherit;
            text-align: left;
            cursor: pointer;
            transition: background-color 0.15s ease;

            &:last-child {
                border-right: 0;
            }

            &:hover {
                background-color: var(--bright-bg);
            }

            &:focus-visible {
                outline: 3px solid var(--titan-blue);
                outline-offset: -3px;
            }

            /* Active marker — a bar across the top of the selected tab. */
            &::before {
                position: absolute;
                top: 0;
                right: 0;
                left: 0;
                height: 6px;
                background-color: var(--titan-orange);
                content: "";
                opacity: 0;
            }

            &[aria-selected="true"] {
                background-color: var(--bright-bg);

                &::before {
                    opacity: 1;
                }

                .pillar-name {
                    text-decoration: underline;
                    text-decoration-color: var(--titan-orange);
                    text-decoration-thickness: 2px;
                    text-underline-offset: 3px;
                }
            }

            @media (prefers-reduced-motion: reduce) {
                transition: none;
            }
        }

        .pillar-number {
            font-size: 0.9rem;
            font-weight: 700;
        }

        .pillar-name {
            font-size: 1rem;
            font-weight: 900;
            line-height: 1.2;
        }

        /* Single column on narrow screens — the right-hand rules would read as
           stray lines once each tab is full width. */
        @media screen and (max-width: 700px) {
            grid-template-columns: 1fr;

            [role="tab"] {
                border-right: 0;
                border-bottom: 2px solid var(--titan-blue);

                &:last-child {
                    border-bottom: 0;
                }
            }
        }
    }

    /* Panels

       Every panel occupies the same single grid cell, so the block is always as
       tall as the tallest pillar and switching tabs cannot shift the page. Sized
       by content rather than a hard-coded min-height, so it stays correct when
       the copy changes, at any viewport, and once webfonts land.

       Hidden panels use visibility rather than display:none — they must keep
       occupying their space for this to work, and visibility still removes them
       from the accessibility tree and the tab order. */

    .pillar-panels {
        display: grid;

        .pillar-panel {
            grid-area: 1 / 1;
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr));
            gap: var(--space-xl);
            align-items: start;
            /* Load-bearing. The panel is stretched to the tallest pillar's
               height, and a grid's default align-content behaves as stretch —
               which would pour that spare height into the ROWS and shove
               "Activities" away from the summary. Invisible on desktop (one
               row, two columns); obvious on mobile (two rows, one column). */
            align-content: start;
            padding-top: var(--space-xs);

            /* Beats the UA sheet's [hidden] { display: none } — author wins. */
            &[hidden] {
                visibility: hidden;
                pointer-events: none;
            }

            &:focus-visible {
                outline: 3px solid var(--titan-blue);
                outline-offset: 4px;
            }
        }

        /* Below this width the stacking costs more than it buys: panels are a
           single column so the tallest (AI Research, with three paragraphs and
           the equipment thumbnails) is far taller than the rest, leaving every
           other pillar sitting above a screenful of dead space. Mobile reflows
           instead, and mission.js scrolls the new panel into view so the change
           is still obvious. */
        @media screen and (max-width: 700px) {
            display: block;

            .pillar-panel {
                grid-area: auto;

                &[hidden] {
                    display: none;
                }
            }
        }
    }

    .pillar-summary {
        display: flex;
        flex-direction: column;
        gap: var(--space-sm);

        h3 {
            margin: 0;
            color: var(--titan-blue);
            font-size: clamp(28px, 3vw, 38px);
            font-weight: 900;
            line-height: 1.1;
        }

        p {
            max-width: 46ch;
            margin: 0;
            font-size: 1.05rem;
            line-height: 1.65;
        }
    }

    .pillar-marker {
        display: flex;
        gap: 10px;
        align-items: center;
        font-size: 0.95rem;
        font-weight: 700;

        &::before {
            width: 10px;
            height: 10px;
            background-color: var(--titan-orange);
            content: "";
        }
    }

    .pillar-activities {
        display: flex;
        flex-direction: column;

        .eyebrow {
            padding-bottom: 10px;
        }
    }

    /* 150px tag column, 16px gap, 14px vertical padding and a 2px rule — the
       prototype's metrics. 0.9375rem/1.6 is exactly its 15px/24px at the
       default root size, in rem so it still scales with a user's font-size
       preference. */
    .activity-line {
        display: grid;
        grid-template-columns: 150px minmax(0, 1fr);
        gap: var(--space-sm);
        padding-block: 14px;
        border-top: 2px solid var(--titan-blue);
        font-size: 0.9375rem;
        line-height: 1.6;

        @media screen and (max-width: 600px) {
            grid-template-columns: 1fr;
            gap: var(--space-xs);
        }
    }

    /* Equipment thumbnails inside the AI Research pillar */
    .equipment-grid {
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
        gap: var(--space-sm);
        margin-top: var(--space-xs);

        h4 {
            margin: 0;
            color: var(--titan-blue);
            font-size: 0.85rem;
            font-weight: 700;
        }
    }
}