/* Issue contents - the printed table of contents for the {{IssueContents}} Markdig extension.
   A light card that pairs with the dark issue credits card, laid
   out like a printed contents page: the page number leads each entry in a column of heavy wide
   Archivo figures, with the Lyon title, description and credit beside it. Section labels keep the
   credits card's wide-grotesque caps. No hairline after the heading, no square bullets and no
   dotted leaders. The markup's "p." prefix is shrunk via ::first-letter, which takes the letter
   and its trailing full stop together. */

.issue-contents {
    --contents-panel: var(--uchu-gray-1);
    --contents-number: oklch(48% 0.13 145);

    /* A new block formatting context sits beside the floated cards (carousel, infobox, credits)
       instead of running underneath them. The minimum width makes it drop below them on its own
       when the space beside them is too narrow to read comfortably. */
    display: flow-root;
    box-sizing: border-box;
    min-inline-size: min(100%, 20rem);
    margin-block: var(--space-l);
    padding: var(--space-m) var(--space-m) var(--space-l);
    background: var(--contents-panel);
    color: var(--color-foreground);
    overflow-wrap: break-word;
}

/* A contents-page masthead word, set big in the wide grotesque rather than as a tiny label. */
.issue-contents .issue-contents-heading {
    margin: 0 0 var(--space-m);
    font-family: var(--font-family-wide-grotesque);
    font-stretch: 125%;
    font-size: clamp(1.5rem, 1.25rem + 1vw, 2.1rem);
    font-weight: 800;
    line-height: 0.95;
    letter-spacing: -0.01em;
    text-transform: uppercase;
}

.issue-contents-groups {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
    gap: var(--space-l) var(--space-l);
}

/* Each group is a two-column grid: page figures, then text. Its list and entries subgrid into
   it, so the figure column fits the widest page label in the group and the section label lines
   up with the titles. */
.issue-contents-group {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    align-content: start;
    min-inline-size: 0;
}

.issue-contents-featured {
    grid-column: 1 / -1;
}

/* Titled groups take two rows of the outer grid, label then list, and subgrid them, so groups
   side by side share both rows. Labels sit at the bottom of the shared label row, which starts
   every list in a row at the same height however many lines the labels wrap to. */
.issue-contents-group:has(> .issue-contents-group-title) {
    grid-row: span 2;
    grid-template-rows: subgrid;
    row-gap: var(--space-xs);
}

.issue-contents .issue-contents-group-title {
    grid-row: 1;
    grid-column: 2;
    align-self: end;
    margin: 0;
    font-family: var(--font-family-wide-grotesque);
    font-stretch: 112%;
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-muted);
}

.issue-contents .issue-contents-entries {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: subgrid;
    /* A short list beside a longer one keeps its entries together at the top of the shared row. */
    align-content: start;
    row-gap: var(--space-xs);
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Rows pack to the top: an entry stretched to match a taller neighbour must not spread its title,
   description and credit across the extra height. */
.issue-contents-entry {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: subgrid;
    align-content: start;
    align-items: baseline;
}

/* Featured sections lay their entries out side by side when there is room, so each entry keeps
   its own figure column instead of sharing the group's. */
.issue-contents .issue-contents-featured .issue-contents-entries {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
    gap: var(--space-m) var(--space-m);
}

.issue-contents .issue-contents-featured .issue-contents-entry {
    grid-column: auto;
    grid-template-columns: max-content minmax(0, 1fr);
}

.issue-contents .issue-contents-featured .issue-contents-group-title {
    grid-column: 1 / -1;
}

/* With page labels present, a shared minimum figure width keeps featured titles aligned across
   entries and under the section label; three-digit pages fit without widening it. */
.issue-contents .issue-contents-featured:has(.issue-contents-pages) {
    --contents-featured-figures: 6rem;

    & .issue-contents-entry {
        grid-template-columns: minmax(var(--contents-featured-figures), max-content) minmax(0, 1fr);
    }

    & .issue-contents-group-title {
        padding-inline-start: var(--contents-featured-figures);
    }
}

/* The heading wrapper dissolves so the title and page label become grid items of the entry. */
.issue-contents-entry-heading {
    display: contents;
}

.issue-contents-pages {
    display: inline-block;
    grid-column: 1;
    grid-row: 1 / span 3;
    padding-inline-end: 0.75rem;
    font-family: var(--font-family-wide-grotesque);
    font-stretch: 125%;
    font-size: 1.15rem;
    font-weight: 800;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
    text-align: end;
    white-space: nowrap;
    color: var(--contents-number);

    /* "p." shrinks to a small muted prefix beside the figures. */
    &::first-letter {
        font-size: 0.6em;
        font-weight: 600;
        letter-spacing: 0;
        color: var(--color-muted);
    }
}

.issue-contents .issue-contents-title {
    grid-column: 2;
    margin: 0;
    font-family: var(--font-family-serif);
    font-size: 1.1rem;
    font-weight: 400;
    line-height: 1.25;
    text-wrap: pretty;
}

/* Featured sections read as contents-page headlines with larger figures. */
.issue-contents .issue-contents-featured .issue-contents-pages {
    font-size: 1.6rem;
}

.issue-contents .issue-contents-featured .issue-contents-title {
    font-family: 'Lyon Custom Headings', Georgia, serif;
    font-size: clamp(1.3rem, 1.2rem + 0.5vw, 1.6rem);
    font-weight: 900;
    line-height: 1.1;
    letter-spacing: -0.01em;
}

.issue-contents .issue-contents-description,
.issue-contents .issue-contents-credit {
    grid-column: 2;
    max-inline-size: 60ch;
    margin: 0.3rem 0 0;
    font-family: var(--font-family-san-serif);
    font-size: 0.85rem;
    line-height: 1.45;
    color: var(--color-muted);
}

.issue-contents .issue-contents-credit {
    font-family: var(--font-family-serif);
    font-size: 0.9rem;
    font-style: italic;
}

pre.issue-contents-error {
    padding: 1rem;
    border-inline-start: 3px solid var(--uchu-red-5);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}