/* ============================================
   classes.css — styles specific to classes.html
   ============================================ */

.class-grid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
}
.class-card{
  background: var(--white);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  scroll-margin-top: 100px;
  transition: transform .3s ease, box-shadow .3s ease;
}
.class-card:hover{ transform: translateY(-6px); box-shadow: var(--shadow-soft); }
.class-media{ position: relative; }
.class-media img{ height: 220px; width: 100%; object-fit: cover; }
.class-tag{
  position: absolute;
  top: 16px; left: 16px;
  background: var(--gold);
  color: var(--forest);
  font-size: 11px;
  font-weight: 800;
  padding: 6px 12px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.class-body{ padding: 24px 26px 28px; }
.class-body h3{ font-size: 21px; margin-bottom: 10px; }
.class-body p{ font-size: 14.5px; margin-bottom: 18px; }

@media (max-width: 800px){ .class-grid{ grid-template-columns: 1fr; } }