.courses { background: var(--paper); }
.courses-head-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 40px;
  margin-bottom: 56px;
  flex-wrap: wrap;
}
.courses-head-row .section-head { margin-bottom: 0; }
.courses-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.course {
  background: var(--cream);
  border: 1px solid var(--rule);
  border-radius: 22px;
  padding: 28px 24px 26px;
  transition: transform 0.45s cubic-bezier(.2,.7,.2,1), box-shadow 0.45s, background 0.45s, border-color 0.45s;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.course:focus-visible {
  outline: 2px solid var(--maroon);
  outline-offset: 3px;
}
.course::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 22px;
  background: radial-gradient(120% 80% at 0% 0%, color-mix(in srgb, var(--maroon) 8%, transparent), transparent 60%);
  opacity: 0;
  transition: opacity 0.45s;
  pointer-events: none;
  z-index: -1;
}
.course::after {
  content: "";
  position: absolute;
  right: -40px; bottom: -40px;
  width: 140px; height: 140px;
  border-radius: 50%;
  background: radial-gradient(circle at center, color-mix(in srgb, var(--gold) 30%, transparent), transparent 70%);
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 0.5s, transform 0.5s;
  pointer-events: none;
  z-index: -1;
}
.course:hover {
  transform: translateY(-6px);
  box-shadow: 0 28px 50px -24px rgba(27,20,17,0.34);
  background: var(--paper);
  border-color: color-mix(in srgb, var(--maroon) 30%, var(--rule));
}
.course:hover::before { opacity: 1; }
.course:hover::after { opacity: 1; transform: scale(1); }
.course-num {
  position: absolute;
  top: 16px;
  right: 18px;
  font-family: "Fraunces", serif;
  font-size: 13px;
  color: var(--ink-soft);
  opacity: 0.5;
}
.course-ico {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: var(--maroon);
  color: var(--gold);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 22px;
  transition: transform 0.5s cubic-bezier(.2,.7,.2,1), border-radius 0.5s, box-shadow 0.5s;
}
.course:hover .course-ico {
  transform: rotate(-6deg) scale(1.06);
  border-radius: 20px 16px 22px 14px;
  box-shadow: 0 14px 30px -10px color-mix(in srgb, var(--maroon) 40%, transparent);
}
.course-num {
  transition: transform 0.4s, color 0.4s, opacity 0.4s;
}
.course:hover .course-num {
  color: var(--maroon);
  opacity: 1;
  transform: scale(1.15);
}
.course-name { transition: color 0.3s; }
.course:hover .course-name { color: var(--maroon); }
.course-tags .tag { transition: background 0.3s, color 0.3s, transform 0.4s; }
.course:hover .course-tags .tag { background: var(--paper); }
.course-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 16px;
  font-size: 13px;
  font-weight: 600;
  color: var(--maroon);
  letter-spacing: 0.02em;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transform: translateY(6px);
  transition: max-height 0.4s, opacity 0.35s, transform 0.4s;
}
.course-cta svg { transition: transform 0.3s; }
.course:hover .course-cta {
  max-height: 28px;
  opacity: 1;
  transform: translateY(0);
}
.course:hover .course-cta svg { transform: translateX(3px); }
.course:nth-child(even) .course-ico { background: var(--gold); color: var(--maroon); }
.course-name {
  font-family: "Fraunces", serif;
  font-size: 24px;
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--ink);
}
.course-sub {
  font-size: 13.5px;
  color: var(--ink-soft);
  margin-bottom: 18px;
  line-height: 1.5;
}
.course-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.tag {
  font-size: 11px;
  letter-spacing: 0.06em;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(139,26,31,0.07);
  color: var(--maroon);
  font-weight: 500;
}
@media (max-width: 1000px) { .courses-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .courses-grid { grid-template-columns: 1fr; } }

/* Touch devices have no :hover, and narrow viewports are usually touch — reveal the per-card CTA permanently in either case */
@media (hover: none), (max-width: 720px) {
  .course-cta { max-height: 28px; opacity: 1; transform: translateY(0); }
}