/**
 * DigiCulture Lab - Responsive Styles
 * Media queries per layout responsivo
 */

/* ========================================
   DESKTOP LARGE (1280px+)
   ======================================== */
@media (min-width: 1280px) {
    .main-content {
        padding: var(--space-8);
        padding-top: calc(var(--navbar-height) + var(--space-8));
    }

    .container-wide {
        max-width: 1400px;
    }
}

/* ========================================
   DESKTOP (1024px - 1279px)
   ======================================== */
@media (max-width: 1279px) {
    .navbar-nav {
        gap: 0;
    }

    .nav-link {
        padding: var(--space-2);
    }

    .nav-link span:not(.nav-icon) {
        display: none;
    }
}

/* ========================================
   TABLET (768px - 1023px)
   ======================================== */
@media (max-width: 1023px) {
    /* Navbar diventa sidebar mobile */
    .menu-toggle {
        display: flex;
    }

    .navbar-nav {
        position: fixed;
        top: var(--navbar-height);
        left: 0;
        bottom: 0;
        width: var(--sidebar-width);
        flex-direction: column;
        align-items: stretch;
        padding: var(--space-4);
        background-color: var(--bg-elevated);
        border-right: 1px solid var(--border);
        transform: translateX(-100%);
        transition: transform var(--transition);
        z-index: var(--z-fixed);
        overflow-y: auto;
    }

    .navbar-nav.active {
        transform: translateX(0);
    }

    .nav-link {
        padding: var(--space-3);
        justify-content: flex-start;
    }

    .nav-link span:not(.nav-icon) {
        display: inline;
    }

    .nav-divider {
        width: 100%;
        height: 1px;
        margin: var(--space-3) 0;
    }

    .sidebar-overlay {
        display: block;
    }

    .sidebar-overlay.active {
        display: block;
    }

    /* Chat window si adatta */
    .chat-window {
        left: var(--space-4);
        right: var(--space-4);
        width: auto;
        bottom: calc(var(--space-4) + 70px);
    }

    /* FAB e scroll-top */
    .fab {
        bottom: var(--space-4);
        right: var(--space-4);
    }

    .scroll-top {
        right: calc(var(--space-4) + 66px);
        bottom: var(--space-4);
    }

    /* Grid layouts */
    .grid-3 {
        grid-template-columns: repeat(2, 1fr);
    }

    .grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ========================================
   MOBILE (480px - 767px)
   ======================================== */
@media (max-width: 767px) {
    :root {
        --navbar-height: 56px;
    }

    .main-content {
        padding: var(--space-4);
        padding-top: calc(var(--navbar-height) + var(--space-4));
    }

    /* Logo text nascosto */
    .logo-text {
        display: none;
    }

    /* Hero section */
    .hero {
        padding: var(--space-6);
    }

    .hero h1 {
        font-size: var(--text-2xl);
    }

    .hero .subtitle {
        font-size: var(--text-base);
    }

    .course-badges {
        flex-wrap: wrap;
        justify-content: center;
    }

    /* Cards */
    .card {
        padding: var(--space-4);
    }

    .module-icon {
        font-size: 36px;
    }

    /* Stats grid */
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Grids diventano single column */
    .grid-2,
    .grid-3,
    .grid-4 {
        grid-template-columns: 1fr;
    }

    /* Lesson cards */
    .lesson-card {
        flex-direction: column;
        align-items: flex-start;
    }

    .lesson-number {
        width: 40px;
        height: 40px;
        font-size: var(--text-lg);
    }

    /* Modal */
    .modal {
        max-width: 100%;
        max-height: 100%;
        border-radius: 0;
    }

    .modal-lg,
    .modal-xl {
        max-width: 100%;
    }

    /* Toast */
    .toast-container {
        left: var(--space-4);
        right: var(--space-4);
        transform: none;
    }

    .toast {
        min-width: auto;
        width: 100%;
    }

    /* Tabs scrollabili */
    .tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .tabs::-webkit-scrollbar {
        display: none;
    }

    .tab {
        flex-shrink: 0;
    }

    /* Buttons */
    .btn-lg {
        padding: var(--space-3) var(--space-5);
        font-size: var(--text-sm);
    }

    /* Form elements */
    .form-input,
    .form-textarea,
    .form-select {
        padding: var(--space-3);
    }

    /* Typography */
    h1 { font-size: var(--text-2xl); }
    h2 { font-size: var(--text-xl); }
    h3 { font-size: var(--text-lg); }

    /* Progress circle più piccolo */
    .progress-circle-container {
        transform: scale(0.8);
    }

    /* API Banner */
    .api-banner {
        flex-wrap: wrap;
        gap: var(--space-3);
    }

    .api-banner-content {
        flex: 1;
        min-width: 200px;
    }

    .api-banner-action {
        flex: 1;
    }
}

/* ========================================
   MOBILE SMALL (< 480px)
   ======================================== */
@media (max-width: 479px) {
    :root {
        --space-4: 0.875rem;
        --space-6: 1.25rem;
    }

    .main-content {
        padding: var(--space-3);
        padding-top: calc(var(--navbar-height) + var(--space-3));
    }

    .navbar {
        padding: 0 var(--space-3);
    }

    /* Hero compatto */
    .hero {
        padding: var(--space-4);
    }

    .hero h1 {
        font-size: var(--text-xl);
    }

    .course-badges .badge {
        font-size: 10px;
        padding: var(--space-1) var(--space-2);
    }

    /* Cards ancora più compatte */
    .card {
        padding: var(--space-3);
    }

    .card-header {
        margin-bottom: var(--space-3);
    }

    .card-footer {
        margin-top: var(--space-3);
        padding-top: var(--space-3);
    }

    /* Stats 1 colonna */
    .stats-grid {
        grid-template-columns: 1fr;
    }

    .stat-card {
        padding: var(--space-3);
    }

    .stat-value {
        font-size: var(--text-2xl);
    }

    /* Chat window full screen */
    .chat-window {
        position: fixed;
        inset: 0;
        border-radius: 0;
        max-height: 100%;
        z-index: var(--z-modal);
    }

    .chat-messages {
        max-height: calc(100vh - 200px);
    }

    /* Nascondere FAB quando chat aperta */
    .chat-window:not([style*="display: none"]) ~ .fab {
        display: none;
    }

    /* Buttons più piccoli */
    .btn {
        padding: var(--space-2) var(--space-4);
    }

    .icon-btn {
        width: 32px;
        height: 32px;
    }

    /* Modal footer stack */
    .modal-footer {
        flex-direction: column;
    }

    .modal-footer .btn {
        width: 100%;
    }
}

/* ========================================
   LANDSCAPE MOBILE
   ======================================== */
@media (max-height: 500px) and (orientation: landscape) {
    .hero {
        padding: var(--space-4);
    }

    .chat-window {
        max-height: 90vh;
    }

    .chat-messages {
        max-height: 200px;
    }

    .modal-body {
        max-height: 50vh;
    }
}

/* ========================================
   UTILITY RESPONSIVE CLASSES
   ======================================== */
/* Hide on mobile */
@media (max-width: 767px) {
    .hide-mobile { display: none !important; }
}

/* Hide on tablet */
@media (min-width: 768px) and (max-width: 1023px) {
    .hide-tablet { display: none !important; }
}

/* Hide on desktop */
@media (min-width: 1024px) {
    .hide-desktop { display: none !important; }
}

/* Show only on mobile */
@media (min-width: 768px) {
    .show-mobile-only { display: none !important; }
}

/* Show only on tablet */
@media (max-width: 767px), (min-width: 1024px) {
    .show-tablet-only { display: none !important; }
}

/* Show only on desktop */
@media (max-width: 1023px) {
    .show-desktop-only { display: none !important; }
}

/* ========================================
   GRID RESPONSIVE
   ======================================== */
.grid-responsive {
    display: grid;
    gap: var(--space-6);
}

@media (min-width: 640px) {
    .grid-responsive { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
    .grid-responsive { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 1280px) {
    .grid-responsive { grid-template-columns: repeat(4, 1fr); }
}

/* Module cards grid */
.modules-grid {
    display: grid;
    gap: var(--space-6);
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

/* Lessons grid */
.lessons-grid {
    display: grid;
    gap: var(--space-4);
}

@media (min-width: 768px) {
    .lessons-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .lessons-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ========================================
   TOUCH DEVICES
   ======================================== */
@media (hover: none) and (pointer: coarse) {
    /* Rimuovi hover effects su touch */
    .card-clickable:hover {
        transform: none;
    }

    .btn-primary:hover:not(:disabled) {
        transform: none;
    }

    .nav-link:hover {
        background-color: transparent;
    }

    /* Aumenta tap targets */
    .nav-link {
        min-height: 44px;
    }

    .icon-btn {
        min-width: 44px;
        min-height: 44px;
    }

    .checkbox-input,
    .radio-input {
        width: 24px;
        height: 24px;
    }

    /* Rimuovi tooltip su mobile */
    .fab-tooltip {
        display: none;
    }
}

/* ========================================
   SAFE AREAS (iPhone notch, etc.)
   ======================================== */
@supports (padding: max(0px)) {
    .navbar {
        padding-left: max(var(--space-4), env(safe-area-inset-left));
        padding-right: max(var(--space-4), env(safe-area-inset-right));
    }

    .main-content {
        padding-left: max(var(--space-6), env(safe-area-inset-left));
        padding-right: max(var(--space-6), env(safe-area-inset-right));
        padding-bottom: max(var(--space-6), env(safe-area-inset-bottom));
    }

    .fab {
        right: max(var(--space-6), env(safe-area-inset-right));
        bottom: max(var(--space-6), env(safe-area-inset-bottom));
    }

    .toast-container {
        bottom: max(var(--space-6), env(safe-area-inset-bottom));
    }
}