/* ==========================================
   ARQUIVO: cineclubes.css
   ESTILOS ESPECÍFICOS PARA A PÁGINA CINECLUBES
   ========================================== */

/* ESTILO DO MAPA DE CINECLUBES */
.map-section {
    background-color: var(--branco);         /* COR DE FUNDO DA SEÇÃO */
    border-radius: 8px;                      /* BORDAS ARREDONDADAS */
    padding: 30px;                           /* ESPAÇAMENTO INTERNO */
    margin-bottom: 30px;                     /* ESPAÇO ABAIXO DA SEÇÃO */
    box-shadow: var(--sombra);               /* SOMBRA PADRÃO */
}

/* TÍTULO DA SEÇÃO DO MAPA */
.map-section h2 {
    color: var(--verde-escuro);              /* COR DO TÍTULO */
    margin-top: 0;                           /* REMOVE MARGEM SUPERIOR */
    margin-bottom: 20px;                     /* ESPAÇO ABAIXO DO TÍTULO */
    display: flex;                           /* LAYOUT FLEXÍVEL */
    align-items: center;                     /* ALINHA ITENS VERTICALMENTE */
    gap: 10px;                              /* ESPAÇO ENTRE ÍCONE E TEXTO */
}

/* CONTAINER RESPONSIVO PARA O MAPA DO GOOGLE */
.map-container {
    position: relative;                      /* POSICIONAMENTO RELATIVO */
    padding-bottom: 56.25%;                  /* PROPORÇÃO 16:9 PARA O MAPA */
    height: 0;                               /* ALTURA ZERO PARA ASPECT RATIO */
    overflow: hidden;                        /* ESCONDE CONTEÚDO EXCEDENTE */
    max-width: 100%;                         /* LARGURA MÁXIMA */
    background: var(--cinza-claro);          /* COR DE FUNDO ENQUANTO CARREGA */
}

/* IFRAME DO MAPA */
.map-container iframe {
    position: absolute;                      /* POSICIONAMENTO ABSOLUTO */
    top: 0;
    left: 0;
    width: 100%;                            /* OCUPA TODA A LARGURA */
    height: 100%;                           /* OCUPA TODA A ALTURA */
}

/* LISTA DE EXEMPLOS COM ÍCONES */
.example ul {
    list-style: none;                        /* REMOVE MARCADORES PADRÃO */
    padding: 0;                              /* REMOVE PADDING PADRÃO */
}

/* ITENS DA LISTA DE EXEMPLOS */
.example li {
    padding: 8px 0;                          /* ESPAÇAMENTO VERTICAL */
    border-bottom: 1px solid var(--cinza-claro);  /* LINHA DIVISÓRIA */
    position: relative;                      /* PARA POSICIONAR O ÍCONE */
    padding-left: 25px;                      /* ESPAÇO PARA O ÍCONE */
}

/* ÍCONE ANTES DOS ITENS DA LISTA */
.example li:before {
    content: "▶";                            /* ÍCONE DE SETA */
    color: var(--verde-ifmg);                /* COR DO ÍCONE */
    position: absolute;                      /* POSICIONAMENTO ABSOLUTO */
    left: 0;                                 /* ALINHA À ESQUERDA */
}