/* course.css — course-template specific overrides (course-hero, info boxes, enroll CTA, curriculum container) */

/* Course Hero */
.course-hero {
    margin-top: 80px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: var(--white);
    padding: 4rem 3rem;
}

.course-hero-content {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 3rem;
    align-items: center;
}

.course-icon-large {
    font-size: 8rem;
    text-align: center;
    filter: drop-shadow(0 10px 30px rgba(0,0,0,0.3));
}

/* Course Details Section */
.course-details-section { max-width: 1200px; margin: 0 auto; padding: 1rem 3rem; }

/* Info grid */
.course-info-grid { display:grid; grid-template-columns: repeat(4,1fr); gap:2rem; margin:3rem 0; }
.info-box {
    background: var(--white); padding:2rem; border-radius:15px; box-shadow:0 5px 20px rgba(0,0,0,0.08); text-align:center;
}
.info-box-icon { font-size:2.5rem; margin-bottom:1rem; }
.info-box h3 { color:var(--primary); font-size:1.1rem; margin-bottom:.5rem; }
.info-box p { color:var(--text-light); font-size:1rem; }

/* Curriculum container (course page) — thin borders */
.curriculum-container { background:var(--light); padding: 1.25rem; border-radius:12px; margin: 1.5rem 0; }

/* enroll CTA */
.enroll-cta {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: var(--white);
    padding: 2rem;
    border-radius: 16px;
    text-align: center;
    margin: 2rem 0;
}
.enroll-cta h2 { font-size: 2rem; margin-bottom: .75rem; }
.enroll-cta p { font-size: 1.05rem; margin-bottom: 1rem; opacity: 0.95; }
.enroll-cta button {
    background: var(--white); color: var(--primary); padding: .9rem 2rem; border:none; border-radius:50px; font-size:1rem; font-weight:700; cursor:pointer;
}
.enroll-cta button:hover { transform: translateY(-3px); box-shadow: 0 15px 40px rgba(0,0,0,0.12); }

/* Smaller screens adjustments for course hero and curriculum in course.css */
@media (max-width: 768px) {
    .course-hero-content { grid-template-columns: 1fr; text-align:center; }
    .course-info-grid { grid-template-columns: 1fr; }
    .curriculum-container { padding: 1rem; }
}