/*
* Arquivo de Estilos do Plugin Programação de Rádio
* CONTEÚDO FINAL E UNIFICADO
*/

/* --- Estilos para o Programa Agora: [programa_agora] --- */
.program-on-air {
/* Layout Geral */
background-color: transparent;
box-shadow: none;
color: #333;
border: none;
padding: 10px 0;
margin-bottom: 0px;
border-radius: 4px;
display: flex;
align-items: flex-start;
text-align: left;
}

.program-on-air .program-media {
flex-shrink: 0;
margin-right: 20px;
/* NOVO: Adicionado para posicionamento absoluto do indicador */
position: relative; 
}

.program-on-air .program-image {
max-width: 160px;
width: 100%;
height: auto;
object-fit: cover;
border-radius: 4px;
background-color: #f0f0f0;
display: block;
border: none;
}

.program-on-air .program-content {
flex-grow: 1;
}

.program-on-air .program-title {
margin: 0;
font-family: var(--e-global-typography-primary-font-family), Sans-serif !important;
font-size: 16px !important;
line-height: 1.2;
font-weight: 600 !important;
color: #fff !important;
}

.program-on-air .program-schedule {
font-family: var(--e-global-typography-primary-font-family), Sans-serif !important;
display: block;
margin-top: 5px;
font-size: 0.9em;
font-weight: 500;
color: #fff !important;
}

.program-on-air .program-description {
margin-top: 2px;
font-family: var(--e-global-typography-primary-font-family), Sans-serif !important;
font-size: 14px !important;
font-weight: 400 !important;
line-height: 1.5;
color: #fff !important;
}

/* --- Estilos para o Indicador "NO AR" --- */
.on-air-indicator {
background-color: #d54e21;
font-family: var(--e-global-typography-primary-font-family), Sans-serif !important;
color: #ffffff;
font-weight: 700;
font-size: 0.8em;
padding: 3px 6px;
border-radius: 3px;
margin-right: 10px;
text-transform: uppercase;
flex-shrink: 0;
align-self: center;
}

/* Contêiner para o Indicador e o Título */
.title-and-indicator-wrapper {
display: flex;
align-items: center;
margin-bottom: 5px;
}

/* --- Mensagem Padrão quando nenhum programa está no ar --- */
.radio-program-default {
background-color: #f0f0f0;
color: #555;
padding: 15px;
border-radius: 5px;
text-align: center;
font-style: italic;
border: 1px solid #ddd;
margin-bottom: 20px;
}

/* ---------------------------------------------------------------------------------- */
/* --- RESPONSIVIDADE MOBILE (Máximo 600px): LAYOUT DE 2 COLUNAS (NO AR ABAIXO DA IMAGEM) --- */
/* ---------------------------------------------------------------------------------- */
@media (max-width: 600px) {
    /* Contêiner principal do [programa_agora] */
    .program-on-air {
        flex-direction: row; 
        flex-wrap: nowrap; 
        align-items: flex-start;
        padding: 10px 0;
        width: 100%;
    }
    
    /* Coluna 1: Mídia/Imagem + NO AR (45% de largura) */
    .program-on-air .program-media {
        width: 50%; 
        max-width: 50%; /* CRÍTICO: Fixa a largura máxima */
        margin-right: 10px;
        padding-right: 0; /* CORREÇÃO: Remove padding-right que deslocava o absoluto */
        padding-bottom: 0;
    }
    
    /* Estilo para o Indicador NO AR (agora dentro do program-media) */
    .program-on-air .program-media .on-air-indicator {
        display: none !important; /* Esconde a versão default (desktop) que está dentro */
    }
    
    /* B. Exibir o indicador de MOBILE (Sobreposição) */
    .program-on-air .program-media .on-air-indicator-mobile {
        display: block !important; 
        
        /* POSICIONAMENTO ABSOLUTO PARA SOBREPOR A IMAGEM */
        position: absolute;
        bottom: 0; 
        left: 0; 
        
        /* Estilo da barra */
        width: 100%; /* Garante que segue o PARENT de 45% */
        text-align: center;
        font-size: 0.7em;
        padding: 5px 0;
        margin: 0 !important;
        
        /* EFEITO VISUAL: Fundo semitransparente */
        background-color: rgba(213, 78, 33, 0.85); 
        color: #ffffff;
        border-radius: 0 0 4px 4px; 
    }

    /* A. Esconder o indicador de DESKTOP (fica ao lado do título) no mobile */
    .program-on-air .on-air-indicator-desktop {
        display: none !important; 
    }

    /* Coluna 2: Conteúdo/Texto (55% de largura) */
    .program-on-air .program-content {
        width: 55%; 
        padding-left: 5px;
    }
    
    /* Título, Horário, Descrição (Ajustes de Fonte) */
    .program-on-air .program-title {
        font-size: 16px !important; 
    }

    .program-on-air .program-schedule {
        margin-top: 3px;
        font-size: 0.8em;
    }

    .program-on-air .program-description {
        font-size: 13px !important;
    }
    
    /* Esconder o wrapper de título/indicador que agora não tem indicador */
    .program-on-air .title-and-indicator-wrapper {
        display: block; 
    }
}