/* ═══════════════════════════════════════════════════════════════
   USTAWIENIA DLA URZĄDZEŃ MOBILNYCH
   ═══════════════════════════════════════════════════════════════
   Wczytywany po pozostałych arkuszach, więc jego reguły mają
   pierwszeństwo. Selektory zaczynają się od „html body”, żeby
   wygrać z klasami Tailwinda niezależnie od kolejności ładowania.

   Zawiera trzy grupy zmian:
     1. wyłączenie animacji pojawiania się sekcji
     2. oszczędzanie baterii — ograniczenie animacji ozdobnych
     3. czytelność — odstępy, cele dotyku, marginesy
   ═══════════════════════════════════════════════════════════════ */


/* ───────────────────────────────────────────────────────────────
   1. ANIMACJE POJAWIANIA SIĘ — WYŁĄCZONE NA TELEFONACH
   ───────────────────────────────────────────────────────────────
   Na komputerze sekcje wjeżdżają płynnie przy przewijaniu.
   Na telefonie to przeszkadza: treść bywa niewidoczna, dopóki
   nie przewinie się dokładnie w odpowiednie miejsce, a przy
   szybkim scrollowaniu elementy potrafią mignąć albo zostać puste.

   Poniżej cała strona jest widoczna od razu.
   Skrypt nadal dodaje klasę .visible — po prostu przestaje
   mieć znaczenie, więc nic w kodzie JS nie trzeba ruszać. */
@media (max-width: 1023px) {
  html body .reveal,
  html body .reveal.visible {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* To samo dla osób, które w systemie wyłączyły animacje —
   niezależnie od wielkości ekranu. Dotyczy również części
   odbiorców starszych, u których ruch na ekranie utrudnia
   czytanie albo powoduje dyskomfort. */
@media (prefers-reduced-motion: reduce) {
  html body .reveal,
  html body .reveal.visible {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  html body *,
  html body *::before,
  html body *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}


/* ───────────────────────────────────────────────────────────────
   2. OSZCZĘDZANIE BATERII I MOCY
   ───────────────────────────────────────────────────────────────
   Warstwa świetlnych cząsteczek przerysowuje się bez przerwy
   i na telefonie jest kosztowna, a przy małym ekranie prawie
   niewidoczna. Gwiazdy w tle zostają — dają klimat taniej. */
@media (max-width: 767px) {
  html body #particles-canvas { display: none !important; }

  /* Migotanie i unoszenie się elementów ozdobnych — wyłączone.
     Na małym ekranie ruch rozprasza bardziej, niż zdobi. */
  html body .animate-twinkle,
  html body .animate-float,
  html body .animate-pulse-slow {
    animation: none !important;
  }

  /* Rozmyte kule tła są drogie w rysowaniu — zmniejszamy je
     i wygaszamy zamiast usuwać, żeby tło nie zrobiło się płaskie. */
  html body .orb {
    filter: blur(50px) !important;
    opacity: 0.12 !important;
  }

  /* Efekt szkła bywa kosztowny na słabszych telefonach */
  html body .glass,
  html body .glass-purple {
    backdrop-filter: none !important;
    background: rgba(30, 14, 66, 0.82) !important;
  }
}


/* ───────────────────────────────────────────────────────────────
   3. CZYTELNOŚĆ NA MAŁYM EKRANIE
   ─────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {

  /* Odstępy między sekcjami — na telefonie 108 px pustki
     oznacza sporo przewijania w poszukiwaniu treści */
  html body .py-24 { padding-top: 3.5rem !important; padding-bottom: 3.5rem !important; }
  html body .py-20 { padding-top: 3rem !important;   padding-bottom: 3rem !important; }
  html body .mb-16 { margin-bottom: 2.5rem !important; }
  html body .mb-14 { margin-bottom: 2.25rem !important; }

  /* Wnętrza kart — mniej marginesu, więcej miejsca na tekst */
  html body .p-8  { padding: 1.5rem !important; }
  html body .p-9  { padding: 1.5rem !important; }
  html body .p-10 { padding: 1.65rem !important; }
  html body .p-7  { padding: 1.4rem !important; }

  /* Odstępy w siatkach kart */
  html body .gap-8 { gap: 1.25rem !important; }
  html body .gap-6 { gap: 1rem !important; }

  /* Nagłówki sekcji — domyślne text-3xl bywa za duże obok
     wąskiej kolumny tekstu i łamie się w brzydkich miejscach */
  html body h2.text-3xl { font-size: 1.6rem !important; line-height: 1.25 !important; }

  /* Cele dotyku — palec potrzebuje ok. 44 px.
     Dotyczy zwłaszcza starszych odbiorców, którzy trafiają mniej
     precyzyjnie. Linki w menu i stopce były wyraźnie za małe.

     Powiększamy je odstępem wewnętrznym, a nie sztywną wysokością
     wiersza — dzięki temu link łamiący się na dwie linie nadal
     wygląda poprawnie. */
  html body nav a,
  html body footer li a,
  html body footer .flex a,
  html body .toc-link {
    display: inline-block;
    padding-top: 0.55rem;
    padding-bottom: 0.55rem;
  }

  /* Okrągłe ikony społecznościowe w stopce — mają sztywne
     wymiary 32 px, więc odstęp wewnętrzny by ich nie powiększył.
     Ustawiamy rozmiar wprost. */
  html body footer a[aria-label] {
    width: 44px !important;
    height: 44px !important;
    padding: 0;
  }

  /* Wyjątek: linki wplecione w zdanie nie mogą rozpychać akapitu.
     Celowo NIE obejmuje to list nawigacyjnych w stopce — tam
     każdy odnośnik jest osobnym celem do kliknięcia. */
  html body p a,
  html body label a,
  html body .article-body li a,
  html body .prose-mystic li a {
    display: inline;
    padding-top: 0;
    padding-bottom: 0;
  }

  /* Przyciski i pola formularza — pełna szerokość i wysoki cel */
  html body button[type="submit"],
  html body .form-input {
    min-height: 48px;
  }

  /* Zabezpieczenie przed poziomym przewijaniem: długie adresy
     e-mail i linki potrafią rozepchnąć układ */
  html body { overflow-x: hidden; }
  html body p,
  html body li,
  html body h1,
  html body h2,
  html body h3 {
    overflow-wrap: break-word;
    word-break: normal;
  }
}