/* sections/course_corefeatures.php — siatka 8 kluczowych elementów kursu pod
   hero podstrony kursu. Tło białe, celowo bez slab-warm — bezpośrednio pod
   tintem hero potrzeba kontrastu, nie kolejnej kolorowej płyty. */
.ccf { padding: 32px 0 40px; }
@media (min-width: 1024px) { .ccf { padding: 56px 0 64px; } }

.ccf-title { text-align: center; text-wrap: balance; }
.ccf-lead {
  margin: 10px auto 0; max-width: 640px;
  text-align: center;
}

.ccf-grid { margin-top: 0; }
@media (min-width: 1024px) { .ccf-grid { margin-top: 36px; } }

/* Card pozioma: ikona po lewej, tytuł + tekst po prawej. Ściśnięta na mobile,
   żeby 8 elementów nie rozciągało stronę w nieskończoność. */
.ccf-card {
  display: flex; flex-direction: row; align-items: flex-start; gap: 12px;
  padding: 14px 16px;
  height: 100%;
}
@media (min-width: 1024px) {
  .ccf-card { padding: 18px 20px; gap: 14px; }
}

.ccf-card-body { min-width: 0; }
.ccf-card-title {
  margin: 0 0 3px;
  font-family: var(--ds-font-display); font-weight: 600;
  font-size: 15px; line-height: 1.3; letter-spacing: -0.005em;
  color: var(--ds-color-ink);
}
.ccf-card-text {
  margin: 0;
  font-size: 13px; line-height: 1.45;
  color: var(--ds-color-ink-muted);
}
@media (min-width: 1024px) {
  .ccf-card-title { font-size: 16px; }
  .ccf-card-text { font-size: 14px; }
}

/* Kolor kafelka ikony jest dekoracyjny i niezależny od koloru przedmiotu
   kursu (patrz komentarz nagłówkowy) — paleta ogólna, reużywa istniejące
   tokeny tint/deep zamiast wpisywać nowe hexy w markup. Pierścień kafelka
   pozostaje neutralny (domyślny .icon-tile z design-system.css). */
.ccf-ic--blue   { background-color: var(--ds-color-primary-tint);        color: var(--ds-color-primary-ink); }
.ccf-ic--green  { background-color: var(--ds-color-success-tint);        color: var(--ds-color-success-ink); }
.ccf-ic--amber  { background-color: var(--ds-color-cta-solar-tint);      color: var(--ds-color-cta-solar-ink); }
.ccf-ic--purple { background-color: var(--ds-subj-chemia-tint);          color: var(--ds-subj-chemia-deep); }
.ccf-ic--pink   { background-color: var(--ds-subj-angielski-tint);       color: var(--ds-subj-angielski-deep); }
.ccf-ic--cyan   { background-color: var(--ds-subj-informatyka-tint);     color: var(--ds-subj-informatyka-deep); }
.ccf-ic--orange { background-color: var(--ds-subj-wos-tint);             color: var(--ds-subj-wos-deep); }
.ccf-ic--teal   { background-color: var(--ds-subj-geografia-tint);       color: var(--ds-subj-geografia-deep); }

.ccf-cta-row { display: flex; justify-content: center; margin-top: 28px; }
.ccf-cta { width: 100%; }
@media (min-width: 480px) { .ccf-cta { width: auto; min-width: 260px; } }