/* ===========================================================================
   Style doklejane do KAZDEJ strony learning.maksbronk.pl przez nginx
   (sub_filter, przed </head>). Zrodlo prawdy - stad buduje sie wstawke
   /etc/nginx/snippets/learning-polonizacja.conf skryptem 10-wstawka-nginx.sh.

   Dlaczego przez nginx, a nie w kodzie: LearnHouse przychodzi jako gotowy
   obraz. Wstawka nie dotyka kontenera, wiec przezywa kazda aktualizacje.
   Jesli aktualizacja zmieni klasy CSS, reguly przestana pasowac i strona
   wroci do wygladu fabrycznego - nic sie nie zepsuje.
   =========================================================================== */

/* --- 1. odnosniki do producenta ------------------------------------------- */
a[href*="learnhouse.io"], a[href*="learnhouse.app"] { display: none !important; }
div:has(> p > a[href*="learnhouse.io"]) { display: none !important; }
.login-topbar { display: none !important; }

/* --- 2. zakladki tylko dla zalogowanych -----------------------------------
   Gosc poznaje sie po odnosniku do logowania w naglowku - ten renderuje sie
   wylacznie przy niezalogowanej sesji. Blokade adresow robi nginx osobno. */
body:has(nav[aria-label="Top navigation"] a[href="/login"]) div:has(> div.ps-1 > ul) { display: none !important; }

/* --- 3. dopracowanie strony powitalnej ---------------------------------- */

/* --- pasek "Co stworzysz" ------------------------------------------------
   Fabrycznie: kafelek w ramce 220x120 z odstepem 64 px. Na telefonie kazdy
   zajmowal osobny, prawie pusty rzad - sama ta sekcja miala tam ~740 px. */
div.flex-wrap.gap-16 { gap: 22px !important; }
div.flex-wrap.gap-16 > div { width: auto !important; height: auto !important; }
div.flex-wrap.gap-16 img {
  width: 236px !important; height: auto !important;
  max-width: 100% !important; max-height: none !important;
}

/* --- powitanie -----------------------------------------------------------
   Naglowek konczyl sie na 30 px, co na duzym ekranie wyglada jak zwykly tekst. */
div[class*="min-h-[400px]"] h1 {
  font-size: clamp(28px, 3.5vw, 44px) !important;
  line-height: 1.12 !important;
  letter-spacing: -0.02em;
  margin-bottom: 18px !important;
}
div[class*="min-h-[400px]"] h2 {
  font-size: clamp(15px, 1.3vw, 18px) !important;
  line-height: 1.62 !important;
  max-width: 34em;
  margin-bottom: 30px !important;
}
div[class*="min-h-[400px]"] a {
  padding: 12px 24px !important;
  border-radius: 12px !important;
  font-size: 15px !important;
}

/* Fabryczny odstep pod naglowkiem sekcji to 64 px - za duzo, zwlaszcza gdy
   kafelki sa juz gestsze. */
h2.mb-16 { margin-bottom: 26px !important; }

/* --- sekcje z tekstem i grafika ------------------------------------------ */
div.py-16.w-full h2 { letter-spacing: -0.015em; }
div.py-16.w-full { padding-top: 44px !important; padding-bottom: 44px !important; }

/* --- telefon -------------------------------------------------------------- */
@media (max-width: 640px) {
  div.flex-wrap.gap-16 { gap: 12px !important; }
  div.flex-wrap.gap-16 img { width: 158px !important; }   /* dwa kafelki w rzedzie */
  div.py-16.w-full { padding-top: 26px !important; padding-bottom: 26px !important; }
  h2.mb-16 { margin-bottom: 16px !important; }
  div[class*="min-h-[400px]"] { min-height: 0 !important; margin-top: 12px !important; }
  div[class*="min-h-[400px]"] h1 { font-size: 27px !important; }
  div[class*="min-h-[400px]"] h2 { font-size: 15px !important; margin-bottom: 22px !important; }
}

/* --- karty sekcji ---------------------------------------------------------
   Karty sa biale na bialym tle i trzyma je tylko delikatny cien - dodajemy
   wlosowa krawedz i wieksze zaokraglenie, zeby mialy wyrazny kontur. */
div.py-16.w-full > div.bg-white {
  border: 1px solid #ECEFF3;
  border-radius: 18px;
}
/* Wygodna dlugosc wiersza - inaczej tekst ciagnie sie przez cala szerokosc. */
div.py-16.w-full p.whitespace-pre-line { max-width: 38em; }
/* Przycisk w sekcji dopasowany do tych z powitania. */
div.py-16.w-full a.rounded-xl {
  padding: 13px 26px !important;
  border-radius: 12px !important;
  font-weight: 600 !important;
}

/* --- ostatnie szlify -------------------------------------------------------
   Powitanie fabrycznie ma min. 500 px wysokosci, przez co pod przyciskami
   zostawal pusty pas. */
@media (min-width: 641px) {
  div[class*="min-h-[400px]"] { min-height: 440px !important; }
  /* Kafelki do lewej - tak jak naglowek sekcji nad nimi. Wysrodkowane
     zaczynaly sie w innym miejscu niz caly tekst strony. */
  div.flex-wrap.gap-16 { justify-content: flex-start !important; }
  div.flex.justify-center.w-full:has(> div.flex-wrap.gap-16) { justify-content: flex-start !important; }
}