/* /courses: flat square cards, big image on top, text below */
html body .courses-section {
  background-color: #fff;
  background-image:
    radial-gradient(900px 340px at 50% 0, rgba(26,158,114,.09), transparent 70%),
    linear-gradient(rgba(11,61,46,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(11,61,46,.05) 1px, transparent 1px);
  background-size: auto, 44px 44px, 44px 44px;
  background-repeat: no-repeat, repeat, repeat;
  padding-top: 56px;
  padding-bottom: 96px;
}
html body .courses-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 64px 32px;
  align-items: start;
}
html body .course-card {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  transform: none !important;
  text-decoration: none;
  gap: 20px;
}
html body .course-card:hover { transform: none !important; box-shadow: none !important; }

html body .course-card .cc-thumb {
  position: relative;
  width: 100%;
  height: auto !important;
  aspect-ratio: 3 / 2;
  border-radius: 0 !important;
  overflow: hidden;
  box-shadow: none !important;
  transition: none !important;
}
html body .course-card .cc-thumb img {
  width: 100%; height: 100%; object-fit: cover; object-position: center;
  border-radius: 0 !important; transition: none !important; transform: none !important;
}
html body .course-card:hover .cc-thumb img { transform: none !important; }
html body .course-card .cc-level {
  position: absolute; top: 14px; left: 14px; z-index: 2;
  border-radius: 0 !important;
}
html body .course-card .cc-price {
  position: absolute; top: 14px; right: 14px; z-index: 2;
  border-radius: 0 !important;
  padding: 6px 13px; font-size: 13px; font-weight: 600; letter-spacing: .02em;
}
html body .course-card .cc-price.free { background: #1A9E72; color: #fff; }
html body .course-card .cc-price.paid { background: #0B3D2E; color: #fff; }

html body .course-card .cc-body {
  display: flex; flex-direction: column; gap: 10px;
  padding: 0 !important; flex: 1;
}
html body .course-card .cc-cat {
  font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: #1A9E72;
}
html body .course-card .cc-title {
  font-size: clamp(22px, 2.1vw, 27px);
  line-height: 1.3; font-weight: 400; letter-spacing: -.012em; color: #0f1f1a;
}
html body .course-card:hover .cc-title { color: #0f1f1a; }
html body .course-card .cc-desc {
  font-size: 15.5px; line-height: 1.65; color: #566a63;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
html body .course-card .cc-meta {
  display: flex; flex-wrap: wrap; gap: 8px 18px;
  font-size: 13px; color: #5b6b65; margin-top: 2px;
}
html body .course-card .cc-meta-item { display: inline-flex; align-items: center; gap: 6px; }
html body .course-card .cc-footer {
  border: 0 !important; padding: 8px 0 0 !important; margin-top: auto;
}
html body .course-card .cc-enroll,
html body .course-card .cc-enrolled {
  font-size: 15px; font-weight: 600; color: #0B3D2E;
  display: inline-flex; align-items: center; gap: 8px;
}
html body .course-card .cc-enrolled { color: #1A9E72; }

@media (max-width: 1000px) {
  html body .courses-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 52px 24px; }
}
@media (max-width: 640px) {
  html body .courses-grid { grid-template-columns: 1fr; gap: 44px; }
  html body .course-card .cc-title { font-size: 23px; }
}

/* enroll arrow: size + stroke (cc-arrow-v1) */
html body .course-card .cc-enroll, html body .course-card .cc-enrolled { white-space: nowrap; }
html body .course-card .cc-enroll svg { width: 14px; height: 14px; flex: 0 0 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* cover-fix-v1: show full course cover, no cropping */
html body .cc-thumb { aspect-ratio: 16 / 9 !important; height: auto !important; background: #EEF3F0 !important; }
html body .cc-thumb img { width: 100% !important; height: 100% !important; object-fit: contain !important; object-position: center !important; }
/* /cover-fix-v1 */