/*
 * Stylesheet para o Shortcode [grade_radio] (Grade de Programação)
 * VERSÃO FINAL: COM IMAGEM DE DESTAQUE E LAYOUT CORRIGIDO
 */

/* ---------------------------------------------------------------------------------- */
/* --- ESTILOS PARA A GRADE (ABAS E DESTAQUE) --- */
/* ---------------------------------------------------------------------------------- */

.schedule-tabs-wrapper {
/* Contêiner principal da grade */
border: none;
border-radius: 6px;
margin-bottom: 20px;
background-color: none;
box-shadow: none;
}

/* Navegação das Abas (Layout Horizontal Forçado) */
.schedule-tabs-nav {
list-style: none !important;
padding: 20px !important;
margin: 0 !important;
display: flex !important;
border-bottom: none;
overflow-x: auto;
white-space: nowrap;
align-content: center;
justify-content: space-evenly;
}

.schedule-tabs-nav .tab-day-header {
/* Força o layout horizontal */
display: inline-block !important;
float: none !important;
flex-shrink: 0 !important;
margin: 10px !important;
    padding: 8px 30px 8px 30px !important;
cursor: pointer;
background-color: #fff !important;
border: none !important;
transition: background-color 0.3s;
font-weight: 500;
border-radius: 50px !important;
}

.schedule-tabs-nav .tab-day-header.active {
background-color: #0073aa !important;
border: none !important;
margin-top: -2px;
font-weight: bold;
color: #fff !important;
border-radius: 50px !important;
}


/* Conteúdo das Abas (Ocultação/Exibição) */
.schedule-tabs-content {
padding: 0;
}

.schedule-day-content {
display: none;
}

.schedule-day-content.active {
display: block;
}


/* --- LAYOUT DA LINHA DO PROGRAMA (Com Imagem) --- */

.schedule-list {
list-style: none;
padding: 0;
margin: 0;
}

.schedule-item {
padding: 20px; /* GARANTE O PADDING PADRÃO DE 20PX PARA O JS AJUSTAR */
margin-bottom: 0;
border-bottom: 1px solid #f0f0f0;
display: flex;
flex-wrap: wrap; /* Permite que a descrição vá para a próxima linha */
align-items: center; /* Centraliza verticalmente todos os blocos */
transition: background-color 0.2s;
}

.schedule-item:hover {
background-color: #fff;
}

/* 1. Contêiner da Imagem (60px x 60px) */
.program-media-schedule {
flex-shrink: 0;
width: 60px;
height: 60px;
margin-right: 15px;
border-radius: 4px;
overflow: hidden;
order: 2; /* ORDEM 2 */
}

.program-thumbnail {
width: 100%;
ht: 100%;
object-fit: cover;
display: block;
}

/* 2. Horário (Tamanho e Espaçamento) */
.schedule-item .program-time {
flex-shrink: 0;
width: 50px;
margin-right: 15px;
font-weight: 500;
font-size: 14px;
color: #333;
text-align: center;
order: 1; /* ORDEM 1 */
}

/* 3. Contêiner do Título e Descrição (Ocupa o espaço restante) */
.program-text-content {
flex-grow: 1; /* Ocupa o espaço restante */
display: flex;
flex-wrap: wrap;
align-items: center;
order: 3; /* ORDEM 3 */
}

/* Título e Indicador NO AR (Primeira linha dentro do texto-content) */
.schedule-item .program-name {
flex-basis: 100%;
display: inline-flex;
align-items: center;
font-size: 1em;
color: #333;
font-weight: 500;
margin-top: 0;
margin-bottom: 0;
}

/* Estilo do indicador NO AR (após o título) */
.on-air-indicator-inline {
background-color: #d54e21 !important;
color: #ffffff !important;
font-weight: bold !important;
font-size: 0.75em !important;
padding: 2px 5px !important;
border-radius: 3px !important;
margin-left: 10px !important;
text-transform: uppercase !important;
line-height: 1 !important;
flex-shrink: 0 !important;
display: inline-flex !important;
}

/* Descrição (Forçada para a próxima linha) */
.schedule-item .program-brief-description {
flex-basis: 100%;
font-size: 0.9em;
color: #666;
margin-top: 0;
margin-left: 0;
line-height: 1.4;
}

/* Destaque do Programa Ao Vivo */
.schedule-item.on-air-highlight {
/* CORREÇÃO FINAL: Apenas a cor de fundo, o JS cuida do padding e da borda */
background-color: #fffbe6 !important;
border-radius: 0;
border-left: 5px solid #d54e21 !important;
/* border-left e padding-left são controlados pelo JS */
}

.schedule-item:last-child {
border-bottom: none;
}

/* --- Responsividade (Grade) --- */
@media (max-width: 600px) {
    .schedule-item {
        /* MANTÉM EM LINHA E SEM QUEBRA DE LINHA para garantir as 3 colunas */
        flex-direction: row; 
        flex-wrap: nowrap; /* Impede quebras desnecessárias */
        align-items: center; 
        padding: 10px 15px; /* Reduz o padding vertical */
    }
    
    /* 1. HORÁRIO */
    .schedule-item .program-time {
        flex-shrink: 0; /* IMPEDE O ENCOLHIMENTO */
        width: 40px; 
        margin-right: 8px; /* Reduz a margem */
        font-size: 13px; /* Reduz a fonte */
        order: 1; 
    }

    /* 2. IMAGEM */
    .program-media-schedule {
        flex-shrink: 0; /* IMPEDE O ENCOLHIMENTO */
        width: 50px; /* Reduz o tamanho da imagem */
        height: 50px; /* Reduz o tamanho da imagem */
        margin-right: 8px; /* Reduz a margem */
        margin-bottom: 0; 
        order: 2; 
    }
    
    /* 3. TÍTULO E DESCRIÇÃO */
    .program-text-content {
        width: auto;
        flex-grow: 1; /* Ocupa o espaço restante */
        order: 3; 
        min-width: 0; /* Permite que o texto se quebre dentro do contêiner */
    }

    /* Ajustes internos do texto */
    .schedule-item .program-name {
        font-size: 0.9em; /* Reduz a fonte do título */
        margin-bottom: 2px;
    }
    .schedule-item .program-brief-description {
        font-size: 0.8em; /* Reduz a fonte da descrição */
    }
    
    /* Garante que o indicador NO AR não cause estouro */
    .on-air-indicator-inline {
        margin-left: 5px !important;
        font-size: 0.7em !important;
        padding: 1px 4px !important;
    }
}