/* ==========================================================================
   Page: courses
   ========================================================================== */

/* Courses catalogue (courses.html) ------------------------------------------ */

.courses-heading { font-size: 26px; font-weight: 800; line-height: normal; }

/* "ابدأ هنا": featured comprehensive course */
.courses-start__inner {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding-block: 56px 24px;
}

.courses-featured {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr));
  gap: 28px;
  align-items: center;
  padding: 32px;
  border: 1.5px solid var(--c-primary);
  border-radius: 20px;
}
.courses-featured__body { display: flex; flex-direction: column; gap: 12px; }
.courses-featured__pill { padding: 6px 12px; font-size: 13px; line-height: normal; }
.courses-featured__title { font-size: 28px; font-weight: 800; line-height: normal; }
.courses-featured__desc { font-size: 16.5px; line-height: 1.8; color: var(--c-text-2); }
.courses-featured__meta { font-size: 15px; line-height: normal; color: var(--c-text-2); }
.courses-featured__meta strong { color: var(--c-ink); }

.courses-featured__buy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  padding: 24px;
  border-radius: 14px;
  background: var(--c-pale-2);
  line-height: normal;
}
.courses-featured__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; }
.courses-featured__amount { font-family: var(--font-head); font-size: 32px; font-weight: 900; }
.courses-featured__price s,
.courses-featured__intl s { color: var(--c-text-3); }
.courses-featured__intl { font-size: 15px; color: var(--c-text-2); }
.courses-featured__intl strong { color: var(--c-ink); }
.courses-featured__cta { height: 50px; padding: 0 26px; font-size: 16px; }

/* Specialised courses */
.courses-spec__inner {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding-block: 40px 24px;
}
.courses-spec__head { display: flex; flex-direction: column; gap: 6px; }
.courses-spec__note { font-size: 16px; line-height: normal; color: var(--c-text-2); }

.courses-grid { --min: 270px; }
/* Four cards: 2 × 2 instead of 3 + 1 on mid-size screens */
@media (max-width: 1199px) {
  .courses-grid { --min: 340px; }
}

.courses-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px;
  line-height: normal;
}
.courses-card__title { font-size: 20px; font-weight: 800; line-height: 1.4; }
.courses-card__desc { font-size: 14.5px; line-height: 1.75; color: var(--c-text-2); }
.courses-card__facts { list-style: none; display: flex; flex-direction: column; gap: 6px; font-size: 14px; color: var(--c-text-2); }
.courses-card__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
.courses-card__amount { font-family: var(--font-head); font-size: 22px; font-weight: 900; }
.courses-card__price s { font-size: 14px; color: var(--c-text-3); }
.courses-card__intl { font-size: 14px; color: var(--c-text-2); }
.courses-card__status { padding: 5px 10px; font-size: 13px; line-height: normal; white-space: normal; }
.courses-card__cta { margin-top: auto; }

@media (max-width: 720px) {
  .courses-heading { font-size: 24px; }
  .courses-start__inner { padding-top: 40px; }
  .courses-spec__inner { padding-top: 32px; padding-bottom: 40px; }
  .courses-featured { padding: 20px; gap: 20px; border-radius: var(--radius-lg); }
  .courses-featured__title { font-size: 24px; line-height: 1.45; }
  .courses-featured__buy { padding: 20px; }
  .courses-featured__amount { font-size: 28px; }
}