/* 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; }
@media (min-width: 721px) {
    .ar-article .ar-breadcrumbs ol { font-size: 13px; }
}
.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; }

/* H3 underline (owner, 2026-10-14): the same gradient stroke as the H3 of the event Info text (H2 stays plain), so long plain
   articles do not merge into one flow. Only direct children of the body: imported one-template sections own their headings.
   The stroke follows the brand button gradient, with the event look as the fallback. */
.ar-article:not(.ar-plain-page) .ar-article__body > h3 { display: block; width: fit-content; max-width: 100%; padding-bottom: 7px; background-image: var(--ar-grad-cta, linear-gradient(110deg, #bb66ce, #e67151)); background-repeat: no-repeat; background-position: left bottom; background-size: 70% 3px; }

/* More air before a section heading (owner, 2026-10-14): H2 opens a new part of the article. */
.ar-article:not(.ar-plain-page) .ar-article__body > h2:not(:first-child) { margin-top: clamp(52px, 6vw, 72px); }

/* 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%; }
}

/* Venue overview article (2026-10-14): city tags (.ar-chips) and spec rows (.ar-specs > .ar-spec). The editor drops inline
   styles but keeps classes, so the layout lives here. Spec rows are icon + label + value in an auto-fit grid. */
.ar-article .ar-article__body .ar-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin: 22px 0 8px;
}
.ar-article .ar-article__body .ar-chips .ar-chip {
    display: inline-flex;
    align-items: center;
    padding: 8px 14px;
    border: 0;
    border-radius: 999px;
    background: rgb(255 255 255 / .75);
    box-shadow: inset 0 0 0 1px var(--ar-line, #e5dfd8);
    color: var(--ar-ink, #302b27);
    font-size: .8125rem;
    font-weight: 650;
    text-decoration: none;
    transition: box-shadow .2s;
}
.ar-article .ar-article__body .ar-chips .ar-chip:hover {
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gym-accent, #e0674f) 45%, var(--ar-line, #e5dfd8));
}
.ar-article .ar-article__body .ar-specs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    column-gap: 36px;
    margin: 16px 0 18px;
    border-top: 1px solid var(--ar-line, #e5dfd8);
}
.ar-article .ar-article__body .ar-spec {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 14px 0;
    border-bottom: 1px solid var(--ar-line, #e5dfd8);
}
.ar-article .ar-article__body .ar-spec > div { min-width: 0; }
.ar-article .ar-article__body .ar-spec strong {
    display: block;
    margin-bottom: 2px;
    color: var(--ar-muted, #746c65);
    font-size: .8125rem;
    font-weight: 600;
}

/* Venue overview article: photo pairs sitting right above the spec rows share one wide 16:10 frame, so photos with different original
   ratios (4:3, 3:2, 16:10) line up side by side instead of leaving uneven caption blocks. */
.ar-article .ar-article__body .ar-figure-pair:has(+ .ar-specs) img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 10;
    object-fit: cover;
}