/* RESPONSIVIDADE */

/* Ajustes para telas maiores que 1024px (Opcional, para desktop muito grandes) */
@media (min-width: 1025px) {
    .container {
        max-width: 1200px;
        padding: 0 30px;
    }

    h1 {
        font-size: 5em;
    }

    .hero-content p {
        font-size: 1.8em;
    }
}

/* Ajustes para telas médias (Tablets) - até 1024px */
@media (max-width: 1024px) {
    .container {
        padding: 0 25px;
    }

    /* Header */
    #main-nav .nav-links li {
        margin-left: 20px;
    }

    .language-switcher {
        gap: 8px;
    }

    .lang-flag {
        width: 25px;
        height: 17px;
    }

    /* Hero Section */
    h1 {
        font-size: 3.8em;
    }

    .hero-content p {
        font-size: 1.4em;
    }

    /* About Section */
    .about-section .content-wrapper {
        flex-direction: column; /* Empilha foto e texto */
        gap: 30px;
    }

    .about-image { /* AJUSTE: Centraliza o bloco da imagem */
        margin: 0 auto; 
    }

    .about-image .profile-pic {
        max-width: 300px; /* Reduz o tamanho da imagem */
    }

    .about-text {
        text-align: center;
    }

    /* Tattoo Gallery */
    .tattoo-grid {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* Mantém 3 ou 4 colunas em tablets */
    }

    .gallery-item img {
        height: 200px; /* Reduz altura das miniaturas da galeria */
        aspect-ratio: 1 / 1; /* Força as imagens a serem quadradas */
    }

    /* Contact Section */
    .contact-info {
        gap: 30px; /* Reduz o gap entre os blocos */
    }

    /* Google Reviews Placeholder - para desktop/tablet */
    .review-item {
        flex: 0 0 calc(33.333% - 20px); /* 3 itens por linha com gap de 30px (total 60px entre 3) */
    }

    h2 {
        font-size: 2.2em;
    }

    p {
        font-size: 1em;
    }
}

/* Ajustes para telas pequenas (Mobile) - até 768px */
@media (max-width: 768px) {
    .common-section {
        padding: 60px 0;
    }

    /* Header */
    #main-header .container {
        flex-wrap: wrap; /* Permite que os itens quebrem a linha */
        justify-content: center; /* Centraliza tudo */
        padding-top: 15px; /* Mantém padding */
        padding-bottom: 15px; /* Adiciona padding para o menu empilhar */
        padding-left: 80px; /* AJUSTE: Espaço para o menu hambúrguer na esquerda */
        padding-right: 80px; /* AJUSTE: Espaço para as bandeiras na direita */
    }

    #main-header .logo {
        flex-basis: 100%; /* Logo ocupa a largura total */
        text-align: center;
        margin-bottom: 15px;
    }

    #main-header .logo img {
        height: 45px;
    }

    #main-nav {
        display: none; /* Esconde a navegação principal por padrão */
        width: 100%; /* Ocupa largura total */
        flex-basis: 100%;
        text-align: center;
        margin-top: 15px;
    }

    #main-nav.active {
        display: block; /* Mostra a navegação quando a classe 'active' é adicionada via JS */
    }

    #main-nav .nav-links {
        flex-direction: column; /* Empilha os links */
        align-items: center;
        gap: 15px;
    }

    #main-nav .nav-links li {
        margin-left: 0;
    }

    .language-switcher {
        position: absolute; /* Posiciona as bandeiras no canto */
        top: 20px;
        right: 20px;
        margin-left: 0;
    }

    .hamburger-menu {
        display: flex; /* Mostra o menu hambúrguer */
        position: absolute;
        top: 20px;
        left: 20px; /* Mantém na esquerda */
        right: auto; /* Garante que 'right' não interfira */
    }

    /* Animação do Hamburger Menu */
    .hamburger-menu.active .bar:nth-child(2) {
        opacity: 0;
    }

    .hamburger-menu.active .bar:nth-child(1) {
        transform: translateY(8px) rotate(45deg);
    }

    .hamburger-menu.active .bar:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg);
    }

    /* Hero Section */
    h1 {
        font-size: 3em; /* Reduz tamanho da fonte do H1 */
    }

    .hero-content p {
        font-size: 1.2em; /* Reduz tamanho da fonte do parágrafo */
    }

    .btn {
        padding: 10px 20px; /* Reduz padding do botão */
        font-size: 1em;
    }

    /* About Section */
    .about-image { /* AJUSTE: Centraliza o bloco da imagem */
        margin: 0 auto; 
    }

    .about-image .profile-pic {
        max-width: 250px;
    }

    /* Tattoo Gallery */
    .tattoo-grid {
        grid-template-columns: repeat(2, 1fr); /* FORÇADO DUAS COLUNAS CONFORME SOLICITADO */
    }

    .gallery-item img {
        height: auto; /* Permite que o aspect-ratio defina a altura */
        aspect-ratio: 1 / 1; /* AJUSTE: Força as miniaturas a serem quadradas */
    }

    /* Google Reviews Placeholder - para mobile */
    .review-item {
        flex: 0 0 calc(100% - 20px); /* Exibe 1 item por vez, com rolagem horizontal (considerando gap) */
    }

    /* Lightbox (ajustes para mobile) */
    .lightbox-content {
        max-width: 95%;
        max-height: 85%;
    }

    .close-btn, .prev-btn, .next-btn {
        font-size: 40px;
    }

    .close-btn {
        top: 10px;
        right: 20px;
    }

    .prev-btn {
        left: 15px;
    }

    .next-btn {
        right: 15px;
    }

    .lightbox-caption {
        font-size: 1em;
    }
}

/* Ajustes para telas muito pequenas (Smartphones menores) - até 480px */
@media (max-width: 480px) {
    .container {
        padding: 0 15px;
    }

    h1 {
        font-size: 2.5em;
    }

    h2 {
        font-size: 1.8em;
    }

    .hero-content p {
        font-size: 1em;
    }

    .about-image { /* AJUSTE: Centraliza o bloco da imagem */
        margin: 0 auto; 
    }

    .about-image .profile-pic {
        max-width: 200px;
    }

    .tattoo-grid {
        grid-template-columns: repeat(2, 1fr); /* MANTER DUAS COLUNAS TAMBÉM AQUI */
    }
}