/* ==========================================================================
   PDP rich-media sections — "Additional Info" (the page's additional
   description + the legacy "how it's made" spotlight panels, merged into one
   band) and videos. Rendered by
   resources/views/shared/catalog/pdp/_spotlights.blade.php and
   _videos.blade.php.

   SHARED, not brand-scoped. Every colour resolves from the --pdp-* tokens in
   pages/pdp-tokens.css, and the brand-coloured roles there delegate to the
   per-brand --brand-* variables — so EB comes out red/pink and Music Man comes
   out gold from this one file. That is why it lives under assets/shared/:
   site_asset() looks in assets/{brand}/ first and falls back here, so MM stops
   404ing without a second copy to keep in sync.

   LIGHT MODE ONLY — dark mode is explicitly post-launch, so there is no
   prefers-color-scheme block and no theme toggle here on purpose.

   ONE DELIBERATE EXCEPTION to the light chrome: video posters, and the plate
   that stands in for a poster that has not been ported yet, are DARK. They
   stand in for photography, white-on-dark is the high-contrast reading over a
   still, and it is what every video surface on the web does. Do not "correct"
   these to the light surfaces.

   .pdp__section (pdp-tokens.css) owns the vertical rhythm between sections, so
   nothing in this file declares a section margin.
   ========================================================================== */

/* The shell renders each section inside .container, so this inner wrapper is a
   no-op there. It only earns its keep if a section is ever emitted full-bleed,
   where it caps the measure instead of letting copy run to the viewport edge.
   No horizontal padding — that is the container's job, and doubling it would
   pull these sections out of line with every other block on the page. */
.pdp-media__inner {
    max-width: var(--pdp-maxw);
    margin-inline: auto;
}

/* Section headings. Both partials own their own <h2>, and both match the
   mockup's section heading: 20px/800 with a slight negative tracking.

   The spotlights heading is now always visible ("Additional Info") — the band
   absorbed the shell's old .pdp__additional block, so there is one heading for
   the text and the panels together, never a visually-hidden stand-in. */
.pdp-spotlights__heading,
.pdp-videos__heading {
    margin: 0 0 var(--pdp-gap);
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    line-height: 1.25;
    color: var(--pdp-ink);
}

/* --------------------------------------------------------------------------
   Additional Info — text block, then spotlight panels

   Alternating image/text panels, each one a bordered card with the media flush
   to its edge (no inner gap) and the copy padded — the mockup's .spot.
   -------------------------------------------------------------------------- */

/* The absorbed additional-description copy. Carries the measure and rhythm the
   shell's old .pdp__additional-body had, so the text reads identically now that
   it sits under this section's heading instead of its own. Trusted CMS HTML:
   inline anchors and <strong> appear in the data, hence the descendant rules. */
.pdp-spotlights__text {
    max-width: 68ch;
    font-size: 0.875rem;
    line-height: 1.7;
    color: var(--pdp-ink-2);
}

.pdp-spotlights__text a {
    color: var(--pdp-accent-ink);
}

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

.pdp-spotlights__text strong {
    color: var(--pdp-ink);
}

/* Only spaced when panels follow — the text block is the last thing in the band
   whenever a page has additional info but no spotlight. */
.pdp-spotlights__text:not(:last-child) {
    margin-bottom: var(--pdp-gap-lg);
}

/* hero_header_1: promo copy that introduces the panels, NOT a heading (the band
   has exactly one <h2>). Weighted like a lead-in so it reads above the lede
   without borrowing heading semantics. */
.pdp-spotlights__kicker {
    margin: 0 0 var(--pdp-gap-sm);
    max-width: 68ch;
    font-size: 0.9375rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.35;
    color: var(--pdp-ink);
}

.pdp-spotlights__lede {
    /* Pulled up under the heading, as in the mockup's .sub-note. */
    margin: -0.5rem 0 var(--pdp-gap);
    max-width: 68ch;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--pdp-ink-3);
}

/* The negative pull only makes sense directly under the heading; after a kicker
   or the text block it would collide with the line above. */
.pdp-spotlights__kicker + .pdp-spotlights__lede,
.pdp-spotlights__text + .pdp-spotlights__lede {
    margin-top: 0;
}

.pdp-spotlights__panels {
    display: grid;
    gap: var(--pdp-gap);
}

.pdp-spotlight {
    display: grid;
    grid-template-columns: 1fr;
    /* No gap: the media sits flush against the card edge and the copy carries
       its own padding, so the two columns meet on a seam. */
    gap: 0;
    overflow: hidden;
    background: var(--pdp-card);
    border: 1px solid var(--pdp-line);
    border-radius: var(--pdp-radius);
    box-shadow: var(--pdp-shadow);
}

.pdp-spotlight__media {
    margin: 0;
    /* Matches the 'spotlight' preset (1170 x 892) so the box never changes size
       once the image decodes. On desktop the panel stretches this to the row
       height instead (see the media query) — the ratio still governs the
       single-column case, which is where a reflow would be felt. */
    aspect-ratio: 1170 / 892;
    overflow: hidden;
    /* Neutral plate while loading. If a ported key 404s, pages/pdp-media.js
       drops the whole figure rather than leaving this showing. */
    background: var(--pdp-stage);
}

.pdp-spotlight__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pdp-spotlight__body {
    padding: var(--pdp-gap-lg);
}

.pdp-spotlight__title {
    margin: 0 0 var(--pdp-gap-sm);
    font-size: 1.1875rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.25;
    color: var(--pdp-ink);
}

/* The mockup opened each panel with a coloured eyebrow ("Coachella Valley, CA").
   product_spotlight has no eyebrow column — only header_n and paragraph_n — so
   the brand note lands as a rule under the headline instead of inventing copy
   the CMS cannot supply. */
.pdp-spotlight__title::after {
    content: "";
    display: block;
    width: 2.25rem;
    height: 3px;
    margin-top: var(--pdp-gap-sm);
    border-radius: 2px;
    background: var(--pdp-accent);
}

.pdp-spotlight__copy {
    margin: 0;
    font-size: 0.8438rem;
    line-height: 1.6;
    color: var(--pdp-ink-2);
}

.pdp-spotlight__copy + .pdp-spotlight__copy {
    margin-top: 0.75em;
}

@media (min-width: 768px) {
    .pdp-spotlight {
        /* minmax(0, 1fr), not 1fr: a bare 1fr track floors at the item's
           min-content width, and a stretched media box with an aspect-ratio
           reports its ratio-derived width as min-content. With a long copy
           column (Source Audio pedal panels, 2026-09-10) that grew the media
           track to 1149px inside a 1049px card and laid the image under the
           text. Zero floors keep both columns at half the card. */
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        align-items: stretch;
    }

    /* Alternating panels: the media column swaps side, the copy takes the other.
       Explicit column placement (not row-reverse or order) so the DOM order
       stays image-then-copy for screen readers and mobile stacking. */
    .pdp-spotlight__media {
        grid-column: 2;
        grid-row: 1;
        /* Fill the card's full height so the seam runs edge to edge whichever
           column happens to be taller. A stretched grid item has a definite
           height, which takes precedence over the aspect-ratio above. */
        align-self: stretch;
        min-height: 14rem;
        /* The stretched height is definite here, so the ratio has done its
           job (it still governs the single-column layout above); dropping it
           stops a tall copy column from turning into a wider media column. */
        aspect-ratio: auto;
        min-width: 0;
    }

    .pdp-spotlight__body {
        grid-column: 1;
        grid-row: 1;
        align-self: center;
    }

    .pdp-spotlight--flipped .pdp-spotlight__media {
        grid-column: 1;
    }

    .pdp-spotlight--flipped .pdp-spotlight__body {
        grid-column: 2;
    }

    /* No image (nothing ported yet, or a runtime 404): the copy spans the full
       card instead of leaving half of it empty. */
    .pdp-spotlight--textonly {
        grid-template-columns: 1fr;
    }

    .pdp-spotlight--textonly .pdp-spotlight__body,
    .pdp-spotlight--flipped.pdp-spotlight--textonly .pdp-spotlight__body {
        grid-column: 1;
    }

    .pdp-spotlight--textonly .pdp-spotlight__title,
    .pdp-spotlight--textonly .pdp-spotlight__copy {
        max-width: 68ch;
    }

    /* A photo kept without copy: the photo spans the card. */
    .pdp-spotlight--imageonly {
        grid-template-columns: 1fr;
    }

    .pdp-spotlight--imageonly .pdp-spotlight__media,
    .pdp-spotlight--flipped.pdp-spotlight--imageonly .pdp-spotlight__media {
        grid-column: 1;
        /* Full width at the panel ratio is taller than the screen; a wide
           crop keeps it a band. */
        aspect-ratio: 21 / 9;
    }
}

/* --------------------------------------------------------------------------
   Videos

   A featured hero above a two-up grid. Every tile is a click-to-load facade —
   see pages/pdp-media.js. Nothing from youtube.com is requested until the
   customer activates one.
   -------------------------------------------------------------------------- */

.pdp-videos__featured {
    margin-bottom: var(--pdp-gap);
}

.pdp-videos__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--pdp-gap);
    margin: 0;
    padding: 0;
    list-style: none;
}

.pdp-videos__item {
    margin: 0;
}

@media (min-width: 560px) {
    /* Two-up, as in the mockup. Held back below this width because a pair of
       ~150px thumbnails is unreadable, not a grid. */
    .pdp-videos__grid {
        grid-template-columns: 1fr 1fr;
    }
}

/* -- Long grids: collapse to two rows behind a "show more" ----------------

   Twelve EB pages carry more than four grid cards (ten of them live, the worst at
   ten tiles — /6-string), so past the fourth tile the grid is collapsed and the
   rest sit behind a button (App\Support\Pdp\Sections\VideosSection::GRID_VISIBLE).

   .is-collapsed is NOT in the server HTML: an inline script in _videos.blade.php
   adds it to this wrapper before the <ul> below it is parsed, so the collapsed
   height is two rows from the first paint with nothing measured — and with JS off
   the class never lands, every tile stays visible and the rules below leave the
   dead button hidden. That is why the visible/hidden polarity looks inverted
   here: everything shows by default, and the enhancement is what hides it.
   ------------------------------------------------------------------------ */

.pdp-videos__group.is-collapsed .pdp-videos__item--overflow {
    display: none;
}

.pdp-videos__more {
    /* Hidden until .is-collapsed proves the control does something. */
    display: none;
    margin: var(--pdp-gap) auto 0;
    padding: 10px 16px;
    border: 1.5px solid var(--pdp-line-2);
    border-radius: var(--pdp-radius-sm);
    background: var(--pdp-card);
    color: var(--pdp-accent-ink);
    font: inherit;
    font-size: 0.8125rem;
    font-weight: 700;
    cursor: pointer;
}

/* :not([hidden]) so the expanded state wins — pdp-media.js sets `hidden` on the
   button as it drops the collapse class, and a bare .is-collapsed descendant
   selector would out-specify the UA's [hidden] rule. Matches the sibling
   .pdp__info-toggle[hidden] guard in pages/product-detail.css. */
.pdp-videos__group.is-collapsed .pdp-videos__more:not([hidden]) {
    display: block;
}

.pdp-videos__more:hover {
    border-color: var(--pdp-accent);
    background: var(--pdp-accent-soft);
}

.pdp-videos__more:focus-visible {
    outline: 3px solid var(--pdp-focus);
    outline-offset: 2px;
}

/* -- Facade ------------------------------------------------------------- */

.pdp-video {
    position: relative;
    /* Fixed ratio, so the poster resolving (or failing) never reflows the page. */
    aspect-ratio: 16 / 9;
    overflow: hidden;
    /* DARK on purpose — see the header note. */
    background: #000;
    border: 1px solid var(--pdp-line);
    border-radius: var(--pdp-radius-sm);
}

.pdp-video--featured {
    border-radius: var(--pdp-radius);
    box-shadow: var(--pdp-shadow);
}

/* -- Self-hosted ambient backdrop (featured only) ------------------------
   Legacy's featured slot was a real <video loop muted playsinline> with the play
   button on top of it, opening the product video on YouTube in a lightbox. The
   files are silent, audio-free ~15s b-roll loops, so this is DECORATION behind
   the button, never the content.

   Sizing is object-fit: cover inside the container's fixed 16:9 box, so a source
   whose own aspect differs fills the plate instead of letter-boxing it, and the
   ratio is held by .pdp-video either way — the backdrop cannot reflow the page.
   ------------------------------------------------------------------------ */

.pdp-video__ambient {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* The one dark surface, same sanctioned exception as the poster plate: it
       stands in for photography and shows through before the poster resolves. */
    background: #000;
}

.pdp-video__facade {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    cursor: pointer;
    background-color: #000;
    /* Three layers, top to bottom: a scrim that keeps the play badge readable
       over a bright still, the poster itself, and a dark plate underneath. A
       missing poster therefore lands on the plate and badge — never a
       broken-image icon, because the still is a background, not an <img>. */
    background-image:
        linear-gradient(rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.34)),
        var(--pdp-video-poster, none),
        linear-gradient(135deg, #1b1b21, #33333d);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* With a backdrop behind it the button must not paint over the video: it keeps
   only the scrim that holds the play badge legible, and drops both the poster
   layer and the opaque plate. The <video poster> attribute is what shows the
   still now, so nothing is lost on the pre-playback frame. */
.pdp-video--ambient .pdp-video__facade {
    background-color: transparent;
    background-image: linear-gradient(rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.34));
}

.pdp-video__play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    /* Grid thumbnails get the restrained dark badge and pick up the brand fill
       on hover/focus; the featured hero wears the fill outright (below). */
    background: rgba(0, 0, 0, 0.55);
    transition: background 0.2s ease, transform 0.2s ease;
}

.pdp-video__play::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 54%;
    transform: translate(-50%, -50%);
    border-style: solid;
    border-width: 0.5rem 0 0.5rem 0.8rem;
    border-color: transparent transparent transparent #fff;
}

.pdp-video--featured .pdp-video__play {
    width: 4rem;
    height: 4rem;
    background: var(--pdp-accent-fill);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
}

.pdp-video--featured .pdp-video__play::before {
    border-width: 0.7rem 0 0.7rem 1.1rem;
    /* MM's fill is gold and needs dark ink on it, EB's needs white — delegating
       to the token is the whole reason this file works for both brands. */
    border-color: transparent transparent transparent var(--pdp-on-accent);
}

.pdp-video__facade:hover .pdp-video__play,
.pdp-video__facade:focus-visible .pdp-video__play {
    background: var(--pdp-accent-fill);
    transform: translate(-50%, -50%) scale(1.06);
}

.pdp-video__facade:hover .pdp-video__play::before,
.pdp-video__facade:focus-visible .pdp-video__play::before {
    border-color: transparent transparent transparent var(--pdp-on-accent);
}

.pdp-video--featured .pdp-video__facade:hover .pdp-video__play,
.pdp-video--featured .pdp-video__facade:focus-visible .pdp-video__play {
    background: var(--pdp-accent-fill-hover);
}

/* --pdp-focus is deliberately not the brand colour: over a dark poster the ring
   has to read as focus, not as a selected state. */
.pdp-video__facade:focus-visible {
    outline: 3px solid var(--pdp-focus);
    outline-offset: -3px;
}

.pdp-video__frame {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.pdp-video__fallback {
    position: absolute;
    inset: auto 0 0 0;
    padding: var(--pdp-gap-sm);
    font-size: 0.8125rem;
    font-weight: 700;
    text-align: center;
    color: #fff;
    background: rgba(0, 0, 0, 0.7);
}

/* -- Captions ------------------------------------------------------------
   The mockup overlaid a single label on the poster, because its video block had
   no caption data behind it. The real rows carry a name AND a description, so
   the caption sits below the tile instead: it stays legible over any still, it
   does not truncate, and the description reads as copy rather than as an
   overlay burned into a thumbnail.
   ------------------------------------------------------------------------ */

.pdp-video__caption {
    margin-top: var(--pdp-gap-sm);
}

/* A <p> in the markup, not a heading — the title captions the tile above it and
   introduces nothing below it, so an <h3> here put an empty section header in the
   outline (see _videos.blade.php). Styled, not structural. */
.pdp-video__title {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--pdp-ink);
}

.pdp-video__desc {
    margin: 0.25rem 0 0;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--pdp-ink-2);
}

.pdp-video--featured + .pdp-video__caption {
    margin-top: var(--pdp-gap);
}

/* The hero caption is bigger than a grid caption, but no longer heading-sized:
   at 1.0625→1.1875rem/800/-0.01em it was a hair off .pdp-videos__heading
   (1.25rem/800/-0.01em) a few hundred pixels above, so a title-only caption read
   as a second section header. 1rem/700 keeps the hierarchy without the collision.
   Hence no font-size bump for it in the 768px block below. */
.pdp-video--featured + .pdp-video__caption .pdp-video__title {
    font-size: 1rem;
    font-weight: 700;
}

.pdp-video--featured + .pdp-video__caption .pdp-video__desc {
    max-width: 68ch;
    font-size: 0.875rem;
}

@media (min-width: 768px) {
    .pdp-videos__featured {
        margin-bottom: var(--pdp-gap-lg);
    }

    .pdp-video--featured .pdp-video__play {
        width: 4.375rem;
        height: 4.375rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pdp-video__play {
        transition: none;
    }

    .pdp-video__facade:hover .pdp-video__play,
    .pdp-video__facade:focus-visible .pdp-video__play {
        transform: translate(-50%, -50%);
    }
}