/* ============================================================
   WAEN Podcast Single + Custom Player
   /assets/podcast-player.css
   ============================================================ */

/* ── Reset & Variables ─────────────────────────────────────── */
.waen-podcast-single {
    --wps-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --wps-radius: 16px;
    --wps-player-bg: #fff;
    --wps-track-bg: #e5e7eb;
    --wps-track-fill: var(--wpc-primary, #1a75ac);
    --wps-thumb-size: 16px;
    --wps-shadow-player: 0 2px 28px rgba(0,0,0,.10);
    --wps-btn-hover: rgba(0,0,0,.06);
    font-family: var(--wps-font);
}

/* ── Container ─────────────────────────────────────────────── */
.wps-container {
    max-width: var(--wpc-container, 1140px);
    margin: 0 auto;
    padding: 0 24px;
}

/* ============================================================
   HERO
   ============================================================ */
.wps-hero {
    background: linear-gradient(135deg, var(--wpc-primary, #1a75ac) 0%, var(--wpc-secondary, #81a64c) 100%);
    padding: 64px 0;
    color: #fff;
}
.wps-hero__inner {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 52px;
    align-items: center;
}

/* Breadcrumb */
.wps-hero__breadcrumb {
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    opacity: .7;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.wps-hero__breadcrumb a {
    color: inherit;
    text-decoration: none;
}
.wps-hero__breadcrumb a:hover { opacity: 1; text-decoration: underline; }
.wps-hero__breadcrumb-sep { opacity: .5; }

/* Episode badge */
.wps-hero__ep-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}
.wps-hero__type-label {
    background: rgba(255,255,255,.18);
    border: 1px solid rgba(255,255,255,.3);
    border-radius: 40px;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    padding: 4px 12px;
}
.wps-hero__ep-num {
    font-size: .85rem;
    font-weight: 700;
    opacity: .85;
}

/* Title */
.wps-hero__title {
    font-size: clamp(1.5rem, 4vw, 2.6rem);
    font-weight: 800;
    line-height: 1.2;
    margin: 0 0 16px;
    color: #fff;
}

/* Excerpt */
.wps-hero__excerpt {
    font-size: 1rem;
    opacity: .8;
    line-height: 1.7;
    margin: 0 0 24px;
    max-width: 560px;
}
.wps-hero__excerpt p { margin: 0; }

/* Meta chips */
.wps-hero__chips {
    list-style: none;
    margin: 0; padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.wps-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255,255,255,.15);
    border: 1px solid rgba(255,255,255,.25);
    border-radius: 40px;
    padding: 6px 14px;
    font-size: .8rem;
    font-weight: 600;
    backdrop-filter: blur(4px);
}
.wps-chip svg { width: 14px; height: 14px; fill: currentColor; }
.wps-chip--explicit {
    background: rgba(220,38,38,.3);
    border-color: rgba(220,38,38,.6);
}

/* Episode Image */
.wps-hero__image-wrap {
    flex-shrink: 0;
    width: min(340px, 38vw);
}
.wps-hero__image {
    width: 100%;
    border-radius: var(--wps-radius);
    box-shadow: 0 16px 56px rgba(0,0,0,.35);
    display: block;
    aspect-ratio: 1/1;
    object-fit: cover;
}
.wps-hero__image-fallback {
    width: 100%;
    aspect-ratio: 1/1;
    border-radius: var(--wps-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 16px 56px rgba(0,0,0,.35);
}
.wps-hero__image-fallback svg {
    width: 65%;
    height: 65%;
}


/* ── Inline Player (inside hero) — no background ──────────── */
.wps-player {
    background: none;
    border: none;
    padding: 0;
    margin-top: 28px;
    color: #fff;
}

/* ── Progress bar (full width, top) ───────────────────────── */
.wps-progress-wrap {
    padding: 0 0 12px;
}

/* ── Single control row ────────────────────────────────────── */
.wps-player__row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: nowrap;
}

/* Decorative waveform icons */
.wps-wave-deco {
    display: flex;
    align-items: center;
    flex: 1;
    color: rgba(255,255,255,.8);
}
.wps-wave-deco--l { justify-content: flex-start; }
.wps-wave-deco--r { justify-content: flex-end; }
.wps-wave-deco svg {
    width: 72px;
    height: 32px;
    overflow: visible;
}
/* Animated bars */
.wps-wave-deco rect {
    transform-box: fill-box;
    transform-origin: center center;
    animation: wps-bar-pulse 1.4s ease-in-out infinite;
}
.wps-wave-deco rect:nth-child(1)  { animation-delay:  0s;    animation-duration: 1.4s; }
.wps-wave-deco rect:nth-child(2)  { animation-delay: -.2s;   animation-duration: 1.1s; }
.wps-wave-deco rect:nth-child(3)  { animation-delay: -.5s;   animation-duration: 1.6s; }
.wps-wave-deco rect:nth-child(4)  { animation-delay: -.8s;   animation-duration: 1.2s; }
.wps-wave-deco rect:nth-child(5)  { animation-delay: -.3s;   animation-duration: 1.5s; }
.wps-wave-deco rect:nth-child(6)  { animation-delay: -.7s;   animation-duration: 1.0s; }
.wps-wave-deco rect:nth-child(7)  { animation-delay: -.1s;   animation-duration: 1.3s; }
.wps-wave-deco rect:nth-child(8)  { animation-delay: -.6s;   animation-duration: 1.45s; }
.wps-wave-deco rect:nth-child(9)  { animation-delay: -.4s;   animation-duration: 1.1s; }
.wps-wave-deco rect:nth-child(10) { animation-delay: -.9s;   animation-duration: 1.35s; }
.wps-wave-deco rect:nth-child(11) { animation-delay: -.25s;  animation-duration: 1.2s; }
@keyframes wps-bar-pulse {
    0%, 100% { transform: scaleY(1); }
    50%       { transform: scaleY(0.72); }
}

/* Generic button reset */
.wps-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,.85);
    transition: background .18s, color .18s;
    line-height: 0;
}
.wps-btn:hover { background: rgba(255,255,255,.15); color: #fff; }
.wps-btn:focus-visible { outline: 2px solid rgba(255,255,255,.7); outline-offset: 2px; }

/* Play / Pause big button */
.wps-btn--play {
    width: 56px; height: 56px;
    padding: 0;
    border-radius: 50%;
    flex-shrink: 0;
}
.wps-btn--play svg {
    width: 56px; height: 56px;
    transition: transform .15s;
}
.wps-btn--play:hover svg { transform: scale(1.08); }
.wps-btn--play:hover { background: none; }

/* Skip ◄◄ / ►► buttons */
.wps-btn--skip {
    width: 36px; height: 36px;
    opacity: .85;
    padding: 4px;
}
.wps-btn--skip:hover { opacity: 1; background: none; }
.wps-btn--skip svg {
    width: 28px; height: 28px;
}

/* Time display */
.wps-time {
    font-size: .82rem;
    font-weight: 600;
    color: rgba(255,255,255,.8);
    letter-spacing: .02em;
    white-space: nowrap;
}
.wps-time-sep { margin: 0 3px; opacity: .4; }

/* Speed selector */
.wps-speed-wrap {
    position: relative;
}
.wps-btn--speed {
    border: 1px solid rgba(255,255,255,.35);
    border-radius: 8px;
    padding: 5px 12px;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .04em;
    min-width: 44px;
    color: rgba(255,255,255,.9);
}
.wps-btn--speed:hover {
    border-color: rgba(255,255,255,.7);
    color: #fff;
    background: rgba(255,255,255,.1);
}
.wps-speed-menu {
    position: absolute;
    bottom: calc(100% + 8px);
    right: 0;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0,0,0,.14);
    list-style: none;
    margin: 0; padding: 6px 0;
    min-width: 90px;
    z-index: 100;
    display: none;
}
.wps-speed-menu.open { display: block; animation: wps-fade-in .15s ease; }
.wps-speed-menu li {
    padding: 8px 16px;
    font-size: .82rem;
    font-weight: 600;
    cursor: pointer;
    color: #333;
    transition: background .15s, color .15s;
}
.wps-speed-menu li:hover { background: #f3f4f6; }
.wps-speed-menu li.active { color: var(--wps-track-fill); }

/* Volume range */
.wps-vol-range {
    -webkit-appearance: none;
    appearance: none;
    width: 80px;
    height: 3px;
    border-radius: 4px;
    background: rgba(255,255,255,.3);
    outline: none;
    cursor: pointer;
    transition: width .2s;
}
.wps-vol-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 14px; height: 14px;
    border-radius: 50%;
    background: var(--wps-track-fill);
    cursor: pointer;
    box-shadow: 0 0 0 2px rgba(26,117,172,.2);
    transition: transform .15s;
}
.wps-vol-range::-webkit-slider-thumb:hover { transform: scale(1.25); }
.wps-vol-range::-moz-range-thumb {
    width: 14px; height: 14px;
    border-radius: 50%;
    background: var(--wps-track-fill);
    border: none;
    cursor: pointer;
}

/* Download */
.wps-btn--download {
    opacity: .6;
    margin-left: 4px;
}
.wps-btn--download:hover { opacity: 1; }
.wps-btn--download svg { width: 20px; height: 20px; fill: currentColor; }

/* Progress bar: lighter track on dark bg */
.wps-progress-bg {
    position: relative;
    height: 4px;
    border-radius: 6px;
    background: rgba(255,255,255,.25);
    cursor: pointer;
    transition: height .18s;
}
.wps-progress-bg:hover,
.wps-progress-bg:focus-visible {
    height: 7px;
    outline: none;
}
.wps-progress-buf {
    position: absolute;
    left: 0; top: 0;
    height: 100%;
    border-radius: 6px;
    background: rgba(26,117,172,.22);
    pointer-events: none;
    width: 0;
}
.wps-progress-fill {
    position: absolute;
    left: 0; top: 0;
    height: 100%;
    border-radius: 6px;
    background: var(--wps-track-fill);
    pointer-events: none;
    width: 0;
    transition: width .1s linear;
}
.wps-progress-thumb {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%) scale(0);
    width: var(--wps-thumb-size);
    height: var(--wps-thumb-size);
    border-radius: 50%;
    background: var(--wps-track-fill);
    box-shadow: 0 0 0 3px rgba(26,117,172,.25);
    pointer-events: none;
    transition: transform .18s;
    left: 0;
}
.wps-progress-bg:hover .wps-progress-thumb,
.wps-progress-bg.dragging .wps-progress-thumb {
    transform: translate(-50%, -50%) scale(1);
}

/* ── Progress bar row ──────────────────────────────────────── */
.wps-progress-wrap {
    padding: 14px 0 4px;
}
/* Volume control */
.wps-vol-wrap {
    display: flex;
    align-items: center;
    gap: 4px;
}
.wps-btn--vol {
    width: 36px; height: 36px;
    opacity: .7;
}
.wps-btn--vol:hover { opacity: 1; }
.wps-btn--vol svg { width: 22px; height: 22px; fill: currentColor; }
.wps-vol-slider-wrap { display: flex; align-items: center; }
.wps-player.loading .wps-btn--play svg {
    animation: wps-pulse 1s ease-in-out infinite;
}
@keyframes wps-pulse {
    0%,100% { opacity:1; }
    50% { opacity:.4; }
}

@keyframes wps-fade-in {
    from { opacity:0; transform: translateY(4px); }
    to   { opacity:1; transform: translateY(0); }
}

/* ============================================================
   SUPPRESS SSP / CASTOS DEFAULT PLAYER (CSS safety net)
   ============================================================ */
.waen-podcast-single .podcast_player,
.waen-podcast-single #podcast_player,
.waen-podcast-single .castos-player,
.waen-podcast-single .ssp-player-container,
.waen-podcast-single [class*="castos-"],
.waen-podcast-single [class*="ssp-player"] {
    display: none !important;
}

/* ============================================================
   SHOW NOTES / CONTENT
   ============================================================ */
.wps-content-wrap {
    padding-top: 52px;
    padding-bottom: 15px;
}
.wps-content {
    font-size: 1.05rem;
    line-height: 1.8;
    color: #333;
}
.wps-content h2,
.wps-content h3 {
    margin-top: 2em;
    color: #111;
}
.wps-content a {
    color: var(--wpc-primary, #1a75ac);
}

/* Back link */
.wps-back-link {
    display: none;
}

/* ─────────────────────────────────────────────────────────────
   RELATED EPISODES
   ───────────────────────────────────────────────────────────── */
.wps-related {
    padding-bottom: 50px;
}
.wps-related__heading {
    font-size: 1.4rem;
    font-weight: 800;
    color: #111;
    margin: 0 0 28px;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

/* ── Tablet: ≤900px ─────────────────────────────────────────── */
@media (max-width: 900px) {
    .wps-hero__inner {
        grid-template-columns: 1fr auto;
        gap: 32px;
    }
    .wps-hero__image-wrap {
        width: min(220px, 30vw);
    }
    .wps-wave-deco { display: none; }
    .wps-player__row { gap: 8px; }
}

/* ── Tablet portrait / large phone: ≤768px ──────────────────── */
@media (max-width: 768px) {
    .wps-hero__inner {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    .wps-hero__image-wrap {
        width: min(260px, 72vw);
        order: -1;
        margin: 0 auto;
    }
    .wps-player { margin-top: 16px; }
    .wps-wave-deco { display: none; }
    .wps-player__row {
        gap: 6px;
        justify-content: center;
    }
    .wps-vol-range { width: 60px; }
    .wps-btn--play { width: 48px; height: 48px; }
    .wps-btn--play svg { width: 48px; height: 48px; }
}

/* ── Phone: ≤480px ──────────────────────────────────────────── */
@media (max-width: 480px) {
    .wps-hero { padding: 40px 0; }
    .wps-player__row {
        gap: 4px;
        justify-content: center;
    }
    .wps-vol-slider-wrap { display: none; }
    .wps-btn--download { display: none; }
    .wps-time { display: none; }
    .wps-btn--play { width: 44px; height: 44px; }
    .wps-btn--play svg { width: 44px; height: 44px; }
    .wps-btn--skip { width: 32px; height: 32px; }
    .wps-btn--skip svg { width: 26px; height: 26px; }
    .wps-btn--speed {
        padding: 4px 8px;
        font-size: .75rem;
    }
}