/* ============================================================ OPIEKA — sekcja: guide („Cześć, jestem Łukasz") ------------------------------------------------------------ Plik roboczy jednej sekcji, ładowany PO opieka.css, więc nadpisuje reguły z tamtego pliku bez !important. Powstał 2026-08-27. Zero hardkodów: kolory, typografia, odstępy tylko przez var(--token). ============================================================ */ /* ---------- Zdjęcie: twardy sufit szerokości ---------- Uwaga Łukasza: „moje zdjęcie jest stanowczo za duże". Zmierzone przed zmianą, na `getBoundingClientRect`: okno 1440 → 282 × 352 px okno 900 → 288 × 360 px okno 768 → 706 × 882 px ← tutaj jest właściwy problem okno 700 → 642 × 802 px okno 600 → 547 × 684 px okno 390 → 349 × 436 px Poniżej 768 px układ schodzi do jednej kolumny i zdjęcie dostaje CAŁĄ szerokość sekcji, czyli portret wysoki na 882 px, wyższy niż ekran telefonu. Plik źródłowy ma 336 × 455 px, więc przy 706 px szerokości jest rozciągany ponad dwukrotnie i po prostu się rozmywa. Sufit 20rem (200 px) obowiązuje w OBU układach, dlatego stoi na samym obrazie, a nie tylko na kolumnie siatki. Przy 200 × 250 px twarz jest rozpoznawalna, a zdjęcie przestaje być bohaterem ekranu i wraca do roli podpisu pod tekstem. Skala do źródła spada z 2,1x do 0,6x, więc obraz jest ostry także na ekranach o podwójnej gęstości. */ .opieka-guide__photo img { max-width: 20rem; } /* ---------- Dwie kolumny ---------- Kolumna zdjęcia dostaje sufit zamiast udziału 0.8fr. Przy udziale rosła razem z sekcją i zjadała 37% kolumny treści. Teraz kolumna tekstu bierze wszystko, co zostanie, więc wiersz akapitu rośnie z 41 do około 50 znaków, czyli wchodzi w wygodny zakres czytania. */ .opieka-guide__inner { grid-template-columns: minmax(0, 20rem) minmax(0, 1fr); gap: var(--space-5); } /* ---------- Kiedy schodzimy do jednej kolumny ---------- Druga uwaga Łukasza: „nie zmieniałbym do pewnego momentu, później bym zmieniał na układ mobilny". Miał rację i przyczyna jest mierzalna. ⚠️ STARY PRÓG PYTAŁ O SZEROKOŚĆ OKNA, A UKŁAD ZALEŻY OD SZEROKOŚCI SEKCJI. Kontener strony ma 768 px (--container-page), ale sekcja ma jeszcze --page-padding z każdej strony. Przy oknie 768 px sekcja dostaje więc 706 px, nie 768. Stary próg `max-width: 768px` zabijał dwie kolumny dokładnie wtedy, gdy sekcja miała jeszcze 92% swojej maksymalnej szerokości. Żeby wnętrze sekcji w ogóle dobiło do 768 px, okno musi mieć około 830 px, czego stary próg nigdy nie dopuszczał. Nowy próg wynika z pomiaru, nie z okrągłej liczby: patrz komentarz przy samej regule niżej. */ /* Powyżej nowego progu wracamy do dwóch kolumn, mimo reguły z opieka.css. */ @media (max-width: 768px) { .opieka-guide__inner { grid-template-columns: minmax(0, 20rem) minmax(0, 1fr); } } /* Nowy próg: 620 px szerokości OKNA. Wynik pomiaru co 40 px, z sufitem zdjęcia już założonym. Mierzone: ile znaków mieści wiersz akapitu (canvas measureText na realnym foncie, nie oszacowanie), ile linii bierze nagłówek i jak wysoka jest cała sekcja. okno 900 → 55 znaków, h2 w 1 linii, sekcja 500 px okno 780 → 51 znaków, h2 w 1 linii, sekcja 510 px okno 700 → 43 znaki, h2 w 1 linii, sekcja 412 px okno 660 → 39 znaków, h2 w 2 liniach, sekcja 510 px okno 620 → 36 znaków, h2 w 2 liniach, sekcja 504 px ← ostatnia dobra okno 580 → 32 znaki, sekcja 559 px ← tu się psuje okno 540 → 28 znaków, sekcja 644 px okno 500 → 24 znaki, h2 w 3 liniach, sekcja 735 px Dwa niezależne sygnały wskazują to samo miejsce. Wiersz schodzi poniżej około 32 znaków, czyli poniżej progu, przy którym tekst czyta się rwanie, a wysokość sekcji zaczyna ROSNĄĆ przy zwężaniu, zamiast maleć. Od tego punktu dwie kolumny kosztują wysokość, zamiast ją oszczędzać, więc jedna kolumna jest po prostu lepsza. Stary próg 768 px odcinał układ przy 51 znakach w wierszu, czyli w chwili, gdy dwukolumnowy układ był w pełni sprawny. Nowy próg wydłuża jego działanie o 148 px szerokości okna. */ @media (max-width: 620px) { .opieka-guide__inner { grid-template-columns: 1fr; } }