.audio-posts-grid {
    display: grid;
    /* Always 3 columns per row */
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
}

.audio-card {
    background-color: #fff;
    padding: 10px 20px;
    border-radius: 5px;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 20px;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}

.audio-card-on-icon {
    display: none;
}

.play-audio-btn.active .audio-card-play-icon {
    display: none;
}

.play-audio-btn.active .audio-card-on-icon {
    display: block;
}

.audio-card:hover {
    background-color: var(--color-secondary);
    color: #fff;
}

.audio-card-detail {
    display: flex;
    flex-direction: column;
}

.audio-card-title {
    margin: 0;
    font-size: .8rem;
    text-transform: uppercase;
}

.audio-card-date {
    font-size: 10px;
}

/* Bottom fixed audio player */
.audio-player-fixed {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--color-light-blue);
    color: #fff;
    padding: 10px;
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: 15px;
    z-index: 9999;
    box-shadow: 0 -2px 16px rgba(0,0,0,0.12);
}

.audio-player-fixed.hide {
    display: none;
}

.audio-player-fixed audio {
    width: 100%;
    background: var(--color-light-blue); /* Cor de fundo do player */
    border-radius: 5px;
    color: #fff;
    outline: none;
    /* Remove default border em alguns navegadores */
    border: none;
}

/* Customiza os controles do player no Chrome, Edge e Opera */
.audio-player-fixed audio::-webkit-media-controls-panel {
    background-color: var(--color-light-blue);
    border-radius: 8px;
    padding: 0;
}

/* Customiza o botão play/pause */
.audio-player-fixed audio::-webkit-media-controls-play-button {
    background-color: var(--color-secondary);
    border-radius: 50%;
}

/* Customiza a barra de progresso */
.audio-player-fixed audio::-webkit-media-controls-timeline {
    border-radius: 4px;
    height: 6px;
}

/* Customiza o volume */
.audio-player-fixed audio::-webkit-media-controls-volume-slider {
    background-color: var(--color-demi-blue);
    border-radius: 4px;
}

/* Firefox: customização limitada, mas pode ajustar cor do controle */
.audio-player-fixed audio::-moz-range-thumb {
    background: var(--color-secondary);
    border-radius: 50%;
}

.audio-player-fixed audio::-moz-range-track {
    background: var(--color-demi-blue);
}

/* Remove outline ao focar no player */
.audio-player-fixed audio:focus {
    outline: none;
}

#audio-title {
    color: var(--color-text);
    font-size: .7rem;
}

@media (max-width: 1366px) { 

}

@media (max-width: 1024px) {
  .audio-posts-grid {
    grid-template-columns: repeat(2, 1fr); /* Always 3 columns */
  }  
}

@media (max-width: 960px) {

}

@media (max-width: 767px) {

}

@media (max-width: 470px) {
  .audio-posts-grid {
    grid-template-columns: repeat(1, 1fr); /* Always 3 columns */
  }  
}