/* ==========================================================================
   CyberPlace - קובץ עיצוב מאוחד עבור Subject.aspx (LTR)
   ========================================================================== */

:root {
    --bg-color: #ffffff;
    --bg-light-hero: #f8fafc;
    --text-primary: #0f172a;
    --text-secondary: #475569;
    --primary-blue: #0284c7;
    --primary-hover: #0369a1;
    --border-color: #e2e8f0;
    --card-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -2px rgba(0, 0, 0, 0.03);
    --badge-optional: #64748b;
}

/* SURGICAL SCOPING FIX: 
   Only apply custom container styles to the course page contents,
   preventing 'display: block !important' from overriding the Master Page footer's flex properties.
*/
main.product-split-grid,
section.course-hero .container,
section.container {
    max-width: 1200px !important;
    width: 100% !important;
    margin: 0 auto !important;
    padding: 0 24px !important;
    box-sizing: border-box !important;
}

/* אזור ה-Hero העליון - פתרון כירורגי לפוטר: שימוש ב-Pseudo element */
.course-hero {
    padding: 24px 0 !important;
    margin: 0 0 40px 0 !important;
    width: 100% !important;
    position: relative !important;
    left: 0 !important;
    right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box;
}

    /* מייצר את הרקע המורחב מאחורי הקונטיינר המרכזי מבלי לשבור את ה-Viewport של הפוטר */
    .course-hero::before {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 100vw;
        background-color: var(--bg-light-hero);
        z-index: -1;
        border-bottom: 1px solid var(--border-color);
    }

/* גריד ה-Hero העליון: משווה גבהים של התמונה וכרטיס המחיר */
.course-hero-grid {
    display: grid !important;
    grid-template-columns: 1.2fr 0.9fr 0.9fr !important;
    gap: 32px !important;
    align-items: stretch !important;
    box-sizing: border-box;
}

    .course-hero-grid * {
        box-sizing: border-box;
    }

.course-hero-left {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

    .course-hero-left .back-link {
        display: inline-block;
        color: var(--text-secondary);
        text-decoration: none;
        font-size: 14px;
        font-weight: 500;
        margin-bottom: 12px;
    }

    .course-hero-left h1 {
        font-size: 34px;
        font-weight: 800;
        line-height: 1.2;
        color: var(--text-primary);
        letter-spacing: -1px;
        margin: 0 0 12px 0;
    }

/* מסגרת תמונה - תואמת במדויק לגובה כרטיס המחיר */
.course-hero-middle-img {
    width: 100% !important;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--border-color);
    box-shadow: var(--card-shadow);
    display: flex !important;
}

    .course-hero-middle-img img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        display: block;
    }

/* כרטיס הרשמה ותמחור */
.enroll-card {
    background: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 24px;
    box-shadow: var(--card-shadow);
    width: 100% !important;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.price-tag {
    font-size: 30px;
    font-weight: 800;
    color: var(--text-primary);
    margin-bottom: 8px;
}

    .price-tag span {
        font-size: 14px;
        font-weight: 500;
        color: var(--text-secondary);
    }

/* גריד שתי העמודות המרכזי */
.product-split-grid {
    display: grid !important;
    grid-template-columns: 1.1fr 0.9fr !important;
    gap: 48px !important;
    align-items: start !important;
    padding-bottom: 40px !important;
    width: 100% !important;
    box-sizing: border-box;
}

    .product-split-grid * {
        box-sizing: border-box;
    }

.column-title {
    margin-bottom: 20px;
}

    .column-title h2 {
        font-size: 20px;
        font-weight: 800;
        color: var(--text-primary);
        letter-spacing: -0.5px;
        margin: 0;
    }

/* רשימת יעדי הקורס */
.objectives-card {
    background: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 32px;
}

.objectives-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 0;
    margin: 0;
}

    .objectives-list li {
        display: flex;
        gap: 14px;
        align-items: flex-start;
    }

.objective-icon {
    font-size: 18px;
    line-height: 1.4;
}

.objectives-list p {
    font-size: 14.5px;
    color: var(--text-secondary);
    line-height: 1.5;
    margin: 0;
}

/* סילבוס קורס נגלל מיושר ומוארך */
.syllabus-scroll-container {
    background: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    max-height: 560px;
    overflow-y: auto;
    max-height: 675px !important; /* Increase this number to push the baseline further down */
    height: 675px !important; /* Locks layout matching alignment rules precisely */
    padding: 4px;
}

.syllabus-module {
    border-bottom: 1px solid var(--border-color);
}
    .syllabus-module:last-child {
        border-bottom: none;
    }

.module-header {
    background: #f8fafc;
    padding: 16px 20px;
    font-weight: 700;
    font-size: 14px;
    color: var(--text-primary);
}

.module-lessons {
    padding: 8px 20px;
    list-style: none;
    margin: 0;
}

    .module-lessons li {
        padding: 4px 0;
        font-size: 14.5px;
        color: var(--text-secondary);
        border-bottom: 1px solid #f1f5f9;
        display: flex;
        align-items: center;
        gap: 10px;
    }

        .module-lessons li:last-child {
            border-bottom: none;
        }

/* רצועות לימוד */
.tracks-stack {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.track-card {
    background: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 20px;
    display: grid !important;
    grid-template-columns: 140px 1fr !important;
    gap: 20px;
    align-items: start;
}

.track-link-wrapper {
    width: 140px;
    height: 105px;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--border-color);
    display: block;
}

    .track-link-wrapper img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.track-badge-group {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-bottom: 4px;
}

.track-badge {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--primary-blue);
}

    .track-badge.optional {
        color: var(--badge-optional);
        background: #e2e8f0;
        padding: 2px 6px;
        border-radius: 4px;
        font-size: 9px;
    }

/* גריד שתי עמודות תחתון */
.bottom-features-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 48px !important;
    align-items: start !important;
    width: 100% !important;
    box-sizing: border-box;
}

    .bottom-features-grid * {
        box-sizing: border-box;
    }

.left-feature-card {
    display: flex !important;
    gap: 20px;
    align-items: center;
    background: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 20px;
}
    .left-feature-card p {
        font-size: 14.5px !important; /* Increases size from 14px to match the right card text */
        line-height: 1.5 !important; /* Matches the layout's paragraph breathing room */
        color: var(--text-secondary); /* Ensures uniform color rendering */
        margin: 0;
    }
.left-card-img-frame {
    width: 120px;
    height: 90px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    overflow: hidden;
    flex-shrink: 0;
}

    .left-card-img-frame img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

/* מד התקדמות */
.progress-bar-container {
    width: 100%;
    height: 8px;
    background-color: var(--border-color);
    border-radius: 9999px;
    overflow: hidden;
    margin-top: 8px;
}

.progress-bar-fill {
    width: 45%;
    height: 100%;
    background-color: var(--primary-blue);
    border-radius: 9999px;
}

/* כפתורים */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 24px;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    border-radius: 8px;
    cursor: pointer;
}

.btn-primary {
    background-color: var(--primary-blue);
    color: white;
    border: none;
}

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

/* התאמות רספונסיביות */
@media (max-width: 1024px) {
    .course-hero-grid {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
    }

    .bottom-features-grid {
        grid-template-columns: 1fr !important;
        gap: 32px !important;
    }
}

@media (max-width: 960px) {
    .product-split-grid {
        grid-template-columns: 1fr !important;
        gap: 48px !important;
    }
}
@media (max-width: 600px) {
    .track-card {
        grid-template-columns: 1fr !important; /* Forces the text div below the image wrapper */
        gap: 16px !important; /* Reduces spacing between image and text slightly */
    }

    .track-link-wrapper {
        width: 100% !important; /* Optional: expands the image container to fill width */
        max-width: 240px; /* Optional: prevents the image from blowing up too large */
        height: auto !important;
        aspect-ratio: 4 / 3; /* Maintains the original 140x105 proportions */
    }
}
@media (max-width: 767px) {
    /* 1. Prevent screen trimming & force 100% boundary limits */
    main.product-split-grid,
    section.course-hero .container,
    section.container,
    .course-page-wrapper {
        padding-left: 12px !important;
        padding-right: 12px !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
    }

    /* 2. Stack grids vertically and stretch all cards to equal width */
    .course-hero-grid,
    .product-split-grid {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        padding: 0 !important;
        gap: 24px !important;
    }

        .course-hero-left,
        .enroll-card,
        .product-split-grid > div {
            width: 100% !important;
            max-width: 100% !important;
            box-sizing: border-box !important;
        }

            /* 3. Wrap coupon button text dynamically */
            #requestCoupon, .enroll-card .btn, .enroll-card button {
                white-space: normal !important;
                word-wrap: break-word !important;
                font-size: 14px !important;
            }

    /* 4. Complete and targeted removal of the 45% Mastered / progress text elements */
    .mobile-hide-percentage {
        display: none !important;
    }
}