/* Article polish: how article content sits in the page column, on both sites.
   Static on purpose (no build step): it loads after the built bundle and only fixes spacing and alignment. */

/* A plain article figure: the caption gets its own padding and nothing is clipped by the rounded frame. */
.ar-article__body > figure { overflow: visible; background: transparent; border-radius: 0; }
.ar-article__body > figure > img { border-radius: 18px; background: #efedea; }
.ar-article__body > figure > figcaption { margin: 0; padding: 12px 4px 0; color: var(--ar-muted, #746c65); font-size: .8125rem; line-height: 1.5; }

/* The header lead repeats the intro when the body opens with its own H1. */
.ar-article:has(.ar-article__body > h1:first-child) .ar-article__meta .ar-lead { display: none; }

/* Aside notes follow the text column instead of floating centred inside the card. */
.ar-article__body .ar-rules-note { width: 100%; max-width: 900px; margin-inline: 0; }

/* A lone image in a paragraph keeps its own size, never wider than the text measure. */
.ar-article__body p:has(> img:only-child) { margin-bottom: 24px; }
.ar-article__body p:has(> img:only-child) img { display: block; max-width: min(100%, 760px); height: auto; }

/* The same crop for portrait pairs inside the Roqeta one-article template (its duo is square by default). */
.one-article:not(.one-media-page) .one-img-duo--portrait .one-img-card img { aspect-ratio: 4 / 5; }

/* One-article template: a lone "In short" callout does not sit in a card inside a card. */
.one-article:not(.one-media-page) .one-section > .one-container > .one-alert:only-child { margin-block: 0; }
/* A table keeps air before the text that follows it. */
.one-article:not(.one-media-page) .one-section .one-table-responsive + :is(p:not(.one-table-note), ul, ol, h3) { margin-top: 20px; }

/* A hand-made photo pair in a plain article (the auto pairing only runs for imported one-template articles):
   it keeps the text measure and the same rounded corners as a single figure. */
.ar-article__body > .ar-figure-pair { max-width: 760px !important; margin: 28px 0; }
.ar-article__body > .ar-figure-pair img { display: block; width: 100%; height: auto; border-radius: 18px; background: #efedea; }

/* Breadcrumbs on articles: small plain text, no pills (11px). */
.ar-article > .ar-breadcrumbs { margin-bottom: 18px; }
.ar-article .ar-breadcrumbs ol { gap: 2px 6px; font-size: 11px; line-height: 1.6; }
.ar-article .ar-breadcrumbs li:not(:last-child)::after { margin-left: 6px; }
.ar-article .ar-breadcrumbs a { display: inline; padding: 0; border-radius: 0; background: none; box-shadow: none; color: var(--ar-muted, #746c65); font-weight: 500; }
.ar-article .ar-breadcrumbs a:hover { background: none; color: var(--ar-ink, #24211e); text-decoration: underline; text-underline-offset: 2px; }
.ar-article .ar-breadcrumbs [aria-current='page'] { padding: 0; color: var(--ar-ink, #24211e); font-weight: 600; }

/* Meta block under the breadcrumbs: discipline eyebrow and the rating row, same on every template. */
.ar-article-meta { margin: 0 0 6px; }
.ar-article-meta .ar-eyebrow { margin: 0 0 14px; }
.ar-article-meta .ar-article-stats { margin: 0; }
.ar-article > .ar-breadcrumbs:has(+ .ar-article-meta) { margin-bottom: 18px; }
/* The header repeats nothing when the body brings its own heading. */
.ar-article:has(.ar-article__body > h1:first-child) .ar-article__meta { display: none; }

/* Tables (owner, 2026-10-13): one look for every table in an article. The table scrolls sideways inside a thin 10px-radius frame;
   on phones the frame runs from screen edge to screen edge with square corners. The imported one-template tables get the same
   look in one-media-page.css. */
.ar-article .ar-article__body :is(.gf__table-wrap, .rkg__table-wrap, .agg__table-wrap, .cpt__table-wrap, .bdg__table-wrap, .scb__table-wrap) {
    border: 1px solid color-mix(in srgb, currentColor 16%, transparent);
    border-radius: 10px;
    background: transparent;
    overflow-x: auto;
}
.ar-article .ar-article__body table:not([class]) {
    border: 1px solid color-mix(in srgb, currentColor 16%, transparent);
    border-radius: 10px;
    background: transparent !important;
    font-size: .875rem;
}
.ar-article .ar-article__body table:not([class]) :is(th, td) {
    min-width: 140px;
    padding: 10px 12px;
    line-height: 1.4;
}
.ar-article .ar-article__body table:not([class]) th {
    background: transparent;
    color: var(--ar-muted, #746c65);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .06em;
}
.ar-article .ar-article__body table:not([class]) tbody tr,
.ar-article .ar-article__body table:not([class]) tbody tr:nth-child(2n) { background: transparent; }
.ar-article .ar-article__body table:not([class]) tbody tr:last-child :is(th, td) { border-bottom: 0; }
@media (max-width: 640px) {
    .ar-article .ar-article__body :is(.gf__table-wrap, .rkg__table-wrap, .agg__table-wrap, .cpt__table-wrap, .bdg__table-wrap, .scb__table-wrap),
    .ar-article .ar-article__body table:not([class]) {
        width: 100vw;
        max-width: 100vw;
        margin-inline: calc(50% - 50vw);
        border-inline-width: 0;
        border-radius: 0;
    }
}

/* Article column (owner, 2026-10-13): on wide screens the whole article is one 960px column in the middle of the page. The top of
   the article, the text, the pictures, the modules and the tables share one left edge and one width, so nothing jumps between
   blocks. The music page keeps its own wide layout. */
@media (min-width: 900px) {
    .ar-article.ar-page.site-container:not(:has(.one-media-page)) { width: min(calc(100% - (var(--gym-gutter, 20px) * 2)), 960px); }
    .ar-article.ar-page.site-container:not(:has(.one-media-page)) :is(
        .ar-article__meta,
        .ar-article-footer,
        .ar-article__body :is(h1, h2, h3, h4, h5, h6, p, ul, ol, dl, blockquote, details, figure, table, hr, .ar-figure-pair, .ar-lined-list, .one-section-hdr, .one-intro-text, .one-section-head, .ar-imported-section > h2)
    ) { max-width: none !important; }
    .ar-article.ar-page.site-container:not(:has(.one-media-page)) .ar-article__body p:has(> img:only-child) img { max-width: 100%; }
}