/* Courses page styles (page-specific, complementary to base.css) */

/* Breadcrumbs */
.breadcrumbs { margin-top: var(--space-5); }
.breadcrumbs ol { list-style: none; padding: 0; margin: 0; display: flex; gap: var(--space-2); align-items: center; color: var(--color-text-muted); }
.breadcrumbs li+li::before { content: "/"; margin-inline: var(--space-2); color: var(--gray-400); }
.breadcrumbs a { color: inherit; }

/* Hero */
.hero { padding: var(--space-10) 0 var(--space-6); background: linear-gradient(180deg, rgba(var(--color-primary-rgb) / 0.06), transparent); }
.hero__inner { display: grid; gap: var(--space-6); align-items: center; }
.hero__content { max-width: 62ch; }
.hero__search { margin-top: var(--space-4); display: grid; gap: var(--space-3); }
.hero__search input[type="search"] { font-size: 1rem; }
.hero__filters { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); }
.category-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.chip { border: 1px solid var(--color-border); background: #fff; color: var(--color-text); border-radius: var(--radius-round); padding: 6px 12px; cursor: pointer; font-weight: 600; }
.chip.is-active, .chip[aria-pressed="true"] { background: color-mix(in srgb, var(--color-primary) 10%, #fff); border-color: var(--color-primary); color: var(--gray-900); }
.hero__media { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); }
.results-count { margin-top: var(--space-2); color: var(--color-text-muted); }

/* Sections */
.section { padding: var(--space-8) 0; }
.section__head { margin-bottom: var(--space-4); }

/* Course cards grid */
.course-grid { display: grid; gap: var(--space-6); grid-template-columns: 1fr; }
.course-card__media { margin: -8px -8px var(--space-4); overflow: hidden; border-radius: calc(var(--radius-lg) - 4px); }
.course-card__meta { display: flex; flex-wrap: wrap; gap: var(--space-3); color: var(--color-text-muted); font-size: var(--text-sm); }
.course-card[hidden] { display: none !important; }

/* Categories grid */
.category-grid { display: grid; gap: var(--space-4); grid-template-columns: 1fr; }
.category-card { display: block; text-decoration: none; }
.category-card h3 { margin: 0 0 var(--space-2); }
.category-card:hover { text-decoration: none; box-shadow: var(--shadow-lg); transform: translateY(-2px); transition: transform var(--duration-fast) var(--ease-out), box-shadow var(--duration-normal) var(--ease-in-out); }

/* Instructors */
.instructor-grid { display: grid; gap: var(--space-4); grid-template-columns: 1fr; }
.instructor-card p { margin-bottom: var(--space-2); }

/* Testimonials */
.testimonial-grid { display: grid; gap: var(--space-4); grid-template-columns: 1fr; }

/* Resources */
.resources-wrap { display: grid; gap: var(--space-6); grid-template-columns: 1fr; align-items: start; }
.resources__media { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); }
.resources__list { display: grid; gap: var(--space-4); }

/* Enrollment */
.enroll-steps { padding-left: var(--space-6); margin: var(--space-4) 0; }
.enroll-cta { display: flex; gap: var(--space-3); flex-wrap: wrap; }

/* FAQ */
.faq-list details { border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); margin-bottom: var(--space-3); background: #fff; }
.faq-list summary { cursor: pointer; font-weight: 700; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: "+"; float: right; color: var(--color-text-muted); }
.faq-list details[open] summary::after { content: "–"; }

/* Responsive */
@media (min-width: 700px) {
  .hero__inner { grid-template-columns: 1.1fr 1fr; }
  .course-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .category-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .instructor-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .testimonial-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .resources-wrap { grid-template-columns: 1.2fr 1fr; }
}

@media (min-width: 1100px) {
  .course-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}