/* INK-MAG-COLLECTIONS — artist cards in a magazine collection (section.mag-master).
 *
 * Markup is built by articleV2Renderer (utils/article_collection.php): H2, facts line, bio,
 * the existing article-v2 slider (.article-slider-wrapper > .article-slider > figure.article-slide,
 * core.js does the swipe, dots and lightbox) and a row of actions. Design-system tokens only, so
 * the dark theme (default) and the light one both follow the site. With the flag at 0 the same
 * section shows as H2 + text + plain figures; the few rules below keep that readable too.
 */

.mag-collection__note {
    margin: var(--space-lg, 28px) 0 0;
    font-family: var(--article-font-ui, inherit);
    font-size: 13px;
    line-height: 1.5;
    color: var(--color-text-muted, #8a8a8a);
}

.mag-master {
    margin: var(--space-xl, 40px) 0 0;
    padding-top: var(--space-lg, 28px);
    border-top: 1px solid var(--color-border, #333);
}

.mag-master > h2 {
    margin-top: 0;
    scroll-margin-top: 96px; /* TOC jump lands below the sticky header */
}

.mag-master__facts {
    font-family: var(--article-font-ui, inherit);
    font-size: 14px;
    line-height: 1.5;
    color: var(--color-text-secondary, #a3a3a3);
    margin: 0 0 1em;
}

/* Cards carry 3–6 works: smaller slides than an editorial carousel. */
.mag-master__works {
    margin: 1.25em 0 0.5em;
}

.mag-master__works .article-slide {
    flex: 0 0 72%;
    aspect-ratio: 4 / 5;
}

@media (min-width: 769px) {
    .mag-master__works .article-slide {
        flex-basis: calc((100% - 24px) / 3);
    }
}

/* Flag 0 / preview: the authored figures, side by side. */
.mag-master figure.mag-master__work {
    margin: 0.75em 0;
}

.mag-master figure.mag-master__work img {
    max-width: 100%;
    height: auto;
    display: block;
    border-radius: var(--radius-md, 8px);
}

.mag-master__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm, 12px);
    align-items: center;
    margin: var(--space-sm, 12px) 0 0;
}

/* Doubled class (0,2,0) on purpose: `.article-body a` (0,1,1) paints every body link gold and
   would otherwise win — gold text on the light button was ~1.5:1 (demo 09.10). */
.mag-master .mag-master__profile,
.mag-master .mag-master__ig {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 18px;
    border-radius: 999px;
    font-family: var(--article-font-ui, inherit);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    max-width: 100%;
    overflow-wrap: anywhere;
}

/* Primary CTA of the site (.btn--primary): dark text on the brand gold, both themes (≈11:1). */
.mag-master .mag-master__profile,
.mag-master .mag-master__profile:hover,
.mag-master .mag-master__profile:focus-visible {
    background: var(--color-brand-accent, #e8c547);
    color: var(--color-gray-900, #171717);
}

.mag-master .mag-master__profile:hover,
.mag-master .mag-master__profile:focus-visible {
    background: var(--color-brand-accent-hover, #f0d060);
}

.mag-master .mag-master__ig,
.mag-master .mag-master__ig:hover,
.mag-master .mag-master__ig:focus-visible {
    background: transparent;
    border: 1px solid var(--color-border, #333);
    color: var(--color-text, #f5f5f5);
}

.mag-master .mag-master__ig:hover,
.mag-master .mag-master__ig:focus-visible {
    border-color: var(--color-border-hover, #444);
}

.hero-updated {
    white-space: nowrap;
}