/* Classes page specific styles — minimal, leveraging base.css utilities */

.hero {
  background: linear-gradient(180deg, color-mix(in oklab, var(--color-primary) 8%, transparent), transparent 30%),
              repeating-linear-gradient(135deg, rgba(0,0,0,0.04) 0 6px, rgba(0,0,0,0.02) 6px 12px);
  border-bottom: 1px solid var(--gray-300);
}
.hero__inner { display: grid; grid-template-columns: 1.2fr 1fr; gap: var(--space-6); align-items: center; padding: var(--space-8) 0; }
.hero__actions { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.hero__media { max-width: 640px; margin-left: auto; }

@media (max-width: 900px) {
  .hero__inner { grid-template-columns: 1fr; }
  .hero__media { order: -1; margin: 0 auto; }
}

.section { padding: var(--space-10) 0; }
.section-intro { margin-bottom: var(--space-5); }

.search-bar { display: grid; grid-template-columns: 1fr auto; gap: var(--space-4); align-items: end; }
.search-meta { align-self: center; }
@media (max-width: 720px) { .search-bar { grid-template-columns: 1fr; } }

.class-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--space-5); }
.class-card .class-card__header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.class-card ul { margin-top: var(--space-3); }

.compare-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--space-5); }

.strategy-controls { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.strategy-accordion details { border: 1px solid var(--gray-300); border-radius: var(--radius-2); background: var(--color-surface); box-shadow: var(--shadow-1); }
.strategy-accordion summary { cursor: pointer; padding: var(--space-4); }
.strategy-accordion details + details { margin-top: var(--space-3); }

.lore-section .media-frame img { aspect-ratio: 4 / 3; object-fit: cover; }

.newsletter-form { display: grid; grid-template-columns: 1fr auto; gap: var(--space-4); align-items: end; }
@media (max-width: 720px) { .newsletter-form { grid-template-columns: 1fr; } }