/* ===== PAGE HERO ===== */
.page-hero { 
  padding: clamp(100px, 15vh, 130px) 5% clamp(30px, 5vh, 60px); 
  /* background: radial-gradient(ellipse 60% 50% at 50% 0%, rgba(108,99,255,0.1) 0%, transparent 70%);  */
}

.section-label { 
  font-size: clamp(0.7rem, 0.9vw, 0.78rem); 
  font-weight: 700; 
  letter-spacing: 0.15em; 
  text-transform: uppercase; 
  color: var(--accent); 
  margin-bottom: 0.8rem; 
}

h1 { 
  font-family: 'Syne', sans-serif; 
  font-size: clamp(2rem, 4vw, 3rem); 
  margin-bottom: 1rem; 
}

.page-sub { 
  color: var(--muted); 
  font-size: clamp(0.9rem, 1.1vw, 1rem); 
  line-height: 1.7; 
  max-width: 520px; 
}

/* ===== FILTERS ===== */
.filters { 
  display: flex; 
  gap: clamp(0.5rem, 1vw, 0.8rem); 
  flex-wrap: wrap; 
  padding: clamp(1.5rem, 3vh, 2rem) 5%; 
  border-bottom: 1px solid var(--border); 
  justify-content: center;
}

.filter-btn { 
  background: var(--card); 
  border: 1px solid var(--border); 
  color: var(--muted); 
  padding: clamp(0.4rem, 0.6vw, 0.5rem) clamp(0.8rem, 1.5vw, 1.2rem); 
  border-radius: 100px; 
  font-family: inherit; 
  font-size: clamp(0.8rem, 0.9vw, 0.88rem); 
  cursor: pointer; 
  transition: all 0.2s; 
  white-space: nowrap;
}

.filter-btn:hover, 
.filter-btn.active { 
  background: var(--accent); 
  border-color: var(--accent); 
  color: #fff; 
}

/* ===== COURSES SECTION ===== */
.courses-section { 
  padding: clamp(2rem, 4vh, 3rem) 5%; 
}

.courses-grid { 
  display: grid; 
  grid-template-columns: repeat(auto-fill, minmax(clamp(260px, 25vw, 300px), 1fr)); 
  gap: clamp(4rem, 2vw, 0.5rem); 
}

.course-card { 
  background: var(--card); 
  border: 1px solid var(--border); 
  border-radius: 16px; 
  overflow: hidden; 
  transition: border-color 0.2s, transform 0.2s; 
  text-decoration: none; 
  color: inherit; 
  display: block; 
}

.course-card:hover { 
  border-color: var(--accent); 
  transform: translateY(-4px); 
}

.course-banner { 
  height: clamp(100px, 15vh, 140px); 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  font-size: clamp(2.5rem, 4vw, 3.5rem); 
}

.course-body { 
  padding: clamp(1rem, 1.5vw, 1.4rem); 
}

.course-tag { 
  font-size: clamp(0.65rem, 0.8vw, 0.72rem); 
  font-weight: 700; 
  letter-spacing: 0.08em; 
  text-transform: uppercase; 
  color: var(--accent2); 
  margin-bottom: 0.5rem; 
}

.course-title { 
  font-weight: 700; 
  font-size: clamp(0.95rem, 1.2vw, 1.05rem); 
  margin-bottom: 0.6rem; 
}

.course-desc { 
  font-size: clamp(0.8rem, 0.9vw, 0.88rem); 
  color: var(--muted); 
  line-height: 1.6; 
  margin-bottom: 1.2rem; 
}

.course-meta { 
  display: flex; 
  justify-content: space-between; 
  align-items: center; 
  font-size: clamp(0.75rem, 0.85vw, 0.82rem); 
  color: var(--muted); 
  border-top: 1px solid var(--border); 
  padding-top: 1rem; 
  flex-wrap: wrap;
  gap: 0.5rem;
}

.course-level { 
  padding: 0.2rem 0.7rem; 
  border-radius: 100px; 
  font-size: clamp(0.65rem, 0.75vw, 0.75rem); 
  font-weight: 600; 
}

.level-beginner { 
  background: rgba(0,217,177,0.15); 
  color: var(--accent2); 
}

.level-intermediate { 
  background: rgba(108,99,255,0.15); 
  color: var(--accent); 
}

.level-advanced { 
  background: rgba(255,82,82,0.15); 
  color: #FF6B6B; 
}

.price { 
  font-weight: 700; 
  color: var(--text); 
}

.price-free { 
  color: var(--accent2); 
}

/* ===== RESPONSIVE MEDIA QUERIES ===== */

/* Tablet */
@media (max-width: 992px) {
  .courses-grid { 
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); 
  }
  
  .filters {
    gap: 0.6rem;
    padding: 1.5rem 5%;
  }
  
  .filter-btn {
    font-size: 0.82rem;
    padding: 0.4rem 1rem;
  }
}

/* Mobile */
@media (max-width: 768px) {
  .page-hero {
    padding: 100px 5% 30px;
    text-align: center;
  }
  
  .page-sub {
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
  }
  
  .filters {
    gap: 0.5rem;
    padding: 1rem 5%;
    justify-content: center;
  }
  
  .filter-btn {
    font-size: 0.78rem;
    padding: 0.35rem 0.9rem;
    white-space: nowrap;
  }
  
  .courses-grid {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1rem;
  }
  
  .course-banner {
    height: 100px;
    font-size: 2.5rem;
  }
  
  .course-body {
    padding: 1rem;
  }
  
  .course-meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }
  
  .courses-section {
    padding: 2rem 5%;
  }
}

/* Small Mobile */
@media (max-width: 480px) {
  .page-hero {
    padding: 90px 4% 25px;
  }
  
  h1 {
    font-size: 1.8rem;
  }
  
  .page-sub {
    font-size: 0.9rem;
  }
  
  .filters {
    padding: 0.8rem 4%;
    gap: 0.4rem;
  }
  
  .filter-btn {
    font-size: 0.72rem;
    padding: 0.3rem 0.8rem;
  }
  
  .courses-grid {
    grid-template-columns: 1fr;
    gap: 0.8rem;
  }
  
  .course-card {
    max-width: 100%;
  }
  
  .course-banner {
    height: 90px;
    font-size: 2.2rem;
  }
  
  .course-title {
    font-size: 0.95rem;
  }
  
  .course-desc {
    font-size: 0.82rem;
  }
  
  .course-meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.4rem;
  }
  
  .courses-section {
    padding: 1.5rem 4%;
  }
  
  .section-label {
    font-size: 0.7rem;
  }
}

/* Extra Small */
@media (max-width: 360px) {
  .page-hero {
    padding: 80px 3% 20px;
  }
  
  h1 {
    font-size: 1.5rem;
  }
  
  .filters {
    gap: 0.3rem;
  }
  
  .filter-btn {
    font-size: 0.65rem;
    padding: 0.25rem 0.6rem;
  }
  
  .course-banner {
    height: 80px;
    font-size: 2rem;
  }
  
  .course-body {
    padding: 0.8rem;
  }
}


.course-banner{
    height:220px;
    border-radius:20px 20px 0 0;
    overflow:hidden;
}

.course-banner img{
    width:100%;
    height:100%;
    object-fit:contain;
    display:block;
}