/*
 * South Wales ONE - shared show detail page
 * Used by original shows, guest shows and jukebox shows.
 */

.swo-show-detail-page{
    position:relative;
    width:100%;
    min-height:100vh;
    overflow:hidden;
    isolation:isolate;
    background:
        radial-gradient(circle at 16% 20%,rgba(239,35,60,.13),transparent 31%),
        radial-gradient(circle at 84% 17%,rgba(0,216,231,.10),transparent 30%),
        radial-gradient(circle at 72% 82%,rgba(24,211,107,.05),transparent 27%),
        linear-gradient(90deg,#050506 0%,#050708 50%,#030607 100%);
}

.swo-show-detail-page::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:-4;
    pointer-events:none;
    opacity:.38;
    background-image:
        linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),
        linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);
    background-size:clamp(38px,3vw,58px) clamp(38px,3vw,58px);
    mask-image:linear-gradient(to bottom,rgba(0,0,0,.68),transparent 92%);
}

.swo-show-shell{
    width:100%;
    max-width:none;
    margin:0;
    padding:clamp(142px,17vh,190px) var(--swo-page-pad) clamp(42px,5vw,78px);
}

.swo-show-hero{
    display:grid;
    grid-template-columns:minmax(0,1fr) clamp(355px,28.5vw,590px);
    gap:clamp(32px,4vw,78px);
    align-items:end;
}

.swo-show-side{width:100%}

.swo-show-side .wave-qr-wrap.listen-live-wrap{
    position:relative;
    inset:auto;
    width:100%;
    max-width:none;
}

.swo-show-wave{
    position:relative;
    height:clamp(90px,11vh,145px);
    margin:clamp(22px,3vh,40px) 0 clamp(25px,3vw,42px);
    display:flex;
    align-items:center;
    mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
}

.swo-show-wave::before{
    content:"";
    position:absolute;
    left:0;
    right:0;
    top:50%;
    height:2px;
    background:linear-gradient(90deg,var(--red),rgba(255,255,255,.6),var(--green));
}

.swo-show-wave-bars{
    width:100%;
    height:100%;
    display:flex;
    align-items:center;
    gap:2px;
}

.swo-show-wave-bars i{
    flex:1;
    min-width:1px;
    height:calc(var(--h) * 1%);
    max-height:95%;
    transform-origin:center;
    border-radius:2px;
    background:currentColor;
    opacity:.76;
    box-shadow:0 0 6px currentColor;
    animation:swoShowEq 1.7s ease-in-out infinite alternate;
    animation-delay:calc(var(--d) * -1ms);
}

.swo-show-wave-bars i:nth-child(-n+42){color:rgba(239,35,60,.80)}
.swo-show-wave-bars i:nth-child(n+43):nth-child(-n+65){color:rgba(210,222,226,.42)}
.swo-show-wave-bars i:nth-child(n+66){color:rgba(24,211,107,.75)}

@keyframes swoShowEq{
    0%{transform:scaleY(.62);opacity:.55}
    100%{transform:scaleY(1.05);opacity:1}
}

.swo-show-feature{
    display:grid;
    grid-template-columns:minmax(360px,.9fr) minmax(0,1.1fr);
    gap:clamp(24px,3.2vw,56px);
    align-items:stretch;
}

.swo-show-art-card,
.swo-show-info-card{
    position:relative;
    overflow:hidden;
    border:1px solid rgba(255,255,255,.14);
    border-radius:26px;
    background:
        radial-gradient(circle at 100% 0%,rgba(0,216,231,.07),transparent 34%),
        linear-gradient(145deg,rgba(8,12,14,.97),rgba(3,6,7,.98));
    box-shadow:0 22px 60px rgba(0,0,0,.34);
}

.swo-show-art-card::after,
.swo-show-info-card::after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    height:3px;
    background:linear-gradient(90deg,var(--red),rgba(255,255,255,.45),var(--green));
}

.swo-show-art-card{
    display:flex;
    align-items:center;
    justify-content:center;
    padding:clamp(12px,1.2vw,18px);
}

.swo-show-art{
    display:block;
    width:100%;
    height:auto;
    border-radius:17px;
    box-shadow:0 18px 45px rgba(0,0,0,.35);
}

.swo-show-info-card{
    padding:clamp(25px,2.8vw,48px);
}

.swo-show-name{
    margin:8px 0 10px;
    color:#fff;
    font-size:clamp(34px,3.45vw,70px);
    line-height:.9;
    font-weight:1000;
    letter-spacing:-2.2px;
    text-transform:uppercase;
}

.swo-show-presenter{
    margin-bottom:25px;
    color:var(--swo-muted);
    font-size:clamp(14px,1vw,18px);
    font-weight:800;
}

.swo-show-presenter a{
    color:var(--swo-cyan);
    text-decoration:none;
    font-weight:1000;
}

.swo-show-copy{
    color:var(--swo-muted);
    font-size:clamp(15px,1vw,18px);
    line-height:1.7;
}

.swo-show-copy p{margin:0 0 18px}
.swo-show-copy strong{color:#fff}
.swo-show-copy a{
    color:var(--swo-cyan);
    font-weight:900;
    text-decoration:none;
}

.swo-show-schedule{
    display:flex;
    align-items:center;
    gap:14px;
    margin-top:28px;
    padding:18px 20px;
    border:1px solid rgba(239,35,60,.26);
    border-radius:16px;
    background:rgba(239,35,60,.06);
}

.swo-show-schedule-dot{
    flex:0 0 auto;
    width:11px;
    height:11px;
    border-radius:50%;
    background:var(--swo-red);
    box-shadow:0 0 16px rgba(239,35,60,.75);
}

.swo-show-schedule-copy{
    color:#fff;
    font-size:clamp(13px,.9vw,16px);
    line-height:1.45;
    font-weight:900;
}

.swo-show-actions{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:14px;
    margin-top:18px;
}

.swo-show-action{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    min-height:76px;
    padding:15px 18px;
    border:1px solid rgba(255,255,255,.13);
    border-radius:16px;
    background:rgba(255,255,255,.035);
    color:#fff;
    text-decoration:none;
    transition:transform .18s ease,border-color .18s ease,background .18s ease;
}

.swo-show-action:hover{
    transform:translateY(-2px);
    border-color:rgba(0,216,231,.42);
    background:rgba(255,255,255,.065);
}

.swo-show-action-kicker{
    display:block;
    margin-bottom:4px;
    color:var(--swo-red);
    font-size:8px;
    font-weight:1000;
    letter-spacing:1.4px;
    text-transform:uppercase;
}

.swo-show-action-title{
    display:block;
    font-size:14px;
    font-weight:1000;
    line-height:1.2;
    text-transform:uppercase;
}

.swo-show-action-arrow{
    color:var(--swo-cyan);
    font-size:22px;
    font-weight:900;
}

.swo-show-back{
    margin-top:clamp(24px,3vw,42px);
    text-align:center;
}

.swo-show-back a{
    color:var(--swo-muted);
    font-size:11px;
    font-weight:900;
    letter-spacing:1.3px;
    text-decoration:none;
    text-transform:uppercase;
}

.swo-show-back a:hover{color:#fff}

@media(max-width:1100px){
    .swo-show-hero{grid-template-columns:1fr}
    .swo-show-side{width:min(100%,590px)}
    .swo-show-feature{grid-template-columns:1fr}
    .swo-show-art-card{max-width:760px}
}

@media(max-width:767.98px){
    .swo-show-shell{padding:20px 14px 36px}
    .swo-show-hero{gap:25px}

    .swo-show-side{
        width:100%;
        display:flex;
        justify-content:center;
    }

    .swo-show-side .listen-live-wrap{width:min(100%,420px)}

    .swo-show-wave{
        height:95px;
        margin:18px 0 20px;
    }

    .swo-show-feature{
        grid-template-columns:1fr;
        gap:18px;
    }

    .swo-show-art-card,
    .swo-show-info-card{border-radius:20px}

    .swo-show-art-card{padding:10px}
    .swo-show-art{border-radius:13px}
    .swo-show-info-card{padding:22px 18px}
    .swo-show-actions{grid-template-columns:1fr}
}