/* Issue contents - the printed table of contents for the {{IssueContents}} Markdig extension,
   typeset like a magazine contents page under a heavy ink rule. Shares the issue credits card's
   type: tracked wide-grotesque labels, Lyon Display for featured entries and Lyon Text for the
   rest (the site ships Lyon Text only at 400, so entries never ask for a synthesized bold).
   Page numbers sit at the end of a dotted leader. Sections keep source order; featured sections
   span the full width and the rest flow into intrinsic columns, with no width breakpoints. */

.issue-contents {
    /* 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;
    min-inline-size: min(100%, 20rem);
    margin-block: var(--space-l);
    padding-block-start: var(--space-s);
    border-block-start: 4px solid var(--color-foreground);
    color: var(--color-foreground);
    overflow-wrap: break-word;
}

.issue-contents .issue-contents-heading {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    margin: 0 0 var(--space-m);
    font-family: var(--font-family-wide-grotesque);
    font-stretch: 125%;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.24em;
    text-transform: uppercase;

    &::after {
        content: "";
        flex: 1;
        border-block-start: 1px solid var(--color-border);
    }
}

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

.issue-contents-group {
    min-inline-size: 0;
}

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

.issue-contents .issue-contents-group-title {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    margin: 0 0 var(--space-xs);
    padding-block-end: var(--space-3xs);
    border-block-end: 1px solid var(--color-border);
    font-family: var(--font-family-wide-grotesque);
    font-stretch: 112%;
    font-size: 0.66rem;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--color-muted);

    &::before {
        content: "";
        flex: none;
        inline-size: 0.55em;
        block-size: 0.55em;
        background: var(--color-primary);
    }
}

.issue-contents .issue-contents-entries {
    display: grid;
    gap: var(--space-2xs);
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Title, dotted leader, page number. The leader is the heading's own ::after, moved between the
   title and the page label with order, and only drawn when there is a page label to lead to.
   Last-baseline alignment puts the leader and page on a wrapped title's final line, as in print;
   browsers without it fall back to the first line. */
.issue-contents-entry-heading {
    display: flex;
    align-items: baseline;
    align-items: last baseline;
    gap: 0.5rem;
}

.issue-contents .issue-contents-title {
    flex: 0 1 auto;
    min-inline-size: 0;
    margin: 0;
    font-family: var(--font-family-serif);
    font-size: 1.1rem;
    font-weight: 400;
    line-height: 1.3;
    text-wrap: pretty;
}

.issue-contents-entry-heading:has(.issue-contents-pages)::after {
    content: "";
    order: 1;
    flex: 1 1 1rem;
    min-inline-size: 1rem;
    border-block-end: 1px dotted var(--color-muted);
    opacity: 0.6;
}

.issue-contents-pages {
    order: 2;
    flex: none;
    font-family: var(--font-family-san-serif);
    font-size: 0.85rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    color: var(--color-muted);
}

/* Featured sections read as contents-page headlines. */
.issue-contents .issue-contents-featured .issue-contents-title {
    font-family: 'Lyon Custom Headings', Georgia, serif;
    font-size: clamp(1.4rem, 1.25rem + 0.6vw, 1.75rem);
    font-weight: 900;
    line-height: 1.1;
    letter-spacing: -0.01em;
}

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

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