/* Article - Article page specific styling */

.article-end-mark {
    color: var(--uchu-green-5);
    font-size: 1.5em;
    line-height: 0;
    vertical-align: baseline;
}

/* article p:first-of-type {
    font-size: var(--step-1);
    font-weight: bold;
} */

article > p:first-of-type::first-line {
    text-transform: uppercase;
}

article a:not([class]) {
    text-decoration: underline;
    text-underline-offset: .2rem;
    transition: text-underline-offset 0.15s ease, color 0.15s ease;

    &:hover {
        text-underline-offset: .1rem;
        color: var(--color-primary);
    }
}

/* How far floated asides pull into the right margin. --grid-max-width is in ch, and ch resolves
   in each element's own font, so asides that switch to the sans font used to float to a different
   right edge than serif ones. Registering the property makes it compute once on the article (in
   the body font that main is measured in) and inherit as a plain length, so every aside shares one
   edge. Without @property support each aside resolves the calc itself, as before. */
@property --aside-outset {
    syntax: '<length>';
    inherits: true;
    initial-value: 0px;
}

article {
    --aside-outset: calc(((var(--grid-max-width) - 100vw) / 2) + var(--grid-gutter));
}

/* The page's article is the size container that decides whether its asides float (see the
   container query near the end of this file). Its containment also contains the floats. */
main > article {
    container: article-body / inline-size;
}

article aside {
    float: right;
    clear: right;
    width: 100%;
    background: #000;
    color: #fff;
    max-width: 22rem;
    margin-right: clamp(-20rem, var(--aside-outset), 0px);
    background-position-x: var(--aside-outset);
    margin-left: var(--grid-gutter);
}

article > aside {
    box-shadow: 0.3rem 0.3rem 0px 0px #444;
}

article > aside > ul {
    margin: var(--grid-gutter);
    padding: 0;
    list-style: none;
}

article > aside > ul > li:not(:last-child) {
    margin-bottom: 1rem;
}

article > aside > h1 {
    background: #0c0;
    color: #fff;
    color: #000;
    font-weight: bold;
    text-transform: uppercase;
    text-align: center;
    padding: 0.5rem 1rem;
}

article > p
{
    margin-block-start: 0rem;
    margin-block-end: 1rem;
}

/* Shared dark card shell for the downloads box, cover carousel and issue infobox (matches issue-credits.css). */
article > aside:is(.downloads-box, .cover-carousel, .infobox) {
    box-sizing: border-box;
    padding: 1.3rem 1.4rem;
    margin-block-end: 1.25rem;
    background: var(--color-foreground);
    color: #ffffff;
    border: none;
    border-radius: 0;
    /* Same extrusion as the display titles (variables.css); replaces the generic aside shadow */
    box-shadow: none;
    filter: var(--extrusion);
}

/* Covers run edge to edge inside the card; the dots strip sits on the card colour. */
article > aside.cover-carousel {
    padding: 0;

    & > img {
        display: block;
        inline-size: 100%;
        block-size: auto;
    }
}

article > aside.downloads-box {
    display: flex;
    flex-direction: column;
    gap: 1.05rem;
}

/* Issue infobox: publication facts typeset like the credits roles and names. Each fact is a
   dt/dd sibling pair; a hairline above every label after the first separates the facts. */
article > aside.infobox {
    --infobox-ink: #ffffff;
    --infobox-quiet: rgb(255 255 255 / 0.56);
    --infobox-rule: rgb(255 255 255 / 0.14);

    container: infobox / inline-size;
    font-family: var(--font-family-san-serif);
}

aside.infobox > dl {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    margin: 0;
}

aside.infobox > dl > dt {
    padding-block-start: 0.8rem;
    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(--infobox-quiet);
}

aside.infobox > dl > dd {
    margin: 0;
    padding-block: 0.22rem 0.8rem;
    font-size: 0.92rem;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: -0.005em;
    color: var(--infobox-ink);
    overflow-wrap: anywhere;
}

aside.infobox > dl > dt:first-of-type {
    padding-block-start: 0;
}

aside.infobox > dl > dd:last-of-type {
    padding-block-end: 0;
}

aside.infobox > dl > dt:not(:first-of-type) {
    border-block-start: 1px solid var(--infobox-rule);
}

/* Wide cards (full-width on small screens) set each label beside its value, as the credits masthead does. */
@container infobox (inline-size >= 26rem) {
    aside.infobox > dl {
        grid-template-columns: minmax(0, 11rem) minmax(0, 1fr);
    }

    /* Cells stretch so each row's hairline stays continuous; the label's extra top padding
       lines its smaller caps up with the value's baseline. */
    aside.infobox > dl > dt {
        padding-block: 0.98rem 0.7rem;
        padding-inline-end: 1rem;
        text-align: end;
    }

    aside.infobox > dl > dd {
        padding-block: 0.7rem;
    }

    aside.infobox > dl > dt:not(:first-of-type) + dd {
        border-block-start: 1px solid var(--infobox-rule);
    }

    aside.infobox > dl > dt:first-of-type {
        padding-block-start: 0.28rem;
    }

    aside.infobox > dl > dt:first-of-type + dd {
        padding-block-start: 0;
    }

    aside.infobox > dl > dt:last-of-type,
    aside.infobox > dl > dd:last-of-type {
        padding-block-end: 0;
    }
}

aside.downloads-box .file-info {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 0.75rem;
    align-items: start;
}

aside.downloads-box .file-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-block-start: 0.1rem;
    color: var(--color-primary);
    flex: none;

    > svg {
        display: block;
        inline-size: 1.75rem;
        block-size: 1.75rem;
    }
}

aside.downloads-box .text-content {
    display: flex;
    flex-direction: column;
    gap: 0.32rem;
    min-inline-size: 0;
}

aside.downloads-box .filename {
    margin: 0;
    padding: 0;
    font-family: var(--font-family-san-serif);
    font-size: var(--step--1);
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.015em;
    text-transform: none;
    color: #ffffff;
    overflow-wrap: anywhere;
}

aside.downloads-box .filesize {
    margin: 0;
    font-family: var(--font-family-san-serif);
    font-size: 0.74rem;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-primary);
}

aside.downloads-box .provider {
    margin: 0;
    font-family: var(--font-family-san-serif);
    font-size: 0.76rem;
    font-weight: 500;
    line-height: 1.25;
    letter-spacing: 0.01em;
    color: rgb(255 255 255 / 0.75);

    & a {
        color: var(--color-primary);
        font-weight: 600;
        text-decoration: none;

        &:hover {
            text-decoration: underline;
        }
    }
}

article > aside.downloads-box a.button {
    --button-bg: var(--color-primary);
    --button-color: #11151c;
    --button-border-color: var(--color-primary);
    --button-hover-bg: var(--uchu-green-4);
    --button-hover-color: #0b0e14;

    align-self: center;
    margin: 0;
    box-shadow: 0 0.2rem 0.9rem oklch(var(--uchu-green-5-raw) / 0.28);
    transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;

    &:hover {
        box-shadow: 0 0.25rem 1.25rem oklch(var(--uchu-green-4-raw) / 0.45);
    }
}

.no-downloads {
    margin: 0;
    font-family: var(--font-family-san-serif);
    font-size: var(--step--1);
    color: rgb(255 255 255 / 0.65);
    text-align: center;
}

article > ul:not([class]) {
    list-style-type: none;
}

article > ul:not([class]) > li {
    position: relative;
    padding-left: 1.5em;
    contain: content;
}

article > ul:not([class]) > li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.7rem;
    width: .7rem;
    height: .7rem;
    border-radius: 30%;
    background-color: #0c0;
    transform: translateY(-50%);
    box-shadow: 1px 2px 0px 0px #000;
}

article > ul:not(.categories) > li:not(:first-child) {
    margin-top: 1rem;
}

li > ul > li {
    list-style-type: square;
}

/* Asides only float when a readable column fits beside them: 22rem card + gutter + 20rem of
   text. Below that the column beside a float is too narrow (the issue contents block, for one,
   needs 20rem), so floating would just leave an empty strip next to the cards. Instead they stack
   in the flow and centre themselves, capped at 32rem so covers don't grow huge; on phones that is
   simply full width. 32rem still lets the infobox use its wide two-column layout (26rem+). */
@container article-body (inline-size < 44rem) {
    article aside {
        float: none;
        width: 100%;
        max-width: 32rem;
        margin-left: auto;
        margin-right: auto;

        & ul {
            padding-bottom: var(--grid-gutter);
        }
    }
}

section.talk-subjects {
    display: none;
    background-color: var(--color-primary);
}

aside.publication-upload-cta {
    margin: 1.25rem 0;
    padding: 0.75rem 1rem;
    border: 1px dashed var(--color-border, #d1d5db);
    border-radius: 0.5rem;
    font-size: var(--step--1);
    background: var(--color-surface-alt, #f8f8f6);
}

aside.publication-upload-cta p {
    margin: 0;
}

aside.publication-upload-cta a {
    font-weight: 600;
    margin-left: 0.25rem;
}


.cover-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 10rem), 1fr));
    gap: 1rem;
    width: 100%;
}

.cover-item {
    display: flex;
    flex-direction: column;
    margin-bottom: 1rem;
}

.cover-item a {
    display: flex;
    flex-direction: column;
    height: 100%;
    text-decoration: none;
    color: inherit;
}

.cover-item img {
    width: 100%;
    height: auto;
    object-fit: cover;
    aspect-ratio: 0.7/1;
}

.cover-title {
    margin-top: 0.5rem;
    text-align: center;
    font-size: clamp(0.75rem, 1vw, 0.9rem);
}