/* ==========================
   Seção de Horários - Estrutura Base
========================== */

.schedule-section {
    max-width: 1200px;                        /* Largura máxima do conteúdo */
    margin: 0 auto;                           /* Centralização horizontal */
    padding: 2rem;                            /* Espaçamento interno */
    font-family: 'Roboto', sans-serif;        /* Fonte padrão */
}

/* ==========================
   Introdução
========================== */

.schedule-intro {
    text-align: center;                       /* Centraliza o texto */
    margin-bottom: 3rem;                      /* Espaço abaixo */
}

.schedule-intro h1 {
    color: #fe8948;                          /* Cor laranja IDAL */
    font-size: 2.5rem;                       /* Tamanho do título */
    margin-bottom: 1.5rem;                   /* Espaço abaixo */
    text-shadow: 1px 1px 2px rgba(0,0,0,0.1); /* Sombra suave */
}

.intro-text {
    font-size: 1.2rem;                       /* Tamanho do texto */
    color: #2f2c2a;                          /* Cor do texto */
    max-width: 800px;                        /* Largura máxima */
    margin: 0 auto;                          /* Centralização */
    line-height: 1.6;                        /* Altura da linha */
}

/* ==========================
   Container dos Horários
========================== */

.schedule-container {
    display: grid;                           /* Layout em grid */
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* Colunas responsivas */
    gap: 2rem;                               /* Espaço entre boxes */
    margin: 3rem 0;                          /* Margem vertical */
}

.schedule-box {
    background: #fff;                        /* Fundo branco */
    border-radius: 10px;                     /* Cantos arredondados */
    padding: 2rem;                           /* Espaçamento interno */
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);  /* Sombra suave */
    transition: transform 0.3s ease;         /* Animação suave */
}

.schedule-box:hover {
    transform: translateY(-5px);             /* Efeito hover */
}

.schedule-box h2 {
    color: #fe8948;                         /* Cor laranja IDAL */
    margin-bottom: 1.5rem;                  /* Espaço abaixo */
    font-size: 1.8rem;                      /* Tamanho do título */
}

/* ==========================
   Grid de Horários
========================== */

.time-grid {
    display: grid;                          /* Layout em grid */
    gap: 1rem;                              /* Espaço entre itens */
}

.day {
    font-weight: bold;                      /* Negrito */
    color: #2f2c2a;                        /* Cor do texto */
}

.time {
    color: #4a4a4a;                        /* Cor do texto */
    font-size: 1.1rem;                     /* Tamanho da fonte */
}

.note {
    color: #666;                           /* Cor do texto */
    font-size: 0.9rem;                     /* Tamanho menor */
    font-style: italic;                    /* Itálico */
    margin-top: 1rem;                      /* Espaço acima */
}

/* ==========================
   Seção de Idiomas
========================== */

.language-availability {
    text-align: center;                    /* Centraliza conteúdo */
    margin: 3rem 0;                        /* Margem vertical */
}

.language-flags {
    display: flex;                         /* Layout flexível */
    justify-content: center;               /* Centraliza horizontalmente */
    gap: 2rem;                            /* Espaço entre bandeiras */
    margin-top: 1.5rem;                   /* Espaço acima */
}

.flag-item {
    text-align: center;                   /* Centraliza conteúdo */
}

.flag-item img {
    width: 50px;                          /* Largura da bandeira */
    height: auto;                         /* Altura automática */
    margin-bottom: 0.5rem;                /* Espaço abaixo */
}

/* ==========================
   Call to Action
========================== */

.schedule-cta {
    text-align: center;                   /* Centraliza conteúdo */
    margin-top: 3rem;                     /* Espaço acima */
    padding: 2rem;                        /* Espaçamento interno */
    background: #f8f9fa;                  /* Fundo claro */
    border-radius: 10px;                  /* Cantos arredondados */
}

.cta-button {
    display: inline-block;                /* Comportamento inline */
    background: #fe8948;                  /* Fundo laranja */
    color: #fff;                          /* Texto branco */
    padding: 1rem 2rem;                   /* Espaçamento interno */
    border-radius: 50px;                  /* Botão arredondado */
    text-decoration: none;                /* Remove sublinhado */
    margin-top: 1.5rem;                   /* Espaço acima */
    transition: all 0.3s ease;            /* Animação suave */
}

.cta-button:hover {
    background: #e67235;                  /* Cor mais escura no hover */
    transform: translateY(-2px);          /* Efeito de elevação */
}

/* ==========================
   Responsividade
========================== */

@media (max-width: 768px) {
    .schedule-intro h1 {
        font-size: 2rem;                  /* Título menor */
    }

    .schedule-box {
        padding: 1.5rem;                  /* Menor padding */
    }

    .language-flags {
        flex-direction: column;           /* Empilha bandeiras */
        gap: 1rem;                        /* Menor espaçamento */
    }
}

@media (max-width: 480px) {
    .schedule-section {
        padding: 1rem;                    /* Menor padding */
    }

    .schedule-intro h1 {
        font-size: 1.8rem;                /* Título ainda menor */
    }

    .schedule-box h2 {
        font-size: 1.5rem;                /* Subtítulos menores */
    }
}