/* Classes page specific styles */

.page-hero {
  padding-block: var(--space-16) var(--space-12);
  background: color-mix(in oklab, var(--color-primary) 6%, transparent);
}
.hero-inner { display: grid; align-items: center; }
.hero-copy { max-width: 62ch; }
.hero-actions { display: flex; gap: var(--space-3); margin-top: var(--space-4); flex-wrap: wrap; }

.section-categories { padding-block: var(--space-10); }
.filters { display: grid; gap: var(--space-3); margin-top: var(--space-4); }
.filter-row { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.chip {
  --chip-bg: var(--gray-100);
  --chip-color: var(--color-text);
  border: 1px solid var(--gray-200);
  background: var(--chip-bg);
  color: var(--chip-color);
  padding: 0.45rem 0.75rem;
  border-radius: var(--radius-pill);
  font-weight: 600;
  cursor: pointer;
  transition: background var(--duration-fast) var(--easing-standard), color var(--duration-fast) var(--easing-standard), border-color var(--duration-fast) var(--easing-standard), transform var(--duration-fast) var(--easing-standard);
}
.chip[aria-pressed="true"] { background: rgba(139, 92, 246, 0.12); color: var(--color-primary); border-color: color-mix(in oklab, var(--color-primary) 25%, var(--gray-200)); }
.chip:active { transform: translateY(1px); }
.chip--reset { background: transparent; }

.results-count { margin-top: var(--space-3); color: var(--color-muted); }

.section-featured { padding-block: var(--space-4) var(--space-10); }
.class-grid { display: grid;  gap: var(--space-6); }
.class-card { display: grid; gap: var(--space-4); }
.class-media img { width: 100%; height: 220px; object-fit: cover; border-radius: var(--radius-md); }
.class-header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.rating { font-weight: 700; letter-spacing: 0.02em; }
.rating-muted { font-weight: 600; color: var(--color-muted); margin-left: 6px; }
.meta { color: var(--color-muted); margin-top: -0.5rem; }
.desc { margin-top: -0.25rem; }
.card-actions { display: flex; gap: var(--space-3); flex-wrap: wrap; }

.section-descriptions { padding-block: var(--space-10); }
.desc-accordion { display: grid; gap: var(--space-3); }
.desc-accordion details { border: 1px solid var(--gray-200); border-radius: var(--radius-md); padding: var(--space-4); background: var(--color-surface); box-shadow: var(--shadow-sm); }
.desc-accordion summary { cursor: pointer; font-weight: 700; }

.section-instructors { padding-block: var(--space-10); }
.instructor-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: var(--space-6); }
.instructor-card { display: grid; grid-template-columns: 120px 1fr; gap: var(--space-4); align-items: start; }
.instructor-media img { width: 120px; height: 120px; object-fit: cover; border-radius: var(--radius-md); }
.instructor-tags { list-style: none; padding: 0; margin: var(--space-2) 0 0; display: flex; gap: var(--space-2); flex-wrap: wrap; }

@media (max-width: 560px) {
  .instructor-card { grid-template-columns: 1fr; }
  .instructor-media img { width: 100%; height: 200px; }
}

.section-testimonials { padding-block: var(--space-10); }
.testimonials-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: var(--space-6); }
.testimonial { display: grid; gap: var(--space-3); }
.testimonial-meta { color: var(--color-muted); }

.section-virtual { padding-block: var(--space-10); }
.virtual-wrap { display: grid; grid-template-columns: 1.25fr 1fr; gap: var(--space-6); align-items: center; }
.virtual-media img { width: 100%; height: 320px; object-fit: cover; border-radius: var(--radius-lg); box-shadow: var(--shadow-md); }
.virtual-content { display: grid; gap: var(--space-3); }

@media (max-width: 960px) {
  .virtual-wrap { grid-template-columns: 1fr; }
  .virtual-media img { height: 240px; }
}

/* Dialog styling */
#tour-dialog { border: none; border-radius: var(--radius-lg); padding: 0; box-shadow: var(--shadow-lg); width: min(720px, 92vw); }
.dialog-inner { padding: var(--space-6); display: grid; gap: var(--space-5); }
.tour-steps { display: grid; gap: var(--space-2); padding-left: 1.1em; }
.dialog-actions { display: flex; justify-content: flex-end; gap: var(--space-3); }

.section-faqs { padding-block: var(--space-10); }
.faq-list { display: grid; gap: var(--space-3); }
.faq-list details { border: 1px solid var(--gray-200); border-radius: var(--radius-md); padding: var(--space-4); background: var(--color-surface); }

.section-contact { padding-block: var(--space-10) var(--space-16); }
.contact-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: var(--space-8); align-items: start; }
.contact-info p { margin: 0 0 var(--space-3); }
@media (max-width: 960px) {
  .contact-grid { grid-template-columns: 1fr; }
}