:root {
  --white: #ffffff;
  --off-white: #f8f6f2;
  --ink: #1a1a18;
  --mid: #6b6b66;
  --rule: #d4d0c8;
  --accent: #4a7c59;
  --hero-h: 58vh;
}

/* ── HERO ─────────────────────────────────────────────── */
.course-summary {
  margin-bottom: 2rem;
}
.course-summary .course-summary-hero {
  position: relative;
  width: 100%;
  height: var(--hero-h);
  overflow: hidden;
  background: #1c2b1e;
  background-size: cover;
}

.course-summary-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 60%, rgba(15, 22, 16, 0.35) 100%);
}


/* ── CONTENT ──────────────────────────────────────────── */

.course-prefecture {
  font-size: 1.375rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  color: #000;
  margin-bottom: 0.75rem;
  opacity: 0;
  animation: fadeUp 0.5s 0.55s ease forwards;
}

.course-content .content__title {
  font-size: clamp(2.1429rem, 3.33vw, 3.4286rem);
  font-weight: 300;
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: #1a1a1a;
  text-transform: uppercase;
  margin-bottom: 1.4rem;
  opacity: 0;
  animation: fadeUp 0.6s 0.65s ease forwards;
}

.course-content .content__title em {
  font-style: normal;
}

.course-content .content__body {
  font-weight: 300;
  line-height: 1.75;
  color: #000000;
  max-width: 768px;
  opacity: 0;
  animation: fadeUp 0.6s 0.78s ease forwards;
}

/* ── KEYFRAMES ────────────────────────────────────────── */
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ── RESPONSIVE ───────────────────────────────────────── */
@media (max-width: 600px) {
  .stats {
    flex-wrap: wrap;
  }
  .stats__item {
    flex: 0 0 33.333%;
    border-bottom: 1px solid var(--rule);
  }
  .stats__item:nth-child(3),
  .stats__item:nth-child(6) {
    border-right: none;
  }
  .course-content {
    padding: 2rem 1.25rem 3rem;
  }
}

.description-text {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.description-text.text-5-line {
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.description-text.expanded {
  display: inline;
  -webkit-line-clamp: unset;
  overflow: visible;
}