/* Responsive styles */

/* @media (max-width: 992px) */
@media (max-width: 992px) {
    .nav-container {
        padding: 0 20px;
    }
    
    .hero-section {
        flex-direction: column;
        padding: 50px 20px;
        text-align: center;
    }
    
    .hero-content, .hero-image {
        width: 100%;
        padding: 0;
    }
    
    .hero-content {
        margin-bottom: 40px;
    }
    
    .hero-actions {
        justify-content: center;
    }
    
    .platform-card {
        min-width: calc(50% - 15px);
    }
    
    .footer-container {
        flex-direction: column;
    }
    
    .footer-brand {
        margin-bottom: 30px;
        text-align: center;
    }
    
    .footer-links {
        justify-content: space-around;
    }

    /* Example from main.css.backup if it had specific navigation changes not covered by navigation.css's own responsive rules */
    /* .medium-nav .nav-content { ... } */
    /* .medium-nav .auth-nav { ... } */
}

/* @media (max-width: 768px) */
@media (max-width: 768px) {
    .navbar {
        padding: 1rem;
    }

    .nav-links {
        display: none; /* Hide links by default on mobile */
        flex-direction: column;
        width: 100%;
        background-color: var(--white);
        position: absolute;
        top: 60px; /* Adjust based on navbar height */
        left: 0;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        padding: 1rem 0; /* Add some padding */
    }

    .nav-links.active {
        display: flex; /* Show when active */
    }

    .nav-links li {
        margin-left: 0;
        text-align: center;
        padding: 0.5rem 0; /* Add padding to list items */
    }

    .nav-links .button, .auth-links .button {
        width: calc(100% - 2rem); /* Make buttons take more width */
        margin: 0.5rem auto; /* Center buttons */
        display: block; /* Ensure they take full width */
    }

    .auth-links {
        /* For mobile, auth links might be part of the toggled menu or remain visible */
        /* This example keeps them separate and always visible, adjust as needed */
        margin-left: auto; /* Push auth links to the right if menu toggle is on left */
    }


    .menu-toggle {
        display: flex; /* Show menu toggle button */
    }

    .hero h1 {
        font-size: 2.5rem;
    }

    .hero p {
        font-size: 1rem;
    }

    .platform-cards {
        flex-direction: column;
        align-items: center;
    }

    .platform-cards .card {
        width: 90%; /* Make cards wider on mobile */
        max-width: 400px; /* But not too wide */
        margin-bottom: 1.5rem; /* Increase bottom margin */
    }

    .footer-links li {
        display: block; /* Stack footer links on mobile */
        margin: 5px 0;
    }

    /* Flashcard study page adjustments */
    .flashcard-container {
        height: 250px; /* Slightly smaller height on mobile */
        max-width: 90%;
    }

    .flashcard .front p, .flashcard .back p {
        font-size: 1.5rem; /* Adjust font size for smaller cards */
    }
    .flashcard .back div {
        font-size: 0.9rem;
    }

    .study-controls .button, .mastery-buttons .button {
        font-size: 0.9rem;
        padding: 8px 15px;
    }

    .mastery-buttons {
        grid-template-columns: 1fr; /* Stack mastery buttons on very small screens if needed */
    }

    /* From main.css.backup (adjusting for general layout if not component-specific) */
    .medium-container { /* If main.css.backup had specific changes for medium-container */
        /* padding: 15px; */
    }

    h1 {
        /* font-size: 36px; */ /* Example from main.css.backup's responsive h1 */
    }
    h2 {
        /* font-size: 28px; */
    }
    p {
        /* font-size: 18px; */
    }

    /* Styles for .platform-card from main.css.backup if different from current responsive.css */
    /* .platform-card { */
        /* min-width: 100%; */ /* Example if they become full width */
        /* margin-bottom: 20px; */
    /* } */

    /* Deck actions responsive */
    .deck-actions {
        flex-direction: column;
        align-items: stretch; /* Make child elements stretch */
        gap: 10px; /* Add some space between the back button and the main actions */
    }
    .deck-main-actions {
        flex-direction: column;
        align-items: stretch; /* Make buttons stretch */
        width: 100%; /* Ensure it takes full width if parent is also flex column */
        gap: 10px; /* Add space between buttons */
    }
    .deck-main-actions .btn {
        width: 100%; /* Make buttons take full width */
        margin-bottom: 0; /* Remove individual bottom margin if using gap */
        text-align: center; /* Center text in buttons */
    }
    /* Remove bottom margin from the last button if not using gap or if extra space is an issue */
    .deck-main-actions .btn:last-child {
        margin-bottom: 0;
    }
     /* Ensure flashcard grid columns adapt */
    .cards-list { /* From flashcards_deck.css, but responsive part could be here or there */
        /* grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); */ /* Adjust minmax */
    }
}

/* @media (max-width: 480px) */
@media (max-width: 480px) {
    .navbar .logo {
        font-size: 1.2rem;
    }
    .auth-links .button {
        padding: 0.4rem 0.8rem;
        font-size: 0.9rem;
    }

    .hero h1 {
        font-size: 2rem;
    }

    .cta-section h2 {
        font-size: 1.5rem;
    }

    .back-to-top-button {
        padding: 8px 12px;
        font-size: 0.9rem;
        right: 10px;
        bottom: 10px;
        background: linear-gradient(135deg, #1687ff, #0057b3be);
    }

    /* Further stack mastery buttons if not already done, or adjust layout */
    .mastery-buttons {
        grid-template-columns: 1fr; /* Ensure they stack if not already */
    }

    h1 {
        /* font-size: 30px; */
    }
    /* Further adjustments from main.css.backup for very small screens */
    .hero-actions .btn {
        /* width: 100%; */
        /* margin-bottom: 10px; */
    }
    .hero-actions .btn:last-child {
        /* margin-bottom: 0; */
    }
    .platform-card {
        /* padding: 20px; */
    }
    .platform-card h3 {
        /* font-size: 1.3rem; */
    }
    .platform-card p {
        /* font-size: 0.9rem; */
    }
    /* Ensure deck actions remain stacked and buttons are full width */
    .deck-actions {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }
    .deck-main-actions {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        gap: 10px;
    }
    .deck-main-actions .btn {
        width: 100%;
        text-align: center;
    }
}

/* Responsive adjustments for deck actions from main.css.backup */
/* This was a specific block in main.css.backup, usually for smaller mobile screens */
/* It's better to integrate these into the existing @media (max-width: 768px) or @media (max-width: 480px) blocks */
/* Example for @media (max-width: 576px) if that was the target in main.css.backup */
@media (max-width: 576px) { /* Or merge into 768px/480px blocks */
    /* .deck-actions { ... } */ /* Already covered above in 768px example */
    /* .deck-main-actions { ... } */
}