/* All services A-Z: views/v2/sitemap.php and sitemap-letter.php. The head, service grid and letter bar come from
   hub.css, the category cards from home.css; this adds the letter cards and the dense list of a letter page. */

@layer page {
    .directory :is(.directory-letters a, .directory-list a, .hub) { text-decoration: none; }

    /* Letter cards on /sitemap */
    .directory-letters {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr));
        gap: var(--space-2);

        a {
            display: grid;
            gap: .125rem;
            padding: var(--space-3) var(--space-4);
            border-radius: var(--radius);
            background: var(--surface);
            color: var(--ink);
        }

        a:hover { background: var(--surface-2); }
        a:hover strong { color: var(--brand); }
        strong { font-size: var(--step-2); font-weight: 700; line-height: 1.1; letter-spacing: -.02em; }
        small { color: var(--muted); font-size: var(--step--1); font-variant-numeric: tabular-nums; white-space: nowrap; }
    }

    /* A letter page: name, category and status dot, several columns on wide screens */
    .directory-list {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
        gap: var(--space-1) var(--space-2);

        a {
            display: flex;
            align-items: center;
            gap: var(--space-3);
            padding: var(--space-2) var(--space-3);
            border-radius: var(--radius);
            color: var(--ink);
        }

        a:hover { background: var(--surface); }
    }

    .directory-list__text {
        display: grid;
        flex: 1;
        min-inline-size: 0;
        line-height: 1.3;

        :is(strong, small) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        strong { font-weight: 550; }
        small { color: var(--muted); font-size: var(--step--1); }
    }

    .directory__showing { color: var(--muted); font-size: var(--step--1); }

    .directory .pager {
        align-items: center;
        margin-top: var(--space-2);
    }

    .directory__page { color: var(--muted); font-size: var(--step--1); font-variant-numeric: tabular-nums; }

    .directory__missing {
        padding-top: var(--space-7);
        color: var(--muted);
        font-size: var(--step--1);
    }
}