/* Issue credits - Masthead-style credits card for the {{IssueCredits}} Markdig extension.
   Shares the floated dark aside treatment of the downloads box. Featured groups read as a
   masthead headline (tracked caps label over a Lyon Display name); other groups are native
   details/summary disclosures with a decorative chevron. Roles use tracked wide-grotesque caps,
   echoing the pull-quote attribution. Slash separators are CSS-only and silent to assistive tech. */

article aside.issue-credits {
    --credits-ink: #ffffff;
    --credits-quiet: rgb(255 255 255 / 0.56);
    --credits-rule: rgb(255 255 255 / 0.14);
    --credits-accent: var(--color-primary);
    --credits-separator: oklch(var(--uchu-green-5-raw) / 0.55);
    --credits-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 6l4.5 4.5L12.5 6' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

    box-sizing: border-box;
    container: issue-credits / inline-size;
    padding: 1.35rem 1.4rem 0.35rem;
    margin-block-end: 1.25rem;
    background: var(--color-foreground);
    color: var(--credits-ink);
    font-family: var(--font-family-san-serif);
    /* Same extrusion as the display titles (variables.css); replaces the generic aside shadow */
    box-shadow: none;
    filter: var(--extrusion);
}

/* "CREDITS" label followed by a hairline that runs to the card edge. */
.issue-credits .issue-credits-heading {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    margin: 0 0 1.15rem;
    font-family: var(--font-family-wide-grotesque);
    font-stretch: 125%;
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--credits-accent);

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

.issue-credits .issue-credits-group {
    border-block-start: 1px solid var(--credits-rule);
}

/* The heading's own hairline already separates it from the first group. */
.issue-credits .issue-credits-heading + .issue-credits-group {
    border-block-start: 0;
}

/* Featured: always visible, styled as a masthead headline rather than a control. */
.issue-credits .issue-credits-group-featured {
    padding-block: 1.15rem 1.25rem;
}

.issue-credits .issue-credits-heading + .issue-credits-group-featured {
    padding-block-start: 0;
}

.issue-credits .issue-credits-group-featured > .issue-credits-title {
    margin: 0 0 0.5rem;
    font-family: var(--font-family-wide-grotesque);
    font-stretch: 112%;
    font-size: 0.66rem;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--credits-quiet);
}

.issue-credits .issue-credits-group-featured .issue-credits-names {
    flex-direction: column;
    row-gap: 0.2rem;
}

.issue-credits .issue-credits-group-featured .issue-credits-name {
    font-family: 'Lyon Custom Headings', Georgia, serif;
    font-size: clamp(1.6rem, 1.45rem + 0.6vw, 1.95rem);
    font-weight: 900;
    line-height: 1.05;
    letter-spacing: -0.012em;

    &::after {
        content: none;
    }
}

/* Collapsible groups: the summary is the only interactive title. */
.issue-credits summary.issue-credits-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin: 0;
    padding-block: 0.95rem;
    font-family: var(--font-family-serif);
    font-size: 1.15rem;
    font-weight: 400;
    line-height: 1.2;
    color: var(--credits-ink);
    list-style: none;
    cursor: pointer;
    border-radius: 2px;

    &::-webkit-details-marker {
        display: none;
    }

    &::after {
        content: "";
        flex: none;
        inline-size: 0.95rem;
        aspect-ratio: 1;
        background-color: var(--credits-quiet);
        mask: var(--credits-chevron) center / contain no-repeat;
    }

    &:hover::after {
        background-color: var(--credits-accent);
    }

    &:focus-visible {
        outline: 2px solid var(--credits-accent);
        outline-offset: 3px;
    }
}

.issue-credits .issue-credits-group[open] > summary.issue-credits-title::after {
    rotate: 180deg;
    background-color: var(--credits-accent);
}

.issue-credits .issue-credits-body {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.issue-credits details > .issue-credits-body {
    padding-block: 0.1rem 1.3rem;
}

/* Narrow cards stack each role above its names. */
.issue-credits .issue-credits-entry {
    display: grid;
    gap: 0.22rem;
    margin: 0;
}

.issue-credits .issue-credits-role {
    font-family: var(--font-family-wide-grotesque);
    font-stretch: 112%;
    font-size: 0.64rem;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--credits-quiet);
}

.issue-credits .issue-credits-people {
    margin: 0;
}

.issue-credits .issue-credits-names {
    display: flex;
    flex-wrap: wrap;
    column-gap: 0.45em;
    row-gap: 0.1rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.issue-credits .issue-credits-name {
    min-inline-size: 0;
    font-size: 0.92rem;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: -0.005em;
    color: var(--credits-ink);
    overflow-wrap: anywhere;

    /* Trailing separator wraps with its name, so no line ever starts with a slash. */
    &:not(:last-child)::after {
        content: "/";
        content: "/" / "";
        margin-inline-start: 0.45em;
        font-weight: 400;
        color: var(--credits-separator);
    }

    & :is(em, i) {
        font-style: italic;
    }
}

.issue-credits .issue-credits-name a {
    color: inherit;
    text-decoration-line: underline;
    text-decoration-thickness: 1px;
    text-decoration-color: oklch(var(--uchu-green-5-raw) / 0.7);
    text-underline-offset: 0.22em;
    transition: color 0.15s ease, text-underline-offset 0.15s ease;

    &:hover {
        color: var(--credits-accent);
        text-underline-offset: 0.12em;
    }

    &:focus-visible {
        outline: 2px solid var(--credits-accent);
        outline-offset: 2px;
        border-radius: 2px;
    }
}

/* Wide cards (for example full-width on small screens) switch to a two-column masthead:
   right-aligned roles facing their names, as in a printed magazine masthead. */
@container issue-credits (inline-size >= 26rem) {
    .issue-credits .issue-credits-body:has(> .issue-credits-entry) {
        gap: 0.45rem;
    }

    .issue-credits .issue-credits-entry {
        grid-template-columns: minmax(0, 11rem) minmax(0, 1fr);
        column-gap: 1rem;
        align-items: baseline;
    }

    .issue-credits .issue-credits-role {
        text-align: end;
    }
}

/* Expand/collapse motion only where supported and wanted; the native closed state is unchanged. */
@media (prefers-reduced-motion: no-preference) {
    article aside.issue-credits {
        interpolate-size: allow-keywords;
    }

    .issue-credits .issue-credits-group::details-content {
        block-size: 0;
        overflow: clip;
        overflow-clip-margin: 0.35rem;
        transition:
            block-size 0.3s var(--ease),
            content-visibility 0.3s allow-discrete;
    }

    .issue-credits .issue-credits-group[open]::details-content {
        block-size: auto;
    }

    .issue-credits summary.issue-credits-title::after {
        transition: rotate 0.25s var(--ease), background-color 0.15s ease;
    }
}

/* Malformed directive: show the source so no credits are silently lost. */
pre.issue-credits-error {
    margin-block: 1.25rem;
    padding: 0.9rem 1rem;
    border-inline-start: 3px solid var(--uchu-red-5);
    background: oklch(var(--uchu-red-1-raw) / 0.35);
    color: var(--color-foreground);
    font-size: 0.8rem;
    line-height: 1.5;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}