/* sections/home_corefeatures.php — siatka 6 elementów kursu na stronie głównej. Wariant sekcji `course_corefeatures` z landingu: ten sam card, sześć pozycji i trzy kolumny na desktopie. Tło białe (.m-sec) — nagłówek niesie obietnicę wyniku, więc sekcja nie potrzebuje własnej płyty, żeby się wybić. Rytm pionowy bierze --ds-section-y z design-system.css (40px / 72px), nie własne wartości — sekcja ma stać w tym samym rytmie co reszta strony. */ /* Nagłówek w `ink`, nie w odziedziczonym po `ink-secondary`: to on ma prowadzić wzrok w tej sekcji, a tytuły cardów są już w `ink` — bez tego hierarchia stoi na głowie (nagłówek jaśniejszy od podpisów pod nim). */ .hcf-title { margin: 0; color: var(--ds-color-ink); text-align: center; text-wrap: balance; } .hcf-lead { margin: 12px auto 0; max-width: 620px; text-align: center; /* `balance` zamiast globalnego `pretty` dla

: na 360px lead łamie się na cztery linie i domyślnie zostawia w ostatniej dwa słowa („to polega."), co pod wyśrodkowanym nagłówkiem czyta się jak literówka w składzie. */ text-wrap: balance; color: var(--ds-color-ink-secondary); /* APCA: Lc 96 na bieli, próg dla 16px = 75 */ } .hcf-grid { margin-top: 24px; } @media (min-width: 1024px) { .hcf-grid { margin-top: 36px; } } /* Card poziomy: kafel ikony po lewej, tytuł + tekst po prawej. Na mobile sześć takich kart to jedna kolumna, więc padding zostaje ciasny — sekcja nie ma rozciągnąć pierwszego kadru poza zasięg kciuka. */ .hcf-card { display: flex; flex-direction: row; align-items: flex-start; gap: 12px; /* Boczny padding ścięty na życzenie (był 16px) — góra/dół zostają. */ padding: 14px var(--ds-space-3); height: 100%; } @media (min-width: 1024px) { .hcf-card { padding: 18px 20px; gap: 14px; } } .hcf-card-body { min-width: 0; } /* Stopnie pisma niosą klasy systemowe (.text-title = 15px, .text-body-sm = 14px) — tu zostaje tylko rytm i kolor. Interlinia tytułu schodzi z 1.4 do 1.3, bo w karcie łamie się on na dwie linie i 1.4 rozjeżdża blok. */ .hcf-card-title { margin: 0 0 3px; line-height: 1.3; color: var(--ds-color-ink); } .hcf-card-text { margin: 0; line-height: 1.45; color: var(--ds-color-ink-muted); /* APCA: Lc 93 na bieli, próg dla 14px = 85 */ } /* Kolor kafelka ikony jest dekoracyjny i niezależny od koloru przedmiotu (patrz komentarz nagłówkowy sekcji) — reużywa istniejące tokeny tint/deep, zamiast wpisywać nowe hexy w markup. Pierścień kafelka zostaje neutralny (domyślny .icon-tile z design-system.css). Ta paleta powtarza się już w .ccf-ic--* (course_corefeatures.css); jeśli pojawi się w trzeciej sekcji, wraca do design-system.css jako modyfikatory .icon-tile--* — na razie świadomie zostaje lokalnie, żeby nie ruszać tokenów przy okazji innej pracy (CLAUDE.md → „Czego nie robić"). */ .hcf-ic--blue { background-color: var(--ds-color-primary-tint); color: var(--ds-color-primary-ink); } .hcf-ic--green { background-color: var(--ds-color-success-tint); color: var(--ds-color-success-ink); } .hcf-ic--amber { background-color: var(--ds-color-cta-solar-tint); color: var(--ds-color-cta-solar-ink); } .hcf-ic--purple { background-color: var(--ds-subj-chemia-tint); color: var(--ds-subj-chemia-deep); } .hcf-ic--pink { background-color: var(--ds-subj-angielski-tint); color: var(--ds-subj-angielski-deep); } .hcf-ic--teal { background-color: var(--ds-subj-geografia-tint); color: var(--ds-subj-geografia-deep); } .hcf-cta-row { display: flex; justify-content: center; margin-top: 28px; } .hcf-cta { width: 100%; } @media (min-width: 480px) { .hcf-cta { width: auto; min-width: 260px; } }