/* =========================================================
   CONFIGURAÇÕES GERAIS DA PÁGINA
   ========================================================= */

/* Cor de fundo geral e cor padrão dos textos */
body {
    background-color: #ffffff;
    color: #3c3e45;
}

/* =========================================================
   TÍTULOS GERAIS
   ========================================================= */

/*
 * Define a cor padrão para todos os títulos de nível 1 (H1)
 * da página.
 */
/*h1 {
    color: #394f68;
}*/
h1, h2, h3, h4, h5, h6 {
    color: #394f68;
}

/* =========================================================
   APRESENTAÇÃO
   ========================================================= */

/*
 * Estilo para títulos introdutórios da exposição.
 *
 * Equivale às configurações utilizadas no texto original:
 * - Fonte: Libre Baskerville
 * - Tamanho: 50pt
 * - Peso: negrito
 * - Estilo: normal
 * - Cor: #394f68
 * - Alinhamento: centralizado
 * - Espaçamento entre linhas: 1.5
 * - Margens superior e inferior: 19px
 */
.titulo-apresentacao {
    font-family: 'Libre Baskerville', serif;
    font-size: 50pt;
    font-style: normal;
    font-variant: normal;
    font-weight: 700;
    line-height: 1.5;
    color: #394f68;
    text-align: center;
    text-decoration: none;
    margin-top: 19px;
    margin-bottom: 19px;
}

/*
 * Estilo para textos introdutórios e de apresentação da
 * exposição.
 *
 * Equivale às configurações utilizadas no texto original:
 * - Fonte: Roboto
 * - Tamanho: 12pt
 * - Peso: normal
 * - Estilo: normal
 * - Cor: #3c3e45
 * - Alinhamento: centralizado
 * - Espaçamento entre linhas: 1.5
 * - Margens superior e inferior: 19px
 */
.texto-apresentacao {
    font-family: Roboto, sans-serif;
    font-size: 12pt;
    font-style: normal;
    font-variant: normal;
    font-weight: 400;
    line-height: 1.5;
    color: #3c3e45;
    text-align: center;
    text-decoration: none;
    margin-top: 19px;
    margin-bottom: 19px;
}

/* =========================================================
   TÍTULOS — ANO EM DESTAQUE
   ========================================================= */

/*
 * Estilo aplicado ao título do ano.
 *
 * Exemplo de HTML:
 * <h2 class="ano-destaque">1963</h2>
 *
 * A classe pode ser utilizada em diferentes níveis de
 * título (h2, h3 etc.), mantendo o mesmo padrão visual.
 */
.ano-destaque {
    font-family: 'Libre Baskerville', serif;
    font-size: 40pt;
    font-weight: 700;
    line-height: 1.2;
    color: #394f68;
    text-align: justify;
    margin-bottom: 19px;
}

.ano-destaque-direita {
    font-family: 'Libre Baskerville', serif;
    font-size: 40pt;
    font-weight: 700;
    line-height: 1.2;
    color: #394f68;
    text-align: right;
    margin-bottom: 19px;
}

/* =========================================================
   TEXTO HISTÓRICO
   ========================================================= */

/*
 * Estilo para os textos explicativos/históricos associados
 * aos acontecimentos da exposição.
 *
 * Exemplo de HTML:
 * <p class="texto-explicativo">
 *     Texto histórico...
 * </p>
 */
.texto-explicativo {
    font-family: Roboto, sans-serif;
    font-size: 12pt;
    font-weight: 400;
    line-height: 1.5;
    color: #3c3e45;
    background-color: #ffffff;
    margin-top: 19px;
    margin-bottom: 19px;
}

.texto-explicativo-direita {
    font-family: Roboto, sans-serif;
    font-size: 12pt;
    font-weight: 400;
    line-height: 1.5;
    color: #3c3e45;
    background-color: #ffffff;
    text-align: right;
    margin-top: 19px;
    margin-bottom: 19px;
}

/* =========================================================
   MÍDIAS — IMAGEM E LEGENDA
   ========================================================= */

/*
 * Centraliza o bloco de mídia quando marcado como
 * mídia isolada em uma posição do Grid.
 */
.block-media.media-centralizada {
    justify-self: center;
}

/*
 * Container da mídia.
 *
 * O display: table faz com que o conjunto da imagem e
 * da legenda se comporte como uma unidade, permitindo que
 * a largura acompanhe a imagem em vez de ocupar toda a
 * largura disponível da coluna do Grid.
 *
 * max-width: 100% impede que a mídia ultrapasse os limites
 * da coluna do Grid.
 */
.block-media .item {
    display: table;
    width: auto;
    max-width: 100%;
    margin-right: auto;
    margin-left: auto;
}

/*
 * Área que contém a imagem.
 *
 * table-row mantém a imagem como a primeira parte da
 * estrutura criada pelo display: table.
 */
.block-media .media-render {
    display: table-row;
}

/*
 * Legenda da mídia.
 *
 * table-caption faz a legenda funcionar como uma legenda
 * associada ao conjunto da imagem.
 *
 * caption-side: bottom posiciona a legenda abaixo da imagem.
 *
 * A largura fica limitada à largura disponível do conjunto,
 * permitindo quebra de linha quando necessário.
 */
.block-media .caption {
    display: table-caption;
    caption-side: bottom;
    width: auto;
    max-width: 100%;
    text-align: left;
    margin-top: 8px;
}

/* =========================================================
   LEGENDAS DO CARROSSEL
   ========================================================= */

/*
 * Centraliza o conjunto imagem + legenda dentro do slide.
 *
 * O conteúdo deixa de ocupar obrigatoriamente os 100% do
 * slide e passa a acompanhar a largura da imagem.
 */
.carousel-block .slick-slide > div > div {
    width: fit-content !important;
    max-width: 100%;
    margin-right: auto;
    margin-left: auto;
}

/*
 * Garante que a imagem seja exibida normalmente e que
 * nunca ultrapasse a largura disponível.
 */
.carousel-block .slick-slide img {
    display: block;
    max-width: 100%;
    height: auto;
}

/*
 * Legenda da imagem.
 *
 * A legenda fica limitada à largura do conjunto da imagem,
 * alinhada à esquerda e pode quebrar em várias linhas.
 */
.carousel-block .slide-text {
    width: 100%;
    max-width: 100%;
    text-align: left;
}

.carousel-block .caption {
    width: 100%;
    max-width: 100%;
    text-align: left;
    margin-top: 8px;
}

/*
 * Parágrafo da legenda.
 *
 * Remove a margem padrão e permite quebra de palavras
 * quando necessário.
 */
.carousel-block .caption p {
    line-height: 1.2;
    margin: 0;
    overflow-wrap: break-word;
}

/* =========================================================
   TRANSCRIÇÃO DOCUMENTAL
   ========================================================= */

/*
 * Container da transcrição.
 *
 * O corpo permanece alinhado de forma justificada para
 * facilitar a leitura de textos documentais longos.
 */
.transcricao {
    font-family: Roboto, sans-serif;
    font-size: 11.5pt;
    font-style: italic;
    font-weight: 400;
    line-height: 1.6;
    color: #3c3e45;
    background-color: #ffffff;
    text-align: justify;
    margin-top: 19px;
    margin-bottom: 19px;
}

/*
 * Título da transcrição.
 *
 * O título é centralizado para diferenciá-lo visualmente
 * do corpo do documento.
 */
.transcricao-titulo {
    font-style: italic;
    font-weight: 700;
    text-align: center;
    margin-top: 0;
    margin-bottom: 16px;
}

/*
 * Parágrafos da transcrição.
 *
 * Garante espaçamento entre os diferentes parágrafos do
 * documento sem criar grandes intervalos.
 */
.transcricao p {
    margin-top: 0;
    margin-bottom: 16px;
}

/* =========================================================
   VISUALIZADOR DE PDF
   ========================================================= */

/*
 * Define a largura do visualizador de PDF.
 *
 * A classe .pdf-largo deve ser adicionada somente ao bloco
 * de mídia que contém o PDF.
 *
 * O !important é necessário porque o iframe possui
 * "width: 100%" definido diretamente no HTML.
 */
.block-media.pdf-largo .pdf-embed {
    display: block;
    width: 700px !important;
    max-width: 100%;
    margin-right: auto;
    margin-left: auto;
}

/* =========================================================
   VÍDEO LARGO
   ========================================================= */
/*
 * Define o tamanho e o comportamento responsivo dos vídeos
 * incorporados por meio do bloco oEmbed.
 *
 * A classe .video-largo deve ser adicionada ao bloco oEmbed
 * que deve receber esta configuração.
 */

.block-oembed.video-largo iframe {
    display: block;
    width: 700px !important;
    max-width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    margin-right: auto;
    margin-left: auto;
}

/*
 * Define o tamanho e o comportamento responsivo dos vídeos
 * incorporados pelo bloco "Incorporação de mídia".
 *
 * A classe .video-largo deve ser adicionada ao bloco de
 * mídia que contém o vídeo.
 */
.block-media.video-largo .media-render.youtube iframe {

    /*
     * Exibe o vídeo como elemento de bloco.
     */
    display: block;

    /*
     * Define a largura desejada em telas maiores.
     *
     * O !important sobrescreve o width="420" definido
     * diretamente pelo Omeka no iframe.
     */
    width: 700px !important;

    /*
     * Impede que o vídeo ultrapasse a largura disponível
     * em telas menores.
     */
    max-width: 100%;

    /*
     * Mantém a proporção padrão de vídeos 16:9.
     */
    aspect-ratio: 16 / 9;

    /*
     * Permite que a altura seja calculada automaticamente
     * a partir da largura e da proporção 16:9.
     */
    height: auto !important;

    /*
     * Centraliza o vídeo horizontalmente dentro da área
     * disponível no bloco.
     */
    margin-left: auto;
    margin-right: auto;
}