/* Style strony publicznej. Panel ma własne, wbudowane w admin/index.html.
   To jest baza pod przebudowę wyglądu: struktura, rytm i tokeny są tu
   już poprawne, warstwa wizualna zostanie wymieniona przy redesignie. */

:root{
  /* Monochromatyczna baza (grafit → wapień) + jeden akcent w glinie.
     Świadomie NIE navy-and-gold: to najbardziej ograny szablon w branży. */
  --bg:            oklch(97.5% 0.008 85);
  --surface:       oklch(100% 0 0);
  --surface-2:     oklch(94.5% 0.010 85);
  --text:          oklch(24% 0.012 60);
  --muted:         oklch(48% 0.012 60);
  --line:          oklch(88% 0.010 75);
  --accent:        oklch(52% 0.115 45);
  --accent-ciemny: oklch(44% 0.115 45);

  --font-display:'Fraunces',Georgia,'Times New Roman',serif;
  --font-body:'Public Sans',ui-sans-serif,system-ui,sans-serif;

  /* Jeden rytm odstępów na całą stronę: 4 / 8 / 16 / 32 / 64 / 128. */
  --s1:.25rem; --s2:.5rem; --s3:1rem; --s4:2rem; --s5:4rem; --s6:8rem;
  --szer:76rem;
  --ease:cubic-bezier(.2,.7,.3,1);
}
@media(prefers-color-scheme:dark){
  :root{
    --bg:oklch(18% 0.010 60); --surface:oklch(22% 0.010 60); --surface-2:oklch(26% 0.010 60);
    --text:oklch(95% 0.006 85); --muted:oklch(72% 0.010 75); --line:oklch(32% 0.010 60);
    --accent:oklch(70% 0.105 45); --accent-ciemny:oklch(78% 0.100 45);
  }
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--text);font:400 1rem/1.75 var(--font-body);-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-underline-offset:.2em}
h1,h2,h3{font-family:var(--font-display);font-weight:700;line-height:1.1;letter-spacing:-.03em}
h1{font-size:clamp(2rem,1.4rem + 3vw,3.75rem)}
h2{font-size:clamp(1.5rem,1.2rem + 1.4vw,2.25rem)}
h3{font-size:1.125rem}
p{max-width:68ch}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:3px}

/* --------------------------------------------------------------- nagłówek */
.top{display:flex;align-items:baseline;gap:var(--s3) var(--s4);flex-wrap:wrap;
  max-width:var(--szer);margin:0 auto;padding:var(--s3) var(--s3)}
.top__marka{font-family:var(--font-display);font-weight:700;font-size:1.125rem;letter-spacing:-.02em;text-decoration:none}
.top__nav{display:flex;gap:var(--s3);font-size:.9rem;font-weight:500}
.top__nav a{text-decoration:none;color:var(--muted)}
.top__nav a:hover,.top__nav a[aria-current]{color:var(--text)}
.top__tel{margin-inline-start:auto;font-size:.9rem;font-weight:700;text-decoration:none}

/* ------------------------------------------------------------------ sekcje */
.wstep{max-width:var(--szer);margin:0 auto;padding:var(--s5) var(--s3) var(--s4)}
.wstep--waskie{padding-block:var(--s4) var(--s3)}
.wstep__lead{margin-block-start:var(--s3);font-size:1.125rem;color:var(--muted)}
.sekcja{max-width:var(--szer);margin:0 auto;padding:var(--s4) var(--s3)}
.sekcja--tekst{padding-block:var(--s5)}
.sekcja__glowa{margin-block-end:var(--s4)}
.sekcja__glowa p{margin-block-start:var(--s2);color:var(--muted)}
.sekcja__wiecej{margin-block-start:var(--s4)}
.sekcja--cta{padding-block:var(--s5)}
.proza p+p{margin-block-start:var(--s3)}
.link-akcja{display:inline-flex;align-items:center;gap:.5em;padding:.65em 1.5em;border:0;border-radius:999px;
  background:var(--accent);color:oklch(98% 0.01 85);font:inherit;font-size:.9rem;font-weight:700;text-decoration:none;cursor:pointer;
  transition:transform .18s var(--ease),background-color .18s var(--ease)}
.link-akcja:hover{background:var(--accent-ciemny);transform:translateY(-2px)}

/* ------------------------------------------------------------------ oferty */
.siatka{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,19rem),1fr));gap:var(--s4) var(--s3)}
.oferta__link{display:block;text-decoration:none;position:relative}
.oferta__foto{aspect-ratio:4/3;width:100%;object-fit:cover;border-radius:10px;background:var(--surface-2)}
.oferta__foto--brak{border:1px solid var(--line)}
.oferta__status{position:absolute;inset-block-start:var(--s2);inset-inline-start:var(--s2);
  padding:.25em .75em;border-radius:999px;background:var(--surface);color:var(--text);
  font-size:.7rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.oferta__tresc{padding-block-start:var(--s3)}
.oferta__cena{font-family:var(--font-display);font-size:1.35rem;font-weight:700;letter-spacing:-.03em}
.oferta__tytul{margin-block-start:var(--s1);font-size:1rem;font-weight:600;font-family:var(--font-body)}
.oferta__miejsce{color:var(--muted);font-size:.875rem}
.oferta__fakty{display:flex;flex-wrap:wrap;gap:var(--s1) var(--s3);margin-block-start:var(--s2);
  font-size:.8rem;color:var(--muted)}
.oferta__fakty dt{display:none}
.oferta__fakty dd{font-weight:500}
.oferta__link:hover .oferta__foto{transform:translateY(-3px);box-shadow:0 18px 36px -22px oklch(24% 0.012 60/.6)}
.oferta__foto{transition:transform .2s var(--ease),box-shadow .2s var(--ease)}

/* ------------------------------------------------------------------ osoby */
.siatka--osoby{grid-template-columns:repeat(auto-fill,minmax(min(100%,15rem),1fr))}
.osoba{display:grid;gap:var(--s1);font-size:.9rem}
.osoba__foto{aspect-ratio:1;width:100%;object-fit:cover;border-radius:10px;margin-block-end:var(--s2)}
.osoba__inicjaly{display:grid;place-items:center;aspect-ratio:1;border-radius:10px;background:var(--surface-2);
  font-family:var(--font-display);font-size:2rem;color:var(--muted);margin-block-end:var(--s2)}
.osoba__rola,.osoba__spec,.osoba__licencja{color:var(--muted);font-size:.82rem}
.osoba__tel,.osoba__mail{font-weight:600;text-decoration:none}
.osoba__tel:hover,.osoba__mail:hover{text-decoration:underline}

/* ------------------------------------------------------------ strona oferty */
.oferta-strona{max-width:var(--szer);margin:0 auto;padding-inline:var(--s3)}
.okruszki{padding-block:var(--s3);font-size:.8rem;color:var(--muted)}
.okruszki a{text-decoration:none}
.okruszki a:hover{text-decoration:underline}
.oferta-glowa{padding-block:var(--s3) var(--s4);display:grid;gap:var(--s2);max-width:52rem}
.oferta-glowa__typ{font-size:.78rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.oferta-glowa__miejsce{color:var(--muted)}
.oferta-glowa__cena{font-family:var(--font-display);font-size:clamp(1.75rem,1.2rem + 2.5vw,3rem);font-weight:700;letter-spacing:-.03em}
.oferta-glowa__data{font-size:.78rem;color:var(--muted)}
.oferta-glowa .oferta__status{position:static;justify-self:start;border:1px solid var(--line)}

.galeria{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(min(88%,42rem),1fr);gap:var(--s2);
  overflow-x:auto;scroll-snap-type:x mandatory;padding-block-end:var(--s2);scrollbar-width:thin}
.galeria__el{scroll-snap-align:start;margin:0}
.galeria__el img{aspect-ratio:3/2;width:100%;object-fit:cover;border-radius:10px;background:var(--surface-2)}
.galeria:empty{display:none}

.oferta-tresc{display:grid;gap:var(--s4);padding-block:var(--s5)}
@media(min-width:64rem){.oferta-tresc{grid-template-columns:minmax(0,1fr) 22rem;gap:var(--s5)}}
.oferta-tresc__glowna{display:grid;gap:var(--s5);min-width:0}
.oferta-tresc__glowna h2{font-size:1.25rem;margin-block-end:var(--s3)}
.fakty{display:grid;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:10px;overflow:hidden}
.fakt{background:var(--surface);padding:var(--s3)}
.fakt dt{font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.fakt dd{margin-block-start:var(--s1);font-weight:600}
.udogodnienia{display:flex;flex-wrap:wrap;gap:var(--s2);list-style:none}
.udogodnienia li{padding:.35em 1em;border:1px solid var(--line);border-radius:999px;font-size:.85rem}
.udogodnienia:empty,.udogodnienia:empty+*{display:none}
.mapa iframe{width:100%;aspect-ratio:16/10;border:1px solid var(--line);border-radius:10px}
.mapa:empty{display:none}

.oferta-bok__panel{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:var(--s4) var(--s3);
  display:grid;gap:var(--s3)}
@media(min-width:64rem){.oferta-bok__panel{position:sticky;top:var(--s3)}}
.oferta-bok__panel h2{font-size:1.125rem}

/* ---------------------------------------------------------------- formularz */
.form{display:grid;gap:var(--s3)}
.form__pole{display:grid;gap:var(--s1)}
.form__pole label{font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.form input,.form textarea{width:100%;min-height:44px;padding:.7em .8em;background:var(--bg);color:inherit;
  border:1px solid var(--line);border-radius:8px;font:inherit;font-size:.9rem}
.form textarea{min-height:110px;resize:vertical}
.form input:focus,.form textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px oklch(52% 0.115 45/.18)}
.form__zgoda{display:flex;gap:var(--s2);align-items:flex-start;font-size:.78rem;color:var(--muted);line-height:1.5}
.form__zgoda input{inline-size:18px;block-size:18px;min-height:0;flex:none;margin-block-start:.15em;accent-color:var(--accent)}
.form__msg:empty{display:none}
.form__msg{font-size:.85rem;font-weight:600}

/* ------------------------------------------------------------------ stopka */
.stopka{max-width:var(--szer);margin:0 auto;padding:var(--s5) var(--s3) var(--s4);
  border-block-start:1px solid var(--line);display:grid;gap:var(--s1);font-size:.9rem;color:var(--muted)}
.stopka__marka{font-family:var(--font-display);font-weight:700;font-size:1.05rem;color:var(--text);margin-block-end:var(--s2)}
.stopka a{text-decoration:none}
.stopka a:hover{text-decoration:underline}
.stopka__linki{margin-block-start:var(--s3)}
.stopka p:empty{display:none}
.stopka__zgoda{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;text-decoration:none}
.stopka__zgoda:hover{text-decoration:underline}
.stopka__zgoda:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:2px}
.form__rodo{font-size:.75rem;color:var(--muted);line-height:1.6;max-width:60ch}
.form__rodo:empty{display:none}

/* Notka redakcyjna: widoczna tylko dopoki dane nie sa uzupelnione. */
.notka{margin-block:var(--s3);padding:var(--s3);border-inline-start:3px solid var(--accent);
  background:var(--surface-2);border-radius:0 8px 8px 0;font-size:.875rem;color:var(--muted);line-height:1.6}
.notka b{color:var(--text)}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none!important;animation:none!important}
}

/* ------------------------------------------------------------ blog i opinie */
.wpis__link{display:block;text-decoration:none}
.wpis__foto{aspect-ratio:3/2;width:100%;object-fit:cover;border-radius:10px;background:var(--surface-2);
  transition:transform .2s var(--ease),box-shadow .2s var(--ease)}
.wpis__link:hover .wpis__foto{transform:translateY(-3px);box-shadow:0 18px 36px -22px oklch(24% 0.012 60/.6)}
.wpis__tresc{padding-block-start:var(--s3)}
.wpis__kat{font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
.wpis__tytul{margin-block-start:var(--s1);font-size:1.15rem}
.wpis__lead{margin-block-start:var(--s2);color:var(--muted);font-size:.9rem}
.wpis__meta{margin-block-start:var(--s2);font-size:.78rem;color:var(--muted)}

.siatka--opinie{grid-template-columns:repeat(auto-fill,minmax(min(100%,21rem),1fr))}
.opinia{margin:0;padding:var(--s4) var(--s3);background:var(--surface);border:1px solid var(--line);border-radius:12px;
  display:grid;gap:var(--s2);align-content:start}
.opinia__ocena{font-size:.9rem;letter-spacing:.1em;color:var(--accent)}
.opinia__ocena b{font-family:var(--font-body);letter-spacing:0;color:var(--muted);font-size:.78rem}
.opinia__tresc{font-family:var(--font-display);font-size:1.05rem;line-height:1.5}
.opinia__kto{font-size:.82rem;color:var(--muted);display:grid;gap:2px}
.opinia__kto b{color:var(--text);font-family:var(--font-body);font-size:.9rem}
.opinia__zrodlo{font-size:.72rem;letter-spacing:.06em;text-transform:uppercase}

.artykul{max-width:44rem;padding-block:var(--s3) var(--s5);display:grid;gap:var(--s3)}
.artykul__foto{margin:var(--s3) 0 0}
.artykul__foto:empty{display:none}
.artykul__foto img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:10px}
.artykul .proza{margin-block-start:var(--s3)}

/* ------------------------------------------------- zgoda na pomiar ruchu */
/* Pasek pojawia sie tylko wtedy, gdy odwiedzajacy jeszcze nie zdecydowal.
   Oba przyciski maja IDENTYCZNY wyglad — odmowa musi byc tak samo latwa
   jak zgoda, inaczej zgoda nie jest dobrowolna w rozumieniu RODO. */
.zgoda{position:fixed;inset-inline:0;inset-block-end:0;z-index:100;
  background:var(--surface);border-block-start:1px solid var(--line);
  box-shadow:0 -8px 32px -20px oklch(24% 0.012 60/.5);padding:var(--s3)}
.zgoda__tresc{max-width:var(--szer);margin-inline:auto;display:flex;flex-wrap:wrap;
  gap:var(--s3);align-items:center;justify-content:space-between}
.zgoda__tekst{margin:0;max-width:60ch;font-size:.875rem;line-height:1.6;color:var(--muted)}
.zgoda__tekst a{color:var(--accent)}
.zgoda__akcje{display:flex;gap:var(--s2);flex:none}
.zgoda__btn{font:inherit;font-weight:600;font-size:.875rem;padding:.65em 1.5em;border-radius:99px;
  border:1px solid var(--line);background:var(--surface-2);color:var(--text);cursor:pointer;
  transition:transform .18s var(--ease),box-shadow .18s var(--ease)}
.zgoda__btn:hover{transform:translateY(-2px);box-shadow:0 8px 20px -12px oklch(24% 0.012 60/.6)}
.zgoda__btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media (max-width:600px){
  .zgoda__tresc{flex-direction:column;align-items:stretch}
  .zgoda__akcje{display:grid;grid-template-columns:1fr 1fr}
}
@media (prefers-reduced-motion:reduce){.zgoda__btn{transition:none}}

/* --------------------------------------------- potwierdzenie wyslania */
/* Zastepuje formularz po udanej wysylce. Osobny stan, nie komunikat pod
   przyciskiem: czlowiek ma zobaczyc, ze skonczyl, a nie szukac zdania. */
.wyslane{display:grid;gap:var(--s3);justify-items:start;padding:var(--s4);
  background:var(--surface);border:1px solid var(--line);border-radius:12px}
.wyslane__znak{inline-size:44px;block-size:44px;display:grid;place-items:center;border-radius:99px;
  background:var(--accent);color:var(--surface);font-size:1.3rem;line-height:1}
.wyslane__tytul{margin:0;font-size:1.4rem}
.wyslane__lead{margin:0;color:var(--muted);max-width:52ch}
.wyslane__kontakt{margin:0;display:flex;flex-wrap:wrap;gap:var(--s2)}
.wyslane__kontakt a{display:inline-block;padding:.6em 1.3em;border-radius:99px;border:1px solid var(--line);
  color:var(--text);text-decoration:none;font-weight:600;font-size:.9rem;
  transition:transform .18s var(--ease),border-color .18s var(--ease)}
.wyslane__kontakt a:hover{transform:translateY(-2px);border-color:var(--accent)}
.wyslane__spoleczne{margin:0;display:flex;flex-wrap:wrap;gap:var(--s3);font-size:.85rem}
.wyslane__spoleczne a{color:var(--accent);text-decoration:none;font-weight:600}
.wyslane__spoleczne a:hover{text-decoration:underline}
.wyslane__spoleczne:empty{display:none}
@media (prefers-reduced-motion:reduce){.wyslane__kontakt a{transition:none}}

/* Pulapka na boty. Musi byc niewidoczna dla czlowieka i niedostepna dla
   czytnika ekranu, ale NIE display:none — czesc automatow to wykrywa. */
.pulapka{position:absolute;inline-size:1px;block-size:1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;border:0;padding:0;margin:-1px}