/* Nadruki i hafty.
   Uklad sekcji (.fr-band, .fr-split, .fr-sekcja__title) bierzemy
   z base.css, tu zostaja tylko rzeczy, ktorych nie ma nigdzie indziej:
   kafelki cennika, ponumerowane kroki i dwie kolumny porownania. */

/* Sekcja otwierajaca.
   Zdjecie idzie do samej krawedzi po prawej, bo to jedyne ujecie
   w calej sesji, na ktorym widac nadruk, a ta strona jest wlasnie
   o nadruku. Bez zdjecia tekst zwezamy zamiast rozciagac go na cala
   szerokosc: wiersz na 1200 px czyta sie gorzej niz na 60 znakach. */
.fr-znak__hero{padding-block:48px 0;overflow:hidden}
.fr-znak__hero-inner{display:grid;grid-template-columns:1fr 1.02fr;gap:64px;
  align-items:center;padding-block:0 72px}
/* Bez zdjecia zwezamy TEKST, a nie .fr-wrap. Wrap ma
   margin-inline:auto, wiec max-width na nim wysrodkowalby
   cala sekcje, i tytul ladowal na srodku ekranu. */
.fr-znak__hero--bez-zdjecia .fr-znak__hero-inner{grid-template-columns:1fr}
.fr-znak__hero--bez-zdjecia .fr-znak__hero-tekst{max-width:720px}
.fr-znak__hero-media{margin-right:calc(var(--gut) * -1)}
.fr-znak__hero-img{display:block;width:100%;height:auto}

.fr-znak__eyebrow{margin:0 0 14px;font-size:12px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--gold-tekst)}
.fr-znak__title{margin:0 0 18px;font-size:52px;line-height:1.06;letter-spacing:-.025em}
.fr-znak__lead{margin:0;font-size:20px;line-height:1.55;color:var(--muted);max-width:46ch}

/* Trzy fakty: cena, podglad, termin. Po nie tu klientka przychodzi,
   wiec stoja nad zgieciem, a nie dopiero w cenniku. */
.fr-znak__fakty{list-style:none;margin:30px 0 0;padding:26px 0 0;
  border-top:1px solid var(--line);
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px 24px}
.fr-znak__fakty li{display:flex;flex-direction:column;gap:3px;min-width:0}
.fr-znak__fakty strong{font-family:var(--f-display);font-size:23px;
  font-weight:500;line-height:1.1;white-space:nowrap}
.fr-znak__fakty span{font-size:13.5px;line-height:1.45;color:var(--muted)}

.fr-znak__hero-akcje{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px}

/* Cennik */
.fr-cennik{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.fr-cena{display:flex;flex-direction:column;gap:6px;
  background:var(--ivory);border:1px solid var(--line);padding:24px 22px 22px}
.fr-cena__co{font-size:13px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted)}
.fr-cena__ile{font-family:var(--f-display);font-size:34px;line-height:1.1}
.fr-cena__gdzie{font-size:15px;color:var(--muted)}
.fr-cena__opis{margin:10px 0 0;font-size:15px;line-height:1.6;color:var(--muted)}

/* Haft nie ma kwoty, tylko zdanie, wiec zajmuje caly rzad.
   Kafelek z napisem „wycena indywidualna" w kolumnie obok kwot
   wygladal jak brakujaca cena, a nie jak inny sposob rozliczenia. */
.fr-cena--haft{grid-column:1 / -1;background:var(--stone);border-color:var(--stone)}
.fr-cena--haft .fr-cena__ile{font-size:26px}
.fr-cena--haft .fr-cena__opis{max-width:74ch}
.fr-cena--haft .fr-link{align-self:flex-start;margin-top:14px}

/* Kroki. Numer jest informacja, bo kolejnosc naprawde obowiazuje:
   podglad przed drukiem jest cala obietnica tej strony. */
.fr-kroki{list-style:none;margin:0;padding:0;counter-reset:krok;
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:30px}
.fr-krok{display:flex;flex-direction:column;gap:10px;
  padding-top:18px;border-top:2px solid var(--accent-on-dark)}
.fr-krok__nr{font-family:var(--f-display);font-size:15px;font-weight:600;
  letter-spacing:.1em;color:var(--accent-on-dark)}
.fr-krok__title{margin:0;font-size:21px;font-weight:500}
.fr-krok__opis{margin:0;font-size:16px;line-height:1.6}

/* Porownanie */
.fr-wybor{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:48px}
.fr-wybor__karta{border-top:2px solid var(--ink);padding-top:20px}
.fr-wybor__title{margin:0 0 12px;font-size:28px}
.fr-wybor__karta p{margin:0 0 14px;font-size:17px;line-height:1.7;color:var(--muted)}
.fr-wybor__karta p:last-child{margin-bottom:0}

/* Zawieszka: dwie ceny obok siebie */
.fr-zaw__ceny{display:flex;flex-wrap:wrap;gap:12px 40px;margin:22px 0 0;
  font-size:16px;color:var(--muted)}
.fr-zaw__ceny strong{font-family:var(--f-display);font-size:26px;
  font-weight:500;color:var(--ink);display:block}

.fr-znak__akcje{display:flex;flex-wrap:wrap;gap:14px;margin-top:26px}

/* Tresc dopisana w edytorze trzyma szerokosc czytania. */
.fr-znak__tresc .fr-wrap > *{max-width:68ch}
.fr-znak__tresc h2{margin:34px 0 12px;font-family:var(--f-display);font-size:30px}
.fr-znak__tresc p{margin:0 0 16px;font-size:17px;line-height:1.75;color:var(--muted)}

@media (max-width:1100px){
  .fr-cennik{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fr-kroki{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px}
}
@media (max-width:900px){
  .fr-znak__hero{padding-block:26px 0}
  .fr-znak__hero-inner{grid-template-columns:1fr;gap:26px;padding-block:0 36px}
  /* Na telefonie zdjecie idzie pod tekst i wraca w obreb marginesu:
     kadr wychodzacy poza ekran wymuszalby poziome przewijanie. */
  .fr-znak__hero-media{margin-right:0;order:2}
  .fr-znak__title{font-size:32px}
  .fr-znak__lead{font-size:18px}
  .fr-znak__fakty{grid-template-columns:1fr;gap:14px;margin-top:22px;padding-top:20px}
  .fr-znak__fakty strong{font-size:21px}
  .fr-znak__hero-akcje{flex-direction:column;align-items:stretch;margin-top:22px}
  .fr-cennik{grid-template-columns:1fr;gap:16px}
  .fr-kroki{grid-template-columns:1fr;gap:22px}
  .fr-wybor{grid-template-columns:1fr;gap:26px}
  .fr-wybor__title{font-size:23px}
  .fr-znak__akcje{flex-direction:column;align-items:stretch}
}