/* ==============================================
   RESPONSIVE.CSS - Media Queries e Mobile
   Botanica Veneta - Tuttifiori
   ============================================== */

/* ==============================================
   BREAKPOINTS REFERENCE:
   - Mobile: 320px - 767px
   - Tablet: 768px - 1023px  
   - Desktop: 1024px+
   - Large: 1440px+
   ============================================== */

/* ==============================================
   TABLET E MOBILE (max 1023px)
   ============================================== */

@media (max-width: 1023px) {
    /* Container adjustments */
    .container {
        padding: 0 var(--space-md);
    }
    
    /* Grid adjustments */
    .grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .business-cards {
        grid-template-columns: 1fr;
    }
    
    /* Gallery columns */
    .gallery-4col {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ==============================================
   MOBILE (max 768px) - BREAKPOINT PRINCIPALE
   ============================================== */

@media (max-width: 768px) {
    
    /* ===== VARIABILI MOBILE ===== */
    :root {
        /* Font sizes ridotti */
        --text-4xl: 36px;
        --text-3xl: 28px;
        --text-2xl: 24px;
        --text-xl: 20px;
        
        /* Spacing ridotto */
        --space-3xl: 64px;
        --space-2xl: 48px;
    }
    
    /* ===== LAYOUT BASE ===== */
    body {
        font-size: 16px;
    }
    
    /* ===== HEADER MOBILE ===== */
    .header-container {
        padding: var(--space-md) var(--space-md);
    }
    
    .logo-wrapper {
        height: 48px;
    }
    
    /* Navigation Desktop nascosta */
    .nav {
        display: none;
    }
    
    /* Menu Toggle visibile */
    .menu-toggle {
        display: flex;
        z-index: 1001;
    }
    
    /* Mobile Navigation Overlay */
    .nav-mobile {
        display: block;
        position: fixed;
        top: 80px;
        left: 0;
        right: 0;
        bottom: 0;
        background: var(--crema);
        z-index: 999;
        padding: var(--space-xl) var(--space-md);
        transform: translateX(-100%);
        transition: transform 0.3s ease;
        overflow-y: auto;
    }
    
    .nav-mobile.active {
        transform: translateX(0);
    }
    
    .nav-mobile .nav-link {
        display: block;
        padding: var(--space-md) 0;
        font-size: var(--text-base);
        border-bottom: 1px solid var(--perla);
        color: var(--text-dark);
    }
    
    .nav-mobile .nav-link:last-child {
        border-bottom: none;
    }
    
    .nav-mobile .nav-link:active {
        background: var(--sabbia-chiara);
    }
    
    /* ===== HERO MOBILE ===== */
    .hero {
        margin-top: 80px;
        padding: var(--space-2xl) 0;
    }
    
    .hero-container {
        grid-template-columns: 1fr;
        gap: var(--space-2xl);
    }
    
    .hero-content h1 {
        font-size: var(--text-3xl);
    }
    
    .hero-content p {
        max-width: 100%;
    }
    
    .hero-visual {
        height: 300px;
        order: -1; /* Immagine sopra su mobile */
    }
    
    .hero-buttons {
        flex-direction: column;
        align-items: stretch;
    }
    
    .hero-buttons .btn {
        width: 100%;
        justify-content: center;
    }
    
    /* ===== SECTIONS MOBILE ===== */
    .section {
        padding: var(--space-2xl) 0;
    }
    
    .section-header {
        margin-bottom: var(--space-2xl);
    }
    
    .section-header h2 {
        font-size: var(--text-2xl);
    }
    
    .page-hero {
        padding: var(--space-xl) 0;
    }
    
    .page-content {
        margin-top: 80px;
    }
    
    /* ===== GRIDS MOBILE ===== */
    .grid,
    .grid-2,
    .grid-3,
    .grid-4 {
        grid-template-columns: 1fr;
        gap: var(--space-lg);
    }
    
    .plants-grid {
        grid-template-columns: 1fr;
        gap: var(--space-lg);
    }
    
    .features-grid {
        grid-template-columns: 1fr;
        gap: var(--space-lg);
    }
    
    .business-cards {
        grid-template-columns: 1fr;
        gap: var(--space-lg);
    }
    
    .about-grid {
        grid-template-columns: 1fr;
        gap: var(--space-2xl);
    }
    
    .about-visual {
        height: 300px;
    }
    
    .stats-row {
        grid-template-columns: 1fr;
        gap: var(--space-md);
    }
    
    .split-layout {
        grid-template-columns: 1fr;
        gap: var(--space-xl);
    }
    
    .sidebar-layout {
        grid-template-columns: 1fr;
    }
    
    .sidebar {
        position: relative;
        top: auto;
        margin-bottom: var(--space-xl);
    }
    
    /* ===== CARDS MOBILE ===== */
    .cards-grid-2,
    .cards-grid-3,
    .cards-grid-4 {
        grid-template-columns: 1fr;
    }
    
    .cards-list .card {
        grid-template-columns: 1fr;
    }
    
    .cards-list .card-image {
        height: 200px;
    }
    
    /* Plant Card Mobile */
    .plant-image,
    .plant-image-placeholder {
        height: 200px;
    }
    
    .plant-info {
        padding: var(--space-lg);
    }
    
    /* Business Card Mobile */
    .business-card {
        padding: var(--space-xl);
    }
    
    /* Info Card Mobile */
    .info-card {
        padding: var(--space-lg);
    }
    
    /* ===== BUTTONS MOBILE ===== */
    .btn {
        padding: 14px 24px;
        font-size: var(--text-base);
    }
    
    .btn-group {
        flex-direction: column;
        width: 100%;
    }
    
    .btn-group .btn {
        width: 100%;
    }
    
    /* ===== FORMS MOBILE ===== */
    .form-row {
        grid-template-columns: 1fr;
    }
    
    .form-input,
    .form-textarea,
    .form-select {
        font-size: 16px; /* Previene zoom su iOS */
    }
    
    /* ===== TABLES MOBILE ===== */
    .table-container {
        margin: 0 calc(var(--space-md) * -1);
        padding: 0 var(--space-md);
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    .table {
        min-width: 600px;
    }
    
    .table-comparison {
        min-width: 700px;
    }
    
    /* Table scroll indicator */
    .table-container::after {
        content: '→';
        position: absolute;
        right: var(--space-md);
        top: 50%;
        transform: translateY(-50%);
        background: var(--verde-botanico);
        color: white;
        width: 32px;
        height: 32px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: var(--shadow-md);
        pointer-events: none;
        opacity: 0.8;
    }
    
    .table-container::-webkit-scrollbar {
        height: 4px;
    }
    
    .table-container::-webkit-scrollbar-track {
        background: var(--perla);
    }
    
    .table-container::-webkit-scrollbar-thumb {
        background: var(--verde-botanico);
        border-radius: 2px;
    }
    
    /* ===== GALLERY MOBILE ===== */
    .gallery {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-sm);
    }
    
    .gallery-2col,
    .gallery-3col,
    .gallery-4col {
        grid-template-columns: repeat(2, 1fr);
    }
    
    /* ===== MODAL MOBILE ===== */
    .modal {
        padding: 0;
    }
    
    .modal-dialog {
        max-width: 100%;
        max-height: 100vh;
        border-radius: 0;
        margin: 0;
    }
    
    .modal-header {
        padding: var(--space-md);
        position: sticky;
        top: 0;
        background: white;
        z-index: 10;
    }
    
    .modal-body {
        padding: var(--space-md);
        max-height: calc(100vh - 120px);
    }
    
    .modal-footer {
        padding: var(--space-md);
        position: sticky;
        bottom: 0;
        background: white;
        flex-direction: column;
    }
    
    .modal-footer .btn {
        width: 100%;
    }
    
    /* ===== LIGHTBOX MOBILE ===== */
    .lightbox {
        padding: 0;
    }
    
    .lightbox-image {
        max-width: 100%;
        max-height: 100vh;
    }
    
    .lightbox-close {
        top: var(--space-md);
        right: var(--space-md);
        width: 48px;
        height: 48px;
    }
    
    /* ===== ACCORDION MOBILE ===== */
    .accordion-header {
        padding: var(--space-md);
    }
    
    .accordion-body {
        padding: 0 var(--space-md) var(--space-md);
    }
    
    .collapsible summary {
        padding: var(--space-md);
    }
    
    .collapsible-content {
        padding: 0 var(--space-md) var(--space-md);
    }
    
    /* ===== TABS MOBILE ===== */
    .tabs-list {
        gap: var(--space-lg);
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 2px;
    }
    
    .tab-item {
        white-space: nowrap;
        padding: var(--space-sm) 0;
    }
    
    /* ===== FOOTER MOBILE ===== */
    .footer {
        padding: var(--space-2xl) 0 var(--space-xl);
    }
    
    .footer-content {
        grid-template-columns: 1fr;
        gap: var(--space-xl);
    }
    
    .footer-section {
        text-align: center;
    }
    
    .footer-section:first-child {
        border-bottom: 1px solid rgba(212, 165, 116, 0.2);
        padding-bottom: var(--space-xl);
    }
    
    .footer-bottom {
        padding-top: var(--space-lg);
        font-size: 11px;
    }
    
    /* ===== NAVIGATION COMPONENTS MOBILE ===== */
    .breadcrumbs {
        font-size: var(--text-xs);
        overflow-x: auto;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
    }
    
    .pagination {
        margin: var(--space-lg) 0;
    }
    
    .pagination-item {
        padding: 8px 10px;
        font-size: var(--text-xs);
    }
    
    .pagination-dots {
        padding: 0 var(--space-xs);
    }
    
    /* ===== UTILITIES MOBILE ===== */
    .hidden-mobile {
        display: none !important;
    }
    
    .visible-mobile {
        display: block !important;
    }
    
    /* Spacing mobile */
    .container {
        padding: 0 var(--space-md);
    }
    
    /* Typography mobile */
    h1 {
        font-size: var(--text-3xl);
        margin-bottom: var(--space-md);
    }
    
    h2 {
        font-size: 24px;
        margin-bottom: var(--space-md);
    }
    
    h3 {
        font-size: 20px;
    }
    
    /* ===== TIMELINE MOBILE ===== */
    .timeline {
        padding-left: var(--space-lg);
    }
    
    .timeline-marker {
        left: calc(var(--space-lg) * -1 - 6px);
    }
    
    .timeline-item.highlight .timeline-marker {
        left: calc(var(--space-lg) * -1 - 8px);
    }
    
    /* ===== ANNOUNCEMENT BAR MOBILE ===== */
    .announcement-bar {
        padding: var(--space-sm) var(--space-md);
        font-size: var(--text-xs);
    }
    
    .announcement-close {
        width: 24px;
        height: 24px;
        right: var(--space-sm);
    }
    
    /* ===== CTA CARD MOBILE ===== */
    .cta-card {
        padding: var(--space-xl);
        border-radius: var(--radius-medium);
    }
    
    .cta-card h2 {
        font-size: var(--text-xl);
    }
}

/* ==============================================
   SMALL MOBILE (max 480px)
   ============================================== */

@media (max-width: 480px) {
    /* Gallery 1 colonna su mobile piccoli */
    .gallery {
        grid-template-columns: 1fr;
    }
    
    .gallery-2col,
    .gallery-3col,
    .gallery-4col {
        grid-template-columns: 1fr;
    }
    
    /* Cards ancora più compatte */
    .plant-info {
        padding: var(--space-md);
    }
    
    .business-card {
        padding: var(--space-lg);
    }
    
    /* Font ancora più piccoli */
    h1 {
        font-size: 28px;
    }
    
    h2 {
        font-size: 22px;
    }
}

/* ==============================================
   EXTRA SMALL MOBILE (max 375px)
   ============================================== */

@media (max-width: 375px) {
    /* Container padding minimo */
    .container {
        padding: 0 var(--space-sm);
    }
    
    /* Buttons full width sempre */
    .btn {
        width: 100%;
        padding: 12px 20px;
    }
    
    /* Modal full screen */
    .modal-dialog {
        width: 100vw;
        height: 100vh;
    }
}

/* ==============================================
   PRINT STYLES
   ============================================== */

@media print {
    /* Rimuovi elementi non necessari */
    .header,
    .footer,
    .nav,
    .menu-toggle,
    .announcement-bar,
    .modal,
    .lightbox,
    .btn,
    .pagination {
        display: none !important;
    }
    
    /* Reset backgrounds */
    body {
        background: white;
        color: black;
    }
    
    .section {
        background: white !important;
        page-break-inside: avoid;
    }
    
    /* Typography per stampa */
    h1, h2, h3 {
        color: black;
        page-break-after: avoid;
    }
    
    p {
        color: black;
    }
    
    /* Links visibili */
    a[href^="http"]:after {
        content: " (" attr(href) ")";
        font-size: 0.8em;
        color: #666;
    }
    
    /* Tabelle */
    .table {
        border: 1px solid #ddd;
    }
    
    .table th,
    .table td {
        border: 1px solid #ddd;
        padding: 8px;
    }
    
    /* Cards */
    .card {
        border: 1px solid #ddd;
        box-shadow: none !important;
        page-break-inside: avoid;
    }
}

/* ==============================================
   HOVER STATES (solo per dispositivi con mouse)
   ============================================== */

@media (hover: hover) and (pointer: fine) {
    /* Mantieni hover effects solo su desktop */
    .btn:hover {
        transform: translateY(-2px);
    }
    
    .card-hover:hover {
        transform: translateY(-4px);
    }
    
    .nav-link:hover::after {
        width: 100%;
    }
}

/* ==============================================
   TOUCH DEVICES OPTIMIZATION
   ============================================== */

@media (pointer: coarse) {
    /* Aumenta aree touch */
    .btn {
        min-height: 44px;
    }
    
    .nav-link {
        padding: var(--space-md) 0;
    }
    
    .form-input,
    .form-select,
    .form-textarea {
        min-height: 44px;
    }
    
    /* Rimuovi hover states su touch */
    .btn:hover,
    .card:hover,
    .plant-card:hover {
        transform: none;
    }
    
    /* Active states per feedback */
    .btn:active {
        transform: scale(0.98);
    }
    
    .card:active {
        transform: scale(0.99);
    }
}

/* ==============================================
   HIGH DPI SCREENS
   ============================================== */

@media (-webkit-min-device-pixel-ratio: 2),
       (min-resolution: 192dpi) {
    /* Bordi più sottili su schermi retina */
    .card,
    .table td,
    .accordion-item {
        border-width: 0.5px;
    }
}

/* ==============================================
   REDUCED MOTION
   ============================================== */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ==============================================
   DARK MODE PREP (per futuro)
   ============================================== */

@media (prefers-color-scheme: dark) {
    /* Preparato per future implementazioni dark mode */
    /* 
    :root {
        --crema: #1a1a1a;
        --text-dark: #f0f0f0;
        --verde-botanico: #4a7c59;
    }
    */
}

/* ==============================================
   LANDSCAPE MOBILE
   ============================================== */

@media (max-width: 768px) and (orientation: landscape) {
    .hero {
        padding: var(--space-xl) 0;
    }
    
    .hero-visual {
        height: 200px;
    }
    
    .modal-body {
        max-height: calc(100vh - 100px);
    }
    
    /* Riduci altezze su landscape mobile */
    .plant-image,
    .plant-image-placeholder {
        height: 150px;
    }
}

/* ==============================================
   CONTAINER QUERIES PREP (futuro CSS)
   ============================================== */

/* Preparato per quando container queries saranno più supportate
@container (max-width: 400px) {
    .card {
        padding: var(--space-md);
    }
}
*/