/* Responsive Design for Crypto Education Platform */

/* Tablet Styles */
@media (max-width: 1024px) {
    .header-container {
        padding: 0 var(--spacing-md);
    }
    
    .education-main {
        padding: var(--spacing-xl) var(--spacing-md);
    }
    
    .education-card {
        padding: var(--spacing-xl);
    }
    
    .card-title {
        font-size: 2rem;
    }
    
    .bitcoin-symbol {
        width: 60px;
        height: 60px;
        font-size: 36px;
    }
    
    .modules-container {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: var(--spacing-md);
    }
    
    .content-body {
        flex-direction: column;
    }
    
    .sections-sidebar {
        width: 100%;
        max-height: 200px;
        overflow-y: auto;
        border-right: none;
        border-bottom: 1px solid #333;
    }
    
    .sections-sidebar ul {
        display: flex;
        flex-wrap: wrap;
        gap: var(--spacing-sm);
    }
    
    .sections-sidebar li {
        margin-bottom: 0;
    }
    
    .modal-content {
        width: 95%;
        margin: var(--spacing-md);
    }
}

/* Mobile Styles */
@media (max-width: 768px) {
    .header-container {
        flex-direction: column;
        gap: var(--spacing-md);
        text-align: center;
    }
    
    .logo-section {
        justify-content: center;
    }
    
    .user-section {
        justify-content: center;
        width: 100%;
    }
    
    .education-main {
        padding: var(--spacing-lg) var(--spacing-sm);
    }
    
    .education-card {
        padding: var(--spacing-lg);
        margin-bottom: var(--spacing-lg);
    }
    
    .card-title {
        font-size: 1.75rem;
        line-height: 1.3;
    }
    
    .card-description {
        font-size: 1rem;
    }
    
    .bitcoin-symbol {
        width: 50px;
        height: 50px;
        font-size: 28px;
    }
    
    .action-buttons {
        width: 100%;
        max-width: none;
    }
    
    .primary-button,
    .secondary-button {
        padding: var(--spacing-md) var(--spacing-lg);
        font-size: 1rem;
    }
    
    .modules-container {
        grid-template-columns: 1fr;
        gap: var(--spacing-md);
    }
    
    .module-card {
        padding: var(--spacing-md);
    }
    
    .module-title {
        font-size: 1.125rem;
    }
    
    .grid-header h3 {
        font-size: 1.5rem;
    }
    
    .grid-header p {
        font-size: 1rem;
    }
    
    .content-header {
        padding: var(--spacing-md);
    }
    
    .module-info h2 {
        font-size: 1.5rem;
    }
    
    .section-content {
        padding: var(--spacing-md);
    }
    
    .sections-sidebar {
        padding: var(--spacing-md);
    }
    
    .sections-sidebar h4 {
        font-size: 1rem;
        margin-bottom: var(--spacing-sm);
    }
    
    .section-navigation {
        flex-direction: column;
        gap: var(--spacing-md);
    }
    
    .nav-button {
        width: 100%;
        padding: var(--spacing-md);
    }
    
    .modal-content {
        width: 95%;
        max-width: none;
        margin: var(--spacing-sm);
        max-height: 95vh;
    }
    
    .laboratory-content {
        width: 98%;
    }
    
    .modal-header,
    .modal-body,
    .modal-footer {
        padding: var(--spacing-md);
    }
    
    .footer-content {
        flex-direction: column;
        text-align: center;
        gap: var(--spacing-sm);
    }
    
    .footer-links {
        justify-content: center;
        flex-wrap: wrap;
    }
}

/* Small Mobile Styles */
@media (max-width: 480px) {
    .education-header h1 {
        font-size: 1.25rem;
    }
    
    .bitcoin-icon {
        width: 32px;
        height: 32px;
        font-size: 18px;
    }
    
    .card-title {
        font-size: 1.5rem;
    }
    
    .bitcoin-symbol {
        width: 40px;
        height: 40px;
        font-size: 24px;
    }
    
    .primary-button,
    .secondary-button {
        padding: var(--spacing-sm) var(--spacing-md);
        font-size: 0.875rem;
    }
    
    .module-header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-sm);
    }
    
    .module-number {
        width: 24px;
        height: 24px;
        font-size: 0.75rem;
    }
    
    .modal-header h3 {
        font-size: 1.25rem;
    }
}

/* Touch-Specific Styles */
@media (hover: none) and (pointer: coarse) {
    /* Touch devices - increase touch targets */
    .primary-button,
    .secondary-button,
    .nav-button {
        min-height: 44px;
        padding: var(--spacing-md) var(--spacing-lg);
    }
    
    .section-link {
        min-height: 44px;
        display: flex;
        align-items: center;
    }
    
    .module-card {
        padding: var(--spacing-lg);
    }
    
    .close-modal {
        min-width: 44px;
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .back-button {
        min-height: 44px;
        padding: var(--spacing-md) var(--spacing-lg);
    }
    
    /* Remove hover effects for touch devices */
    .module-card:hover,
    .primary-button:hover,
    .secondary-button:hover,
    .nav-button:hover,
    .section-link:hover,
    .back-button:hover,
    .logout-button:hover {
        transform: none;
        box-shadow: var(--shadow-md);
    }
}

/* High DPI Displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .bitcoin-icon,
    .bitcoin-symbol {
        /* Ensure crisp rendering on high DPI displays */
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
    }
}

/* Landscape Mobile */
@media (max-width: 768px) and (orientation: landscape) {
    .education-card {
        padding: var(--spacing-md);
    }
    
    .card-title {
        font-size: 1.5rem;
        margin-bottom: var(--spacing-md);
    }
    
    .card-description {
        margin-bottom: var(--spacing-md);
    }
    
    .bitcoin-symbol {
        width: 40px;
        height: 40px;
        font-size: 24px;
    }
    
    .action-buttons {
        flex-direction: row;
        justify-content: center;
        max-width: 600px;
    }
    
    .modal-content {
        max-height: 85vh;
    }
}

/* Print Styles */
@media print {
    .education-header,
    .action-buttons,
    .modal,
    .education-footer {
        display: none !important;
    }
    
    .education-card {
        background: white !important;
        color: black !important;
        border: 1px solid #ccc !important;
        box-shadow: none !important;
    }
    
    .card-title {
        color: #333 !important;
    }
    
    .module-content {
        background: white !important;
        color: black !important;
        box-shadow: none !important;
    }
}

/* Accessibility - Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    
    .education-card::before {
        animation: none;
    }
    
    .status-badge {
        animation: none;
    }
}

/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
    /* Already using dark theme by default */
}

/* Light Mode Override (if needed) */
@media (prefers-color-scheme: light) {
    /* Can add light mode overrides here if needed */
    /* Currently maintaining dark theme for consistency */
}

/* Focus Styles for Accessibility */
button:focus,
.section-link:focus,
.module-card:focus {
    outline: 2px solid var(--primary-gold);
    outline-offset: 2px;
}

/* Screen Reader Only Content */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}