/* =====================================================
   PODCAST — player "Ouvir como podcast" da home
   Carregado só na home (baseof.html). Markup em
   layouts/partials/podcast/*, comportamento em
   static/js/podcast-player.js, séries em data/podcast.toml.
   Usa os tokens --alv-* de alvin.css (graphite editorial).
   ===================================================== */

/* --- Botão gatilho: ícone de rádio + rótulo sempre visível (desktop e touch) --- */
.podcast-trigger {
    position: relative;
    display: inline-flex;
    align-items: center;
    overflow: hidden;
    height: 1.85rem;
    padding: 0 0.5rem;
    border: 1px solid rgba(224, 229, 232, 0.12);
    border-radius: 8px;
    background: rgba(16, 18, 20, 0.62);
    color: rgba(156, 163, 175, 0.92);
    cursor: pointer;
    transition:
        background-color 0.15s ease,
        border-color 0.15s ease,
        color 0.15s ease,
        transform 0.15s ease;
}

.podcast-trigger[hidden] {
    display: none;
}

.podcast-trigger:hover,
.podcast-trigger:focus-visible {
    border-color: rgba(159, 179, 189, 0.34);
    color: var(--alv-silver);
    outline: none;
}

.podcast-trigger[aria-expanded="true"] {
    background: rgba(159, 179, 189, 0.16);
    border-color: rgba(200, 216, 232, 0.28);
    color: var(--alv-silver);
}

.podcast-trigger:active {
    transform: scale(0.97);
}

.podcast-trigger-label {
    position: relative;
    z-index: 1;
    margin-left: 0.5rem;
    white-space: nowrap;
    font-size: 0.75rem;
    letter-spacing: 0.04em;
}

/* --- Equalizador no fundo do botão: sinaliza que está tocando ---
   Decorativo (aria-hidden) e sem relação com a frequência real do áudio.
   As barras ficam em baixa opacidade, atrás do ícone e do rótulo, para o
   texto manter a leitura. Só animam com .is-playing (setado pelo JS). */
.podcast-eq-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: flex;
    align-items: flex-end;
    gap: 2px;
    padding: 0 4px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s ease;
}

.podcast-trigger.is-playing .podcast-eq-bg {
    opacity: 1;
}

/* Prata (em vez do cinza) tocando: contraste folgado sobre as barras */
.podcast-trigger.is-playing {
    color: var(--alv-silver);
}

.podcast-trigger.is-playing .podcast-trigger-label {
    text-shadow: 0 0 6px rgba(8, 9, 10, 0.85);
}

.podcast-eq-bg i {
    --bar-duration: 1.2s;
    --bar-delay: 0s;
    flex: 1;
    height: 100%;
    border-radius: 2px 2px 0 0;
    /* Mesmo degradê aço -> sangue da barra de progresso, bem translúcido */
    background: linear-gradient(
        to top,
        rgba(159, 179, 189, 0.3),
        rgba(184, 92, 79, 0.3)
    );
    transform: scaleY(0.2);
    transform-origin: bottom;
    animation: podcast-bar var(--bar-duration) ease-in-out var(--bar-delay) infinite;
    /* Pausa (em vez de resetar) quando o áudio para, o fade-out esconde o resto */
    animation-play-state: paused;
}

.podcast-trigger.is-playing .podcast-eq-bg i {
    animation-play-state: running;
}

/* Ritmos e fases diferentes por barra, para não parecer uma onda uniforme */
.podcast-eq-bg i:nth-child(4n + 1) {
    --bar-duration: 1.1s;
}

.podcast-eq-bg i:nth-child(4n + 2) {
    --bar-duration: 1.5s;
}

.podcast-eq-bg i:nth-child(4n + 3) {
    --bar-duration: 0.85s;
}

.podcast-eq-bg i:nth-child(4n + 4) {
    --bar-duration: 1.3s;
}

.podcast-eq-bg i:nth-child(3n) {
    --bar-delay: -0.4s;
}

.podcast-eq-bg i:nth-child(3n + 1) {
    --bar-delay: -0.9s;
}

.podcast-eq-bg i:nth-child(3n + 2) {
    --bar-delay: -0.2s;
}

.podcast-eq-bg i:nth-child(5n) {
    --bar-delay: -0.65s;
}

@keyframes podcast-bar {
    0%,
    100% {
        transform: scaleY(0.2);
    }
    25% {
        transform: scaleY(0.85);
    }
    50% {
        transform: scaleY(0.4);
    }
    75% {
        transform: scaleY(1);
    }
}

/* --- Ícone de rádio animado: ondas pulsam de dentro para fora --- */
.podcast-icon {
    position: relative;
    z-index: 1;
    display: block;
    width: 1.1rem;
    height: 1.1rem;
    overflow: visible;
    transition: filter 0.3s ease;
}

.podcast-wave,
.podcast-dot {
    transform-box: view-box;
    transform-origin: 12px 12px;
}

.podcast-trigger:hover .podcast-icon,
.podcast-trigger:focus-visible .podcast-icon,
.podcast-trigger.is-playing .podcast-icon {
    filter: drop-shadow(0 0 6px rgba(224, 229, 232, 0.5))
        drop-shadow(0 0 14px rgba(159, 179, 189, 0.32));
}

.podcast-trigger:hover .podcast-dot,
.podcast-trigger:focus-visible .podcast-dot {
    animation: podcast-dot 0.9s ease-in-out both;
}

.podcast-trigger:hover .podcast-wave-inner,
.podcast-trigger:focus-visible .podcast-wave-inner {
    animation: podcast-wave 0.9s ease-in-out 0.08s both;
}

.podcast-trigger:hover .podcast-wave-outer,
.podcast-trigger:focus-visible .podcast-wave-outer {
    animation: podcast-wave 0.9s ease-in-out 0.26s both;
}

/* Tocando: as ondas continuam transmitindo, mesmo com o painel recolhido */
.podcast-trigger.is-playing .podcast-dot {
    animation: podcast-dot 1.6s ease-in-out infinite;
}

.podcast-trigger.is-playing .podcast-wave-inner {
    animation: podcast-wave 1.6s ease-in-out 0.1s infinite;
}

.podcast-trigger.is-playing .podcast-wave-outer {
    animation: podcast-wave 1.6s ease-in-out 0.35s infinite;
}

@keyframes podcast-dot {
    0%,
    100% {
        transform: scale(1);
    }
    40% {
        transform: scale(1.45);
    }
    70% {
        transform: scale(0.9);
    }
}

@keyframes podcast-wave {
    0% {
        opacity: 1;
        transform: scale(1);
    }
    35% {
        opacity: 0.12;
        transform: scale(0.8);
    }
    70% {
        opacity: 1;
        transform: scale(1.1);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* --- Painel expansível: empurra a listagem para baixo --- */
.podcast-panel {
    display: grid;
    grid-template-rows: 0fr;
    margin-bottom: 0;
    opacity: 0;
    visibility: hidden;
    transition:
        grid-template-rows 0.4s cubic-bezier(0.22, 1, 0.36, 1),
        margin-bottom 0.4s cubic-bezier(0.22, 1, 0.36, 1),
        opacity 0.3s ease,
        visibility 0s linear 0.4s;
}

.podcast-panel.is-open {
    grid-template-rows: 1fr;
    margin-bottom: 1.25rem;
    opacity: 1;
    visibility: visible;
    transition-delay: 0s;
}

/* Sem padding/borda aqui: o item precisa colapsar a 0 de altura */
.podcast-panel-inner {
    min-height: 0;
    overflow: hidden;
}

.podcast-card {
    border: 1px solid rgba(224, 229, 232, 0.12);
    border-radius: 12px;
    background: rgba(16, 18, 20, 0.62);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 0 24px rgba(159, 179, 189, 0.08);
}

.podcast-player {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    padding: 1.1rem;
}

/* --- Episódio atual --- */
.podcast-now {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    min-width: 0;
}

.podcast-now-cover {
    flex: none;
    width: 4.5rem;
    height: 4.5rem;
    padding: 0;
    border-radius: 10px;
    object-fit: cover;
    outline: 1px solid rgba(224, 229, 232, 0.14);
}

.podcast-now-cover[hidden] {
    display: none;
}

.podcast-now-meta {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}

.podcast-now-feed {
    font-size: 0.625rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--alv-bone);
}

#content .podcast-now-title {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    font-size: 1.05rem;
    font-weight: 600;
    line-height: 1.3;
    /* !important: `#content a:not(...)` (tema/alvin.css) tem especificidade maior */
    color: var(--alv-silver) !important;
    text-decoration: none;
    transition: color 0.2s ease;
}

#content .podcast-now-title:hover,
#content .podcast-now-title:focus-visible {
    color: #fff !important;
    text-decoration: underline;
    text-underline-offset: 3px;
    outline: none;
}

/* --- Barra de progresso (mesmo degradê da barra de leitura) --- */
.podcast-seek {
    display: flex;
    align-items: center;
    gap: 0.65rem;
}

.podcast-time {
    flex: none;
    min-width: 2.6rem;
    font-size: 0.72rem;
    font-variant-numeric: tabular-nums;
    color: rgba(224, 229, 232, 0.6);
}

.podcast-time:last-child {
    text-align: right;
}

.podcast-range {
    --podcast-progress: 0%;
    flex: 1;
    min-width: 0;
    height: 1.5rem;
    margin: 0;
    background: transparent;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

.podcast-range:focus-visible {
    outline: 1px solid rgba(200, 216, 232, 0.4);
    outline-offset: 2px;
    border-radius: 6px;
}

.podcast-range::-webkit-slider-runnable-track {
    height: 4px;
    border-radius: 999px;
    background: linear-gradient(
        to right,
        #9fb3bd,
        #b85c4f var(--podcast-progress),
        rgba(224, 229, 232, 0.14) var(--podcast-progress)
    );
}

.podcast-range::-moz-range-track {
    height: 4px;
    border-radius: 999px;
    background: linear-gradient(
        to right,
        #9fb3bd,
        #b85c4f var(--podcast-progress),
        rgba(224, 229, 232, 0.14) var(--podcast-progress)
    );
}

.podcast-range::-webkit-slider-thumb {
    width: 14px;
    height: 14px;
    margin-top: -5px;
    border: 0;
    border-radius: 50%;
    background: var(--alv-silver);
    box-shadow: 0 0 10px var(--alv-accent-glow);
    -webkit-appearance: none;
    appearance: none;
    transition: transform 0.15s ease;
}

.podcast-range::-moz-range-thumb {
    width: 14px;
    height: 14px;
    border: 0;
    border-radius: 50%;
    background: var(--alv-silver);
    box-shadow: 0 0 10px var(--alv-accent-glow);
    transition: transform 0.15s ease;
}

.podcast-range:hover::-webkit-slider-thumb,
.podcast-range:active::-webkit-slider-thumb {
    transform: scale(1.25);
}

.podcast-range:hover::-moz-range-thumb,
.podcast-range:active::-moz-range-thumb {
    transform: scale(1.25);
}

/* --- Controles --- */
.podcast-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
}

.podcast-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.35rem;
    height: 2.35rem;
    border: 1px solid transparent;
    border-radius: 50%;
    background: transparent;
    color: rgba(224, 229, 232, 0.78);
    cursor: pointer;
    transition:
        background-color 0.15s ease,
        border-color 0.15s ease,
        color 0.15s ease,
        box-shadow 0.2s ease,
        transform 0.15s ease;
}

.podcast-btn svg {
    width: 1.3rem;
    height: 1.3rem;
}

.podcast-btn:hover,
.podcast-btn:focus-visible {
    background: rgba(159, 179, 189, 0.12);
    color: var(--alv-silver);
    outline: none;
}

.podcast-btn:focus-visible {
    border-color: rgba(200, 216, 232, 0.34);
}

.podcast-btn:active {
    transform: scale(0.94);
}

.podcast-btn-play {
    width: 3.25rem;
    height: 3.25rem;
    margin: 0 0.25rem;
    border-color: rgba(200, 216, 232, 0.28);
    background: rgba(159, 179, 189, 0.16);
    color: var(--alv-silver);
}

.podcast-btn-play svg {
    width: 1.5rem;
    height: 1.5rem;
}

.podcast-btn-play:hover,
.podcast-btn-play:focus-visible {
    background: rgba(159, 179, 189, 0.24);
    box-shadow: 0 0 18px var(--alv-accent-glow);
}

.podcast-btn-speed {
    width: auto;
    min-width: 2.6rem;
    margin-left: 0.4rem;
    padding: 0 0.5rem;
    border-radius: 8px;
    border-color: rgba(224, 229, 232, 0.12);
    font-size: 0.72rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--alv-bone);
}

/* Play/pause: o estado vem de data-state no painel */
.podcast-ic-pause {
    display: none;
}

.podcast-panel[data-state="playing"] .podcast-ic-play {
    display: none;
}

.podcast-panel[data-state="playing"] .podcast-ic-pause {
    display: block;
}

.podcast-error {
    margin: 0;
    padding: 0.5rem 0.75rem;
    border: 1px solid rgba(184, 92, 79, 0.4);
    border-radius: 8px;
    background: rgba(159, 81, 72, 0.12);
    font-size: 0.8rem;
    color: #e3b3ab;
}

.podcast-error[hidden] {
    display: none;
}

/* --- Abas de séries (só aparecem com 2+ séries em data/podcast.toml) --- */
.podcast-feeds {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    padding: 0 1.1rem 0.75rem;
}

.podcast-feed-tab {
    padding: 0.2rem 0.65rem;
    border: 1px solid rgba(224, 229, 232, 0.12);
    border-radius: 999px;
    background: rgba(159, 179, 189, 0.08);
    font-size: 0.7rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(224, 229, 232, 0.7);
    cursor: pointer;
    transition:
        background-color 0.18s ease,
        border-color 0.18s ease,
        color 0.18s ease;
}

.podcast-feed-tab:hover,
.podcast-feed-tab:focus-visible,
.podcast-feed-tab[aria-pressed="true"] {
    background: rgba(159, 179, 189, 0.18);
    border-color: rgba(200, 216, 232, 0.28);
    color: var(--alv-bone);
    outline: none;
}

/* --- Playlist --- */
.podcast-playlist {
    max-height: 17rem;
    margin: 0;
    padding: 0;
    overflow-y: auto;
    list-style: none;
    border-top: 1px solid rgba(224, 229, 232, 0.08);
    border-radius: 0 0 12px 12px;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(159, 179, 189, 0.3) transparent;
}

.podcast-playlist[hidden] {
    display: none;
}

.podcast-episode + .podcast-episode {
    border-top: 1px solid rgba(224, 229, 232, 0.06);
}

.podcast-episode-button {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0.55rem 1.1rem;
    border: 0;
    background: transparent;
    text-align: left;
    color: inherit;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.podcast-episode-button:hover,
.podcast-episode-button:focus-visible {
    background: rgba(159, 179, 189, 0.08);
    outline: none;
}

.podcast-episode-button:focus-visible {
    box-shadow: inset 0 0 0 1px rgba(200, 216, 232, 0.34);
}

.podcast-episode.is-current .podcast-episode-button {
    background: rgba(159, 179, 189, 0.12);
    box-shadow: inset 2px 0 0 var(--alv-violet);
}

.podcast-episode-thumb {
    flex: none;
    width: 3rem;
    height: 3rem;
    overflow: hidden;
    border-radius: 8px;
    background: linear-gradient(135deg, #1c2126, #101214);
    outline: 1px solid rgba(224, 229, 232, 0.1);
}

.podcast-episode-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    border-radius: 0;
    outline: none;
    object-fit: cover;
}

.podcast-episode-text {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.podcast-episode-title {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    font-size: 0.9rem;
    line-height: 1.3;
    color: rgba(238, 241, 242, 0.9);
}

.podcast-episode.is-current .podcast-episode-title {
    color: #fff;
}

.podcast-episode-date {
    font-size: 0.7rem;
    font-variant-numeric: tabular-nums;
    color: rgba(200, 182, 147, 0.55);
}

/* Equalizador: aparece no episódio atual, anima só enquanto toca */
.podcast-eq {
    display: none;
    flex: none;
    align-items: flex-end;
    gap: 2px;
    width: 14px;
    height: 14px;
}

.podcast-episode.is-current .podcast-eq {
    display: inline-flex;
}

.podcast-eq i {
    flex: 1;
    height: 30%;
    border-radius: 1px;
    background: var(--alv-violet);
}

.podcast-episode.is-playing .podcast-eq i {
    animation: podcast-eq 0.9s ease-in-out infinite;
}

.podcast-episode.is-playing .podcast-eq i:nth-child(2) {
    animation-delay: 0.2s;
}

.podcast-episode.is-playing .podcast-eq i:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes podcast-eq {
    0%,
    100% {
        height: 25%;
    }
    50% {
        height: 100%;
    }
}

@media (max-width: 480px) {
    .podcast-player {
        padding: 0.9rem;
    }

    .podcast-now-cover {
        width: 3.75rem;
        height: 3.75rem;
    }

    .podcast-btn {
        width: 2.15rem;
        height: 2.15rem;
    }

    .podcast-btn-play {
        width: 3rem;
        height: 3rem;
        margin: 0 0.1rem;
    }

    .podcast-btn-speed {
        width: auto;
        margin-left: 0.2rem;
    }

    .podcast-episode-button {
        padding-left: 0.9rem;
        padding-right: 0.9rem;
    }

    .podcast-feeds {
        padding-left: 0.9rem;
        padding-right: 0.9rem;
    }
}

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

    .podcast-wave,
    .podcast-dot,
    .podcast-eq i,
    .podcast-eq-bg i {
        animation: none !important;
    }

    .podcast-eq-bg {
        transition: none;
    }

    .podcast-eq-bg i {
        transform: scaleY(0.35);
    }
}