/* =============================================================================
   Artist detail page — /artists/{slug}   (Cortex #72)
   =============================================================================

   Ported from the approved proposal:
   https://cortex.ernieball.com/pin/moderith/artist-page-template

   ONE FILE, BOTH BRANDS. It lives in assets/shared/ so `site_asset()` resolves
   it for EB and MM alike (helpers.php:241 falls back to assets/shared). Brand
   colour is delegated to the --brand-* custom properties in
   resources/css/{eb,mm}/brand.css, exactly as pdp-tokens.css does it, so MM
   comes out gold and EB comes out pink with no second stylesheet.

   DO NOT confuse this with assets/eb/css/pages/artists.css — that is the INDEX
   grid, it is a black page, and it is loaded only by eb/pages/artists.blade.php.
   The two never load together.

   --- FOUR RULES -----------------------------------------------------------

   1. LIGHT MODE. Matches the site. No prefers-color-scheme block.

   2. CENTRE THE BLOCK, NOT THE TEXT. Every wrapper is `max-width` +
      `margin: 0 auto`; copy stays `text-align: left`. There is exactly one
      `text-align: center` in this file and it is on a two-word rank badge.

   3. THE SPARSE PAGE IS THE PRODUCT. Measured 2026-08-26 on the live roster:
      of 1,162 enabled EB artists, 678 have gear, 304 have a band, and ZERO
      have a bio, socials or videos. MM: 261 enabled, 187 with a band, 6 bios,
      and NO gear at all. So the overwhelmingly common page is portrait + name
      + maybe a band. `.artist-page--sparse` (emitted by the template when no
      content section renders) narrows the wrapper so that page reads as a
      deliberate, finished artist card instead of two items marooned in a
      1080px column.

   4. BRAND COLOUR IS FOR ACCENTS; BRAND *TEXT* ONLY ON WHITE OR --ap-page.
      Raw #ff10a4 is 3.38:1 and raw #c8a84e is 2.16:1 on the page — neither is
      ever a text colour here. Brand-coloured text uses --brand-link, and it is
      confined to --ap-paper / --ap-page grounds because MM's #8a6d1f drops to
      4.37:1 on the --ap-panel tint (measured) and would fail AA there.

   --- MEASURED CONTRAST (sRGB, WCAG 2.x) -----------------------------------

   Text pairs, all AA (>= 4.5:1):
     --ap-ink   #1a1a1a on --ap-page  #faf8f5 ... 16.42:1
     --ap-ink   #1a1a1a on --ap-paper #ffffff ... 17.40:1
     --ap-ink   #1a1a1a on --ap-panel #f4f2ec ... 15.55:1
     --ap-ink-2 #3d3d3d on --ap-page  .......... 10.25:1
     --ap-ink-3 #5a5a5a on --ap-page  ...........  6.51:1
     --ap-ink-3 #5a5a5a on --ap-paper ...........  6.90:1
     --ap-ink-3 #5a5a5a on --ap-panel ...........  6.16:1
     EB --brand-link #c4161c on --ap-paper ......  6.04:1
     EB --brand-link #c4161c on --ap-page .......  5.69:1
     MM --brand-link #8a6d1f on --ap-paper ......  4.90:1
     MM --brand-link #8a6d1f on --ap-page .......  4.62:1
     white on EB --brand-primary-fill #c00c7f ...  5.83:1
     #1a1a1a on MM --brand-primary-fill #c8a84e .  7.60:1

   Non-text / graphic:
     --ap-focus #1e6bff on --ap-page ............  4.30:1  (>= 3:1 AA)

   DELIBERATELY BELOW 3:1, and why that is conformant: the accent rule under
   each <h2> and the 1px --ap-rule hairlines are pure decoration. Neither
   encodes information — the heading text (16.42:1) names its own section and
   every card's affordance is carried by its link text, not by its border. WCAG
   1.4.11 applies to graphics *required to understand content*; these are not.
   Focus is never signalled by a border colour change alone — see the
   :focus-visible rule, which paints a 3px --ap-focus ring at 4.30:1.

   Do not "fix" the hairlines by darkening them and do not promote the accent
   to a text colour. Re-run the numbers above before changing any value here.
   ========================================================================== */

:root {
    /* --- Grounds -------------------------------------------------------- */
    --ap-page: #faf8f5;              /* warm page ground behind the article */
    --ap-paper: #ffffff;             /* cards, gear tiles, portrait mat */
    --ap-panel: #f4f2ec;             /* inset band — NEVER carries brand text */
    --ap-rule: #d9d4cc;              /* decorative hairline, see note above */

    /* --- Ink ramp ------------------------------------------------------- */
    --ap-ink: #1a1a1a;               /* h1/h2/h3, product names */
    --ap-ink-2: #3d3d3d;             /* bio body copy */
    --ap-ink-3: #5a5a5a;             /* eyebrow, meta, breadcrumb */

    /* --- Brand roles (delegated to resources/css/{eb,mm}/brand.css) ------ */
    --ap-accent: var(--brand-primary);            /* rules/underlines ONLY */
    --ap-accent-fill: var(--brand-primary-fill);  /* rank badge ground */
    --ap-on-accent: var(--brand-on-primary);      /* text on that ground */
    --ap-brand-ink: var(--brand-link);            /* the AA brand text colour */
    --ap-brand-ink-hover: var(--brand-link-hover);

    /* --- Focus ---------------------------------------------------------- */
    --ap-focus: #1e6bff;             /* not brand — must read as focus */

    /* --- Type ----------------------------------------------------------- */
    /* System stack, matching critical.css. The site ships no webfont. */
    --ap-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;

    /* --- Geometry ------------------------------------------------------- */
    --ap-maxw: 1080px;               /* full page wrapper */
    --ap-maxw-sparse: 720px;         /* rule 3 — the common, contentless page */
    --ap-prose: 68ch;                /* bio measure */
    --ap-radius: 10px;
    --ap-gap: 18px;
    --ap-section-y: 52px;
}

/* -----------------------------------------------------------------------------
   Page shell
   -------------------------------------------------------------------------- */

.artist-page {
    background: var(--ap-page);
    color: var(--ap-ink);
    font-family: var(--ap-sans);
    padding: 28px 0 64px;
}

/* RULE 2. `.container` is NOT styled globally on this site — shop.css scopes
   its copy to `.aimeos` — so without this the article rendered full-bleed and
   unstyled. Scoped to .artist-page so nothing else on the site inherits it. */
.artist-page .container {
    max-width: var(--ap-maxw);
    margin: 0 auto;
    padding: 0 20px;
    text-align: left;
}

.artist-page--sparse .container {
    max-width: var(--ap-maxw-sparse);
}

.artist-page h1,
.artist-page h2,
.artist-page h3 {
    font-family: var(--ap-sans);
    color: var(--ap-ink);
    margin: 0;
}

/* -----------------------------------------------------------------------------
   Breadcrumb + closing nav
   -------------------------------------------------------------------------- */

.artist-breadcrumb {
    margin-bottom: 22px;
    font-size: 0.82rem;
    letter-spacing: 0.02em;
}

.artist-breadcrumb a,
.artist-more a {
    color: var(--ap-ink-3);          /* 6.51:1 */
    text-decoration: none;
    border-bottom: 1px solid var(--ap-rule);
    padding-bottom: 1px;
}

.artist-breadcrumb a:hover,
.artist-more a:hover {
    color: var(--ap-brand-ink-hover);
    border-bottom-color: currentColor;
}

/* The sparse page would otherwise end on a photo and fall straight into the
   global footer. This closes it and — per the plan's §1 — gives the detail
   page a route back into the roster it is currently a dead end from. */
.artist-more {
    margin-top: var(--ap-section-y);
    padding-top: 22px;
    border-top: 1px solid var(--ap-rule);
    font-size: 0.9rem;
}

/* -----------------------------------------------------------------------------
   Hero — portrait + identity. The only block every artist gets.
   -------------------------------------------------------------------------- */

.artist-hero {
    display: grid;
    grid-template-columns: 1fr;
    gap: 26px;
    align-items: end;
}

@media (min-width: 720px) {
    .artist-hero {
        grid-template-columns: minmax(0, 320px) 1fr;
        gap: 36px;
    }
}

.artist-portrait {
    display: block;
    width: 100%;
    max-width: 320px;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    background: var(--ap-paper);
    border: 1px solid var(--ap-rule);
    border-radius: var(--ap-radius);
}

.artist-eyebrow {
    margin: 0 0 8px;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ap-ink-3);          /* 6.51:1 */
}

.artist-name {
    font-size: clamp(1.9rem, 1.2rem + 2.6vw, 3rem);
    line-height: 1.08;
    letter-spacing: -0.02em;
    font-weight: 700;
}

/* The one place the accent hue appears in the hero. Decorative: the <h1> above
   it already carries the identity at 16.42:1. */
.artist-name::after {
    content: "";
    display: block;
    width: 64px;
    height: 4px;
    margin-top: 16px;
    background: var(--ap-accent);
    border-radius: 2px;
}

.artist-band {
    margin: 14px 0 0;
    font-size: 1.05rem;
    line-height: 1.4;
    color: var(--ap-ink-2);          /* 10.25:1 */
}

/* -----------------------------------------------------------------------------
   Section furniture — shared by bio / gear / videos
   -------------------------------------------------------------------------- */

.artist-page section {
    margin-top: var(--ap-section-y);
}

.artist-page section > .container > h2 {
    font-size: 1.35rem;
    letter-spacing: -0.01em;
    padding-bottom: 10px;
    margin-bottom: 22px;
    border-bottom: 2px solid var(--ap-accent);   /* decorative, see header */
}

/* -----------------------------------------------------------------------------
   Bio  (0 EB artists, 6 MM artists as at 2026-08-26)
   -------------------------------------------------------------------------- */

.artist-bio-body {
    max-width: var(--ap-prose);      /* measure, not centring — text-align stays left */
    color: var(--ap-ink-2);          /* 10.25:1 */
    font-size: 1rem;
    line-height: 1.75;
}

.artist-bio-body > *:first-child { margin-top: 0; }
.artist-bio-body > *:last-child { margin-bottom: 0; }
.artist-bio-body p { margin: 0 0 14px; }

.artist-bio-body a {
    color: var(--ap-brand-ink);      /* EB 5.69:1 / MM 4.62:1 on --ap-page */
}

.artist-bio-body a:hover { color: var(--ap-brand-ink-hover); }

/* -----------------------------------------------------------------------------
   Gear Used  (678 of 1,162 enabled EB artists; 0 MM)
   -------------------------------------------------------------------------- */

.artist-gear-group + .artist-gear-group {
    margin-top: 34px;
}

.artist-gear-type {
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ap-ink-3);          /* 6.51:1 */
    margin-bottom: 14px;
}

.artist-gear-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
    gap: var(--ap-gap);
    list-style: none;
    margin: 0;
    padding: 0;
}

.artist-gear-item {
    position: relative;
    background: var(--ap-paper);
    border: 1px solid var(--ap-rule);
    border-radius: var(--ap-radius);
    overflow: hidden;
}

.artist-gear-link,
.artist-gear-static {
    display: block;
    padding: 12px 12px 14px;
    height: 100%;
    text-decoration: none;
    color: inherit;
}

.artist-gear-item {
    transition: transform 0.16s ease, border-color 0.16s ease;
}

.artist-gear-item:hover {
    border-color: var(--ap-accent);
    transform: translateY(-2px);
}

.artist-gear-media {
    position: relative;
    display: block;
    margin-bottom: 10px;
}

.artist-gear-media img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: contain;
    background: var(--ap-paper);
}

/* Rank order, not quantities — Cortex #72 decision A6.
   The fallbacks are INSIDE var() on purpose. A bare `background: var(--undef)`
   is invalid-at-computed-value-time and resolves to `unset` (transparent) —
   it does NOT fall back to an earlier declaration — which would leave white
   text on a white tile if brand.css ever failed to load. `var(x, y)` degrades
   to an ink chip (white on #1a1a1a = 17.40:1) instead. */
.artist-gear-rank {
    position: absolute;
    top: 0;
    left: 0;
    min-width: 24px;
    padding: 2px 6px;
    background: var(--ap-accent-fill, var(--ap-ink));
    color: var(--ap-on-accent, #ffffff);  /* EB white 5.83:1 / MM #1a1a1a 7.60:1 */
    font-size: 0.6875rem; /* 11px; 0.62rem was 9.9px, WAVE "very small text" (2026-09-21) */
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 0.04em;
    text-align: center;              /* the only centred text in this file */
    border-radius: 4px;
}

.artist-gear-name {
    display: block;
    font-size: 0.82rem;
    line-height: 1.4;
    color: var(--ap-ink);            /* 17.40:1 on the white tile */
    overflow-wrap: anywhere;
}

.artist-gear-cta {
    display: block;
    margin-top: 8px;
    font-size: 0.74rem;
    font-weight: 600;
    color: var(--ap-brand-ink);      /* EB 6.04:1 / MM 4.90:1 on white */
}

.artist-gear-link:hover .artist-gear-cta {
    color: var(--ap-brand-ink-hover);
    text-decoration: underline;
}

/* A single quotable sentence for answer engines. Neutral panel — no brand text
   here by rule 4. */
.artist-gear-answer {
    max-width: var(--ap-prose);
    margin: 26px 0 0;
    padding: 14px 16px;
    background: var(--ap-panel);
    border-left: 3px solid var(--ap-accent);
    border-radius: 0 var(--ap-radius) var(--ap-radius) 0;
    color: var(--ap-ink);            /* 15.55:1 on --ap-panel */
    font-size: 0.95rem;
    line-height: 1.6;
}

/* -----------------------------------------------------------------------------
   Socials  (0 artists as at 2026-08-26 — styled for when Phase C lands)
   -------------------------------------------------------------------------- */

.artist-socials { margin-top: 20px; }

.artist-socials-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.artist-socials-list a {
    display: inline-block;
    padding: 6px 13px;
    background: var(--ap-paper);
    border: 1px solid var(--ap-rule);
    border-radius: 999px;
    font-size: 0.82rem;
    color: var(--ap-ink-2);          /* 10.86:1 on white */
    text-decoration: none;
}

.artist-socials-list a:hover {
    border-color: var(--ap-accent);
    color: var(--ap-brand-ink-hover);
}

/* -----------------------------------------------------------------------------
   Videos  (0 artists as at 2026-08-26 — styled for when Phase C lands)
   -------------------------------------------------------------------------- */

.artist-video-group + .artist-video-group { margin-top: 32px; }

.artist-video-category {
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ap-ink-3);
    margin-bottom: 14px;
}

.artist-video-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--ap-gap);
    list-style: none;
    margin: 0;
    padding: 0;
}

.artist-video-item {
    background: var(--ap-paper);
    border: 1px solid var(--ap-rule);
    border-radius: var(--ap-radius);
    overflow: hidden;
}

.artist-video-embed {
    position: relative;
    aspect-ratio: 16 / 9;
    background: var(--ap-panel);
}

.artist-video-embed iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.artist-video-title {
    margin: 0;
    padding: 11px 13px 13px;
    font-size: 0.85rem;
    line-height: 1.45;
    color: var(--ap-ink);            /* 17.40:1 */
}

/* -----------------------------------------------------------------------------
   Focus + motion
   -------------------------------------------------------------------------- */

/* Focus is never signalled by a border colour change alone. 4.30:1 on the page
   ground, and offset so it clears the card edge. */
.artist-page a:focus-visible {
    outline: 3px solid var(--ap-focus);
    outline-offset: 2px;
    border-radius: 3px;
}

@media (prefers-reduced-motion: reduce) {
    .artist-gear-item:hover {
        transform: none;
        transition: none;
    }
}