/* Pakiet D: Reklama z formularzem, O Zdrowku, przyjaciele, plansza na wejsciu, linki nad stopka.
   Te same tokeny co styl.css: tlo prawie biale, jedyny kolor to czerwona kreska. */

/* tekst stron z ustawien: O Zdrowku to list wydawcy, szeryf jak slowo wstepne.
   Reklama to zwykla informacja: Lexend jak artykuly i Kontakt (.tekst-zwykly). */
.tekst-strony p{max-width:36em;margin:0 0 18px;font-family:var(--szeryf);font-size:21px;line-height:1.7}
.tekst-strony.tekst-zwykly p{font-family:var(--sans);font-size:20px;line-height:1.6}
.tekst-strony .podpis{font-family:var(--sans);font-size:18px;color:var(--cichy);margin-top:28px;line-height:1.5}
.tekst-strony .podpis b{color:var(--tusz);font-weight:600}
.tekst-strony .cichy-link{font-family:var(--sans);font-size:18px}
.tekst-strony .cichy-link a{display:inline-flex;align-items:center;min-height:48px}

/* Reklama: tekst i pudelko obok, formularz pod spodem */
.reklama{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,360px);gap:40px 72px;margin-top:40px;
  grid-template-areas:"tekst boczna" "formularz boczna"}
.reklama-tekst{grid-area:tekst}
.reklama-boczna{grid-area:boczna;align-self:start}
.formularz-sekcja{grid-area:formularz;scroll-margin-top:16px}
.formularz-sekcja h2{margin:0 0 8px}
.podpowiedz-formularza{color:var(--cichy);font-size:18px;margin:0 0 20px;max-width:36em}

.przyjmuje,.o-boczna .pudelko,.kontakt .pudelko{background:var(--kartka);border:1px solid var(--linia);border-radius:4px;padding:28px}
.przyjmuje h2,.o-boczna h2{font-size:24px;margin:0 0 10px}
.pudelko .osoba{font-weight:600;margin:0 0 4px}
.przyjmuje .telefon,.kontakt .pudelko .telefon{margin:4px 0 8px}
.kontakt .pudelko h2{font-size:24px;margin:0 0 10px}
.kontakt .pudelko p{margin:0 0 6px}
.kontakt{align-items:stretch}
.kontakt .przyjmuje .przyciski{margin-top:20px}
.bez-lamania{white-space:nowrap}
.przyjmuje p,.o-boczna p{margin:0 0 6px}
.przyjmuje .przyciski{margin-top:18px}
.przyjmuje .przycisk{width:100%}

/* formularz zapytania */
/* jedna kolumna: kazde pole pod poprzednim, podpowiedz zawsze nad polem (latwiej dla starszych czytelnikow) */
.formularz{display:grid;grid-template-columns:minmax(0,1fr);gap:22px;max-width:760px;background:var(--kartka);
  border:1px solid var(--linia);border-radius:4px;padding:32px;margin:0}
.formularz .szeroka{grid-column:1/-1}
.pole{display:flex;flex-direction:column;gap:6px;min-width:0}
.pole label{font-weight:600;font-size:19px}
.pole .pod{margin:0;color:var(--cichy);font-size:18px;line-height:1.45}
.pole .wymagane{font-weight:400;color:var(--cichy);font-size:18px}
.formularz input,.formularz select,.formularz textarea{font:inherit;font-size:20px;color:var(--tusz);width:100%;
  min-height:58px;padding:10px 14px;border:2px solid var(--tusz);border-radius:4px;background:#fff}
.formularz textarea{min-height:180px;line-height:1.5;resize:vertical}
.formularz [aria-invalid="true"]{border-color:var(--akcent);border-width:3px}
.pole-blad{margin:0;color:var(--akcent);font-weight:600;font-size:18px}
.formularz-blad{margin:0 0 20px;padding:14px 18px;border:2px solid var(--akcent);border-radius:4px;background:#fff;
  font-weight:600;max-width:40em}
.formularz .przyciski{margin:4px 0 0}
.formularz .rodo{margin:0;color:var(--cichy);font-size:18px;line-height:1.5;border-top:1px solid var(--linia);padding-top:18px}
.formularz .rodo h3{margin:0 0 6px;font-family:var(--sans);font-size:19px;font-weight:600;color:var(--tusz)}
.formularz .rodo p{margin:0 0 6px;max-width:44em}
/* pole-pulapka dla robotow: czlowiek go nie widzi i nie trafi tabulatorem */
.pole-www{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
.dziekujemy{background:var(--kartka);border:1px solid var(--linia);border-radius:4px;padding:32px;max-width:40em}
.dziekujemy::before{content:"";display:block;width:64px;height:3px;background:var(--akcent);margin-bottom:20px}
.dziekujemy .duzy{font-family:var(--szeryf);font-size:30px;font-weight:600;line-height:1.25;margin:0 0 12px}
.dziekujemy p{margin:0 0 10px}
.dziekujemy a{display:inline-flex;align-items:center;min-height:48px}

/* O Zdrowku */
.o-zdrowku{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,340px);gap:40px 72px;margin-top:40px}
.o-boczna{display:grid;gap:24px;align-self:start}
.o-boczna .telefon{font-size:30px;margin:4px 0 6px}
.lista-linkow{list-style:none;margin:0;padding:0}
.lista-linkow a{display:flex;align-items:center;min-height:48px}

/* /przyjaciele: duze wiersze, adres pod nazwa */
.przyjaciele{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:40px 72px;margin-top:40px}
.przyjaciele h2{font-size:28px;margin:0 0 8px}
.przyjaciele ul{list-style:none;margin:0;padding:0;border-top:1px solid var(--linia)}
.przyjaciele li{border-bottom:1px solid var(--linia)}
.przyjaciele a{display:block;padding:14px 0;text-decoration:none}
.przyjaciele a b{display:block;font-weight:600;line-height:1.35}
.przyjaciele a span{display:block;color:var(--cichy);font-size:18px}
.przyjaciele a:hover b{text-decoration:underline;text-decoration-color:var(--akcent);text-decoration-thickness:3px;text-underline-offset:4px}

/* linki przyjaciol i instytucji: dol strony glownej i nad stopka (makieta v3) */
.linki{display:grid;grid-template-columns:1fr 1fr;gap:48px;margin-top:96px}
.linki h2{font-size:22px;margin:0 0 8px}
.linki ul{list-style:none;margin:0;padding:0;font-size:19px}
/* odstep z paddingu, nie z min-height: link w dwoch liniach trzyma ten sam rytm co reszta */
.linki li a{display:inline-block;padding:10px 0;line-height:1.45}
main+.linki{margin-top:72px}
/* na glownej blok stoi w <main>, ktory ma juz marginesy .wnetrze */
main .linki.wnetrze{padding:0}

/* plansza na wejsciu: <details> otwarte, bez JS */
.intro{margin:32px auto 0;max-width:900px}
/* otwarta plansza ma szerokosc obrazka: "Zamknij plansze" stoi nad jego prawym brzegiem */
.intro[open]{width:fit-content}
.intro:not([open]){max-width:none}
.intro summary{list-style:none;cursor:pointer;display:flex;justify-content:flex-end}
.intro summary::-webkit-details-marker{display:none}
.intro summary span{display:inline-flex;align-items:center;min-height:48px;padding:0 18px;border:1px solid var(--linia);
  border-radius:4px;font-size:19px;background:var(--kartka)}
.intro summary:hover span{border-color:var(--tusz)}
.intro[open] .intro-pokaz,.intro:not([open]) .intro-zamknij{display:none}
.intro:not([open]) summary{justify-content:flex-start}
.intro-obraz{margin:12px 0 0}
/* plansza najwyzej 360 px (telefon 220 px): karteczka numeru zostaje na pierwszym ekranie */
.intro-obraz img{width:auto;max-width:100%;max-height:360px;margin:0 auto;box-shadow:var(--cien-okladki);border-radius:2px}

@media (max-width:980px){
  .reklama,.o-zdrowku{grid-template-columns:1fr;grid-template-areas:"tekst" "boczna" "formularz"}
  .o-zdrowku{grid-template-areas:none}
  .reklama-boczna{max-width:520px}
}
@media (max-width:640px){
  .tekst-strony p{font-size:19px}
  .reklama,.o-zdrowku,.przyjaciele{margin-top:28px;gap:32px}
  .formularz{padding:20px 16px;gap:18px;margin:0 -4px}
  .przyjmuje,.o-boczna .pudelko,.kontakt .pudelko,.dziekujemy{padding:22px 18px}
  .przyjaciele,.linki{grid-template-columns:1fr;gap:32px}
  .linki{margin-top:64px}
  .intro{margin-top:20px}
  .intro-obraz img{max-height:220px}
}
@media print{.formularz-sekcja,.intro{display:none}}