/* ==========================================================================
   EduPlaner 2026 — warstwa layoutu (zamiast frameworka CSS, decyzja B1)
   Punkt podziału: 1000 px. Powyżej — desktop 1:1 z szablonem.
   Do 1000 px włącznie — wersja mobilna (decyzja A3).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Kontener i sekcje
   -------------------------------------------------------------------------- */

/* Szuflada nawigacji mobilnej stoi poza ekranem (translateX(100%)) i bez tego
   dokłada ~360 px do szerokości dokumentu — przeglądarka pokazuje wtedy poziomy
   pasek przewijania. `clip` zamiast `hidden`, bo nie tworzy kontenera
   przewijania i nie psuje przyklejonego nagłówka. */
html { overflow-x: clip; }
@supports not (overflow: clip) {
  html { overflow-x: hidden; }
}

.ep-kontener {
  max-width: var(--ep-kontener);
  margin: 0 auto;
  padding-left: var(--ep-kontener-pad);
  padding-right: var(--ep-kontener-pad);
}

.ep-sekcja {
  padding-top: var(--ep-sekcja-gora);
  padding-bottom: var(--ep-sekcja-dol);
}

/* Nagłówek sekcji: nadtytuł → tytuł → lead. Powtarza się 12 razy. */
.ep-sekcja__tytul {
  font-size: 44px;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0 0 14px;
}
.ep-sekcja__lead {
  color: var(--ep-akapit);
  font-size: 16.5px;
  line-height: 1.6;
  margin: 0 0 40px;
  max-width: 62ch;
}

/* --------------------------------------------------------------------------
   2. Siatki
   -------------------------------------------------------------------------- */

.ep-grid      { display: grid; }
.ep-grid--2   { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ep-grid--3   { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ep-grid--4   { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.ep-gap-10 { gap: 10px; }
.ep-gap-14 { gap: 14px; }
.ep-gap-18 { gap: 18px; }
.ep-gap-26 { gap: 26px; }
.ep-gap-34 { gap: 34px; }
.ep-gap-44 { gap: 44px; }
.ep-gap-52 { gap: 52px; }

/* --------------------------------------------------------------------------
   3. Widoczność zależna od wersji
   -------------------------------------------------------------------------- */

.ep-tylko-mobile  { display: none; }

/* --------------------------------------------------------------------------
   4. Wersja mobilna — do 1000 px
   -------------------------------------------------------------------------- */

@media (max-width: 1000px) {

  :root {
    --ep-kontener-pad: 20px;
    --ep-sekcja-gora: 56px;
    --ep-sekcja-dol: 12px;
  }

  .ep-tylko-desktop { display: none !important; }
  .ep-tylko-mobile  { display: block; }

  /* Wszystkie siatki wielokolumnowe schodzą do jednej kolumny.
     Wyjątki (np. kafle statystyk w hero, które mieszczą się w trzech)
     deklarowane są punktowo w arkuszach sekcji. */
  .ep-grid--2,
  .ep-grid--3,
  .ep-grid--4 { grid-template-columns: minmax(0, 1fr); }

  .ep-gap-34 { gap: 22px; }
  .ep-gap-44 { gap: 26px; }
  .ep-gap-52 { gap: 28px; }

  .ep-sekcja__tytul { font-size: 30px; line-height: 1.15; }
  .ep-sekcja__lead  { font-size: 15.5px; margin-bottom: 28px; }

  /* Ramka pasera przy wąskich ekranach kolidowała z krawędzią ekranu —
     zmniejszamy wysunięcie znaczników. */
  .ep-blueprint > .ep-corner.tl { top: -4px; left: -4px; }
  .ep-blueprint > .ep-corner.tr { top: -4px; right: -4px; }
  .ep-blueprint > .ep-corner.bl { bottom: -4px; left: -4px; }
  .ep-blueprint > .ep-corner.br { bottom: -4px; right: -4px; }
}

/* Korekta skali na najmniejszych ekranach — bez zmiany układu. */
@media (max-width: 420px) {
  :root { --ep-kontener-pad: 16px; }
  .ep-sekcja__tytul { font-size: 26px; }
}

/* Nagłówki w treści stron (regulamin, polityka, dostępność, wpisy): równy odstęp nad i pod. */
.ep-tresc__body h2 { margin: 16px 0; }