/* ==========================================================================
   Responsive Styles for Lens Fundamentals Course Page
   Breakpoints: 1024, 720, 568, 450, 410, 390, 350, 325
   ========================================================================== */

/* --- Breakpoint: 1024px --- */
@media (max-width: 1024px) {
    .page-container {
        padding-left: 24px;
        padding-right: 24px;
    }

    .page-columns {
        flex-direction: column;
        gap: 0;
    }

    /* Reorder sidebar below video */
    .main-content,
    .hero-section {
        display: contents;
    }

    .video-container {
        order: -2;
        margin-bottom: 24px;
    }

    .sidebar {
        width: 100%;
        order: -1;
        margin-bottom: 32px;
    }

    .course-title {
        font-size: 32px;
    }

    .course-subtitle {
        font-size: 17px;
    }

    .highlights-section {
        margin-bottom: 0px;
    }

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

/* --- Breakpoint: 768px --- */
@media (max-width: 768px) {
    .header {
        padding: 16px 20px;
    }

    .course-title {
        font-size: 28px;
    }

    .course-meta {
        font-size: 14px;
        gap: 12px;
    }

    .article-content-gear-block {
        max-width: 48%;
    }

    .quiz-content-wrapper {
        flex-direction: column;
        gap: 20px;
    }

    .quiz-image {
        max-width: 100%;
        order: -1;
    }

    .quiz-options {
        width: 100%;
    }

    .course-subtitle {
        font-size: 0.875rem;
    }

    .text-content p,
    .content-section p {
        font-size: 0.875rem;
        line-height: 1.6;
    }

    .highlight-card {
        width: 200px;
    }

    .highlight-img {
        height: 200px;
    }

    .explore-courses-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .explore-courses-dropdown {
        padding: 16px 20px 24px 20px;
    }
    
    .explore-courses-toggle {
        padding: 16px 20px;
    }
}

/* --- Breakpoint: 568px --- */
@media (max-width: 568px) {
    .page-container {
        padding-left: 16px;
        padding-right: 16px;
    }


    .course-title {
        font-size: 1.5rem;
    }



    .tabs {
        gap: 16px;
    }

    .tab {
        font-size: 15px;
    }

    .sidebar-box {
        padding: 24px 12px;
    }

    .content-section {
        margin-bottom: 0px;
    }

    /* Gear carousel adjustment based on reference pages */
    .article-content-gear-container {
        justify-content: flex-start;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
        flex-wrap: nowrap;
        scrollbar-width: none;
        -ms-overflow-style: none;
        padding-bottom: 8px;
    }

    .article-content-gear-container::-webkit-scrollbar {
        display: none;
    }

    .article-content-gear-block {
        min-width: 175px;
        scroll-snap-align: start;
        max-width: none;
    }

    .article-content-gear-block .article-content-gear-image {
        height: 175px;
    }

    .instructor-profile {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .quiz-modal-content {
        padding: 0px;
    }

    .quiz-modal-body {
        padding: 12px;
    }

    .quiz-modal-actions {
        padding: 20px;
    }

    .quiz-rate-title {
        font-size: 1rem !important;
    }

    .sidebar-box h3 {
        font-size: 1rem;
    }

    .content-section h2 {
        font-size: 20px;
    }

    .explore-courses-grid {
        grid-template-columns: repeat(2, 1fr);
        row-gap: 16px;
        column-gap: 8px;
    }
    
    .explore-courses-dropdown {
        padding: 16px 16px 24px 16px;
    }
    
    .explore-courses-toggle {
        padding: 16px 16px;
        justify-content: center;
    }
}

/* --- Breakpoint: 450px --- */
@media (max-width: 450px) {

    .course-title {
        font-size: 1.5rem;
    }

    .badge-new {
        font-size: 12px;
        padding: 3px 6px;
    }
}

/* --- Breakpoint: 410px --- */
@media (max-width: 410px) {}

/* --- Breakpoint: 390px --- */
@media (max-width: 390px) {
    .course-meta {
        font-size: 13px;
        gap: 10px;
    }
}

/* --- Breakpoint: 350px --- */
@media (max-width: 350px) {


    .course-subtitle {
        font-size: 0.875rem;
    }

    .explore-courses-grid {
        grid-template-columns: 1fr;
    }
}

/* --- Breakpoint: 325px --- */
@media (max-width: 325px) {
    .header {
        padding: 12px 16px;
    }

}