/* ========================================================================
   Single Course Page Component
   ========================================================================
   
   Complete CSS for all single course page elements, consolidated from
   multiple files to eliminate conflicts and improve maintainability.
   
   Migrated from styles.css on 2025-07-11 to resolve global padding
   conflicts and organize all course page styles in one place.
   
   Component structure:
   - Base container (.single-course-page)
   - Content areas (.content-area, .aside)
   - Course imagery (.main-image)
   - Sidebar components (.logos, .item)
   - Tab navigation system
   - FAQ section variant
   
   Design tokens used:
   - Colors: var(--brand-main), var(--cream), var(--white)
   - Spacing: var(--space-*) 
   - Shadows: var(--shadow-*)
   - Radius: var(--radius-*)
   ======================================================================== */

/* ==========================================================================
   1. Container System
   ========================================================================== */

/* Container for course pages - inherits all layout from global styles */
.container {
    background: var(--cream);

    /* All other properties (margin, max-width, padding, width) inherited from styles.css */
}

#content {
    background: var(--cream);
}

/* ==========================================================================
   2. Single Course Page - Base Container & Layout
   ========================================================================== */

.single-course-page {
    position: relative;

    /* Responsive padding handled by media queries below - no global padding to avoid conflicts */
}

.single-course-page .content-area {
    /* Grid item - no float needed */
    width: 100%;
    margin-top: 0;

    /* Remove excessive top margin */
    padding: var(--space-7);

    /* Add internal padding for content breathing room */
}

.single-course-page .aside {
    /* Grid item - no float needed */
    width: 100%;
}

/* ==========================================================================
   3. Content Cards & Layout Components
   ========================================================================== */

.content-card {
    background: var(--white);
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin-top: var(--space-11);
    margin-left: var(--space-4);
    margin-right: var(--space-4);
}

.content-img {
    width: 100%;
    height: 342px;
    object-fit: cover;
    object-position: center bottom; /* Crop from top when height reduces */
}

.main-content {
    display: flex;
    flex-direction: row;
    gap: var(--space-8);
    flex: 1;
    padding: var(--space-4) 0;
}

.left-content {
    flex: 1;
}

.left-content img {
    vertical-align: top;
}

.right-content {
    width: 336px;
    position: relative;
    display: flex;
    justify-content: center;
    padding-right: var(--space-7);

    /* Add right padding to ensure card doesn't touch edge */
}

/* ==========================================================================
   4. Course Imagery
   ========================================================================== */

.single-course-page img.main-image {
    border-radius: var(--radius-lg);
    box-shadow: 5px 5px 9px 0 var(--shadow-medium);
    margin-bottom: 60px;
    width: 100%;
}

/* ==========================================================================
   5. Typography
   ========================================================================== */

.single-course-page .content-area .title-post {
    color: var(--brand-main);
    font-size: 24px;          /* Match h3 base styling */
    font-weight: 900;
    line-height: 30px;        /* Match h3 base styling */
    margin-bottom: var(--space-8);
}

.single-course-page .faq-heading {
    color: var(--brand-main);
    font-size: var(--heading-section);
    font-weight: 900;
    line-height: 46px;
    margin-bottom: 38px;
}

.fw {
    margin-top: 70px;
    color: var(--brand-main);
    font-size: var(--heading-section);
}

/* ==========================================================================
   6. Sidebar Components
   ========================================================================== */

.single-course-page .aside .logos {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.single-course-page .aside .logos img {
    height: 70px;
    margin-bottom: 30px;
}

.single-course-page .aside .item {
    align-items: center;
    border-top: 1px solid var(--grey-light);
    display: flex;
    height: 70px;
    padding: 10px 0;
}

.single-course-page .aside .item img {
    border-radius: var(--radius-none);
    box-shadow: none;
    display: inline-block;
    height: 20px;
    margin: 0 17px 0 0;
    width: 20px;
}

/* ==========================================================================
   7. Float Card (Course Details Sidebar)
   ========================================================================== */

.float-card {
    background: var(--white);
    padding: var(--space-7) var(--space-6);
    border-radius: var(--radius-xl);
    box-shadow: 0 0 0 3px var(--shadow-subtle), 0 4px 20px var(--shadow-light);
    max-width: 320px;
    font-family: Inter, sans-serif;
    max-height: 526px;

    /* Float positioning to overlap main image */
    position: sticky;
    top: 100px;
    margin-top: -200px;

    /* Pull up to overlap with image area */
    z-index: 10;

    /* Ensure it appears above image */
}

/* stylelint-disable-next-line no-descending-specificity -- different DOM context */
.logos img {
    display: block;
    margin: 0 auto 16px;
    max-height: 60px;
}

/* stylelint-disable-next-line no-descending-specificity -- different DOM context */
.item {
    display: flex;
    align-items: flex-start;
    margin-bottom: var(--space-5);
    font-size: var(--text-base);
    color: var(--black);
    line-height: 1.4;
}

/* stylelint-disable-next-line no-descending-specificity -- different DOM context */
.item img {
    width: 24px;
    height: 24px;
    margin-right: var(--space-3);
    flex-shrink: 0;
    margin-top: 2px;
}

.item span {
    display: inline-block;
}

.item span b {
    font-weight: 600;
}

.item:last-of-type span {
    color: var(--brand-main);
    font-weight: 600;
}

/* ==========================================================================
   8. Buttons & Interactive Elements
   ========================================================================== */

.btn {
    display: block;
    width: 100%;
    padding: var(--space-3);
    text-align: center;
    font-size: var(--text-base);
    border-radius: 30px;
    text-decoration: none;
    margin-top: var(--space-3);
    transition: all 0.3s ease;
}

.btn-primary {
    background-color: var(--brand-main);
    color: var(--white);
    font-weight: 500;
    border: none;
}

.btn-primary:hover {
    background-color: var(--brand-main-hover);
}

.btn-secondary {
    border: 1.5px solid var(--brand-main);
    color: var(--brand-main);
    background: transparent;
    font-weight: 500;
}

.btn-secondary:hover {
    background-color: var(--brand-main);
}

.right-text {
    color: var(--text-secondary);
}

/* !important: Override .right-text secondary color for bold variant */
.right-text-b {
    color: var(--black) !important;
}

/* ==========================================================================
   9. Tab Navigation System
   ========================================================================== */

/* Base tab styles */
.tabs {
    display: flex;
    gap: var(--space-3);
    margin-bottom: var(--space-6);
}

.tabs .tab {
    padding: 10px 24px;
    border-radius: var(--radius-full);
    border: 2px solid var(--brand-main);
    background-color: var(--white);
    color: var(--brand-main);
    font-weight: 500;
    text-decoration: none;
    transition: all 0.3s ease;
    text-align: center;
    display: inline-block;
    white-space: nowrap;
}

.tabs .tab.selected {
    background-color: var(--brand-main);
    color: var(--white);
    font-weight: 700;
    border-color: var(--brand-main);
}

/* Single course page specific tab styles */
.single-course-page .tabs {
    display: flex;
    justify-content: space-between;
    margin-bottom: var(--space-8);
    margin-top: var(--space-6);
}

.single-course-page .tabs a {
    border-radius: 40px;
    cursor: pointer;
    font-family: Inter, sans-serif;
    font-size: var(--text-base);
    font-weight: 500;
    padding: var(--space-3) 50px;
    text-decoration: none;

    /* Modern tab styling */
    border: 2px solid var(--brand-main);
    background-color: var(--white);
    color: var(--brand-main);
    transition: all 0.3s ease;
    text-align: center;
    display: inline-block;
    white-space: nowrap;
}

.single-course-page .tabs a.selected {
    background-color: var(--brand-main);
    color: var(--white);
    font-weight: 700;
    border-color: var(--brand-main);
    font-size: var(--text-base);
    font-family: Inter, sans-serif;
}

/* Tab content visibility */
.single-course-page .tab-content .tab.hidden {
    display: none;
}

/* Tab text compression helpers */
.tab-text-short {
    display: none;
}

/* ==========================================================================
   10. FAQ Section Variant
   ========================================================================== */

.single-course-page.faq {
    background-color: var(--cream);
    padding-top: var(--space-0);
}

.single-course-page.faq .faqs-container {
    padding-bottom: 60px;
}

/* ==========================================================================
   11. Utility Components
   ========================================================================== */

/* .Explicit override in this context as different bg to styles.css - TODO: make it transparent */
.top-strip {
    background: url('../img/panel-edge-xl-log.svg');    
}

/* ==========================================================================
   12. Responsive Design
   ========================================================================== */

/* Phase 1: Tab text compression at 1280px */
@media (width <= 1280px) {
    .single-course-page .tabs a {
        padding-left: 30px;
        padding-right: 30px;
        font-size: 15px;
    }

    /* Show abbreviated text */
    .tab-text-full {
        display: none;
    }

    .tab-text-short {
        display: inline;
    }
}

/* Phase 2: Horizontal scroll for tablets (768-1024px) */
@media (width <= 1024px) and (width >= 768px) {
    .single-course-page .tabs {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scroll-behavior: smooth;
        justify-content: flex-start;
        gap: var(--space-2);

        /* Add some padding for scroll */
        padding: 0 var(--space-2);
        margin-left: calc(-1 * var(--space-2));
        margin-right: calc(-1 * var(--space-2));
    }

    .single-course-page .tabs a {
        flex: 0 0 auto;
        min-width: 130px;
    }

    /* Subtle scrollbar styling */
    .single-course-page .tabs::-webkit-scrollbar {
        height: 6px;
    }

    .single-course-page .tabs::-webkit-scrollbar-track {
        background: var(--grey-light);
        border-radius: 3px;
    }

    .single-course-page .tabs::-webkit-scrollbar-thumb {
        background: var(--brand-main);
        border-radius: 3px;
    }
}

/* Phase 3: Tablet responsive layout (<768px) */
@media (width <= 768px) {
    /* Container padding fix - proper responsive behavior */
    .single-course-page {
        padding: 26px 0;
    }

    .single-course-page .content-area {
        display: contents;
        margin-bottom: 50px;
        width: 100%;
        padding: var(--space-5);

        /* Reduce padding on tablet */
    }

    .single-course-page .content-area .title-post {
        font-size: 20px;         /* Slightly smaller on tablet */
        line-height: 26px;
    }

    .single-course-page .aside {
        width: 100%;
    }

    /* FAQ heading responsive */
    .single-course-page .faq-heading {
        font-size: 28px;
        line-height: 34px;
        margin-bottom: 24px;
    }

    /* Tab dropdown implementation */
    .single-course-page .tabs {
        position: relative;
        flex-direction: column;
        gap: 0;
        grid-area: tabs;
        margin-bottom: var(--space-4);
    }

    /* Style first tab as dropdown trigger */
    .single-course-page .tabs .tab-dropdown-trigger {
        width: 100%;
        justify-content: space-between;
        display: flex;
        align-items: center;
        margin-bottom: 0;
    }

    .single-course-page .tabs .tab-dropdown-trigger::after {
        content: "▼";
        font-size: 12px;
        margin-left: auto;
        transition: transform 0.2s;
    }

    /* Hide other tabs by default on mobile */
    .single-course-page .tabs a:not(.tab-dropdown-trigger) {
        display: none;
        width: 100%;
        margin-top: var(--space-2);
        margin-bottom: 0;
    }

    /* Show when dropdown is open */
    .single-course-page .tabs.tabs-open a {
        display: flex;
    }

    .single-course-page .tabs.tabs-open .tab-dropdown-trigger::after {
        transform: rotate(180deg);
    }

    /* Adjust tab padding for mobile */
    /* stylelint-disable-next-line no-descending-specificity -- different DOM context */
    .single-course-page .tabs a {
        padding-left: 20px;
        padding-right: 20px;
    }

    /* Mobile: Use grid to reposition float-card after title */
    .single-course-page .main-content {
        display: grid;
        grid-template-areas:
            "title"
            "floatcard"
            "tabs"
            "tabcontent";
        padding: var(--space-4) 0;
        gap: var(--space-4);
    }

    /* Let children participate in parent grid */
    .single-course-page .left-content {
        display: contents;
    }

    .single-course-page .right-content {
        display: contents;
    }

    /* Reduce image height on tablet */
    .content-img {
        height: 260px;
    }

    /* Grid area assignments */
    /* stylelint-disable-next-line no-descending-specificity -- different DOM context */
    .single-course-page .title-post {
        grid-area: title;
        margin-bottom: 0; /* Remove gap before float card */
    }

    .single-course-page .float-card {
        grid-area: floatcard;
        position: relative;
        margin-top: 0;
        margin-left: var(--space-4);
        margin-right: var(--space-4);
        max-width: calc(100% - var(--space-8)); /* Account for horizontal margins */
        top: auto;
    }

    .single-course-page .tab-content {
        grid-area: tabcontent;
    }
}

/* Phase 4: Small mobile adjustments (<480px) */
@media (width <= 480px) {
    /* Reset container padding - handled by global container system */
    .single-course-page {
        padding-top: 0;
        padding-bottom: 16px;
    }

    /* Further reduce content area padding on mobile */
    .single-course-page .content-area {
        padding: var(--space-4);

        /* Minimal padding on mobile */
    }

    /* FAQ container mobile spacing */
    .single-course-page.faq .faqs-container {
        padding-bottom: 60px;
    }

    /* Reduce top margin on mobile */
    .content-card {
        margin-top: var(--space-3);
    }

    /* Reduce main content padding since container already has padding */
    .main-content {
        padding: var(--space-3) 0;
        gap: var(--space-4);
        flex-direction: column;
    }

    /* Reduce image height further on small mobile */
    .content-img {
        height: 160px;
    }
}

.course-duration {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.course-duration .read-more {
    display: flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
    color: inherit;
    font-size: var(--text-base);
    white-space: nowrap;
}

.course-duration .right-arrow {
    font-size: 18px;
}