/**
 * Responsive CSS - Estilos para diferentes tamanhos de tela
 * Mobile-first approach com breakpoints otimizados
 */

/* Mobile First - Base styles já são mobile-friendly */

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
    .container {
        padding: 0 var(--spacing-6);
    }
    
    .hero-content h1 {
        font-size: var(--font-size-4xl);
    }
    
    .features-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
    /*
     * Header em 3 colunas: [vazio | links centralizados na barra | CTA à direita].
     * display:contents no #nav-menu faz .nav-links e .nav-cta filhos diretos do grid.
     */
    .nav-container {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
        align-items: center;
        column-gap: var(--spacing-4);
    }

    .nav-spacer-start {
        display: block;
        grid-column: 1;
        grid-row: 1;
        min-width: 0;
        pointer-events: none;
    }

    .nav-menu {
        display: contents;
    }

    .nav-links {
        grid-column: 2;
        grid-row: 1;
        justify-self: center;
        align-self: stretch;
        align-items: stretch;
        width: max-content;
        max-width: 100%;
        min-width: 0;
        gap: 1.5rem;
        flex-direction: row;
    }

    .nav-cta {
        grid-column: 3;
        grid-row: 1;
        justify-self: end;
        align-self: center;
        margin-left: 0;
    }

    .nav-toggle {
        display: none;
    }
    
    .hero-content h1 {
        font-size: var(--font-size-5xl);
    }
    
    .hero-section {
        padding: var(--spacing-20) 0;
    }
    
    .features-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .section-content {
        grid-template-columns: 1fr 1fr;
    }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
    .container {
        padding: 0 var(--spacing-8);
    }
    
    .features-grid {
        grid-template-columns: repeat(4, 1fr);
    }
    
    .hero-section {
        padding: var(--spacing-20) 0;
    }
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
    .container {
        padding: 0 var(--spacing-12);
    }
    
    .hero-content h1 {
        font-size: var(--font-size-5xl);
    }
}

/* Mobile-specific styles */
@media (max-width: 767px) {
    /* Navigation Mobile */
    .nav-menu {
        position: fixed;
        top: 70px;
        left: 0;
        right: 0;
        background: var(--light);
        border-bottom: 1px solid color-mix(in srgb, var(--primary) 12%, transparent);
        flex-direction: column;
        flex: 0 0 0;
        width: 0;
        min-width: 0;
        overflow: visible;
        justify-content: flex-start;
        align-items: stretch;
        padding: var(--spacing-5) var(--spacing-6);
        box-shadow: var(--shadow-card-soft);
        transform: translateY(-100%);
        opacity: 0;
        visibility: hidden;
        transition: all var(--transition-normal);
        z-index: 999;
    }

    .nav-links {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        flex: none;
        gap: var(--spacing-1);
    }
    
    .nav-menu.active {
        transform: translateY(0);
        opacity: 1;
        visibility: visible;
        width: auto;
        min-width: 100%;
        flex: none;
    }
    
    /* CTA dentro do menu mobile; alternador de tema fica fora do #nav-menu */
    .nav-cta {
        display: none;
    }

    .nav-menu .nav-cta {
        margin-left: 0;
    }

    .nav-menu.active .nav-cta {
        display: flex;
        width: 100%;
        margin-top: var(--spacing-3);
        padding-top: var(--spacing-4);
        padding-left: 0;
        border-left: none;
        border-top: 1px solid color-mix(in srgb, var(--primary) 14%, transparent);
    }

    .nav-menu.active .nav-link {
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        width: 100%;
        max-width: none;
        min-width: 0;
        min-height: 44px;
        padding: var(--spacing-3) var(--spacing-4);
        border-radius: var(--border-radius-lg);
        text-align: left;
        gap: var(--spacing-3);
        color: var(--primary);
    }

    .nav-menu.active .nav-link span,
    .nav-menu.active .nav-link .nav-link-label-two-lines {
        text-align: left;
    }

    .nav-menu.active .nav-link.active {
        background: var(--white);
        color: var(--primary);
        box-shadow: 0 1px 4px color-mix(in srgb, var(--black) 8%, transparent);
    }

    .nav-menu.active .nav-cta .btn-nav {
        width: 100%;
        justify-content: center;
    }
    
    /* Aumentar em 15% o tamanho das letras e ícones do menu suspenso */
    .nav-menu.active .nav-link i {
        font-size: 1.15rem; /* 1rem * 1.15 = 1.15rem */
    }
    
    .nav-menu.active .nav-link span {
        font-size: 0.8625rem; /* 0.75rem * 1.15 = 0.8625rem */
    }
    
    .nav-menu.active .btn-nav {
        font-size: 1.00625rem; /* 0.875rem * 1.15 = 1.00625rem */
    }
    
    .nav-toggle {
        display: flex;
        margin-left: auto;
    }
    
    body.menu-open {
        overflow: hidden;
    }
    
    /* Hero Section Mobile */
    .hero-section {
        flex-direction: column;
        text-align: center;
        padding: var(--spacing-16) 0;
        min-height: auto;
    }
    
    .hero-content {
        margin-bottom: var(--spacing-8);
    }
    
    .hero-content h1 {
        font-size: var(--font-size-3xl);
    }
    
    .hero-content p {
        font-size: var(--font-size-lg);
    }
    
    .hero-buttons {
        justify-content: center;
    }
    
    .hero-placeholder {
        width: 200px;
        height: 200px;
    }
    
    .hero-placeholder i {
        font-size: 80px;
    }
    
    /* Features Mobile */
    .features-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-6);
    }
    
    .feature-card {
        padding: var(--spacing-6);
    }
    
    /* Page Header Mobile */
    .page-header {
        padding: var(--spacing-12) 0;
    }
    
    .page-header h1 {
        font-size: var(--font-size-3xl);
    }
    
    .page-header-content {
        grid-template-columns: 1fr;
        gap: var(--spacing-8);
    }
    
    .page-header-text {
        text-align: center;
    }
    
    .page-subtitle {
        font-size: var(--font-size-lg);
    }
    
    /* Page Content Mobile */
    .page-content {
        padding: var(--spacing-12) 0;
    }
    
    .section-content {
        grid-template-columns: 1fr;
        gap: var(--spacing-8);
        text-align: center;
    }
    
    .text-content h2 {
        font-size: var(--font-size-2xl);
    }
    
    .text-content p {
        font-size: var(--font-size-base);
    }
    
    /* Buttons Mobile — mantém tokens globais para alinhamento com desktop */
    .btn {
        padding: var(--btn-padding-y) var(--btn-padding-x);
        font-size: var(--font-size-sm);
    }
    
    .btn-large {
        padding: var(--btn-padding-y-lg) var(--btn-padding-x-lg);
        font-size: var(--font-size-base);
    }
    
    .hero-buttons {
        flex-direction: column;
        align-items: center;
    }
    
    .hero-buttons .btn {
        width: 100%;
        max-width: 280px;
        justify-content: center;
    }
    
    /* Footer Mobile */
    .footer {
        padding-top: var(--spacing-12);
        padding-bottom: var(--spacing-10);
    }
    
    .footer-content {
        grid-template-columns: 1fr;
        gap: var(--spacing-10);
        text-align: center;
    }
    
    .footer-section h4 {
        display: inline-block;
        width: 100%;
        text-align: center;
    }
    
    .footer-contact-info p {
        justify-content: center;
    }
    
    .social-links {
        justify-content: center;
    }
    
    /* Notification Mobile */
    .notification {
        right: var(--spacing-2);
        left: var(--spacing-2);
        min-width: auto;
    }
    
    /* Video Intro Section Mobile */
    .video-intro-section {
        padding: var(--spacing-8) 0;
    }
    
    .video-intro-text {
        font-size: var(--font-size-base);
        padding: 0 var(--spacing-4);
        margin-bottom: var(--spacing-6);
    }
    
    .video-intro-wrapper {
        padding: 0 var(--spacing-4);
    }
}

/* Tablet-specific styles */
@media (min-width: 768px) and (max-width: 991px) {
    .hero-content h1 {
        font-size: var(--font-size-4xl);
    }
    
    .features-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .section-content {
        grid-template-columns: 1fr 1fr;
    }
}

/* High DPI displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .hero-placeholder,
    .image-placeholder {
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
    }
}

/* Print styles — sem !important: este ficheiro carrega por último e vence por ordem em @media print */
@media print {
    .navbar,
    .nav-toggle,
    .hero-buttons,
    .btn,
    .notification,
    .footer {
        display: none;
    }
    
    .main-content {
        margin-top: 0;
    }
    
    .page {
        display: block;
    }
    
    body {
        background: var(--white);
        color: var(--black);
    }
    
    .hero-section {
        background: var(--white);
        color: var(--black);
    }
    
    .page-header {
        background: var(--white);
        color: var(--black);
    }
}

/* Accessibility improvements */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms;
        animation-iteration-count: 1;
        transition-duration: 0.01ms;
    }
    
    .loading-spinner {
        animation: none;
    }
}

/* Landscape orientation adjustments */
@media (orientation: landscape) and (max-height: 500px) {
    .hero-section {
        padding: var(--spacing-8) 0;
        min-height: auto;
    }
    
    .hero-content h1 {
        font-size: var(--font-size-3xl);
    }
    
    .hero-content p {
        font-size: var(--font-size-lg);
        margin-bottom: var(--spacing-4);
    }
    
    .hero-buttons {
        margin-bottom: var(--spacing-4);
    }
    
    .page-header {
        padding: var(--spacing-8) 0;
    }
    
    .page-content {
        padding: var(--spacing-8) 0;
    }
}

/* Very small screens */
@media (max-width: 320px) {
    .container {
        padding: 0 var(--spacing-2);
    }
    
    .hero-content h1 {
        font-size: var(--font-size-2xl);
    }
    
    .hero-content p {
        font-size: var(--font-size-base);
    }
    
    .btn {
        padding: calc(var(--btn-padding-y) - 0.0625rem) calc(var(--btn-padding-x) - 0.25rem);
        font-size: var(--font-size-xs);
    }
    
    .feature-card {
        padding: var(--spacing-4);
    }
    
    .feature-card i {
        font-size: var(--font-size-3xl);
    }
    
    .feature-card h3 {
        font-size: var(--font-size-lg);
    }
}

/* Large screens optimization */
@media (min-width: 1400px) {
    .container {
        max-width: 1320px;
    }
    
    .hero-content h1 {
        font-size: 4rem;
    }
    
    .hero-content p {
        font-size: var(--font-size-2xl);
    }
    
    .features-section h2 {
        font-size: 3.5rem;
    }
    
    .page-header h1 {
        font-size: 3.5rem;
    }
}

/* Final CTA Section Responsive */
@media (max-width: 768px) {
    .final-cta-section {
        padding: var(--spacing-16) var(--spacing-4);
    }
    
    .final-cta-content h2 {
        font-size: var(--font-size-2xl);
        margin-bottom: var(--spacing-8);
    }
    
    .final-cta-button .btn-large {
        padding: var(--spacing-4) var(--spacing-8);
        font-size: var(--font-size-lg);
        width: 100%;
        justify-content: center;
    }
}