/**
 * Fichas de Estudo - Responsive Styles
 * Desenvolvido por B20 Conteúdo Digital
 * https://www.b20.com.br
 */

/* ===== Mobile First Base (320px+) ===== */
/* Estilos base já definidos em style.css */

/* ===== Small Mobile (375px+) ===== */
@media (min-width: 375px) {
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .session-stats {
        gap: calc(var(--spacing-unit) * 6);
    }
}

/* ===== Large Mobile (425px+) ===== */
@media (min-width: 425px) {
    .action-buttons {
        grid-template-columns: repeat(3, 1fr);
    }

    .difficulty-buttons {
        gap: calc(var(--spacing-unit) * 3);
    }

    .btn-difficulty {
        max-width: 180px;
    }
}

/* ===== Tablet (768px+) ===== */
@media (min-width: 768px) {

    /* Body Adjustments */
    body {
        padding-bottom: 0;
    }

    /* Container */
    .container {
        padding: calc(var(--spacing-unit) * 2) calc(var(--spacing-unit) * 3);
        max-width: 900px;
    }

    /* Header - Show Desktop Nav */
    .desktop-nav {
        display: flex;
        gap: calc(var(--spacing-unit) * 1);
    }

    .desktop-nav .nav-link {
        display: flex;
        align-items: center;
        gap: calc(var(--spacing-unit) * 1);
        padding: calc(var(--spacing-unit) * 1) calc(var(--spacing-unit) * 2);
        border-radius: var(--border-radius-sm);
        color: var(--text-color);
        text-decoration: none;
        transition: var(--transition-fast);
        font-size: 0.9rem;
        font-weight: 500;
    }

    .desktop-nav .nav-link:hover,
    .desktop-nav .nav-link.active {
        background: var(--primary-color);
        color: white;
    }

    .desktop-nav .nav-link i {
        font-size: 1rem;
    }

    /* Hide Bottom Navigation */
    .bottom-nav {
        display: none !important;
    }

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

    /* Cards Grid */
    .cards-grid {
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    }

    /* Study Options */
    .study-options {
        grid-template-columns: repeat(3, 1fr);
    }

    /* Library */
    .library-categories {
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    }

    /* Modal */
    .modal-content {
        max-width: 600px;
    }

    .modal-large {
        max-width: 800px;
    }

    /* Flashcard */
    .flashcard-inner {
        min-height: 450px;
    }

    .flashcard-front,
    .flashcard-back {
        min-height: 450px;
    }

    /* FAQ */
    .faq-section {
        padding: calc(var(--spacing-unit) * 8) calc(var(--spacing-unit) * 3);
    }
}

/* ===== Desktop (1024px+) ===== */
@media (min-width: 1024px) {

    /* Container */
    .container {
        max-width: 960px;
        padding: calc(var(--spacing-unit) * 4);
    }

    /* Header */
    .header-logo h1 {
        font-size: 1.5rem;
    }

    .desktop-nav {
        gap: calc(var(--spacing-unit) * 1.5);
    }

    .desktop-nav .nav-link {
        padding: calc(var(--spacing-unit) * 1.5) calc(var(--spacing-unit) * 2.5);
        font-size: 1rem;
    }

    /* Stats Grid */
    .stats-grid {
        gap: calc(var(--spacing-unit) * 3);
    }

    .stat-card {
        padding: calc(var(--spacing-unit) * 3);
    }

    /* Cards Grid */
    .cards-grid {
        grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
        gap: calc(var(--spacing-unit) * 3);
    }

    /* Flashcard */
    .flashcard-inner {
        min-height: 500px;
    }

    .flashcard-front,
    .flashcard-back {
        min-height: 500px;
        padding: calc(var(--spacing-unit) * 5);
    }

    .card-content {
        font-size: 1.5rem;
    }

    /* Study Options */
    .study-options {
        gap: calc(var(--spacing-unit) * 3);
    }

    .option-card {
        padding: calc(var(--spacing-unit) * 4);
    }

    /* Library */
    .library-categories {
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
        gap: calc(var(--spacing-unit) * 3);
    }

    /* Stats Overview */
    .stats-overview {
        gap: calc(var(--spacing-unit) * 4);
    }

    /* Hover Effects Enhancement */
    .card-item:hover {
        transform: translateY(-6px);
    }

    .action-btn:hover {
        transform: translateY(-6px);
    }

    .library-card:hover {
        transform: translateY(-6px);
    }
}

/* ===== Large Desktop (1440px+) ===== */
@media (min-width: 1440px) {

    /* Container */
    .container {
        max-width: 1200px;
    }

    /* Typography */
    html {
        font-size: 15px;
        /* Moderated font size for large screens */
    }

    /* Header */
    .app-header {
        padding: 0 calc(var(--spacing-unit) * 4);
    }

    /* Cards Grid */
    .cards-grid {
        grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    }

    /* Study Mode */
    .study-mode {
        max-width: 700px;
    }

    /* Library */
    .library-categories {
        grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    }
}

/* ===== Extra Large Desktop (1920px+) ===== */
@media (min-width: 1920px) {
    .container {
        max-width: 1400px;
    }

    .cards-grid {
        grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
    }
}

/* ===== Landscape Mobile ===== */
@media (max-height: 500px) and (orientation: landscape) {
    .welcome-banner {
        padding: calc(var(--spacing-unit) * 2);
    }

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

    .flashcard-inner,
    .flashcard-front,
    .flashcard-back {
        min-height: 300px;
    }

    .study-complete {
        padding: calc(var(--spacing-unit) * 3) calc(var(--spacing-unit) * 2);
    }

    .study-complete i {
        font-size: 3rem;
    }
}

/* ===== Print Styles ===== */
@media print {

    .app-header,
    .bottom-nav,
    .header-actions,
    .btn,
    .modal,
    .toast,
    .faq-section,
    .app-footer {
        display: none !important;
    }

    body {
        padding: 0;
        background: white;
        color: black;
    }

    .section {
        display: block !important;
        page-break-after: always;
    }

    .card-item {
        page-break-inside: avoid;
    }
}

/* ===== Reduced Motion ===== */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ===== High Contrast Mode ===== */
@media (prefers-contrast: high) {
    :root {
        --border-color: #000000;
        --text-muted: #000000;
    }

    [data-theme="dark"] {
        --border-color: #FFFFFF;
        --text-muted: #FFFFFF;
    }

    .btn {
        border: 2px solid currentColor;
    }
}

/* ===== Touch Device Optimizations ===== */
@media (hover: none) and (pointer: coarse) {

    /* Increase touch targets */
    .btn,
    .btn-icon,
    .nav-item,
    .faq-question {
        min-height: 48px;
        min-width: 48px;
    }

    /* Remove hover effects */
    .card-item:hover,
    .action-btn:hover,
    .library-card:hover {
        transform: none;
    }

    /* Simplify shadows for performance */
    .card-item,
    .stat-card,
    .action-btn {
        box-shadow: var(--shadow-sm);
    }
}

/* ===== Safe Area Insets (iPhone X+) ===== */
@supports (padding: env(safe-area-inset-top)) {
    body {
        padding-top: max(60px, env(safe-area-inset-top));
    }

    .app-header {
        padding-top: env(safe-area-inset-top);
        height: calc(60px + env(safe-area-inset-top));
    }

    .bottom-nav {
        padding-bottom: env(safe-area-inset-bottom);
        height: calc(65px + env(safe-area-inset-bottom));
    }
}