/* ag-poradnik.css — poradniki jako STRONA, nie jako wydruk A4.
   ============================================================================
   Pliki poradnikow to przerobione PDF-y i ciagna za soba cala maszynerie druku:
     .page{width:210mm;min-height:297mm}      — kartka A4
     body{background:#eceef1}                 — szare tlo, zeby kartki "lezaly"
     .page{box-shadow:0 2px 14px ...}         — cien kartki
     .page img{max-height:380px}              — kadrowanie pod lamanie stron
     inline style="height:50mm;object-fit:cover" na zdjeciach w tresci
   Dwie ostatnie rzeczy SPLASZCZALY zdjecia: zrodla maja 1600x1067, a renderowaly
   sie jako pasek 189 px wysokosci na pelnej szerokosci.

   Ten arkusz sprowadza poradniki do ukladu reszty serwisu: biale tlo, sekcje na
   1180 px (pole tresci 1140 px), tekst 850 px przy tej samej lewej krawedzi, zdjecia
   na pelna szerokosc sekcji w proporcji 16:9.

   WSZYSTKO musi byc !important, bo nadpisywane reguly same uzywaja !important,
   a przy zdjeciach dochodzi jeszcze styl inline.
   ============================================================================ */

/* --- 1. Tlo strony: bialy serwis, nie szary stol z kartkami --- */
body {
  background: #fff !important;
}

/* --- 2. Sekcje tresci: szerokosc serwisu, zero karty --- */
.page {
  width: auto !important;
    /* 1180 px, czyli ta sama kolumna co navbar, stopka i strona glowna */
  max-width: 1180px !important;
  min-height: auto !important;
  margin: 0 auto !important;
  padding: 30px 20px !important;
  overflow: visible !important;
  page-break-after: auto !important;
}

.page:not(.cover):not(.cta-page):not(.promo-page) {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  border-radius: 0 !important;
}

/* stopki stron z wydruku ("str. 3 z 19") */
.page .pfoot {
  display: none !important;
}

/* Kolofon z wydruku w pasie CTA: "Advantage Gastro, marketing i doradztwo...
   www / e-mail / tel.". W PDF miał sens, bo plik zyje samodzielnie. Na stronie te same
   dane sa w stopce kilkadziesiat pikseli nizej, a przycisk kontaktu jest w tym samym
   pasie. Do tego byl tylko na czesci poradnikow. */
.page .contact {
  display: none !important;
}

/* --- 3. Model ze strony glownej: JEDNA lewa krawedz, rozne prawe ---
   Strona glowna robi to tak (sekcja "Dlaczego my", zmierzone):
     .wy2head (naglowek + wstep)  720 px, lewa krawedz 62
     .wy2grid (siatka kart)      1140 px, lewa krawedz 62
   Czyli tekst jest WEZSZY, ale zaczyna sie w tym samym miejscu co szeroka siatka.
   Wyrownanie robi lewa krawedz, nie rowna szerokosc.

   ⛔ Nie wysrodkowywac waskich blokow (`margin-left:auto`). Probowalem i kazdy blok
   zaczynal sie wtedy gdzie indziej. Klient nazwal to "tekst rozwalony" i mial racje. */
.page > * {
  /* wysrodkowane, bo szerokosci sa tylko DWIE (700 tekst / 1140 media) i przy dwoch
     wartosciach wysrodkowanie daje dwie rowne krawedzie, a nie szachownice.
     Szachownica brala sie z trzech roznych szerokosci wysrodkowanych niezaleznie. */
  margin-left: auto !important;
  margin-right: auto !important;
  max-width: 100% !important;
}

/* tekst: 750px.
   Sam limit w pikselach nie wystarcza: blok z mniejszym fontem miescil w 850 px
   az 88 znakow (tak bylo na wizytowka-google). `ch` liczy sie od szerokosci znaku,
   wiec limit 80 znakow trzyma sie niezaleznie od stopnia pisma, a 850 px pilnuje,
   zeby kolumna nie urosla wizualnie. */
.page > .kicker,
.page > h2,
.page > h3,
.page > .sec-sub,
.page > p,
.page > ul,
.page > ol,
.page > blockquote {
  max-width: 100% !important;
}

/* limit 80 znakow dotyczy takze tekstu WEWNATRZ szerokich ramek i siatek,
   nie tylko akapitow bezposrednio w sekcji. Bez tego ramka na 1140 px dawala
   111 znakow w wierszu. W waskich kolumnach siatki regula nic nie zmienia. */
.page p,
.page li {
  font-size: 19px !important;
  line-height: 1.7 !important;
  max-width: 100% !important;
}

/* zdjecia, siatki i ramki: pelna szerokosc sekcji, ta sama lewa krawedz */
.page > img,
.page > figure {
  max-width: 100% !important;
}

.page h2,
.page h2.sec {
  font-size: clamp(27px, 2.9vw, 34px) !important;
  font-weight: 900 !important;
  line-height: 1.16 !important;
  letter-spacing: -.02em !important;
  /* NIE skrot `margin`: wyzerowalby margin-left/right:auto i naglowek przestalby
     byc wysrodkowany w kolumnie tekstu. */
  margin-top: 6px !important;
  margin-bottom: 10px !important;
}

.page h3 {
  font-size: 21px !important;
  line-height: 1.3 !important;
}

.page .sec-sub {
  font-size: 18px !important;
  line-height: 1.6 !important;
  /* podtytul nalezy do warstwy TEKSTOWEJ, nie medialnej. Zostal tu z wczesniejszej
     wersji na calc(100% - 2px) i jako jedyny biegl przez cale 1138 px. */
  max-width: 100% !important;
}

/* --- 4. Zdjecia: pelna szerokosc sekcji, stala proporcja, zero splaszczania ---
   Nadpisujemy inline height:50mm i max-height:380px ze starej warstwy druku. */
.page img {
  width: 100% !important;
  height: auto !important;
  max-height: none !important;
  aspect-ratio: 16 / 9;
  object-fit: cover !important;
  border-radius: 16px !important;
  display: block !important;
  margin-top: 18px !important;
}

/* --- 5. Okladka jako hero na pelna szerokosc okna --- */
.page.cover {
  max-width: none !important;
  width: 100% !important;
  margin: 0 0 8px !important;
  padding: 70px 20px 74px !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.page.cover > div {
  /* 1140, nie 1180: hero ma wlasny padding 20 px, wiec przy 1180 tekst nagłówka
     startowal 20 px na lewo od tresci sekcji (42 zamiast 62) */
  max-width: 1140px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  width: 100%;
}

.page.cover h1 {
  font-size: clamp(34px, 4.6vw, 56px) !important;
  line-height: 1.06 !important;
  letter-spacing: -.025em !important;
}

.page.cover .lead {
  font-size: 18.5px !important;
  line-height: 1.6 !important;
  /* lead w hero to tez tekst: ta sama warstwa 700 px, wyrownany do lewej pod H1 */
  max-width: 1140px !important;
}

.page.cover .rule {
  width: 84px !important;
  margin: 24px 0 !important;
}

/* kolofon z wydruku: zostaje tylko informacja o serii */
.page.cover .foot {
  font-size: 0 !important;
  margin-top: 26px !important;
}

.page.cover .foot .series {
  font-size: 13px !important;
  line-height: 1.6 !important;
}

/* --- 6. Koncowe CTA tez na pelna szerokosc --- */
.page.cta-page,
.page.promo-page {
  max-width: none !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 64px 20px !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.page.cta-page > *,
.page.promo-page > * {
  /* 1140, tak jak reszta tresci; przy 1180 blok promocyjny na sprzedaz-kelnerska
     wychodzil 20 px szerzej niz wszystko inne */
  max-width: 1140px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* tekst w pasie CTA tez trzyma limit 80 znakow. Selektor musi byc mocniejszy niz
   regula wyzej (dwie klasy + typ), inaczej akapit CTA dostawal 1180 px i 111 znakow. */
.page.cta-page > p,
.page.promo-page > p,
.page.cover .lead {
  max-width: 1140px !important;
}

/* --- 7. Bloki i siatki: bez wlasnych szerokosci ---
   Celowo nic tu nie ustawiamy. Szerokosc daje regula `.page > *` wyzej, dzieki czemu
   akapit, cytat, ramka z porada i siatka zaczynaja sie w tej samej linii co zdjecie. */

/* --- 8. Telefon --- */
@media (max-width: 760px) {
  .page {
    padding: 22px 18px !important;
  }

  .page.cover {
    padding: 48px 18px 52px !important;
  }

  .page p,
  .page li {
    font-size: 17.5px !important;
  }

  .page .sec-sub {
    font-size: 16.5px !important;
  }

  .page img {
    aspect-ratio: 3 / 2;
    border-radius: 12px !important;
  }
}

/* --- 9. Bloki spoza sekcji: warstwa TEKSTOWA, nie medialna ---
   Na stronie poradnika stoja cztery bloki poza `.page`, kazdy mial wlasna szerokosc:
   .seealso i .clienttools 932 px, .agk 820 px, .pwz 980 px.

   .seealso / .clienttools / .agk to bloki TEKSTOWE (listy linkow z opisami), wiec ida
   do tej samej warstwy co akapity: 700 px. .pwz to siatka kafelkow, wiec zostaje
   w warstwie medialnej na 1140 px. Lewa krawedz u wszystkich ta sama.

   ⚠️ Padding boczny MUSI zostac. Wyzerowalem go kiedys, zeby zrownac krawedzie, i tekst
   zaczal dotykac krawedzi tla (te bloki maja wypelnienie, nie sa przezroczyste). */
.seealso,
.clienttools,
.agk {
  max-width: 1140px !important;
  /* te bloki NIE siedza w `.page`, tylko bezposrednio w stronie, wiec `margin-left:0`
     wyrzuca je na krawedz okna. Liczymy margines tak, zeby trafily w lewa krawedz
     kolumny tresci: (szerokosc strony - 1140) / 2, z zabezpieczeniem na waskie ekrany. */
  margin-left: auto !important;
  margin-right: auto !important;
  margin-top: 34px !important;
  margin-bottom: 34px !important;
  padding-left: 22px !important;
  padding-right: 22px !important;
}

.pwz {
  max-width: 1140px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  /* wlasny padding 24 px przesuwal kafelki o 24 px w prawo wzgledem zdjec;
     szerokosc 1140 juz odpowiada polu tresci sekcji, wiec padding jest zbedny */
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* .agk ma wlasna ramke w srodku (.agk-in), wiec zewnetrzny padding tylko mu przeszkadza */
.agk {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* pismo w tych blokach bylo 11,9-12,9 px, czyli mniejsze niz w stopce */
.seealso p,
.seealso li,
.clienttools p,
.clienttools li,
.clienttools .lead {
  font-size: 15px !important;
  line-height: 1.6 !important;
  max-width: 100% !important;
}

.seealso .seax {
  font-size: 13.5px !important;
}

@media (max-width: 900px) {
  .seealso,
  .clienttools,
  .pwz {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }
}