/* =====================================================================
   PANORAMA - ustawienia serwisu CETPP (Gryfice). Laduje sie ostatni.
   Paleta szkoly: granat #0F1B4D i zloto #F2B705 (okladka 2025, slonce z logo),
   kremowe plotno w temperaturze zlota. Odmiany na <html>: hero KARTA (tylko
   glowna), kroj nowoczesny, ksztalt miekki, wyspy rowne, nawigacja biala,
   stopka ciemna. Kolory tylko jako tokeny w :root.
   ===================================================================== */

/* >>> role liczone (hex zamiast color-mix) >>> */
:root {
  --p-powierzchnia: #F8F3E2;
  --p-powierzchnia-obrys: #EFE7CF;
  --p-tint: #FDF1C9;
  --p-na-akcencie: #0F1B4D;
  --p-akcent-em: #6C4800;
  --p-akcent-em-ciemne: #F2B705;
  --p-eyebrow-kolor: #6C4800;
  --p-drugi-napis: #0F1B4D;
  --p-na-drugim: #FFFFFF;
  --p-obrys-pola: #767A8A;
  --p-linia-karty: #ECE8DD;
  --p-stopka-marka: #0F1B4D;
  --p-baner: #0F1B4D;
  --p-wyspa-cta: #0A1338;
  --p-welon: 10 19 56;
  --p-cien: 15 27 77;
  --p-hero-sciana: #0F1B4D;
  --p-na-scianie-2: #BCC3D9;
  --p-scena-tekst-2: #1F2437;
  --p-akcent-em-hero: #664600;
}
/* <<< role liczone <<< */

/* Kroje szkoly (lokalne, z ogonkami): Familjen Grotesk w naglowkach, Atkinson Hyperlegible Next
   w tekscie - krotki przygotowany do czytania przez slabowidzacych, wazny na stronie szkoly. */
html.pn-skora.pn-kroj-nowoczesna {
  --p-font-naglowki: 'Familjen Grotesk', 'Segoe UI', Arial, sans-serif;
  --p-font-h1: 'Familjen Grotesk', 'Segoe UI', Arial, sans-serif;
  --p-font-ui: 'Atkinson Hyperlegible Next', 'Segoe UI', Arial, sans-serif;
  --p-font-kursywa: 'Familjen Grotesk', 'Segoe UI', Arial, sans-serif;
  --p-font-eyebrow: 'Atkinson Hyperlegible Next', 'Segoe UI', Arial, sans-serif;
  --p-font-logo: 'Familjen Grotesk', 'Segoe UI', Arial, sans-serif;
  --p-waga-h1: 700;
  --p-waga-h2: 700;
  --p-waga-h3: 700;
  --p-h2: clamp(30px, 3.3vw, 48px);
  --p-h2-cta: clamp(32px, 3.9vw, 56px);
  --p-body: 17px;
  --p-lh-body: 1.65;
  --p-btn-font: 16px;
  --p-btn-waga: 700;
  --p-menu-font: 16px;
  --p-menu-waga: 700;
}

/* ---------- naglowek ---------- */
/* aktywna pozycja menu: zloto ciemne i waga, bez kreski (tusz i granat roznily sie tylko waga) */
html.pn-skora header.nav { --p-nav-akcent: var(--p-akcent-em); }
html.pn-skora .nav-links { gap: clamp(14px, 2vw, 34px); }
html.pn-skora .nav-inner { gap: clamp(14px, 2vw, 28px); }
html.pn-skora header.nav .nav-tel:focus-visible { outline-color: var(--p-akcent-ciemny); }
@media (max-width: 1080px) {
  html.pn-skora .nav-links { max-height: calc(100svh - var(--p-nav-h)); }
}

/* ---------- przyciski serwisu: te same pigulki co w PANORAMIE ---------- */
html.pn-skora .btn.btn--zloto,
html.pn-skora .btn.btn--zloto:hover {
  background-color: var(--p-akcent);
  border-color: var(--p-akcent);
  color: var(--p-na-akcencie);
}
html.pn-skora .btn.btn--glowny,
html.pn-skora .btn.btn--glowny:hover {
  background-color: var(--p-akcent-ciemny);
  border-color: var(--p-akcent-ciemny);
  color: var(--p-biel);
}
html.pn-skora .btn.btn--ramka,
html.pn-skora .btn.btn--ramka:hover {
  background-color: var(--p-przezroczysty);
  border-color: var(--p-obrys-k);
  color: var(--p-tekst);
}
html.pn-skora .btn.btn--ramka-jasna,
html.pn-skora .btn.btn--ramka-jasna:hover {
  background-color: var(--p-przezroczysty);
  border-color: var(--p-obrys-ciemny);
  color: var(--p-na-ciemnym);
}
@media (hover: hover) and (pointer: fine) {
  html.pn-skora .btn.btn--zloto:hover { background-color: var(--p-akcent-ciemny); border-color: var(--p-akcent-ciemny); color: var(--p-biel); }
  html.pn-skora .btn.btn--glowny:hover { background-color: var(--p-tusz); border-color: var(--p-tusz); }
  html.pn-skora .btn.btn--ramka:hover { background-color: var(--p-tekst); border-color: var(--p-tekst); color: var(--p-tlo); }
  html.pn-skora .btn.btn--ramka-jasna:hover { background-color: var(--p-biel); border-color: var(--p-biel); color: var(--p-tusz); }
  html.pn-skora :is(.pn-na-ciemnym, .pn-baner--marka) .btn.btn--zloto:hover { background-color: var(--p-biel); border-color: var(--p-biel); color: var(--p-tusz); }
}

/* ---------- hero KARTA: budynek szkoly w bialej ramce na granatowym podescie ---------- */
/* Kolumna tekstu szersza niz w bibliotece (polski tytul z trzema szkolami), mgla trzyma pelna
   sile do konca kolumny; wejscie do szkoly stoi na 68% kadru, poza mgla. */
.pn-hero.pn-hero-karta .pn-hero-tekst { width: min(38rem, 50%); }
.pn-hero.pn-hero-karta .hero-bg::after {
  background-image: linear-gradient(90deg,
    color-mix(in srgb, var(--p-tlo) var(--p-karta-mgla), var(--p-przezroczysty)) 0,
    color-mix(in srgb, var(--p-tlo) var(--p-karta-mgla-2), var(--p-przezroczysty)) 56%,
    var(--p-przezroczysty) 72%);
}
.pn-hero.pn-hero-karta { --p-karta-mgla: 96%; --p-karta-mgla-2: 94%; --p-em: var(--p-akcent-em-hero); }
.pn-hero.pn-hero-karta .hero-inner .sub { max-width: 30rem; }
/* tytul to pelne nazwy trzech szkol (prosba szkoly) - mniejszy stopien niz w bibliotece, zeby zmiescic sie w 2-3 wierszach */
.pn-hero.pn-hero-karta .pn-h1 { font-size: clamp(26px, 2.64vw, 38px); line-height: 1.14; }
@media (max-width: 374px) { .pn-hero.pn-hero-karta .pn-h1 { font-size: 24px; } }
@media (max-width: 1024px) {
  .pn-hero.pn-hero-karta .pn-hero-tekst { width: min(28rem, 56%); }
  .pn-hero.pn-hero-karta .hero-bg::after {
    background-image: linear-gradient(90deg,
      color-mix(in srgb, var(--p-tlo) var(--p-karta-mgla), var(--p-przezroczysty)) 0,
      color-mix(in srgb, var(--p-tlo) var(--p-karta-mgla-2), var(--p-przezroczysty)) 62%,
      var(--p-przezroczysty) 80%);
  }
}
@media (max-width: 899px) {
  .pn-hero.pn-hero-karta .pn-hero-tekst { width: auto; }
  .pn-hero.pn-hero-karta .hero-bg::after { background-image: none; }
  .pn-hero.pn-hero-karta .hero-bg img { object-position: 100% 50%; }
}

/* ---------- baner CTA w granacie ---------- */
.pn-baner--marka .pn-h2 { font-weight: 700; line-height: 1.04; }
html.pn-skora .faq details { padding: 0; }
.pn-baner--marka .pn-h2 em { color: var(--p-akcent-em-ciemne); }

/* ---------- pas hasla z godlem ---------- */
.pn-haslo.pn-haslo--godlo { justify-content: space-between; gap: clamp(18px, 3vw, 40px); padding: clamp(22px, 2.8vw, 32px) clamp(22px, 3.4vw, 44px); text-align: left; }
.pn-haslo--godlo img { width: 56px; height: auto; flex: none; }
.pn-haslo--godlo .pn-haslo__tekst { flex: 1; }
.pn-haslo--godlo .pn-haslo__tekst b { font-family: var(--p-font-naglowki); font-size: clamp(19px, 1.6vw, 22px); font-weight: 700; }
.pn-haslo--godlo .pn-haslo__tekst span { font-size: 16px; line-height: 1.55; max-width: 48rem; }
@media (max-width: 760px) {
  .pn-haslo.pn-haslo--godlo { flex-direction: column; text-align: center; }
}

/* ---------- ciemna karta-odnosnik w siatce kart ---------- */
html.pn-skora .karta.karta--ciemna { border-color: var(--p-ciemny); background-color: var(--p-ciemny); color: var(--p-na-ciemnym); }
html.pn-skora .karta.karta--ciemna h3 { color: var(--p-na-ciemnym); }
html.pn-skora .karta.karta--ciemna p { color: var(--p-na-ciemnym-2); }
html.pn-skora .karta.karta--ciemna .kierunek-link { color: var(--p-na-ciemnym); padding-top: 14px; }
html.pn-skora .karta.karta--ciemna:focus-visible { outline-color: var(--p-akcent-ciemny); }
.karta--ciemna { display: flex; flex-direction: column; }

/* ---------- stopka ciemna: kolory napisow serwisu ---------- */
html.pn-skora footer.ft { padding-bottom: calc(26px + var(--safe-b)); }
html.pn-skora .ft h2 { color: var(--p-stopka-naglowek); }
html.pn-skora .ft .ft-logo .marka-1 { color: var(--p-stopka-tekst); }
html.pn-skora .ft .ft-logo .marka-2 { color: var(--p-stopka-tekst-2); }
html.pn-skora .ft .ft-dane b { color: var(--p-stopka-tekst); }
html.pn-skora .ft .ft-soc a { border: 1px solid var(--p-stopka-linia); color: var(--p-stopka-tekst); }
html.pn-skora .ft .luka { font-size: 14px; }

/* ---------- formularz kontaktowy: pole wiadomosci wyzsze niz pole jednowierszowe ---------- */
html.pn-skora form .field textarea:not([type="checkbox"]):not([type="radio"]) { min-height: 150px; }
/* lista dokumentow do odhaczania to tresc glowna, nie podpis pola - pelny rozmiar tekstu */
html.pn-skora .dok-lista label { font-size: 16px; }