/* components.css — cards, features, course-card, gallery, modal, buttons, misc components */

/* Stats Section */
.stats-section { background: var(--secondary); color: var(--white); padding: 3rem; margin-top:-50px; position:relative; z-index:10; }
.stats-container { max-width:1400px; margin:0 auto; display:grid; grid-template-columns: repeat(4,1fr); gap:3rem; text-align:center; }
.stat-item h3 { font-size:3rem; font-weight:800; margin-bottom:.5rem; color:var(--primary); }
.stat-item p { font-size:1.1rem; opacity:0.9; }

/* Features */
.features-section { background:var(--light); padding:5rem 3rem; }
.features-grid { max-width:1400px; margin:0 auto; display:grid; grid-template-columns: repeat(auto-fit, minmax(300px,1fr)); gap:2.5rem; }

.feature-card {
    background:var(--white); padding:2.5rem; border-radius:20px; text-align:center; box-shadow:0 10px 40px rgba(0,0,0,0.08); transition:all .3s; position:relative; overflow:hidden;
}
.feature-card::before {
    content:'';
    position:absolute; top:0; left:0; right:0; height:5px; background: linear-gradient(90deg, var(--primary), var(--accent)); transform:scaleX(0); transition: transform .3s;
}
.feature-card:hover { transform: translateY(-10px); box-shadow: 0 20px 60px rgba(0,0,0,0.15); }
.feature-card:hover::before { transform: scaleX(1); }

.feature-icon { font-size:4rem; margin-bottom:1.5rem; display:inline-block; animation: float 3s ease-in-out infinite; }
@keyframes float { 0%,100%{transform:translateY(0);}50%{transform:translateY(-10px);} }

.feature-card h3 { font-size:1.5rem; color:var(--dark); margin-bottom:1rem; font-weight:700; }
.feature-card p { color:var(--text-light); font-size:1rem; line-height:1.8; }

/* Course Card (re-usable) */
.course-card { composes: card from global; } /* note: keep structure but not real css 'composes' unless using CSS modules - left for clarity */
.course-header { padding:2.5rem; background: linear-gradient(135deg, rgba(102,126,234,0.1), rgba(118,75,162,0.1)); }
.course-icon { width:80px; height:80px; background: linear-gradient(135deg, var(--primary), var(--accent)); border-radius:20px; display:flex; align-items:center; justify-content:center; font-size:2.5rem; margin-bottom:1.5rem; box-shadow: 0 10px 30px rgba(255,107,53,0.3); }
.course-card h3 { font-size:1.6rem; color:var(--dark); margin-bottom:1rem; font-weight:700; }
.course-body { padding: 0 2.5rem 2.5rem 2.5rem; }
.course-description { color:var(--text-light); margin-bottom:1.5rem; font-size:1rem; line-height:1.8; }
.course-meta { display:flex; gap:2rem; margin-bottom:1.5rem; font-size:0.9rem; color:var(--text-light); }
.view-curriculum-btn { width:100%; background: linear-gradient(135deg,var(--primary),var(--primary-dark)); color:var(--white); padding:1rem; border:none; border-radius:12px; font-weight:600; cursor:pointer; transition:all .3s; }
.view-curriculum-btn:hover { transform:scale(1.02); box-shadow: 0 10px 30px rgba(255,107,53,0.4); }

/* Gallery */
.gallery-section { background: var(--light); }
.gallery-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(300px,1fr)); gap:2rem; }
.gallery-item { position:relative; height:300px; border-radius:15px; overflow:hidden; cursor:pointer; box-shadow:0 10px 30px rgba(0,0,0,0.1); background:#e0e0e0; }
.gallery-item img { width:100%; height:100%; object-fit:cover; transition: transform .5s; }
.gallery-item:hover img { transform: scale(1.15); }
.gallery-overlay { position:absolute; bottom:0; left:0; right:0; background: linear-gradient(to top, rgba(0,0,0,0.8), transparent); padding:2rem; color:var(--white); transform: translateY(100%); transition: transform .3s; }
.gallery-item:hover .gallery-overlay { transform: translateY(0); }

/* Modal (re-usable) */
.modal { display:none; position:fixed; top:0; left:0; width:100%; height:100%; background: rgba(0,0,0,0.95); z-index:2000; padding:2rem; overflow-y:auto; animation: fadeIn .3s; }
.modal-content { max-width:1000px; margin:2rem auto; background:var(--white); border-radius:25px; padding:3rem; position:relative; animation: slideUp .4s; }
.close-modal { position:absolute; top:2rem; right:2rem; font-size:2.5rem; cursor:pointer; color:var(--text-light); width:40px; height:40px; display:flex; align-items:center; justify-content:center; border-radius:50%; transition:all .3s; }
.close-modal:hover { background:var(--light); color:var(--primary); transform: rotate(90deg); }

.modal-header { margin-bottom:2rem; }
.modal-title { font-size:2.5rem; color:var(--dark); font-weight:800; margin-bottom:1rem; }
.modal-subtitle { color:var(--text-light); font-size:1.1rem; }