/* ==========================================================================
   Podstrona Badanie wzroku - grafik i dostepnosc.
   Uczciwy blok domykajacy: nie obiecuje terminu ani zakresu badania, tylko
   kieruje do rozmowy i do Facebooka. Jedna zmiana tonalna na calej stronie
   (panel), potem juz tylko ciemna stopka.
   ========================================================================== */

.bw-grafik {
  /* Token --hairline na tle --panel jest praktycznie niewidoczny - obie
     powierzchnie dzieli mniej niz 4% luminancji. Linie liczymy z --ink
     przez color-mix, nadal bez ani jednej wartosci koloru poza tokenami. */
  --bw-line: color-mix(in srgb, var(--ink) 15%, transparent);

  background: var(--panel);
  padding-block: var(--section);
}

.bw-grafik__in {
  display: grid;
  gap: clamp(2.25rem, 5vw, 3.5rem);
}

@media (min-width: 900px) {
  .bw-grafik__in {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: clamp(3rem, 6vw, 6rem);
    align-items: start;
  }
  /* Wiersze ida przez cala szerokosc sekcji, nie tylko pod akapitem: dwie
     pelne linie domykaja blok i nie zostawiaja pustego pola pod naglowkiem. */
  .bw-grafik__rows { grid-column: 1 / -1; }
}

/* --- Naglowek ----------------------------------------------------------- */
.bw-grafik__eyebrow {
  display: block;
  margin-bottom: clamp(1.1rem, 2.4vw, 1.75rem);
}

.bw-grafik__h {
  font-size: clamp(2rem, 1.25rem + 2.6vw, 3.4rem);
  line-height: 1.04;
  letter-spacing: -0.02em;
}
.bw-grafik__h .serif { font-size: 1.04em; }

/* --- Tresc -------------------------------------------------------------- */
.bw-grafik__p {
  max-width: 48ch;
  color: var(--ink-soft);
  text-wrap: pretty;
}

.bw-grafik__note {
  max-width: 46ch;
  margin-top: clamp(0.9rem, 1.8vw, 1.25rem);
  font-size: 0.85rem;
  line-height: 1.65;
  color: var(--muted);
}

.bw-grafik__rows { margin-top: clamp(1.9rem, 3.4vw, 2.75rem); }

@media (min-width: 900px) {
  /* Odstep wnosi juz gap siatki - dokladamy tylko tyle, ile trzeba,
     zeby pierwsza linia nie kleila sie do akapitu. */
  .bw-grafik__rows { margin-top: clamp(0.5rem, 1.4vw, 1.1rem); }
}

/* Komponent .rule-row rysuje sie hairlinem liczonym dla papieru - na panelu
   zostaje z niego widmo. Podmieniamy sam kolor, reszta komponentu bez zmian. */
.bw-grafik .rule-row { border-color: var(--bw-line); }
.bw-grafik .rule-row:first-child { border-top-color: var(--bw-line); }

.bw-grafik__val { transition: color var(--dur) var(--ease); }