/**
 * RESPONSIVE MASTER CSS - ATLANTIDA DMC
 * Sistema responsivo centralizado para todo o site
 * Breakpoints: Mobile (320-768px), Tablet (768-1024px), Desktop (1024px+)
 */

/* ===== RESET E BASE ===== */
* {
    box-sizing: border-box;
}

html {
    font-size: 16px; /* Base para rem */
}

img {
    max-width: 100%;
    height: auto;
}

/* ===== BREAKPOINTS ===== */
:root {
    --mobile-max: 767px;
    --tablet-min: 768px;
    --tablet-max: 1023px;
    --desktop-min: 1024px;
    --container-mobile: 95%;
    --container-tablet: 90%;
    --container-desktop: 1200px;
}

/* ===== CONTAINER RESPONSIVO ===== */
.container-responsive {
    width: 100%;
    max-width: var(--container-desktop);
    margin: 0 auto;
    padding: 0 20px;
}

@media (max-width: 767px) {
    .container-responsive {
        width: var(--container-mobile);
        padding: 0 15px;
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .container-responsive {
        width: var(--container-tablet);
        padding: 0 30px;
    }
}

/* ===== HEADER RESPONSIVO ===== */
@media (max-width: 767px) {
    header .container {
        padding: 0 15px;
    }
    
    header .logo img {
        max-width: 200px;
    }
    
    .mobile-menu-toggle {
        display: block !important;
    }
    
    nav {
        display: none !important;
    }
    
    .language-selector {
        margin-left: 10px !important;
    }
}

/* ===== NAVEGAÇÃO MOBILE ===== */
@media (max-width: 767px) {
    .mobile-menu {
        position: fixed;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100vh;
        background: var(--primary-dark);
        z-index: 9999;
        transition: left 0.3s ease;
        padding: 80px 20px 20px;
    }
    
    .mobile-menu.active {
        left: 0;
    }
    
    .mobile-menu ul {
        list-style: none;
        padding: 0;
        margin: 0;
    }
    
    .mobile-menu li {
        margin-bottom: 20px;
    }
    
    .mobile-menu a {
        color: white;
        text-decoration: none;
        font-size: 18px;
        font-weight: 500;
        display: block;
        padding: 15px 0;
        border-bottom: 1px solid rgba(255,255,255,0.1);
    }
}

/* ===== GALERIAS RESPONSIVAS ===== */
.gallery-grid {
    display: grid;
    gap: 20px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Desktop */
@media (min-width: 1024px) {
    .gallery-grid {
        grid-template-columns: repeat(2, 1fr);
        max-width: 1800px;
    }
}

/* Tablet */
@media (min-width: 768px) and (max-width: 1023px) {
    .gallery-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
        padding: 0 15px;
    }
}

/* Mobile */
@media (max-width: 767px) {
    .gallery-grid {
        grid-template-columns: 1fr;
        gap: 15px;
        padding: 0 15px;
    }
}

/* ===== GALLERY ITEMS ===== */
.gallery-item {
    position: relative;
    height: 400px;
    overflow: hidden;
    border-radius: 8px;
}

@media (max-width: 767px) {
    .gallery-item {
        height: 250px;
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .gallery-item {
        height: 300px;
    }
}

/* ===== HERO SECTIONS ===== */
.hero-section {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0 20px;
}

@media (max-width: 767px) {
    .hero-section {
        min-height: 70vh;
        padding: 0 15px;
    }
    
    .hero-section h1 {
        font-size: 2rem !important;
        line-height: 1.2;
    }
    
    .hero-section h2 {
        font-size: 1.2rem !important;
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .hero-section h1 {
        font-size: 3rem !important;
    }
    
    .hero-section h2 {
        font-size: 1.5rem !important;
    }
}

/* ===== FILTROS RESPONSIVOS ===== */
.filter-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    padding: 20px;
}

@media (max-width: 767px) {
    .filter-tags {
        gap: 8px;
        padding: 15px;
    }
    
    .filter-tag {
        font-size: 12px !important;
        padding: 8px 12px !important;
    }
}

/* ===== FOOTER RESPONSIVO ===== */
@media (max-width: 767px) {
    footer .container > div {
        flex-direction: column !important;
        text-align: center !important;
        gap: 20px;
    }
    
    footer .logo img {
        max-width: 200px;
        position: relative !important;
    }
    
    footer h3 {
        font-size: 16px !important;
    }
    
    footer p {
        font-size: 14px !important;
    }
}

/* ===== BOTÕES RESPONSIVOS ===== */
.btn-informe-se {
    transition: all 0.3s ease;
}

@media (max-width: 767px) {
    .btn-informe-se {
        padding: 10px !important;
        font-size: 14px !important;
    }
}

/* ===== TYPOGRAPHY RESPONSIVA ===== */
@media (max-width: 767px) {
    h1 { font-size: 1.8rem !important; }
    h2 { font-size: 1.4rem !important; }
    h3 { font-size: 1.2rem !important; }
    p { font-size: 14px !important; line-height: 1.5; }
}

@media (min-width: 768px) and (max-width: 1023px) {
    h1 { font-size: 2.5rem !important; }
    h2 { font-size: 1.8rem !important; }
    h3 { font-size: 1.4rem !important; }
    p { font-size: 16px !important; }
}

/* ===== UTILITÁRIOS ===== */
.hide-mobile {
    display: block;
}

.show-mobile {
    display: none;
}

@media (max-width: 767px) {
    .hide-mobile {
        display: none !important;
    }
    
    .show-mobile {
        display: block !important;
    }
}

/* ===== OVERLAY MENU RESPONSIVO ===== */
@media (max-width: 767px) {
    nav.active {
        padding: 60px 20px !important;
    }
    
    nav.active .container > div {
        flex-direction: column !important;
        gap: 30px !important;
    }
    
    nav.active ul {
        gap: 20px !important;
    }
    
    nav.active a {
        font-size: 24px !important;
    }
    
    nav.active p {
        font-size: 16px !important;
        text-align: center !important;
    }
}