/* ============================================
   INFOCER - Responsive Styles
   Media queries per tablet e mobile
   ============================================ */

/* ============================================
   Tablet (max-width: 1024px)
   ============================================ */

@media (max-width: 1024px) {
    .slide-content {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .slide-text h2 {
        font-size: 2rem;
    }

    .hero-slider {
        height: auto;
        min-height: 500px;
    }
}

/* ============================================
   Mobile (max-width: 768px)
   ============================================ */

@media (max-width: 768px) {
    html {
        scroll-padding-top: 100px;
    }

    /* Header */
    .header-top {
        flex-direction: column;
        align-items: flex-start;
        padding: 1rem;
    }

    .logo img {
        height: 60px;
    }

    .mobile-toggle {
        display: block;
        position: absolute;
        top: 1rem;
        right: 1rem;
    }

    /* Navigation */
    nav {
        display: none;
    }

    nav.active {
        display: block;
    }

    .nav-container ul {
        flex-direction: column;
        gap: 0;
    }

    nav ul ul {
        position: static;
        display: none !important;
        background: rgba(0,0,0,0.2);
    }

    nav li.active > ul {
        display: flex !important;
    }

    /* Slider */
    .slide-text h2 {
        font-size: 1.5rem;
    }

    .slide-text p {
        font-size: 1rem;
    }

    /* Hero sections */

    .hero {
        padding: 2rem 1rem;
    }

    .hero h1 {
        font-size: 1.8rem;
    }

    .hero p {
        font-size: 1rem;
    }

    /* Sections */
    section {
        padding: 1rem 1rem;
    }

    .section-title {
        font-size: 2rem;
    }

    .section-subtitle {
        font-size: 1.5rem;
    }

    /* Portfolio */
    .portfolio-grid {
        grid-template-columns: 1fr;
    }

    /* Products */
    .product-section,
    .product-section.reverse {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .product-section.reverse .product-image,
    .product-section.reverse .product-content {
        order: unset;
    }

    /* Quick nav */
    .quick-nav {
        position: static;
    }
}
