/* ============================================================================
   Página de evento montada pelo portal.

   O visual é o mesmo das páginas escritas à mão: o templete.css compartilhado
   vem inteiro pelo @import, e a cor do evento (--cordoeventoatualpag) é
   definida pelo JS, porque aqui uma página só serve todas as jornadas.

   As variantes .sem-imagem / .sem-curriculo vieram do 2026/gestao/templete.css:
   lá foram escritas para uma jornada específica que não tinha foto dos
   convidados, e aqui valem para qualquer palestra que chegue sem foto ou sem
   mini currículo — o que é comum, já que a programação vem de uma solicitação
   preenchida com pressa.
   ============================================================================ */

@import url("https://info.fam.br/eventos/jornada-academica/codigo-semanageral/templete.css");

/* ----------------------------------------------------------------------------
   Mini currículo escrito no editor rico do portal.

   Até agora o currículo era texto corrido com <br> (é o que as páginas antigas
   tinham e o que a solicitação ainda manda). O composer da aba Jornada virou
   editor rico, então daqui em diante ele também chega com <p> e listas.

   A .curriculo é uma caixa de 160px com rolagem, e o site não tem reset global:
   o <p> viria com a margem de 1em do navegador e comeria um sexto da caixa só
   de espaço em branco antes da primeira linha. O respiro aqui é entre
   parágrafos, que é onde ele serve para alguma coisa.
   ---------------------------------------------------------------------------- */
.curriculo > :first-child { margin-top: 0; }
.curriculo > :last-child { margin-bottom: 0; }

.curriculo p {
    margin: 0 0 0.6em;
}

/* O recuo é o que segura a bolinha dentro da caixa: com o padding-left de 40px
   do navegador ela ficaria longe do texto, e com 0 sairia pela borda esquerda e
   seria cortada pelo overflow. */
.curriculo ul,
.curriculo ol {
    margin: 0 0 0.6em;
    padding-left: 1.3em;
}

/* Sem foto do palestrante: o bloco ocupa a largura toda em vez de deixar um
   buraco onde estaria o retrato. */
.containerconvidado.sem-imagem {
    grid-template-rows: auto 50px auto auto;
    max-height: none;
}

.containerconvidado.sem-imagem.sem-curriculo {
    grid-template-rows: auto 50px auto;
}

.containerconvidado.sem-imagem .palestra {
    grid-area: 1 / 1 / 2 / 4;
}

.containerconvidado.sem-imagem .palestrante {
    grid-area: 2 / 1 / 3 / 4;
}

.containerconvidado.sem-imagem .cursospermitidos:first-child {
    margin-left: 0;
}

.containerconvidado.sem-imagem .horario {
    grid-area: 3 / 1 / 4 / 2;
}

.containerconvidado.sem-imagem .lugar {
    grid-area: 3 / 2 / 4 / 4;
}

.containerconvidado.sem-imagem .curriculo {
    grid-area: 4 / 1 / 5 / 4;
    min-height: 0;
    max-height: none;
}

@media (max-width: 580px) {
    .containerconvidado.sem-imagem .palestra {
        grid-area: 1 / 1 / 2 / 3;
    }

    .containerconvidado.sem-imagem .palestrante {
        grid-area: 2 / 1 / 3 / 3;
    }

    .containerconvidado.sem-imagem .horario {
        grid-area: 3 / 1 / 4 / 2;
    }

    .containerconvidado.sem-imagem .lugar {
        grid-area: 3 / 2 / 4 / 3;
    }

    .containerconvidado.sem-imagem .curriculo {
        grid-area: 4 / 1 / 5 / 3;
    }
}

/* Estados de carregamento e de erro — a página existe antes de a API responder,
   e uma tela em branco parece site quebrado. */
.evento-status {
    max-width: 700px;
    margin: 120px auto;
    padding: 0 24px;
    text-align: center;
    font-family: var(--primary-font);
    color: #444;
}

.evento-status h1 {
    font-size: 1.5rem;
    margin-bottom: 12px;
    color: var(--cordoeventoatualpag, #173e70);
}

.evento-status p {
    line-height: 1.6;
}

.evento-status a {
    color: var(--cordoeventoatualpag, #173e70);
    font-weight: bold;
}

/* Enquanto carrega, o cabeçalho fica sem texto; esconder evita o "pulo" de um
   título vazio virando o nome do evento. */
.carregando .containertitulodasemana,
.carregando main {
    visibility: hidden;
}