/* Estilos inspirados na Netflix */

/* Seletor universal: reseta os estilos padrão do navegador */
* {
    margin: 0; /* Remove margem externa padrão de todos os elementos */
    padding: 0; /* Remove espaçamento interno padrão de todos os elementos */
    box-sizing: border-box; /* Inclui padding e border no cálculo da largura/altura total */
}

/* Estilo do corpo da página */
body {
    background-color: #000; /* Define fundo preto (cor característica da Netflix) */
    color: #fff; /* Define cor do texto padrão como branco */
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; /* Define a tipografia padrão */
    min-height: 100vh; /* Garante que o corpo ocupe pelo menos a altura da janela */
    display: flex; /* Ativa o modelo de layout flexível */
    flex-direction: column; /* Organiza elementos em coluna vertical */
    align-items: center; /* Centraliza conteúdo horizontalmente */
    justify-content: flex-start; /* Alinha conteúdo ao topo da tela */
    padding: 1rem; /* Espaçamento interno para evitar colagem nas bordas */
    position: relative; /* Permite posicionamento absoluto de filhos */
}

/* Logo no canto superior esquerdo */
.logo {
    position: absolute; /* Posiciona a logo de forma absoluta */
    top: 2rem; /* Distância do topo da tela */
    left: 2rem; /* Distância da esquerda da tela */
    margin-bottom: 0; /* Remove margem inferior, pois agora é absoluta */
}
.logo img {
    width: min(160px, 25vw); /* Largura responsiva da logo, limitada a 25% da largura da viewport */
    height: auto; /* Mantém proporção da imagem */
}

/* Estilo do botão de alternância de tema */
#theme-toggle {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 10;
    background: none;
    border: none;
    font-size: 2rem;
    cursor: pointer;
}

#theme-toggle img {
    width: 2rem;
    height: 2rem;
    object-fit: contain;
}

/* Estilo do título principal */
h1 {
    font-size: clamp(1.9rem, 4vw, 3rem); /* Tamanho da fonte escalável entre 1.9rem e 3rem baseado na viewport */
    font-weight: 300; /* Peso da fonte leve */
    text-align: center; /* centraliza texto dentro do elemento */
    width: 100%; /* garante que ocupe a largura total */
    margin-top: 13rem; /* empurra o título para baixo */
}

/* Grid dos perfis */
.profiles {
    width: 100%;
    margin-top: 2rem; /* empurra os perfis para baixo em relação ao título */
}

.profiles ul {
    list-style: none; /* Remove os marcadores de lista padrão */
    padding: 0; /* Remove espaçamento interno */
    margin: 0 auto; /* Remove margem externa */
    display: grid; /* Usa grid para organizar perfis */
    grid-template-columns: repeat(3, 1fr); /* Força 3 colunas de largura igual */
    gap: 1rem; /* Distância menor entre perfis */
    justify-items: center; /* Centraliza itens horizontalmente no grid */
    align-items: center; /* Alinha itens ao topo */
    justify-items: center; /* Centraliza itens horizontalmente no grid */
     width: fit-content; /* Ajusta a largura do grid ao conteúdo */
}

.profiles li {
    width: 100%; /* Ocupa toda a largura da célula do grid */
    display: flex; /* Usa flexbox para centralizar */
    justify-content: center; /* Centraliza o perfil na célula */
}

/* Estilo de cada perfil individual */
.profile {
    text-decoration: none; /* Remove o sublinhado padrão de links */
    color: #fff; /* Define cor do texto do perfil como branco */
    display: flex; /* Layout flexível para imagem e texto */
    flex-direction: column; /* Imagem em cima, nome embaixo */
    align-items: center; /* Centraliza itens horizontalmente */
    justify-content: center; /* Centraliza conteúdo do perfil */
    text-align: center; /* Alinha texto ao centro */
    width: 100%; /* Largura total */
    max-width: 200px; /* Largura máxima */
    padding: 0rem; /* Sem padding interno */
    transition: transform 0.3s ease; /* Animação suave no hover */
}

.profile figure {
    margin: 0; /* Remove margem */
    display: flex; /* Flex para imagem e legenda */
    flex-direction: column; /* Coluna */
    align-items: center; /* Centraliza */
    gap: 0.75rem; /* Espaço entre imagem e nome */
}

.profile figcaption,
.profile p {
    margin: 0; /* Remove margem */
    font-size: 1.1rem; /* Tamanho da fonte */
    font-weight: 400; /* Peso normal */
    text-align: center; /* Alinha texto ao centro */
    white-space: nowrap; /* Evita quebra de linha */
    text-overflow: ellipsis; /* Adiciona "..." se texto for longo */
    overflow: hidden; /* Esconde overflow */
    max-width: 100%; /* Largura máxima */
}

/* Efeito ao passar o mouse sobre o perfil */
.profile:hover {
    transform: scale(1.1); /* Aumenta o tamanho do perfil em 10% quando o mouse passa */
}

/* Estilo das imagens dos perfis */
.profile img {
    width: min(200px, 100%); /* Largura máxima de 200px ou 200% do contêiner */
    aspect-ratio: 1 / 1; /* Força proporção quadrada para manter círculo */
    height: auto; /* Mantém proporção correta */
    border-radius: 50%; /* Arredonda para círculo */
    object-fit: cover; /* Cobre o quadro sem distorção */
    border: 3px solid transparent; /* Borda invisível inicial */
    transition: border-color 0.3s ease; /* Animação na borda */
}

/* Efeito na imagem ao passar o mouse sobre o perfil */
.profile:hover img {
    border-color: #fff; /* Torna a borda branca quando o mouse passa */
}

/* Light mode (modo claro) */
body.light-mode {
    background-color: #fff; /* Fundo branco no modo claro */
    color: #000; /* Texto preto */
}

body.light-mode #toggle-theme {
    background: #ddd; /* Fundo claro para o botão de alternância */
    color: black;
}

.light-mode .profile {
    color: #000; /* Texto dos perfis preto */
}

.light-mode img:hover {
    border: 3px solid #222; /* Borda escura no hover */
}

#toggle-theme {
  position: fixed;
  top: 20px;
  right: 20px;
  padding: 8px;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  background: #ddd;
}

#toggle-theme svg {
  width: 20px;
  height: 20px;
}

body.dark {
  background: #121212;
  color: white;
}

body.dark #toggle-theme {
  background: #333;
  color: white;
}

body.dark #toggle-theme {
  background: #333;
}

body.dark #toggle-theme svg {
  fill: #fff;
}

/* Responsividade para tablets */
@media (max-width: 1024px) {
    .profiles ul {
        grid-template-columns: repeat(2, minmax(300px, 1fr)); /* 2 colunas em tablets */
        display: grid; /* Usa grid para organizar perfis */
        width: 100%; /* Ocupa toda a largura disponível */
        justify-items: center; /* Centraliza itens horizontalmente no grid */
        gap: 1.5rem; /* Aumenta o gap para melhor espaçamento em telas menores */
    }

    .profile {
        max-width: 250px; /* Largura máxima reduzida */
        width: 100%; /* Largura total para ocupar o espaço disponível */
    }

    .profile img {
        width: 250px;   /* maior que o original */
        height: 250px;  /* mantém proporção quadrada */
    }

    /* Ajusta o terceiro perfil para centralizar na segunda linha */
    .profiles ul li:nth-child(3) {
        grid-column: 1 / -1; /* ocupa toda a linha */
        display: grid; /* Usa grid para organizar perfis */
        width: 100%; /* Ocupa toda a largura disponível */
        justify-items: center; /* Centraliza itens horizontalmente no grid */
        gap: 1.5rem; /* Aumenta o gap para melhor espaçamento em telas menores */
        padding: 1rem; /* Padding reduzido */
    }

    body {
        padding: 0.75rem; /* Padding reduzido */
        justify-content: flex-start; /* não centraliza verticalmente */
        padding-top: 1rem; /* espaço do topo */
        padding-bottom: 2rem; /* espaço do rodapé */
    }

    h1 {
        margin-top: 13rem; /* menor que no desktop */
        margin-bottom: 4rem; /* Adiciona margem inferior para separar do grid */
        text-align: center; /* centraliza texto dentro do elemento */
        font-size: 3.2rem; /* Tamanho da fonte reduzido para mobile */
    }
}

/* Responsividade para mobile */
@media (max-width: 768px) {
    .profiles ul{
        display: grid; /* Usa grid para organizar perfis */
        grid-template-columns: repeat(2, 1fr); /* 2 colunas */
        width: 100%; /* Ocupa toda a largura disponível */
        justify-items: center; /* Centraliza itens horizontalmente no grid */
        gap: 1.5rem; /* Aumenta o gap para melhor espaçamento em telas menores */
    }
    .profile {
        max-width: 170px; /* Largura máxima ainda menor */
        width: 100%; /* Largura total para ocupar o espaço disponível */
    }

    .profile img {
        width: 170px;   /* maior que o original */
        height: 170px;  /* mantém proporção quadrada */
    }

    /* Ajusta o terceiro perfil para centralizar na segunda linha */
    .profiles ul li:nth-child(3) {
        grid-column: 1 / -1; /* ocupa toda a linha */
    }

    body {
        padding: 0.75rem; /* Padding reduzido */
        justify-content: flex-start; /* não centraliza verticalmente */
        padding-top: 1rem; /* espaço do topo */
        padding-bottom: 2rem; /* espaço do rodapé */
    }

    h1 {
        margin-top: 8rem; /* menor que no desktop */
        margin-bottom: 4rem; /* Adiciona margem inferior para separar do grid */
        text-align: center; /* centraliza texto dentro do elemento */
        font-size: 1.8rem; /* Tamanho da fonte reduzido para mobile */
    }
}

/* Responsividade extra para telas muito pequenas */
@media (max-width: 480px) {
    .profiles ul {
        display: grid; /* Usa grid para organizar perfis */
        grid-template-columns: repeat(2, 1fr); /* 2 colunas */
        width: 100%; /* Ocupa toda a largura disponível */
        justify-items: center; /* Centraliza itens horizontalmente no grid */
        gap: 1.5rem; /* Aumenta o gap para melhor espaçamento em telas menores */
    }

    .profile {
        max-width: 100px; /* Largura máxima maior para ocupar espaço */
        width: 100%; /* Largura total */
    }

    /* Ajusta o terceiro perfil para centralizar na segunda linha */
    .profiles ul li:nth-child(3) {
        grid-column: 1 / -1; /* ocupa toda a linha */
        display: grid; /* Usa grid para organizar perfis */
        width: 100%; /* Ocupa toda a largura disponível */
        justify-items: center; /* Centraliza itens horizontalmente no grid */
        gap: 1.5rem; /* Aumenta o gap para melhor espaçamento em telas menores */
        padding: 0.75rem; /* Padding reduzido */
    }

    body {
        padding: 1.5rem; /* Padding reduzido */
        justify-content: flex-start; /* não centraliza verticalmente */
        padding-top: 1rem; /* espaço do topo */
        padding-bottom: 2rem; /* espaço do rodapé */
    }

    h1 {
        margin-top: 9rem; /* menor que no desktop */
        margin-bottom: 3rem; /* Adiciona margem inferior para separar do grid */
        text-align: center; /* centraliza texto dentro do elemento */
        font-size: 2rem; /* Tamanho da fonte reduzido para mobile */
    }
}