.ra-position-grid > .ra-showcase-grid-span-full { grid-column: 1 / -1 !important; }

.ra-audio-showcase {
    grid-column: 1 / -1;
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1fr);
    gap: var(--ra-showcase-layout-gap, 32px);
    align-items: stretch;
}

.ra-showcase-column { min-width: 0; }

.ra-showcase-list-column { padding: var(--ra-showcase-list-inset, 24px); }
.ra-showcase-label {
    margin-bottom: 1.25rem;
    color: var(--ra-accent, #d4af37);
    font-family: Manrope, sans-serif;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: lowercase;
}

.ra-showcase-track-list { margin: 0; padding: 0; list-style: none; }
.ra-showcase-track-item + .ra-showcase-track-item { border-top: 1px solid var(--ra-border); }
.ra-showcase-track-button {
    width: 100%;
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr);
    gap: .75rem;
    align-items: center;
    padding: var(--ra-showcase-track-padding-y, 12px) .75rem;
    border: 0;
    background: transparent;
    color: var(--ra-text);
    font: inherit;
    text-align: left;
    cursor: pointer;
}
.ra-showcase-track-button:hover .ra-showcase-track-title,
.ra-showcase-track-button.is-active .ra-showcase-track-title { color: var(--ra-accent); }
.ra-showcase-track-button.is-active { opacity: 1; }
.ra-showcase-track-number { color: var(--ra-text-footer, #888); font-size: .7rem; font-variant-numeric: tabular-nums; }
.ra-showcase-track-cover {
    width: 48px;
    aspect-ratio: 1;
    overflow: hidden;
    background: var(--ra-bg-contrast, #050505);
}
.ra-showcase-track-cover img { width: 100%; height: 100%; object-fit: cover; }
.ra-showcase-track-copy { min-width: 0; display: grid; gap: .2rem; }
.ra-showcase-track-title { overflow: hidden; color: var(--ra-text); font-family: Manrope, sans-serif; font-size: .86rem; font-weight: 600; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; transition: color .2s ease; }
.ra-showcase-track-artist { overflow: hidden; color: var(--ra-text-muted); font-size: .74rem; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.ra-showcase-empty { color: var(--ra-text-muted); font-size: .85rem; }

.ra-showcase-player {
    display: flex;
    min-height: 280px;
    flex-direction: column;
    justify-content: center;
    padding: clamp(1.25rem, 3vw, 2.25rem);
}
.ra-showcase-player-cover { width: min(180px, 45%); aspect-ratio: 1; margin-bottom: 1.5rem; overflow: hidden; }
.ra-showcase-player-cover img { width: 100%; height: 100%; object-fit: cover; }
.ra-showcase-meta { margin-bottom: 1.25rem; }
.ra-showcase-title {
    color: var(--ra-text);
    font-family: var(--ra-showcase-title-font, "Cormorant Garamond", serif);
    font-size: var(--ra-showcase-title-size, 28px);
    font-weight: var(--ra-showcase-title-weight, 400);
    line-height: var(--ra-showcase-title-line-height, 1.1);
    letter-spacing: var(--ra-showcase-title-letter-spacing, -0.02em);
    text-align: var(--ra-showcase-title-align, left);
}
.ra-showcase-artist { margin-top: .45rem; color: var(--ra-text-muted); font-family: Manrope, sans-serif; font-size: .85rem; }
.ra-showcase-wave-wrap { position: relative; width: 100%; }
.ra-showcase-wave { width: 100%; height: var(--ra-showcase-wave-height, 96px); display: block; cursor: pointer; touch-action: none; }
.ra-showcase-loading { position: absolute; right: 0; bottom: .25rem; color: var(--ra-text-muted); font-size: .68rem; }
.ra-showcase-controls { display: grid; grid-template-columns: auto 1fr auto; gap: 1rem; align-items: center; margin-top: 1rem; }
.ra-showcase-transport { display: flex; align-items: center; gap: .35rem; }
.ra-showcase-controls button { width: 36px; height: 36px; display: inline-grid; place-items: center; padding: 0; border: 1px solid var(--ra-border); border-radius: 50%; background: transparent; color: var(--ra-text); cursor: pointer; }
.ra-showcase-controls button:hover:not(:disabled) { border-color: var(--ra-accent); color: var(--ra-accent); }
.ra-showcase-controls button:disabled { cursor: default; opacity: .35; }
.ra-showcase-controls svg { width: 16px; height: 16px; fill: currentColor; stroke: currentColor; stroke-width: 0; }
.ra-showcase-play { width: 44px !important; height: 44px !important; }
.ra-showcase-icon-pause { display: none; }
.ra-audio-showcase.is-playing .ra-showcase-icon-play { display: none; }
.ra-audio-showcase.is-playing .ra-showcase-icon-pause { display: block; }
.ra-showcase-time { justify-self: center; color: var(--ra-text-muted); font-size: .72rem; font-variant-numeric: tabular-nums; }
.ra-showcase-volume { display: flex; align-items: center; gap: .5rem; }


@media (max-width: 1024px) {
    .ra-audio-showcase { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .ra-showcase-player { grid-column: 1 / -1; grid-row: 1; }
    .ra-showcase-left { grid-column: 1; grid-row: 2; }
    .ra-showcase-right { grid-column: 2; grid-row: 2; }
}

@media (max-width: 700px) {
    .ra-audio-showcase { grid-template-columns: 1fr; }
    .ra-showcase-player,
    .ra-showcase-left,
    .ra-showcase-right { grid-column: 1; grid-row: auto; }
    .ra-showcase-player { grid-row: 1; }
    .ra-showcase-controls { grid-template-columns: 1fr auto; }
    .ra-showcase-time { justify-self: start; grid-row: 2; }
    .ra-showcase-volume { grid-column: 2; grid-row: 2; }
}

/* Appearance engine ------------------------------------------------------- */
.ra-showcase-list-column,
.ra-showcase-player {
    border-style: solid;
    transition: border-color .2s ease, background-color .2s ease;
}

.ra-showcase-list-column {
    border-width: var(--ra-showcase-list-border-width, 1px);
    border-radius: var(--ra-showcase-list-radius, 0px);
}
.ra-showcase-player {
    border-width: var(--ra-showcase-player-border-width, 1px);
    border-radius: var(--ra-showcase-player-radius, 0px);
}

.ra-showcase-list-layer-inherit .ra-showcase-list-column { background: inherit; }
.ra-showcase-list-layer-transparent .ra-showcase-list-column { background: transparent; }
.ra-showcase-list-layer-soft .ra-showcase-list-column { background: color-mix(in srgb, var(--ra-bg-soft, #1e1e1e) var(--ra-showcase-list-layer-opacity, 72%), transparent); }
.ra-showcase-list-layer-dark .ra-showcase-list-column { background: color-mix(in srgb, var(--ra-bg, #121212) var(--ra-showcase-list-layer-opacity, 72%), transparent); }
.ra-showcase-list-layer-contrast .ra-showcase-list-column { background: color-mix(in srgb, var(--ra-bg-contrast, #050505) var(--ra-showcase-list-layer-opacity, 72%), transparent); }
.ra-showcase-list-layer-custom .ra-showcase-list-column { background: color-mix(in srgb, var(--ra-showcase-list-custom-layer, #1e1e1e) var(--ra-showcase-list-layer-opacity, 72%), transparent); }

.ra-showcase-player-layer-inherit .ra-showcase-player { background: inherit; }
.ra-showcase-player-layer-transparent .ra-showcase-player { background: transparent; }
.ra-showcase-player-layer-soft .ra-showcase-player { background: color-mix(in srgb, var(--ra-bg-soft, #1e1e1e) var(--ra-showcase-player-layer-opacity, 72%), transparent); }
.ra-showcase-player-layer-dark .ra-showcase-player { background: color-mix(in srgb, var(--ra-bg, #121212) var(--ra-showcase-player-layer-opacity, 72%), transparent); }
.ra-showcase-player-layer-contrast .ra-showcase-player { background: color-mix(in srgb, var(--ra-bg-contrast, #050505) var(--ra-showcase-player-layer-opacity, 72%), transparent); }
.ra-showcase-player-layer-custom .ra-showcase-player { background: color-mix(in srgb, var(--ra-showcase-player-custom-layer, #1e1e1e) var(--ra-showcase-player-layer-opacity, 72%), transparent); }

.ra-showcase-list-border-none .ra-showcase-list-column { border-width: 0; border-color: transparent; }
.ra-showcase-list-border-subtle .ra-showcase-list-column { border-color: var(--ra-border, rgba(255,255,255,.15)); }
.ra-showcase-list-border-accent .ra-showcase-list-column { border-color: var(--ra-accent, #d4af37); }
.ra-showcase-list-border-custom .ra-showcase-list-column { border-color: var(--ra-showcase-list-custom-border, #d4af37); }

.ra-showcase-player-border-none .ra-showcase-player { border-width: 0; border-color: transparent; }
.ra-showcase-player-border-subtle .ra-showcase-player { border-color: var(--ra-border, rgba(255,255,255,.15)); }
.ra-showcase-player-border-accent .ra-showcase-player { border-color: var(--ra-accent, #d4af37); }
.ra-showcase-player-border-custom .ra-showcase-player { border-color: var(--ra-showcase-player-custom-border, #d4af37); }

/* Volume control ---------------------------------------------------------- */
.ra-showcase-volume { min-width: 118px; }
.ra-showcase-volume-range {
    width: clamp(84px, 9vw, 128px);
    height: 20px;
    margin: 0;
    padding: 0;
    background: transparent;
    accent-color: var(--ra-accent, #d4af37);
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}
.ra-showcase-volume-range:disabled { cursor: default; opacity: .35; }
.ra-showcase-volume-range::-webkit-slider-runnable-track {
    height: 3px;
    border-radius: 99px;
    background: linear-gradient(to right, var(--ra-accent, #d4af37) 0 var(--ra-showcase-volume-level, 100%), var(--ra-border, rgba(255,255,255,.15)) var(--ra-showcase-volume-level, 100%) 100%);
}
.ra-showcase-volume-range::-webkit-slider-thumb {
    width: 12px;
    height: 12px;
    margin-top: -4.5px;
    border: 0;
    border-radius: 50%;
    background: var(--ra-accent, #d4af37);
    -webkit-appearance: none;
}
.ra-showcase-volume-range::-moz-range-track {
    height: 3px;
    border: 0;
    border-radius: 99px;
    background: var(--ra-border, rgba(255,255,255,.15));
}
.ra-showcase-volume-range::-moz-range-progress {
    height: 3px;
    border-radius: 99px;
    background: var(--ra-accent, #d4af37);
}
.ra-showcase-volume-range::-moz-range-thumb {
    width: 12px;
    height: 12px;
    border: 0;
    border-radius: 50%;
    background: var(--ra-accent, #d4af37);
}
.ra-showcase-mute[aria-pressed="true"] { color: var(--ra-accent, #d4af37); border-color: var(--ra-accent, #d4af37); }


/* Playlist navigation style ----------------------------------------------
   Default: same visual grammar as the primary RA header navigation. */
.ra-showcase-list-style-header-menu .ra-showcase-track-item + .ra-showcase-track-item {
    border-top: 0;
}
.ra-showcase-list-style-header-menu .ra-showcase-track-button {
    position: relative;
    min-height: 44px;
    padding: var(--ra-showcase-track-padding-y, 12px) 0;
    color: var(--ra-text) !important;
    font-family: var(--ra-font-body, Manrope, sans-serif);
    font-size: .875rem;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: .04em;
    opacity: 1;
}
.ra-showcase-list-style-header-menu .ra-showcase-track-button::after {
    position: absolute;
    right: 0;
    bottom: 2px;
    left: 0;
    height: 1px;
    background: var(--ra-accent, #d4af37);
    content: "";
    opacity: 0;
    transform: scaleX(0);
    transform-origin: center;
    transition: opacity .2s ease, transform .2s ease;
}
.ra-showcase-list-style-header-menu .ra-showcase-track-button:hover::after,
.ra-showcase-list-style-header-menu .ra-showcase-track-button:focus-visible::after,
.ra-showcase-list-style-header-menu .ra-showcase-track-button.is-active::after {
    opacity: 1;
    transform: scaleX(1);
}
.ra-showcase-list-style-header-menu .ra-showcase-track-button:hover,
.ra-showcase-list-style-header-menu .ra-showcase-track-button:focus-visible,
.ra-showcase-list-style-header-menu .ra-showcase-track-button.is-active {
    color: var(--ra-accent, #d4af37) !important;
    outline: none;
}
.ra-showcase-list-style-header-menu .ra-showcase-track-title {
    color: currentColor;
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    letter-spacing: inherit;
}
.ra-showcase-list-style-header-menu .ra-showcase-track-artist {
    letter-spacing: normal;
}
.ra-showcase-list-style-header-menu .ra-showcase-track-number {
    align-self: center;
}

/* Legacy/editorial option keeps the separated-list treatment. */
.ra-showcase-list-style-editorial .ra-showcase-track-button {
    padding-inline: .75rem;
}

@media (max-width: 700px) {
    .ra-showcase-list-column { padding: max(16px, var(--ra-showcase-list-inset, 24px)); }
}


/* Console layout ----------------------------------------------------------
   One contained dark audio object. Labels and copy stay inside the outline;
   no decorative border crosses text or icons. */
.ra-showcase-layout-console {
    grid-template-columns: minmax(0, 1.6fr) minmax(280px, .9fr);
    grid-template-rows: auto auto;
    gap: 0;
    padding: var(--ra-showcase-console-padding, 8px);
    overflow: hidden;
    border: var(--ra-showcase-console-border-width, 1px) solid var(--ra-showcase-console-border, #2b2b2b);
    border-radius: var(--ra-showcase-console-radius, 12px);
    background: var(--ra-showcase-console-background, #111111);
    color: #e7e7e7;

    /* The console intentionally stays dark in both site themes. */
    --ra-text: #e7e7e7;
    --ra-text-muted: #9e9e9e;
    --ra-text-footer: #7f7f7f;
    --ra-border: rgba(255,255,255,.12);
    --ra-bg: #111111;
    --ra-bg-soft: #1a1a1a;
    --ra-bg-contrast: #0b0b0b;
}

.ra-showcase-layout-console .ra-showcase-player {
    grid-column: 1;
    grid-row: 1 / span 2;
    min-height: 100%;
    padding-block: clamp(24px, 3vw, 44px);
    padding-inline: var(--ra-showcase-console-player-padding-x, 40px);
    border: 0;
    border-right: 1px solid var(--ra-border);
    border-radius: 0;
    background: transparent;
}

.ra-showcase-layout-console .ra-showcase-left {
    grid-column: 2;
    grid-row: 1;
}

.ra-showcase-layout-console .ra-showcase-right {
    grid-column: 2;
    grid-row: 2;
    border-top: 1px solid var(--ra-border);
}

.ra-showcase-layout-console .ra-showcase-list-column {
    min-height: 0;
    padding: clamp(18px, 2.2vw, var(--ra-showcase-list-inset, 24px));
    border: 0;
    border-radius: 0;
    background: transparent;
}

.ra-showcase-layout-console .ra-showcase-label {
    margin: 0 0 12px;
    padding: 0;
    position: relative;
    z-index: 2;
    line-height: 1.3;
}

.ra-showcase-layout-console .ra-showcase-track-item + .ra-showcase-track-item {
    border-top-color: rgba(255,255,255,.08);
}

.ra-showcase-layout-console .ra-showcase-track-button {
    border-radius: 6px;
    padding-inline: 8px;
    transition: background-color .2s ease, color .2s ease;
}

.ra-showcase-layout-console .ra-showcase-track-button:hover,
.ra-showcase-layout-console .ra-showcase-track-button:focus-visible {
    background: rgba(255,255,255,.045);
}

.ra-showcase-layout-console .ra-showcase-track-button.is-active {
    background: rgba(212,175,55,.09);
}

.ra-showcase-layout-console.ra-showcase-list-style-header-menu .ra-showcase-track-button::after {
    right: 8px;
    left: 8px;
}

.ra-showcase-layout-console .ra-showcase-title {
    color: #f0f0f0;
}

.ra-showcase-layout-console .ra-showcase-artist,
.ra-showcase-layout-console .ra-showcase-time,
.ra-showcase-layout-console .ra-showcase-loading {
    color: #a3a3a3;
}

.ra-showcase-layout-console .ra-showcase-controls button {
    border-color: rgba(255,255,255,.16);
    color: #e7e7e7;
}

.ra-showcase-layout-console .ra-showcase-play {
    border-color: color-mix(in srgb, var(--ra-accent, #d4af37) 58%, rgba(255,255,255,.14));
    background: color-mix(in srgb, var(--ra-accent, #d4af37) 14%, transparent);
}

@media (max-width: 1180px) {
    .ra-showcase-layout-console {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto;
    }

    .ra-showcase-layout-console .ra-showcase-player {
        grid-column: 1;
        grid-row: 1;
        padding-inline: min(var(--ra-showcase-console-player-padding-x, 40px), 36px);
        border-right: 0;
        border-bottom: 1px solid var(--ra-border);
    }

    .ra-showcase-layout-console .ra-showcase-left,
    .ra-showcase-layout-console .ra-showcase-right {
        grid-column: 1;
        grid-row: auto;
    }

    .ra-showcase-layout-console .ra-showcase-right {
        border-top: 1px solid var(--ra-border);
    }
}

@media (max-width: 700px) {
    .ra-showcase-layout-console {
        padding: max(4px, calc(var(--ra-showcase-console-padding, 8px) * .75));
        border-radius: min(var(--ra-showcase-console-radius, 12px), 12px);
    }

    .ra-showcase-layout-console .ra-showcase-player {
        padding-block: 22px;
        padding-inline: min(var(--ra-showcase-console-player-padding-x, 40px), 20px);
    }

    .ra-showcase-layout-console .ra-showcase-list-column {
        padding: 16px 12px;
    }
}


/* Inline layout -----------------------------------------------------------
   Compact bottom-of-page player. The playlist columns are intentionally not
   rendered in this mode; prev/next navigates the selected Case + Originals
   pool while keeping the entire desktop player on one horizontal line. */
.ra-showcase-layout-inline {
    display: block;
}

.ra-showcase-layout-inline .ra-showcase-player {
    width: 100%;
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(150px, .9fr) auto minmax(220px, 2.2fr) auto auto;
    gap: var(--ra-showcase-inline-gap, 18px);
    align-items: center;
    padding: var(--ra-showcase-inline-padding-y, 12px) var(--ra-showcase-inline-padding-x, 20px);
}

.ra-showcase-layout-inline .ra-showcase-player-cover {
    display: none !important;
}

.ra-showcase-layout-inline .ra-showcase-meta {
    grid-column: 1;
    min-width: 0;
    margin: 0;
}

.ra-showcase-layout-inline .ra-showcase-title {
    overflow: hidden;
    font-family: var(--ra-showcase-title-font, Manrope, sans-serif);
    font-size: min(var(--ra-showcase-title-size, 28px), 22px);
    font-weight: var(--ra-showcase-title-weight, 400);
    line-height: var(--ra-showcase-title-line-height, 1.1);
    letter-spacing: var(--ra-showcase-title-letter-spacing, -0.02em);
    text-align: var(--ra-showcase-title-align, left);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ra-showcase-layout-inline .ra-showcase-artist {
    overflow: hidden;
    margin-top: .22rem;
    font-size: .7rem;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ra-showcase-layout-inline .ra-showcase-wave-wrap {
    grid-column: 3;
    min-width: 0;
}

.ra-showcase-layout-inline .ra-showcase-wave {
    height: var(--ra-showcase-inline-wave-height, 52px);
}

.ra-showcase-layout-inline .ra-showcase-controls {
    display: contents;
    margin: 0;
}

.ra-showcase-layout-inline .ra-showcase-transport {
    grid-column: 2;
    gap: .28rem;
    white-space: nowrap;
}

.ra-showcase-layout-inline .ra-showcase-controls button {
    width: 32px;
    height: 32px;
}

.ra-showcase-layout-inline .ra-showcase-play {
    width: 38px !important;
    height: 38px !important;
}

.ra-showcase-layout-inline .ra-showcase-time {
    grid-column: 4;
    justify-self: start;
    white-space: nowrap;
}

.ra-showcase-layout-inline .ra-showcase-volume {
    grid-column: 5;
    min-width: 0;
    white-space: nowrap;
}

.ra-showcase-layout-inline .ra-showcase-volume-range {
    width: clamp(72px, 8vw, 108px);
}

.ra-showcase-layout-inline .ra-showcase-audio {
    display: none;
}

@media (max-width: 980px) {
    .ra-showcase-layout-inline .ra-showcase-player {
        grid-template-columns: minmax(0, 1fr) auto auto;
        gap: 10px 14px;
    }

    .ra-showcase-layout-inline .ra-showcase-meta {
        grid-column: 1;
        grid-row: 1;
    }

    .ra-showcase-layout-inline .ra-showcase-transport {
        grid-column: 2;
        grid-row: 1;
    }

    .ra-showcase-layout-inline .ra-showcase-time {
        grid-column: 3;
        grid-row: 1;
    }

    .ra-showcase-layout-inline .ra-showcase-wave-wrap {
        grid-column: 1 / 3;
        grid-row: 2;
    }

    .ra-showcase-layout-inline .ra-showcase-volume {
        grid-column: 3;
        grid-row: 2;
        justify-self: end;
    }
}

@media (max-width: 620px) {
    .ra-showcase-layout-inline .ra-showcase-player {
        grid-template-columns: 1fr auto;
        padding-inline: min(var(--ra-showcase-inline-padding-x, 20px), 14px);
    }

    .ra-showcase-layout-inline .ra-showcase-meta {
        grid-column: 1 / -1;
        grid-row: 1;
    }

    .ra-showcase-layout-inline .ra-showcase-transport {
        grid-column: 1;
        grid-row: 2;
    }

    .ra-showcase-layout-inline .ra-showcase-time {
        grid-column: 2;
        grid-row: 2;
        justify-self: end;
    }

    .ra-showcase-layout-inline .ra-showcase-wave-wrap {
        grid-column: 1 / -1;
        grid-row: 3;
    }

    .ra-showcase-layout-inline .ra-showcase-volume {
        grid-column: 1 / -1;
        grid-row: 4;
        justify-self: stretch;
    }

    .ra-showcase-layout-inline .ra-showcase-volume-range {
        width: 100%;
    }
}


/* Split layouts -----------------------------------------------------------
   Two-column composition: the player occupies one side while both collection
   lists stack in the opposite column. The DOM does not change; CSS owns order.
---------------------------------------------------------------------------- */
.ra-showcase-layout-split-left,
.ra-showcase-layout-split-right {
    display: grid;
    grid-template-rows: auto auto;
    gap: var(--ra-showcase-layout-gap, 32px);
    align-items: stretch;
}

.ra-showcase-layout-split-left {
    grid-template-columns: minmax(280px, var(--ra-showcase-split-player-track, 55fr)) minmax(280px, var(--ra-showcase-split-content-track, 45fr));
}
.ra-showcase-layout-split-right {
    grid-template-columns: minmax(280px, var(--ra-showcase-split-content-track, 45fr)) minmax(280px, var(--ra-showcase-split-player-track, 55fr));
}

.ra-showcase-layout-split-left .ra-showcase-player {
    grid-column: 1;
    grid-row: 1 / span 2;
}
.ra-showcase-layout-split-left .ra-showcase-left {
    grid-column: 2;
    grid-row: 1;
}
.ra-showcase-layout-split-left .ra-showcase-right {
    grid-column: 2;
    grid-row: 2;
}

.ra-showcase-layout-split-right .ra-showcase-player {
    grid-column: 2;
    grid-row: 1 / span 2;
}
.ra-showcase-layout-split-right .ra-showcase-left {
    grid-column: 1;
    grid-row: 1;
}
.ra-showcase-layout-split-right .ra-showcase-right {
    grid-column: 1;
    grid-row: 2;
}

.ra-showcase-layout-split-left .ra-showcase-player,
.ra-showcase-layout-split-right .ra-showcase-player {
    min-height: 100%;
}

.ra-showcase-layout-split-left .ra-showcase-list-column,
.ra-showcase-layout-split-right .ra-showcase-list-column {
    min-height: 0;
}

@media (max-width: 980px) {
    .ra-showcase-layout-split-left,
    .ra-showcase-layout-split-right {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto;
    }
    .ra-showcase-layout-split-left .ra-showcase-player,
    .ra-showcase-layout-split-right .ra-showcase-player {
        grid-column: 1;
        grid-row: 1;
    }
    .ra-showcase-layout-split-left .ra-showcase-left,
    .ra-showcase-layout-split-right .ra-showcase-left {
        grid-column: 1;
        grid-row: 2;
    }
    .ra-showcase-layout-split-left .ra-showcase-right,
    .ra-showcase-layout-split-right .ra-showcase-right {
        grid-column: 1;
        grid-row: 3;
    }
}

/* Player geometry controls -------------------------------------------------
   1.1.0-beta12: visual presets define the composition; these controls define
   the real geometry of the player inside that composition. Desktop offsets
   are intentionally reset when the layout collapses to one column. */
.ra-audio-showcase .ra-showcase-player {
    box-sizing: border-box;
    width: var(--ra-showcase-player-width, 100%);
    max-width: var(--ra-showcase-player-max-width, none);
    transform: translate(var(--ra-showcase-player-offset-x, 0px), var(--ra-showcase-player-offset-y, 0px));
}

.ra-showcase-player-halign-stretch .ra-showcase-player {
    width: 100%;
    max-width: none;
    justify-self: stretch;
}
.ra-showcase-player-halign-left .ra-showcase-player { justify-self: start; }
.ra-showcase-player-halign-center .ra-showcase-player { justify-self: center; }
.ra-showcase-player-halign-right .ra-showcase-player { justify-self: end; }

.ra-showcase-player-valign-stretch .ra-showcase-player { align-self: stretch; }
.ra-showcase-player-valign-start .ra-showcase-player,
.ra-showcase-player-valign-center .ra-showcase-player,
.ra-showcase-player-valign-end .ra-showcase-player {
    min-height: 0;
}
.ra-showcase-player-valign-start .ra-showcase-player { align-self: start; }
.ra-showcase-player-valign-center .ra-showcase-player { align-self: center; }
.ra-showcase-player-valign-end .ra-showcase-player { align-self: end; }

/* When the player is deliberately not stretched, Split/Console must not
   force it back to the full height of its grid area. */
.ra-showcase-player-valign-start.ra-showcase-layout-split-left .ra-showcase-player,
.ra-showcase-player-valign-center.ra-showcase-layout-split-left .ra-showcase-player,
.ra-showcase-player-valign-end.ra-showcase-layout-split-left .ra-showcase-player,
.ra-showcase-player-valign-start.ra-showcase-layout-split-right .ra-showcase-player,
.ra-showcase-player-valign-center.ra-showcase-layout-split-right .ra-showcase-player,
.ra-showcase-player-valign-end.ra-showcase-layout-split-right .ra-showcase-player,
.ra-showcase-player-valign-start.ra-showcase-layout-console .ra-showcase-player,
.ra-showcase-player-valign-center.ra-showcase-layout-console .ra-showcase-player,
.ra-showcase-player-valign-end.ra-showcase-layout-console .ra-showcase-player {
    min-height: 0;
}

/* One-column order is independent from the desktop visual preset. */
@media (max-width: 980px) {
    .ra-audio-showcase:not(.ra-showcase-layout-inline) {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto auto auto;
        gap: min(var(--ra-showcase-layout-gap, 32px), 24px);
    }

    .ra-audio-showcase:not(.ra-showcase-layout-inline) .ra-showcase-player {
        width: 100%;
        max-width: none;
        justify-self: stretch;
        transform: none;
    }

    .ra-showcase-mobile-player-first .ra-showcase-player { grid-column: 1 !important; grid-row: 1 !important; }
    .ra-showcase-mobile-player-first .ra-showcase-left { grid-column: 1 !important; grid-row: 2 !important; }
    .ra-showcase-mobile-player-first .ra-showcase-right { grid-column: 1 !important; grid-row: 3 !important; }

    .ra-showcase-mobile-player-after-case .ra-showcase-left { grid-column: 1 !important; grid-row: 1 !important; }
    .ra-showcase-mobile-player-after-case .ra-showcase-player { grid-column: 1 !important; grid-row: 2 !important; }
    .ra-showcase-mobile-player-after-case .ra-showcase-right { grid-column: 1 !important; grid-row: 3 !important; }

    .ra-showcase-mobile-player-last .ra-showcase-left { grid-column: 1 !important; grid-row: 1 !important; }
    .ra-showcase-mobile-player-last .ra-showcase-right { grid-column: 1 !important; grid-row: 2 !important; }
    .ra-showcase-mobile-player-last .ra-showcase-player { grid-column: 1 !important; grid-row: 3 !important; }

    .ra-showcase-title {
        font-size: min(var(--ra-showcase-title-size, 28px), 36px);
    }
}


@media (max-width: 700px) {
    .ra-audio-showcase:not(.ra-showcase-layout-inline) {
        gap: min(var(--ra-showcase-layout-gap, 32px), 18px);
    }
}

/* WORK composition --------------------------------------------------------
   1.1.0-beta13
   The home WORK section contains two Joomla module wrappers: the editable
   RA Builder intro and this Audio Showcase. These modes deliberately control
   that outer composition, independently from the Showcase's own internal
   Triptych / Console / Inline / Split layout. */

@supports selector(.ra-home-work:has(.ra-audio-showcase)) {
    body.ra-home-layout-editorial .ra-home-work:has(.ra-work-composition-content-left-player-right) > .ra-position-shell,
    body.ra-home-layout-editorial .ra-home-work:has(.ra-work-composition-player-left-content-right) > .ra-position-shell {
        display: grid !important;
        gap: var(--ra-home-work-layout-gap, 48px) !important;
        align-items: center !important;
    }

    body.ra-home-layout-editorial .ra-home-work:has(.ra-work-composition-content-left-player-right) > .ra-position-shell {
        grid-template-columns: minmax(260px, 38fr) minmax(0, 62fr) !important;
    }

    body.ra-home-layout-editorial .ra-home-work:has(.ra-work-composition-player-left-content-right) > .ra-position-shell {
        grid-template-columns: minmax(0, 62fr) minmax(260px, 38fr) !important;
    }

    body.ra-home-layout-editorial .ra-home-work:has(.ra-work-composition-content-left-player-right) > .ra-position-shell > .work.no-card:has(> .ra-module.ra-type-work) {
        grid-column: 1 !important;
        grid-row: 1 !important;
    }

    body.ra-home-layout-editorial .ra-home-work:has(.ra-work-composition-content-left-player-right) > .ra-position-shell > .work.no-card:has(> .ra-audio-showcase) {
        grid-column: 2 !important;
        grid-row: 1 !important;
    }

    body.ra-home-layout-editorial .ra-home-work:has(.ra-work-composition-player-left-content-right) > .ra-position-shell > .work.no-card:has(> .ra-audio-showcase) {
        grid-column: 1 !important;
        grid-row: 1 !important;
    }

    body.ra-home-layout-editorial .ra-home-work:has(.ra-work-composition-player-left-content-right) > .ra-position-shell > .work.no-card:has(> .ra-module.ra-type-work) {
        grid-column: 2 !important;
        grid-row: 1 !important;
    }

    body.ra-home-layout-editorial .ra-home-work:has(.ra-work-composition-content-top-player-bottom) > .ra-position-shell {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: clamp(28px, 4vw, 56px) !important;
        align-items: start !important;
    }

    body.ra-home-layout-editorial .ra-home-work:has(.ra-work-composition-content-top-player-bottom) > .ra-position-shell > .work.no-card:has(> .ra-module.ra-type-work) {
        grid-column: 1 !important;
        grid-row: 1 !important;
        width: min(100%, 56rem) !important;
        justify-self: center !important;
        align-self: start !important;
    }

    body.ra-home-layout-editorial .ra-home-work:has(.ra-work-composition-content-top-player-bottom) > .ra-position-shell > .work.no-card:has(> .ra-audio-showcase) {
        grid-column: 1 !important;
        grid-row: 2 !important;
        width: 100% !important;
        justify-self: stretch !important;
        align-self: start !important;
    }

    body.ra-home-layout-editorial .ra-home-work:has(.ra-work-composition-content-top-player-bottom) .ra-module.ra-type-work {
        text-align: center !important;
    }

    body.ra-home-layout-editorial .ra-home-work:has(.ra-work-composition-content-top-player-bottom) .ra-module.ra-type-work > .ra-wrapper {
        width: min(100%, 56rem) !important;
        margin-inline: auto !important;
    }

    body.ra-home-layout-editorial .ra-home-work:has(.ra-work-composition-content-top-player-bottom) .ra-module.ra-type-work .ra-content-flow,
    body.ra-home-layout-editorial .ra-home-work:has(.ra-work-composition-content-top-player-bottom) .ra-module.ra-type-work .ra-section-grid {
        width: 100% !important;
        max-width: 56rem !important;
        margin-inline: auto !important;
        align-items: center !important;
        justify-items: center !important;
        text-align: center !important;
    }

    body.ra-home-layout-editorial .ra-home-work:has(.ra-work-composition-content-top-player-bottom) .ra-module.ra-type-work .ra-section-icon,
    body.ra-home-layout-editorial .ra-home-work:has(.ra-work-composition-content-top-player-bottom) .ra-module.ra-type-work .ra-label,
    body.ra-home-layout-editorial .ra-home-work:has(.ra-work-composition-content-top-player-bottom) .ra-module.ra-type-work .ra-title,
    body.ra-home-layout-editorial .ra-home-work:has(.ra-work-composition-content-top-player-bottom) .ra-module.ra-type-work .ra-subtitle,
    body.ra-home-layout-editorial .ra-home-work:has(.ra-work-composition-content-top-player-bottom) .ra-module.ra-type-work .ra-body {
        margin-inline: auto !important;
        text-align: center !important;
    }

    /* Side-by-side modes collapse safely on narrower screens. The editorial
       content always precedes the player to preserve reading order. */
    @media (max-width: 1040px) {
        body.ra-home-layout-editorial .ra-home-work:has(.ra-work-composition-content-left-player-right) > .ra-position-shell,
        body.ra-home-layout-editorial .ra-home-work:has(.ra-work-composition-player-left-content-right) > .ra-position-shell {
            grid-template-columns: minmax(0, 1fr) !important;
            gap: 32px !important;
        }

        body.ra-home-layout-editorial .ra-home-work:has(.ra-work-composition-content-left-player-right) > .ra-position-shell > .work.no-card:has(> .ra-module.ra-type-work),
        body.ra-home-layout-editorial .ra-home-work:has(.ra-work-composition-player-left-content-right) > .ra-position-shell > .work.no-card:has(> .ra-module.ra-type-work) {
            grid-column: 1 !important;
            grid-row: 1 !important;
            width: min(100%, 56rem) !important;
            justify-self: center !important;
        }

        body.ra-home-layout-editorial .ra-home-work:has(.ra-work-composition-content-left-player-right) > .ra-position-shell > .work.no-card:has(> .ra-audio-showcase),
        body.ra-home-layout-editorial .ra-home-work:has(.ra-work-composition-player-left-content-right) > .ra-position-shell > .work.no-card:has(> .ra-audio-showcase) {
            grid-column: 1 !important;
            grid-row: 2 !important;
            width: 100% !important;
            justify-self: stretch !important;
        }
    }
}