/* ==========================================================================
   PDP product story — the full-width sections under a Source Audio PDP.
   Rendered by resources/views/shared/catalog/pdp/_story.blade.php and the
   block partials in pdp/story/ (App\Support\Pdp\Sections\StorySection).

   sourceaudio.net's layout, this site's styling: the same sections in the
   same order, built from the --pdp-* tokens (pages/pdp-tokens.css), whose
   brand roles delegate to --brand-*. SHARED, not brand-scoped, for the same
   reason as pdp-media.css: site_asset() falls back here for every brand.

   LIGHT MODE ONLY, with one deliberate exception, as in pdp-media.css: a
   background band stands in for photography and is dark by default. Do not
   "correct" the bands to the light surfaces.

   .pdp__section (pdp-tokens.css) owns the space above the story; the space
   between story blocks is declared here.
   ========================================================================== */

/* Bands are full bleed: they break out of the 1180px .pdp-page with the
   50% - 50vw margin. 100vw includes a classic (non-overlay) scrollbar, so a
   band is that much wider than the page — clipped here, on the full-width
   <main>, so it never becomes a horizontal page scroll. clip, not hidden:
   hidden would make <main> a scroll container and break every sticky
   element on the PDP. This file only loads on a page with a story. */
#content {
    overflow-x: clip;
}

.pdp-story > * + * {
    margin-top: calc(var(--pdp-section-y) * 1.5);
}

/* Bands stack edge to edge, as on sourceaudio.net. */
.pdp-story > .pdp-story__band + .pdp-story__band {
    margin-top: 0;
}

.pdp-story__block {
    max-width: var(--pdp-maxw);
    margin-inline: auto;
}

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

/* --------------------------------------------------------------------------
   Block heads — heading + intro, centered like sourceaudio.net's.
   -------------------------------------------------------------------------- */

.pdp-story__head {
    max-width: 46rem;
    margin: 0 auto var(--pdp-gap-lg);
    text-align: center;
}

.pdp-story__heading {
    margin: 0;
    font-size: clamp(1.5rem, 1.15rem + 1.5vw, 2.25rem);
    font-weight: 800;
    letter-spacing: -0.01em;
    line-height: 1.2;
    color: var(--pdp-ink);
}

.pdp-story__intro {
    margin: 0.75rem 0 0;
    font-size: 1rem;
    line-height: 1.65;
    color: var(--pdp-ink-2);
}

.pdp-story a:not(.btn) {
    color: var(--pdp-accent-ink);
}

.pdp-story a:not(.btn):hover {
    color: var(--pdp-accent-ink-hover);
}

/* --------------------------------------------------------------------------
   Band — full-bleed background image or video under a scrim.

   CONTRAST IS GUARANTEED BY THE SCRIM, NOT BY THE PHOTO. Every scrim behind
   copy is at least 0.75 opaque, so the copy holds AA over ANY image —
   measured against the worst case beneath it, not an assumed one:

     dark  — rgba(17,17,17,.75) over pure white composites to rgb(77,77,77);
             white text on that is 8.5:1.
     light — rgba(255,255,255,.75) over pure black composites to
             rgb(191,191,191); --pdp-ink on that is 9.8:1.

   On desktop the dark scrim is a left-to-right gradient so the photo shows
   on the right, as on sourceaudio.net. It holds 0.75 out to 58% of the band;
   the copy is capped at 52% of the content box, which never reaches past
   ~50% of the band at any viewport width. Below 992px the copy spans the
   band, so the scrim is uniform. Changing either number means redoing that
   arithmetic.
   -------------------------------------------------------------------------- */

.pdp-story__band {
    --pdp-story-scrim: rgba(17, 17, 17, 0.75);

    position: relative;
    isolation: isolate;
    display: flex;
    align-items: center;
    min-height: clamp(18rem, 42vw, 34rem);
    margin-inline: calc(50% - 50vw);
    overflow: hidden;
    background: var(--brand-primary-dark, #111111);
    color: #ffffff;
}

.pdp-story__band--light {
    --pdp-story-scrim: rgba(255, 255, 255, 0.75);

    background: var(--pdp-bg-alt);
    color: var(--pdp-ink);
}

.pdp-story__band--tall {
    align-items: flex-end;
    min-height: min(88svh, 52rem);
}

/* A centered wordmark sits in the middle of the band, tall or not. */
.pdp-story__band--center {
    align-items: center;
}

.pdp-story__band-media {
    position: absolute;
    inset: 0;
    z-index: -1;
}

.pdp-story__band-media picture,
.pdp-story__band-image,
.pdp-story__band-video {
    display: block;
    width: 100%;
    height: 100%;
}

.pdp-story__band-image,
.pdp-story__band-video {
    position: absolute;
    inset: 0;
    object-fit: cover;
}

/* Transparent until it is actually playing, so the band shows its own
   picture (and its mobile crop) until then — and for good without JS. Not
   `hidden`: Chrome may pause a muted video it cannot see. */
.pdp-story__band-video {
    opacity: 0;
}

.pdp-story__band-video.is-playing {
    opacity: 1;
}

.pdp-story__band--copy .pdp-story__band-media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--pdp-story-scrim);
}

/* Artwork alone (a product wordmark — logotype, so no contrast minimum)
   only needs the photo knocked back a little. */
.pdp-story__band--center:not(.pdp-story__band--copy) .pdp-story__band-media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(17, 17, 17, 0.35);
}

.pdp-story__band-inner {
    position: relative;
    width: 100%;
    max-width: var(--pdp-maxw);
    margin-inline: auto;
    padding: clamp(3rem, 7vw, 6rem) 18px;
}

/* Room under the copy for the pause button. */
.pdp-story__band--video .pdp-story__band-inner {
    padding-bottom: calc(clamp(3rem, 7vw, 6rem) + 2.75rem);
}

.pdp-story__band-copy {
    max-width: 34rem;
}

.pdp-story__band--center .pdp-story__band-copy {
    max-width: 40rem;
    margin-inline: auto;
    text-align: center;
}

.pdp-story__band-artwork {
    display: block;
    width: min(100%, 30rem);
    height: auto;
    margin: 0 auto 1.25rem;
}

.pdp-story__band-heading {
    margin: 0 0 1rem;
    font-size: clamp(1.75rem, 1.2rem + 2.4vw, 3rem);
    font-weight: 800;
    letter-spacing: -0.015em;
    line-height: 1.1;
    color: inherit;
}

.pdp-story__band-text {
    margin: 0 0 1rem;
    font-size: 1.0625rem;
    line-height: 1.65;
}

.pdp-story__band-text:last-child {
    margin-bottom: 0;
}

.pdp-story__band--dark a:not(.btn) {
    color: #ffffff;
    text-decoration: underline;
}

.pdp-story__band--dark :focus-visible {
    outline-color: #ffffff;
}

@media (min-width: 992px) {
    .pdp-story__band--dark.pdp-story__band--copy:not(.pdp-story__band--center) .pdp-story__band-media::after {
        background: linear-gradient(
            90deg,
            rgba(17, 17, 17, 0.82) 0%,
            rgba(17, 17, 17, 0.75) 58%,
            rgba(17, 17, 17, 0.2) 88%,
            rgba(17, 17, 17, 0.1) 100%
        );
    }

    .pdp-story__band-copy {
        max-width: min(34rem, 52%);
    }
}

/* WCAG 2.2.2: a moving background gets a visible way to stop it. Its own
   0.85 plate keeps the label at 12:1 wherever it lands on the photo. 44px
   tall for the target-size minimum. */
.pdp-story__band-toggle {
    position: absolute;
    right: 18px;
    bottom: 1rem;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 44px;
    padding: 0.5rem 1rem;
    border: 1px solid rgba(255, 255, 255, 0.7);
    border-radius: 999px;
    background: rgba(17, 17, 17, 0.85);
    color: #ffffff;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
}

.pdp-story__band-toggle[hidden] {
    display: none;
}

.pdp-story__band-toggle:hover {
    background: rgba(17, 17, 17, 1);
}

.pdp-story__band-toggle:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 2px;
}

/* Pause: two bars. Play (.is-paused): a triangle. */
.pdp-story__band-toggle-icon {
    width: 10px;
    height: 12px;
    border-inline: 3px solid currentColor;
}

.pdp-story__band-toggle.is-paused .pdp-story__band-toggle-icon {
    width: 0;
    height: 0;
    border-block: 6px solid transparent;
    border-inline-start: 10px solid currentColor;
    border-inline-end: 0;
}

/* Phones (Jesse, 2026-11-02: "that pause button is awkward there"). The band
   is tall and its inner box is centered in it, so the labelled pill floated
   mid-picture under the copy. Here it anchors to the BAND's bottom-right
   corner instead (the inner box stops being its containing block) and shrinks
   to a 44px icon disc. The label is clipped, not removed: it is still the
   button's accessible name, and pdp-story.js still swaps it. */
@media (max-width: 640px) {
    .pdp-story__band--video .pdp-story__band-inner {
        position: static;
        padding-bottom: clamp(3rem, 7vw, 6rem);
    }

    .pdp-story__band-toggle {
        right: 12px;
        bottom: 12px;
        justify-content: center;
        width: 44px;
        padding: 0;
    }

    .pdp-story__band-toggle-label {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }
}

/* --------------------------------------------------------------------------
   Cards — media (engines), icons (sound design), packs (preset packs)
   -------------------------------------------------------------------------- */

/* auto-fit with a capped track: a short row (three engines, two packs)
   sits centered at card size instead of stretching across the page or
   hugging the left edge. 264px is the widest track that still fits four
   across the 1144px content box. */
.pdp-story__card-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 264px));
    justify-content: center;
    gap: var(--pdp-gap-lg) 24px;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* position: relative keeps the visually-hidden audio label text inside the
   card. Without it the 1px absolutely positioned spans are placed against
   an ancestor outside the mobile scroller, escape its clipping, and widen
   the page at 320px. */
.pdp-story__card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.pdp-story__card-body {
    display: flex;
    flex: 1;
    flex-direction: column;
}

.pdp-story__card-media {
    overflow: hidden;
    border-radius: var(--pdp-radius-sm);
    background: var(--pdp-bg-alt);
}

.pdp-story__card-image {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    object-fit: cover;
}

.pdp-story__card-badge {
    margin: 0.875rem 0 0;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--pdp-ink-2);
}

.pdp-story__card-title {
    margin: 0.875rem 0 0.375rem;
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--pdp-ink);
}

.pdp-story__card-badge + .pdp-story__card-title {
    margin-top: 0.25rem;
}

.pdp-story__card-text {
    margin: 0 0 0.75rem;
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--pdp-ink-2);
}

.pdp-story__audio-list {
    display: grid;
    gap: 0.75rem;
    margin: auto 0 0;
    padding: 0.25rem 0 0;
    list-style: none;
}

.pdp-story__audio-label {
    display: block;
    margin-bottom: 0.25rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--pdp-ink-2);
}

.pdp-story__audio-player {
    display: block;
    width: 100%;
    height: 40px;
}

.pdp-story__card-action {
    margin: 1rem 0 0;
}

/* Icons: a small mark beside the copy, two or three to a row. */
.pdp-story__cards--icons .pdp-story__card-list {
    grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 360px));
}

.pdp-story__cards--icons .pdp-story__card {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
}

.pdp-story__cards--icons .pdp-story__card-media {
    background: none;
}

.pdp-story__cards--icons .pdp-story__card-image {
    width: 64px;
    height: 64px;
    object-fit: contain;
}

.pdp-story__cards--icons .pdp-story__card-title {
    margin-top: 0;
}

/* Packs: a bordered card with its action pinned to the bottom. */
.pdp-story__cards--packs .pdp-story__card-list {
    grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 360px));
}

.pdp-story__cards--packs .pdp-story__card {
    padding: 1rem;
    border: 1px solid var(--pdp-line);
    border-radius: var(--pdp-radius);
    background: var(--pdp-card);
}

.pdp-story__cards--packs .pdp-story__audio-list {
    margin-top: 0.25rem;
}

.pdp-story__cards--packs .pdp-story__card-action {
    margin-top: auto;
    padding-top: 1rem;
}

/* Under 768px media and packs become a scroll-snap row, the next card
   peeking in to say there is more. The row is a focusable region (see the
   partial), so it scrolls by keyboard as well as by touch. */
@media (max-width: 767.98px) {
    .pdp-story__scroller {
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scroll-snap-type: x mandatory;
        scroll-padding-inline: 2px;
        /* Room for the focus ring and the scrollbar. */
        padding: 4px 2px 12px;
        margin-inline: -2px;
    }

    /* start, not center: centered tracks that overflow would push the
       first card past the scroller's left edge, out of reach. */
    .pdp-story__scroller .pdp-story__card-list {
        justify-content: start;
        grid-auto-columns: 78%;
        grid-auto-flow: column;
        grid-template-columns: none;
    }

    .pdp-story__scroller .pdp-story__card {
        scroll-snap-align: start;
    }
}

/* --------------------------------------------------------------------------
   Features — list + images. The plain layout is the no-JS and mobile one;
   --enhanced is pages/pdp-story.js's desktop switcher.
   -------------------------------------------------------------------------- */

.pdp-story__feature-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
    gap: var(--pdp-gap-lg) 24px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pdp-story__feature-title {
    margin: 0 0 0.375rem;
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--pdp-ink);
}

.pdp-story__feature-text {
    margin: 0 0 0.75rem;
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--pdp-ink-2);
}

.pdp-story__feature-media,
.pdp-story__feature-stage {
    overflow: hidden;
    border-radius: var(--pdp-radius-sm);
    background: var(--pdp-bg-alt);
}

.pdp-story__feature-image {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.pdp-story__features--enhanced .pdp-story__features-body {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 2.5rem;
    align-items: start;
}

.pdp-story__features--enhanced .pdp-story__feature-list {
    grid-template-columns: none;
    gap: 0.25rem;
}

.pdp-story__features--enhanced .pdp-story__feature {
    position: relative;
    padding: 0.875rem 1rem;
    border-left: 3px solid var(--pdp-line);
    border-radius: 0 var(--pdp-radius-sm) var(--pdp-radius-sm) 0;
}

.pdp-story__features--enhanced .pdp-story__feature.is-active {
    border-left-color: var(--pdp-accent);
    background: var(--pdp-accent-soft);
}

/* A pictured feature is selectable; the hover cue says so. */
.pdp-story__features--enhanced .pdp-story__feature:has(.pdp-story__feature-button):not(.is-active):hover {
    border-left-color: var(--pdp-line-2);
}

.pdp-story__features--enhanced .pdp-story__feature-media {
    display: none;
}

.pdp-story__features--enhanced .pdp-story__feature-text:last-child {
    margin-bottom: 0;
}

.pdp-story__feature-button {
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
}

/* The whole row is the target, not just the title's words. */
.pdp-story__feature-button::after {
    content: "";
    position: absolute;
    inset: 0;
}

.pdp-story__feature-stage {
    position: sticky;
    top: 1.5rem;
}

.pdp-story__feature-stage[hidden] {
    display: none;
}

/* --------------------------------------------------------------------------
   Promo — the editor promo
   -------------------------------------------------------------------------- */

.pdp-story__promo {
    text-align: center;
}

.pdp-story__promo-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem 1.5rem;
    margin: 0 0 1.25rem;
    padding: 0;
    list-style: none;
    font-size: 0.9375rem;
    font-weight: 600;
}

.pdp-story__promo-action {
    margin: 0 0 var(--pdp-gap-lg);
}

.pdp-story__promo-images {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    align-items: center;
}

.pdp-story__promo-images--single {
    grid-template-columns: minmax(0, 1fr);
    max-width: 52rem;
    margin-inline: auto;
}

.pdp-story__promo-image {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--pdp-radius-sm);
}

@media (max-width: 575.98px) {
    .pdp-story__promo-images {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* --------------------------------------------------------------------------
   Accordion — MIDI
   -------------------------------------------------------------------------- */

.pdp-story__accordion-list {
    max-width: 46rem;
    margin-inline: auto;
    border-top: 1px solid var(--pdp-line);
}

.pdp-story__accordion-item {
    border-bottom: 1px solid var(--pdp-line);
}

.pdp-story__accordion-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 44px;
    padding: 0.875rem 0.25rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--pdp-ink);
    list-style: none;
    cursor: pointer;
}

.pdp-story__accordion-summary::-webkit-details-marker {
    display: none;
}

.pdp-story__accordion-summary::after {
    content: "";
    flex: none;
    width: 0.5rem;
    height: 0.5rem;
    margin-right: 0.25rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
}

.pdp-story__accordion-item[open] > .pdp-story__accordion-summary::after {
    transform: rotate(-135deg);
}

.pdp-story__accordion-body {
    padding: 0 0.25rem 1rem;
    font-size: 0.9375rem;
    line-height: 1.65;
    color: var(--pdp-ink-2);
}

.pdp-story__accordion-body p {
    margin: 0 0 0.75rem;
}

.pdp-story__accordion-body p:last-child {
    margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   Specs — the pedal beside the table
   -------------------------------------------------------------------------- */

.pdp-story__specs {
    display: grid;
    gap: var(--pdp-gap-lg);
    align-items: center;
}

/* A light plate: the dimension diagrams the importer brings over are
   mid-gray (#7b7b7b, partly transparent) line art, which all but vanishes
   on a dark ground and holds ~4:1 on this one. */
.pdp-story__specs-media {
    width: 100%;
    max-width: 26rem;
    margin-inline: auto;
    padding: clamp(1.5rem, 4vw, 3rem);
    border-radius: var(--pdp-radius);
    background: #ffffff;
    border: 1px solid #e3e3e3;
}

.pdp-story__specs-image {
    display: block;
    width: 100%;
    height: auto;
}

.pdp-story__specs .pdp-story__head {
    text-align: left;
    margin-inline: 0;
}

.pdp-story__specs-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9375rem;
    line-height: 1.5;
}

.pdp-story__specs-table th,
.pdp-story__specs-table td {
    padding: 0.875rem 0.75rem;
    border-bottom: 1px solid var(--pdp-line);
    text-align: left;
    vertical-align: top;
}

.pdp-story__specs-table th {
    width: 40%;
    padding-left: 0;
    font-weight: 600;
    color: var(--pdp-ink);
}

.pdp-story__specs-table td {
    color: var(--pdp-ink-2);
}

@media (min-width: 992px) {
    .pdp-story__specs {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 3rem;
    }

    .pdp-story__specs--no-image {
        grid-template-columns: minmax(0, 46rem);
        justify-content: center;
    }

    .pdp-story__specs-media {
        max-width: none;
    }
}

/* --------------------------------------------------------------------------
   Links — documents and downloads
   -------------------------------------------------------------------------- */

.pdp-story__link-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 360px));
    justify-content: center;
    gap: 0.75rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pdp-story__link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-height: 44px;
    height: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid var(--pdp-line);
    border-radius: var(--pdp-radius-sm);
    font-size: 0.9375rem;
    font-weight: 600;
    text-decoration: none;
}

.pdp-story a.pdp-story__link:hover {
    background: var(--pdp-bg-alt);
}

.pdp-story__link--text {
    color: var(--pdp-ink);
}

.pdp-story__link-meta {
    margin-left: auto;
    padding: 0.125rem 0.5rem;
    border-radius: 999px;
    background: var(--pdp-bg-alt);
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--pdp-ink-2);
}

/* --------------------------------------------------------------------------
   Prose — standard blog blocks, and the Additional Info fallback
   -------------------------------------------------------------------------- */

/* One readable column, centered under the centered block heads around it;
   the copy itself stays left-aligned. */
.pdp-story__prose {
    max-width: 72ch;
}

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

.pdp-story__prose-body {
    font-size: 0.9375rem;
    line-height: 1.7;
    color: var(--pdp-ink-2);
}

.pdp-story__prose-body > :first-child {
    margin-top: 0;
}

.pdp-story__prose-body h2,
.pdp-story__prose-body h3,
.pdp-story__prose-body h4 {
    margin: 1.75rem 0 0.5rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--pdp-ink);
}

.pdp-story__prose-body h2 {
    font-size: clamp(1.375rem, 1.1rem + 1vw, 1.75rem);
    font-weight: 800;
    letter-spacing: -0.01em;
}

.pdp-story__prose-body h3 {
    font-size: 1.125rem;
}

.pdp-story__prose-body h4 {
    font-size: 1rem;
}

.pdp-story__prose-body p,
.pdp-story__prose-body ul,
.pdp-story__prose-body ol,
.pdp-story__prose-body dl {
    margin: 0 0 1rem;
}

.pdp-story__prose-body li + li {
    margin-top: 0.375rem;
}

.pdp-story__prose-body dt {
    font-weight: 600;
    color: var(--pdp-ink);
}

.pdp-story__prose-body dd {
    margin: 0 0 0.75rem;
}

.pdp-story__prose-body strong,
.pdp-story__prose-body b {
    color: var(--pdp-ink);
}

.pdp-story__prose-body img {
    display: block;
    max-width: 100%;
    height: auto;
}

.pdp-story__prose-body figure {
    margin: 1.5rem 0;
}

.pdp-story__prose-body figcaption {
    margin-top: 0.5rem;
    font-size: 0.875rem;
    color: var(--pdp-ink-2);
}

.pdp-story__prose-body .article-figure--inset {
    max-width: 60%;
}

.pdp-story__prose-body .article-gallery,
.pdp-story__prose-body .article-columns {
    display: grid;
    gap: 1rem;
    margin: 1.5rem 0;
}

.pdp-story__prose-body .article-gallery--2,
.pdp-story__prose-body .article-columns--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pdp-story__prose-body .article-gallery--3,
.pdp-story__prose-body .article-columns--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pdp-story__prose-body .article-gallery--4,
.pdp-story__prose-body .article-columns--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.pdp-story__prose-body .article-gallery__item {
    margin: 0;
}

.pdp-story__prose-body .article-gallery__image {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.pdp-story__prose-body .video-embed {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    margin: 1.5rem 0;
    overflow: hidden;
    background: #000000;
}

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

.pdp-story__prose-body .audio-embed iframe {
    display: block;
    width: 100%;
    height: 352px;
    border: 0;
    border-radius: 12px;
}

.pdp-story__prose-body .table-responsive {
    overflow-x: auto;
}

.pdp-story__prose-body blockquote {
    margin: 1.5rem 0;
    padding-left: 1rem;
    border-left: 3px solid var(--pdp-accent);
    color: var(--pdp-ink);
}

@media (max-width: 767.98px) {
    .pdp-story__prose-body .article-figure--inset {
        max-width: 100%;
    }

    .pdp-story__prose-body .article-gallery--3,
    .pdp-story__prose-body .article-gallery--4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .pdp-story__prose-body .article-columns {
        grid-template-columns: minmax(0, 1fr);
    }
}