/* ==========================================================================
   PDP — "Artists who play this"  (Cortex #72 / #964)
   ==========================================================================

   Linked from shared/catalog/product.blade.php's @push('styles') block, and only
   when the page has a list to show. Not a @pushOnce from a section partial like
   the cross-sell rails, because this section is not a registry section — it has
   to survive the client-side variant swap, so it is rendered inline by the PDP
   shell rather than resolved by PdpSectionRegistry.

   SHARED, NOT PER-BRAND. Every colour comes from pages/pdp-tokens.css, whose
   brand-coloured roles delegate to --brand-*, so this one file is correct for EB
   (red links on white) and for Music Man (gold) with no second copy. site_asset()
   resolves assets/{brand}/ first then falls back to assets/shared/, so do NOT add
   an assets/eb/ copy: it would win and silently shadow this file.

   PHOTO CARDS. Each artist is a card — a square roster photo with the name under
   it — in the same visual family as the .catalog-card product cards on the
   cross-sell rails further down the page, and at the same two widths. It is a
   plain flex row, NOT a carousel: see the note on .pdp-artists__list.

   COLOUR, AND THE ONE TRAP. The name is --pdp-ink at rest (18.06:1 on white),
   because the card is the link and the name no longer has to look like one. On
   hover and focus it takes --pdp-accent-ink, which on EB is --brand-link #c4161c
   (6.04:1) and on MM --brand-link #8a6d1f (4.90:1) — both AA. It is NEVER
   --pdp-accent (#ff10a4, Slinky Pink): that is an ACCENT hue at 3.58:1 on white
   and must not carry text at any size.

   LIGHT MODE ONLY. Dark mode is an explicit post-launch item — no
   prefers-color-scheme block, no theme toggle. See pdp-tokens.css rule 3.

   Vertical rhythm belongs to .pdp__section in pdp-tokens.css. Nothing here may
   declare a top or bottom margin on the section root.
   ========================================================================== */

/*
 * The section is printed on every page that has ANY list and hidden when the
 * ACTIVE variant has none, so `hidden` has to actually hide it. .pdp__section
 * sets `display: block` in product-detail.css and [hidden] beats it there on
 * specificity; this is the same guard for the class added on this element, so a
 * hidden module can never paint an empty heading between two real sections.
 */
.pdp-artists[hidden] {
    display: none;
}

.pdp-artists__heading {
    margin: 0 0 var(--pdp-gap);
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--pdp-ink);
}

/* --- The row -------------------------------------------------------------
   A flex row of at most five fixed-width cards. Not a grid of fractional
   tracks, and the difference matters on this section specifically: the list
   changes length under the variant swap (a variant's own list can be three
   where the page's pooled list is five), and fractional tracks would resize
   every card as a shopper clicked between swatches. Fixed widths keep a card a
   card.

   NOT A CAROUSEL EITHER. The cross-sell rails below run through
   pages/pdp-cross-sell.js, which fetches Swiper from cdn.jsdelivr.net — the
   project's number-one launch risk (docs/passoff.md §3, 48 CDN references
   across 24 files, no local copy in public/vendor/). Five cards fit on one row
   at every viewport this design cares about, so a fifth consumer of that
   dependency would buy nothing and deepen a known blocker.

   .pdp__scroller (pdp-tokens.css) carries overflow-x and overscroll
   containment, because five 168px cards do not fit a 375px phone. The overflow
   lives on this element and is never handed to the page body.
   ------------------------------------------------------------------------ */
.pdp-artists__list {
    display: flex;
    gap: var(--pdp-gap);
    margin: 0;
    /* Room for the hover lift and the focus ring, which the scroll container
       would otherwise clip. Matches the cross-sell rail's own allowance. */
    padding: 0.25rem 0 0.75rem;
    list-style: none;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
}

/* The scroller is keyboard focusable, so it needs a ring — and deliberately the
   focus hue rather than the brand accent, so it cannot read as a selected
   state. Same rule the specs and pack-contents scrollers use. */
.pdp-artists__list:focus-visible {
    outline: 3px solid var(--pdp-focus);
    outline-offset: 2px;
    border-radius: var(--pdp-radius-sm);
}

/* THE CARD WIDTHS ARE THE CROSS-SELL RAIL'S, on purpose: 168px below 768px and
   190px above it, the two numbers pdp-cross-sell.css already draws its product
   cards at. Jesse's ask was that these read as the same family of card as
   "Complete your setup", and matching the measure is most of what does that —
   five 190px cards plus four 16px gaps is 1014px inside the 1180px --pdp-maxw,
   so the row never scrolls on a desktop. If those numbers ever move, move
   these with them. */
.pdp-artists__item {
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    width: 168px;
    scroll-snap-align: start;
}

@media (min-width: 768px) {
    .pdp-artists__item {
        width: 190px;
    }
}

/* --- The card ------------------------------------------------------------
   Photo above the name, the shape .catalog-card uses on the rails. The whole
   card is the link; the name inside it is the accessible name, which is why
   the photo carries alt="".
   ------------------------------------------------------------------------ */
.pdp-artists__card {
    display: flex;
    flex: 1;
    flex-direction: column;
    text-decoration: none;
    transition: transform 0.2s ease;
}

.pdp-artists__card:hover {
    text-decoration: none;
    transform: translateY(-4px);
}

a.pdp-artists__card:focus-visible {
    outline: 3px solid var(--pdp-focus);
    outline-offset: 3px;
    border-radius: var(--pdp-radius-sm);
}

/* 1:1, because artist roster photos are square (the seeded originals are
   700x700) and the CDN request is for a 400x400 `card` preset. aspect-ratio
   rather than a fixed height so the box tracks the card width across the
   breakpoint, and a tinted surface underneath so a photo that has not loaded —
   or the placeholder for the one artist on a PDP without one — reads as a
   deliberate tile rather than a hole in the row.

   object-fit: cover, NOT the rails' `contain` + multiply. A product shot is a
   cut-out on white that has to sit inside its box; a photograph has to fill
   one, and multiply would wash a dark stage shot into the background. Same
   treatment the /artists grid gives these exact files. */
.pdp-artists__image {
    display: block;
    overflow: hidden;
    aspect-ratio: 1;
    margin-bottom: 0.75rem;
    border-radius: var(--pdp-radius-sm);
    background: var(--pdp-bg-alt);
}

.pdp-artists__photo {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.pdp-artists__card:hover .pdp-artists__photo {
    transform: scale(1.05);
}

.pdp-artists__info {
    display: block;
    padding: 0 0.25rem;
    text-align: center;
}

/* INK, NOT THE LINK COLOUR. On the old text list the name WAS the link and had
   to look like one; in a card the affordance is the card — its shape, its
   lift, its cursor — exactly as .catalog-card__name is plain ink on the rails
   right below this section. Five red names in a row would also have fought the
   photographs for attention. #161619 on #ffffff is 18.06:1 (measured, not
   assumed — the page background is #fff, set on body in critical.css).

   The brand link colour comes back on hover and focus (EB #c4161c, 6.04:1; MM
   #8a6d1f, 4.90:1), which is where a shopper is asking whether this is
   clickable. It is NEVER --pdp-accent: Slinky Pink #ff10a4 is 3.58:1 on white
   and must not carry text. See the colour note at the top of this file. */
.pdp-artists__name {
    display: block;
    color: var(--pdp-ink);
    font-size: 0.8125rem;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.pdp-artists__card:hover .pdp-artists__name,
a.pdp-artists__card:focus-visible .pdp-artists__name {
    color: var(--pdp-accent-ink);
}

/*
 * An artist with no slug: a full card, but not a link. 100% of EB artists carry
 * one and the model backfills any that go missing, so this is a guard rather
 * than a live branch. No lift and no hover colour — --pdp-ink-2 (#4e4e58,
 * 8.22:1 on white) so it plainly is not a link that failed to work.
 */
.pdp-artists__card--unlinked {
    cursor: default;
}

.pdp-artists__card--unlinked:hover {
    transform: none;
}

.pdp-artists__card--unlinked:hover .pdp-artists__photo {
    transform: none;
}

.pdp-artists__card--unlinked .pdp-artists__name,
.pdp-artists__card--unlinked:hover .pdp-artists__name {
    color: var(--pdp-ink-2);
}

/* The lift and the zoom are decoration; the colour change is not, so it stays.
   Matches the reduced-motion blocks in pdp-cross-sell.css. */
@media (prefers-reduced-motion: reduce) {
    .pdp-artists__card,
    .pdp-artists__photo {
        transition: none;
    }

    .pdp-artists__card:hover,
    .pdp-artists__card:hover .pdp-artists__photo {
        transform: none;
    }

    .pdp-artists__list {
        scroll-snap-type: none;
    }
}