/* Hub (family) pages: views/v2/hub.php and hub-letter.php. The board, sparklines, category cards and FAQ come from
   home.css, the map from status.css, the eyebrow, lead and article cards from article.css; this adds the head with
   the live summary, recent outages, the service grid, A-Z, problems and tips. */

@layer page {
    .hubpage { padding-bottom: var(--space-7); }
    .hubpage :is(.board__card, .hub, .home-more, .hub-incident a, .hub-services a, .az-letters a) { text-decoration: none; }

    .hubpage__head {
        padding-block: var(--space-6) 0;

        h1 { max-inline-size: 22ch; font-size: var(--step-4); letter-spacing: -.03em; line-height: 1.1; }
        .article__eyebrow { display: flex; align-items: center; gap: var(--space-2); }
        .article__eyebrow a { color: inherit; text-decoration: none; }
    }

    .hubpage__icon {
        display: grid;
        place-items: center;
        inline-size: 1.75rem;
        block-size: 1.75rem;
        border-radius: var(--radius-sm);
        background: var(--brand-tint);

        .icon { inline-size: 1rem; block-size: 1rem; }
    }

    /* Live summary: the status color only when something is going on */
    .hubpage__now {
        display: flex;
        align-items: baseline;
        gap: var(--space-3);
        max-inline-size: 62ch;
        margin-top: var(--space-5);
        padding: var(--space-4) var(--space-5);
        border-radius: var(--radius-lg);
        background: var(--surface);
        color: var(--ink);
        font-size: var(--step-1);
        line-height: 1.45;

        .live-dot { flex: none; transform: translateY(-.1em); }
        &.is-problems { background: var(--bad-tint); }
        &.is-possible { background: var(--warn-tint); }
    }

    .hubpage__stats {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-2) var(--space-5);
        margin-top: var(--space-4);
        color: var(--muted);
        font-size: var(--step--1);

        strong { color: var(--ink); font-variant-numeric: tabular-nums; }
    }

    /* Recent outages */
    .hub-incidents {
        display: grid;
        border-radius: var(--radius-lg);
        background: var(--surface);
        overflow: hidden;

        li + li { border-top: 1px solid var(--line); }
    }

    .hub-incident a {
        display: flex;
        align-items: center;
        gap: var(--space-3);
        padding: var(--space-3) var(--space-5);
        color: var(--ink);

        &:hover { background: var(--surface-2); }
    }

    .hub-incident.is-ongoing a { background: var(--bad-tint); }

    .hub-incident__main {
        display: grid;
        flex: 1;
        min-inline-size: 0;
        line-height: 1.35;

        strong { overflow: hidden; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
        > span { color: var(--muted); font-size: var(--step--1); }
    }

    .hub-incident__live { color: var(--bad); font-weight: 650; }

    .hub-incident__peak {
        display: grid;
        flex: none;
        justify-items: end;
        color: var(--ink-2);
        font-size: var(--step--1);
        font-variant-numeric: tabular-nums;
        text-align: right;

        small { color: var(--muted); font-size: .75rem; }
    }

    @media (width < 40rem) {
        .hub-incident a { flex-wrap: wrap; padding-inline: var(--space-4); }
        .hub-incident__peak { justify-items: start; inline-size: 100%; padding-left: calc(2rem + var(--space-3)); text-align: left; }
    }

    /* Service grid (popular, letter pages) */
    .hub-services {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr));
        gap: var(--space-2);

        a {
            display: flex;
            align-items: center;
            gap: var(--space-3);
            padding: var(--space-3) var(--space-4);
            border-radius: var(--radius);
            background: var(--surface);
            color: var(--ink);
            font-weight: 600;
            line-height: 1.25;
        }

        a:hover { background: var(--surface-2); }
        a > span:not(.avatar):not(.status-dot) { flex: 1; min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .status-dot { flex: none; }
    }

    .hub-services--plain a { font-weight: 500; }

    /* A-Z */
    .az-letters {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-1);

        a {
            display: grid;
            place-items: center;
            min-inline-size: 2.25rem;
            block-size: 2.25rem;
            padding-inline: var(--space-2);
            border-radius: var(--radius-sm);
            background: var(--surface);
            color: var(--ink);
            font-weight: 650;
        }

        a:hover { background: var(--surface-3); }
        a[aria-current] { background: var(--ink); color: var(--bg); }
    }

    .az-groups {
        columns: 15rem auto;
        column-gap: var(--space-6);
    }

    .az-group {
        break-inside: avoid;
        padding-bottom: var(--space-5);
        scroll-margin-top: calc(var(--header-h) + var(--space-4));

        h3 { margin-bottom: var(--space-2); color: var(--brand); font-size: var(--step-1); }
        ul { display: grid; gap: .3rem; }
        a { color: var(--ink-2); font-size: var(--step--1); text-decoration: none; }
        a:hover { color: var(--brand); text-decoration: underline; }
    }

    /* Problems and tips, side by side on wide screens */
    .hubpage__help {
        display: grid;
        gap: var(--space-6);
        padding-top: var(--space-7);

        h2 { font-size: var(--step-3); }
    }

    @media (width >= 60rem) {
        .hubpage__help { grid-template-columns: 1fr 1fr; }
    }

    .hubpage__sub { margin-top: var(--space-1); color: var(--muted); }

    .hub-problems {
        display: grid;
        gap: var(--space-2);
        margin-top: var(--space-4);

        div { padding: var(--space-3) var(--space-4); border-radius: var(--radius); background: var(--surface); }
        dt { font-weight: 650; }
        dd { margin-top: var(--space-1); color: var(--ink-2); font-size: var(--step--1); line-height: 1.5; }
    }

    .hub-tips {
        display: grid;
        gap: var(--space-2);
        margin-top: var(--space-4);
        counter-reset: tip;

        li {
            display: grid;
            grid-template-columns: 1.75rem 1fr;
            gap: var(--space-1) var(--space-3);
            padding: var(--space-3) var(--space-4);
            border-radius: var(--radius);
            background: var(--surface);
            counter-increment: tip;
        }

        li::before {
            content: counter(tip);
            display: grid;
            grid-row: span 2;
            place-items: center;
            inline-size: 1.75rem;
            block-size: 1.75rem;
            border-radius: 50%;
            background: var(--brand-tint);
            color: var(--brand);
            font-size: var(--step--1);
            font-weight: 700;
        }

        strong { font-weight: 650; }
        span { color: var(--ink-2); font-size: var(--step--1); line-height: 1.5; }
    }

    .hubpage__about { max-inline-size: 70ch; color: var(--ink-2); font-size: var(--step-0); line-height: 1.7; }
}