/* ========================================
   Responsive Design - Mobile First
   ======================================== */

/* ========================================
   Tablet (768px - 1024px)
   ======================================== */
@media screen and (max-width: 1024px) {
    /* Gallery navigation - Tablet */
    .gallery-nav {
        width: 36px;
        height: 36px;
    }

    .container {
        padding: 0 var(--spacing-md);
    }

    .section-title {
        font-size: 2.5rem;
    }

    .main {
        padding: var(--spacing-xl) 0;
    }

    /* Header */
    .header {
        padding: var(--spacing-md) 0;
    }

    .header-logo img {
        max-width: 150px;
    }

    /* Hero */
    .hero {
        min-height: 60vh;
    }

    .hero-content {
        padding: var(--spacing-xl);
    }

    .hero-title {
        font-size: 3.5rem;
    }

    .hero-description {
        font-size: 1.25rem;
    }

    /* Áreas */
    .areas-menu {
        margin-bottom: var(--spacing-xl);
    }

    .area-item {
        font-size: 1rem;
        padding: var(--spacing-sm) var(--spacing-lg);
    }

    /* Recursos - 3 colunas em tablet */
    .recursos-list {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        gap: var(--spacing-sm);
    }

    /* Content Area - Ajuste de espaçamento */
    .exemplo-container {
        gap: var(--spacing-lg);
    }

    .content-body {
        padding: var(--spacing-lg);
    }
}

/* ========================================
   Mobile (< 768px)
   ======================================== */
@media screen and (max-width: 768px) {
    /* Gallery navigation - Mobile */
    .gallery-nav {
        width: 32px;
        height: 32px;
    }

    .gallery-nav.prev { left: 8px; }
    .gallery-nav.next { right: 8px; }

    .gallery-bullets {
        bottom: 8px;
    }

    .gallery-bullet {
        width: 8px;
        height: 8px;
    }

    /* Header */
    .header {
        padding: var(--spacing-md) 0;
    }

    .header-logo img {
        max-width: 140px;
    }

    /* Hero */
    .hero {
        min-height: 60vh;
    }

    .hero::before {
        background: linear-gradient(
            to bottom,
            rgba(44, 62, 80, 0.85) 0%,
            rgba(44, 62, 80, 0.9) 100%
        );
    }

    .hero-content {
        padding: var(--spacing-xl) var(--spacing-md);
    }

    .hero-text {
        max-width: 100%;
    }

    .hero-title {
        font-size: 3rem;
    }

    .hero-description {
        font-size: 1.25rem;
    }

    /* Spacing reduzido */
    .main {
        padding: var(--spacing-xl) 0;
    }

    .areas-menu,
    .recursos-menu,
    .content-area {
        margin-bottom: var(--spacing-xl);
    }

    .section-title {
        font-size: 2rem;
        margin-bottom: var(--spacing-md);
    }

    .section-title::after {
        width: 60px;
        height: 3px;
    }

    /* Áreas - Layout vertical compacto */
    .areas-list {
        flex-direction: column;
        gap: var(--spacing-sm);
    }

    .area-item {
        width: 100%;
        text-align: center;
        padding: var(--spacing-md) var(--spacing-lg);
        font-size: 1rem;
    }

    /* Recursos - 2 colunas em mobile */
    .recursos-list {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-sm);
    }

    .recurso-item {
        font-size: 0.9375rem;
        padding: var(--spacing-sm) var(--spacing-md);
    }

    /* Content Area - Layout vertical */
    .content-wrapper {
        border-radius: var(--radius-lg);
    }

    .content-header {
        padding: var(--spacing-md) var(--spacing-lg);
    }

    .content-header h3 {
        font-size: 1.5rem;
    }

    .close-btn {
        width: 36px;
        height: 36px;
        font-size: 1.5rem;
    }

    .content-body {
        padding: var(--spacing-lg);
    }

    .exemplo-container {
        grid-template-columns: 1fr;
        gap: var(--spacing-lg);
    }

    .exemplo-container {
        grid-template-columns: 1fr;
    }

    .exemplo-description h4 {
        font-size: 1.5rem;
    }

    .exemplo-resultado {
        font-size: 0.875rem;
    }

    .exemplo-description p {
        font-size: 1rem;
    }

    /* Navegação */
    .navigation-controls {
        flex-wrap: wrap;
        gap: var(--spacing-md);
    }

    .nav-btn {
        font-size: 0.9375rem;
        padding: var(--spacing-sm) var(--spacing-md);
    }

    .nav-info {
        width: 100%;
        text-align: center;
    }

    /* Footer */
    .footer {
        padding: var(--spacing-lg) 0;
        margin-top: var(--spacing-xxl);
    }

    .footer p {
        font-size: 0.875rem;
    }
}

/* ========================================
   Small Mobile (< 480px)
   ======================================== */
@media screen and (max-width: 480px) {
    .section-title {
        font-size: 1.75rem;
    }

    /* Header */
    .header-logo img {
        max-width: 120px;
    }

    /* Hero */
    .hero {
        min-height: 50vh;
    }

    .hero-content {
        padding: var(--spacing-lg) var(--spacing-md);
    }

    .hero-title {
        font-size: 2.5rem;
    }

    .hero-description {
        font-size: 1.125rem;
    }

    /* Recursos - 1 coluna em telas muito pequenas */
    .recursos-list {
        grid-template-columns: 1fr;
    }

    .recurso-item {
        text-align: left;
        padding: var(--spacing-md) var(--spacing-lg);
    }

    /* Content area com menos padding */
    .content-body {
        padding: var(--spacing-md);
    }

    .exemplo-container {
        gap: var(--spacing-md);
    }

    .content-header h3 {
        font-size: 1.5rem;
    }

    .exemplo-description h4 {
        font-size: 1.25rem;
    }
}

/* ========================================
   Landscape Mobile (altura < 500px)
   ======================================== */
@media screen and (max-height: 500px) and (orientation: landscape) {
    .header {
        padding: var(--spacing-sm) 0;
    }

    .header-content {
        flex-direction: row;
        gap: var(--spacing-md);
    }

    .header-logo img {
        max-width: 100px;
    }

    .header-text p {
        font-size: 0.875rem;
    }

    .main {
        padding: var(--spacing-sm) 0;
    }

    .section-title {
        font-size: 1.125rem;
        margin-bottom: var(--spacing-xs);
    }
}

/* ========================================
   Print Styles
   ======================================== */
@media print {
    .areas-menu,
    .recursos-menu,
    .navigation-controls,
    .close-btn {
        display: none;
    }

    .header,
    .content-wrapper {
        box-shadow: none;
    }

    .content-wrapper {
        page-break-inside: avoid;
    }

    body {
        background-color: white;
    }
}