/* Home Page Mobile CSS */
/* Mobile-first responsive design for the home page */

@media (max-width: 768px) {
    .home-page {
        padding: 0;
    }
    
    .home-container {
        padding: 0 15px;
    }
    
    .home-wrapper {
        gap: 2rem;
    }
    
    /* Hero Section Mobile */
    .hero-section {
        padding: 2rem 0;
        min-height: auto;
    }
    
    .hero-content {
        flex-direction: column;
        gap: 2rem;
        text-align: center;
    }
    
    .hero-left {
        order: 2;
        width: 100%;
    }
    
    .hero-right {
        order: 1;
        width: 100%;
        display: flex;
        justify-content: center;
    }
    
    .hero-header {
        margin-bottom: 1.5rem;
    }
    
    .hero-title {
        font-size: 2rem;
        line-height: 1.2;
        margin-bottom: 1rem;
    }
    
    .hero-subtitle {
        font-size: 1.1rem;
        line-height: 1.4;
    }
    
    .hero-features {
        flex-direction: column;
        gap: 1rem;
        margin: 1.5rem 0;
    }
    
    .feature-item {
        flex-direction: row;
        text-align: left;
        padding: 1rem;
        background: rgba(255, 255, 255, 0.1);
        border-radius: 12px;
        backdrop-filter: blur(10px);
    }
    
    .feature-icon {
        font-size: 2rem;
        margin-right: 1rem;
        flex-shrink: 0;
    }
    
    .feature-text h3 {
        font-size: 1.1rem;
        margin-bottom: 0.5rem;
    }
    
    .feature-text p {
        font-size: 0.9rem;
        margin: 0;
    }
    
    .hero-buttons {
        flex-direction: column;
        gap: 1rem;
        margin-top: 2rem;
    }
    
    .cta-button {
        width: 100%;
        padding: 1rem 2rem;
        font-size: 1.1rem;
        min-height: 50px;
    }
    
    /* Hero Cat Mobile */
    .hero-cat-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 1rem;
    }
    
    .hero-cat {
        width: 120px;
        height: 96px;
    }
    
    .learning-content {
        width: 100%;
        max-width: 300px;
    }
    
    .learning-card {
        padding: 1rem;
        text-align: center;
    }
    
    .learning-card h3 {
        font-size: 1.1rem;
        margin-bottom: 1rem;
    }
    
    .learning-features {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.5rem;
    }
    
    .learning-item {
        flex-direction: column;
        text-align: center;
        gap: 0.5rem;
    }
    
    .learning-icon {
        font-size: 1.5rem;
    }
    
    .learning-item span:last-child {
        font-size: 0.8rem;
    }
    
    /* Grade Sections Mobile */
    .grade-sections {
        padding: 2rem 0;
    }
    
    .section-title {
        font-size: 1.5rem;
        margin-bottom: 1.5rem;
        text-align: center;
    }
    
    .grade-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .grade-card {
        padding: 1.5rem;
        text-align: center;
    }
    
    .grade-icon {
        font-size: 2.5rem;
        margin-bottom: 1rem;
    }
    
    .grade-card h3 {
        font-size: 1.3rem;
        margin-bottom: 0.5rem;
    }
    
    .grade-card p {
        font-size: 1rem;
        margin-bottom: 1rem;
    }
    
    .grade-card ul {
        text-align: left;
        padding-left: 1.5rem;
    }
    
    .grade-card li {
        font-size: 0.9rem;
        margin-bottom: 0.5rem;
    }
    
    /* User Dashboard Mobile */
    .user-dashboard-section {
        padding: 2rem 0;
    }
    
    .user-dashboard {
        flex-direction: column;
        gap: 2rem;
    }
    
    .user-info-card {
        flex-direction: column;
        text-align: center;
        padding: 1.5rem;
    }
    
    .user-avatar {
        margin-bottom: 1rem;
    }
    
    .avatar-emoji {
        font-size: 3rem;
    }
    
    .user-details {
        margin-bottom: 1.5rem;
    }
    
    .user-details h3 {
        font-size: 1.5rem;
        margin-bottom: 0.5rem;
    }
    
    .user-grade {
        font-size: 1.1rem;
        margin-bottom: 0.5rem;
    }
    
    .user-username {
        font-size: 1rem;
        opacity: 0.8;
    }
    
    .user-stats {
        grid-template-columns: 1fr 1fr;
        gap: 1rem;
    }
    
    .stat-item {
        flex-direction: column;
        text-align: center;
        gap: 0.5rem;
        padding: 1rem;
    }
    
    .stat-icon {
        font-size: 1.5rem;
    }
    
    .stat-value {
        font-size: 1.5rem;
        font-weight: bold;
    }
    
    .stat-label {
        font-size: 0.8rem;
    }
    
    .quick-actions {
        padding: 1.5rem;
    }
    
    .quick-actions h3 {
        font-size: 1.3rem;
        margin-bottom: 1rem;
        text-align: center;
    }
    
    .action-buttons {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .action-btn {
        width: 100%;
        padding: 1rem;
        font-size: 1rem;
        min-height: 50px;
    }
    
    /* Features Section Mobile */
    .features-section {
        padding: 2rem 0;
    }
    
    .features-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .feature-card {
        padding: 1.5rem;
        text-align: center;
    }
    
    .feature-icon {
        font-size: 2.5rem;
        margin-bottom: 1rem;
    }
    
    .feature-card h3 {
        font-size: 1.2rem;
        margin-bottom: 0.5rem;
    }
    
    .feature-card p {
        font-size: 0.9rem;
        margin: 0;
    }
    
    /* CTA Section Mobile */
    .cta-section {
        padding: 2rem 0;
        text-align: center;
    }
    
    .cta-content h2 {
        font-size: 1.8rem;
        margin-bottom: 1rem;
    }
    
    .cta-content p {
        font-size: 1.1rem;
        margin-bottom: 1.5rem;
    }
    
    .cta-buttons {
        flex-direction: column;
        gap: 1rem;
        align-items: center;
    }
    
    .cta-button {
        width: 100%;
        max-width: 300px;
        padding: 1rem 2rem;
        font-size: 1.1rem;
        min-height: 50px;
    }
    
    /* Floating Elements Mobile */
    .floating-elements-container {
        display: none; /* Hide on mobile for better performance */
    }
}

@media (max-width: 480px) {
    .home-container {
        padding: 0 10px;
    }
    
    .hero-title {
        font-size: 1.8rem;
    }
    
    .hero-subtitle {
        font-size: 1rem;
    }
    
    .hero-cat {
        width: 100px;
        height: 80px;
    }
    
    .learning-content {
        max-width: 250px;
    }
    
    .learning-features {
        grid-template-columns: 1fr;
    }
    
    .user-stats {
        grid-template-columns: 1fr;
    }
    
    .grade-grid {
        gap: 0.8rem;
    }
    
    .grade-card {
        padding: 1.2rem;
    }
    
    .feature-card {
        padding: 1.2rem;
    }
    
    .cta-button {
        max-width: 250px;
    }
}

/* Landscape Mobile */
@media (max-width: 768px) and (orientation: landscape) {
    .hero-section {
        padding: 1.5rem 0;
    }
    
    .hero-content {
        flex-direction: row;
        gap: 1.5rem;
        align-items: center;
    }
    
    .hero-left {
        order: 1;
        width: 60%;
    }
    
    .hero-right {
        order: 2;
        width: 40%;
    }
    
    .hero-title {
        font-size: 1.6rem;
    }
    
    .hero-subtitle {
        font-size: 1rem;
    }
    
    .hero-features {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 0.8rem;
    }
    
    .feature-item {
        flex: 1;
        min-width: 120px;
    }
    
    .hero-buttons {
        flex-direction: row;
        justify-content: center;
    }
    
    .cta-button {
        width: auto;
        min-width: 120px;
    }
}

/* Touch Device Optimizations */
@media (hover: none) and (pointer: coarse) {
    .cta-button:hover,
    .action-btn:hover {
        transform: none;
    }
    
    .cta-button:active,
    .action-btn:active {
        transform: scale(0.98);
    }
    
    .feature-item:hover {
        transform: none;
    }
    
    .grade-card:hover {
        transform: none;
    }
}

/* High DPI Displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .hero-cat {
        filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
    }
    
    .feature-icon,
    .grade-icon {
        filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));
    }
}

/* Mobile Animations */
@media (max-width: 768px) {
    .hero-section {
        animation: fadeInMobile 0.6s ease-out;
    }
    
    .grade-card,
    .feature-card,
    .user-info-card {
        animation: slideUpMobile 0.4s ease-out;
    }
    
    @keyframes fadeInMobile {
        from {
            opacity: 0;
            transform: translateY(30px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
    
    @keyframes slideUpMobile {
        from {
            opacity: 0;
            transform: translateY(50px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
}