/* AutoWrap — jeden wspólny plik stylów dla wszystkich stron. */
html { scroll-behavior: smooth; }
body { margin: 0; background: #161826; color: #e9e9ed; font-family: "Inter", system-ui, sans-serif; font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; }
* { box-sizing: border-box; }
a { color: #f08a80; text-underline-offset: 3px; }
:focus { outline: none; }
:focus-visible { outline: 2px solid #d8291d; outline-offset: 2px; }
::selection { background: rgba(216,41,29,0.32); }
h1, h2, h3, h4 { font-family: "Inter", system-ui, sans-serif; font-weight: 500; line-height: 1.12; letter-spacing: -0.02em; margin: 0; text-wrap: pretty; }
p { margin: 0; text-wrap: pretty; }
table { border-collapse: collapse; width: 100%; }

.nav-toggle { display: none; }
@media (max-width: 1024px) {
  .nav-toggle { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 46px; height: 46px; margin-left: auto; border: 1px solid #3f424d; border-radius: 8px; color: #e9e9ed; cursor: pointer; }
  .nav-links { position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; margin: 0; gap: 0; padding: 6px 0 10px; background: #1c1f2d; border-bottom: 1px solid #2b2e3d; box-shadow: 0 18px 32px rgba(0,0,0,0.4); overflow: visible; white-space: normal; }
  .nav-links a { padding: 14px clamp(18px, 4vw, 28px); border-top: 1px solid #242734; }
  #nav-open:not(:checked) ~ .nav-links { display: none !important; }
  #nav-open:checked ~ .nav-links { display: flex !important; }
}

.fc-red:focus { border-color: #d8291d; }

/* Efekty najechania myszą — tylko na urządzeniach, które faktycznie mają
   mysz/gładzik (hover: hover). Na telefonie i tablecie dotknięcie ekranu
   też "włącza" :hover w przeglądarce i nie ma jak go wyłączyć (nie ma
   zjechania kursorem) — element zostawałby powiększony i nachodził na
   sąsiednie zdjęcia w galerii, wyglądając jakby strona się "rozjechała".
   Ta reguła całkowicie wyłącza efekty najechania na ekranach dotykowych. */
@media (hover: hover) and (pointer: fine) {
  a:hover { color: #ffffff; }
  .nav-toggle:hover { border-color: #d8291d; color: #f08a80; }
  .hv-white:hover { color: #ffffff; }
  .hv-fill:hover { background: rgba(216,41,29,0.14); color: #ffffff; }
  .hv-gray:hover { border-color: #75798c; }
  .hv-circle:hover { border-color: #d8291d; color: #f08a80; }
  .hv-card:hover { border-color: #d8291d; transform: translateY(-3px); box-shadow: 0 16px 38px rgba(0,0,0,0.45); }
  .hv-outline2:hover { border-color: #f08a80; color: #ffffff; }
  .hv-red:hover { color: #f08a80; }
  .hv-thumb:hover { transform: scale(1.05); opacity: 1; border-color: #d8291d; }
  .hv-gallery:hover { transform: scale(1.09); z-index: 3; border-color: #d8291d; box-shadow: 0 18px 44px rgba(0,0,0,0.55); }
}

/* tabele i inne szerokie elementy nie mają rozpychać strony w bok */
.tbl-wrap { overflow-x: auto; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}