/* =========================================================================
   Wygląd witryny tkddzwirzyno.pl
   Kolory zmienisz w bloku :root poniżej — reszta dostosuje się sama.
   ========================================================================= */
:root{
  --tlo:#0f1216;        /* tło strony            */
  --tlo2:#161b22;       /* tło co drugiej sekcji */
  --karta:#1c2230;      /* tło kafelków          */
  --tekst:#e8eaed;
  --przygas:#9aa4b2;    /* tekst drugoplanowy    */
  --akcent:#c8102e;     /* czerwień ITF          */
  --akcent2:#e63248;
  --zloto:#d4a017;
  --linia:#2a3242;
  --max:1140px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--tlo);color:var(--tekst);font:16px/1.65 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
.kontener{max-width:var(--max);margin:0 auto;padding:0 20px}
.drobne{color:var(--przygas);font-size:.9rem}

/* ---------- nagłówek ---------- */
.top{position:sticky;top:0;z-index:50;background:rgba(15,18,22,.94);backdrop-filter:blur(10px);border-bottom:1px solid var(--linia)}
.top .kontener{display:flex;align-items:center;gap:24px;height:66px}
.logo{display:flex;align-items:center;gap:11px;font-weight:800;letter-spacing:.5px;text-decoration:none;font-size:1.02rem;white-space:nowrap}
.logo .znak{width:34px;height:34px;border-radius:7px;background:var(--akcent);display:grid;place-items:center;font-size:1rem;flex:0 0 auto}
nav{margin-left:auto}
nav ul{display:flex;gap:5px;list-style:none;flex-wrap:wrap}
nav a{text-decoration:none;color:var(--przygas);padding:8px 13px;border-radius:7px;font-size:.93rem;font-weight:500;display:block}
nav a:hover{color:#fff;background:var(--tlo2)}
nav a[aria-current=page]{color:#fff;background:var(--akcent)}
.menu-btn{display:none;margin-left:auto;background:var(--tlo2);border:1px solid var(--linia);color:var(--tekst);width:42px;height:38px;border-radius:8px;font-size:1.2rem;cursor:pointer}

/* ---------- hero ---------- */
.hero{position:relative;overflow:hidden;border-bottom:1px solid var(--linia)}
.hero-tlo{position:absolute;inset:0;background:url(/assets/img/hero.jpg) center/cover;filter:blur(3px) saturate(.85);transform:scale(1.08);opacity:.32}
.hero-grad{position:absolute;inset:0;background:linear-gradient(180deg,rgba(15,18,22,.62),rgba(15,18,22,.95))}
.hero .kontener{position:relative;padding:78px 20px 66px}
.plakietka{display:inline-flex;align-items:center;gap:8px;background:rgba(200,16,46,.15);border:1px solid rgba(200,16,46,.42);color:#ff8b9c;padding:6px 14px;border-radius:999px;font-size:.79rem;font-weight:700;letter-spacing:.9px;text-transform:uppercase;margin-bottom:20px}
h1{font-size:clamp(2.05rem,5.2vw,3.5rem);line-height:1.1;font-weight:850;letter-spacing:-1px;margin-bottom:16px}
h1 em{font-style:normal;color:var(--akcent2)}
.lead{font-size:clamp(1.02rem,2.1vw,1.2rem);color:var(--przygas);max-width:640px;margin-bottom:30px}

/* ---------- przyciski ---------- */
.przyciski{display:flex;gap:12px;flex-wrap:wrap;margin-top:6px}
.btn{display:inline-block;padding:13px 26px;border-radius:9px;text-decoration:none;font-weight:700;font-size:.97rem;border:1px solid transparent;cursor:pointer}
.btn-1{background:var(--akcent);color:#fff}
.btn-1:hover{background:var(--akcent2)}
.btn-2{border-color:var(--linia);color:var(--tekst);background:var(--tlo2)}
.btn-2:hover{border-color:var(--przygas)}
.link-dalej{display:inline-block;margin-top:20px;color:var(--akcent2);font-weight:650;text-decoration:none}
.link-dalej:hover{text-decoration:underline}

/* ---------- liczby ---------- */
.liczby{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:16px;margin-top:52px;padding-top:34px;border-top:1px solid var(--linia)}
.liczba b{display:block;font-size:2.1rem;font-weight:850;color:var(--zloto);line-height:1.1}
.liczba span{font-size:.87rem;color:var(--przygas)}

/* ---------- sekcje ---------- */
section{padding:66px 0}
section.alt{background:var(--tlo2)}
h2{font-size:clamp(1.6rem,3.4vw,2.25rem);font-weight:800;letter-spacing:-.5px;margin-bottom:14px}
h3{font-size:1.18rem;font-weight:750;margin-bottom:9px}
.podtytul{color:var(--przygas);max-width:660px;margin-bottom:34px}
p{margin-bottom:15px}
p:last-child{margin-bottom:0}
section p{color:var(--przygas)}
section .duo p,section .pamiec p{color:var(--przygas)}
strong,b{color:var(--tekst)}

/* ---------- kafelki ---------- */
.karty{display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));gap:20px}
.karta{background:var(--karta);border:1px solid var(--linia);border-radius:13px;padding:25px}
.karta .ikona{width:42px;height:42px;border-radius:9px;background:rgba(200,16,46,.16);display:grid;place-items:center;font-size:1.25rem;margin-bottom:15px}
.karta p{color:var(--przygas);font-size:.95rem}

/* ---------- dwie kolumny ---------- */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center}
.duo img{border-radius:13px;border:1px solid var(--linia)}

/* ---------- tabela ---------- */
.tabela-owijka{overflow-x:auto;border:1px solid var(--linia);border-radius:13px}
table{width:100%;border-collapse:collapse;min-width:560px}
th,td{padding:14px 17px;text-align:left;border-bottom:1px solid var(--linia);font-size:.95rem}
th{background:var(--karta);font-weight:750;font-size:.83rem;text-transform:uppercase;letter-spacing:.6px;color:var(--przygas)}
tr:last-child td{border-bottom:0}

/* ---------- kalendarium ---------- */
.rok{border-left:2px solid var(--akcent);padding:0 0 34px 26px;position:relative}
.rok:last-child{padding-bottom:0}
.rok::before{content:"";position:absolute;left:-7px;top:5px;width:12px;height:12px;border-radius:50%;background:var(--akcent)}
.rok h3{color:var(--zloto);font-size:1.35rem}
.rok ul{list-style:none;margin-top:11px}
.rok li{padding:7px 0 7px 22px;position:relative;color:var(--przygas);font-size:.95rem}
.rok li::before{content:"▸";position:absolute;left:0;color:var(--akcent)}

/* ---------- galeria ---------- */
.galeria{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:13px}
.galeria figure{margin:0;border-radius:11px;overflow:hidden;border:1px solid var(--linia);background:var(--karta)}
.kafel-btn{display:block;width:100%;padding:0;border:0;background:none;cursor:zoom-in;position:relative}
.kafel-btn img{aspect-ratio:4/3;object-fit:cover;width:100%;transition:transform .35s ease,opacity .2s}
.kafel-btn:hover img{transform:scale(1.05);opacity:.88}
.kafel-btn:focus-visible{outline:3px solid var(--akcent2);outline-offset:-3px}
.galeria figcaption{padding:11px 13px;font-size:.81rem;color:var(--przygas);line-height:1.45}
.galeria figcaption b{color:var(--tekst);display:block;font-size:.85rem;margin-bottom:2px}

/* ---------- powiększanie zdjęć ---------- */
.lupa{position:fixed;inset:0;z-index:100;background:rgba(8,10,13,.97);display:none;flex-direction:column;touch-action:none}
.lupa.otw{display:flex}
.lupa-scena{flex:1;display:grid;place-items:center;overflow:hidden;position:relative}
.lupa-scena img{max-width:94vw;max-height:78vh;border-radius:6px;cursor:grab;transition:transform .18s ease;will-change:transform;user-select:none;-webkit-user-drag:none}
.lupa-scena img.zoom{cursor:grab;transition:none}
.lupa-scena img.chwyt{cursor:grabbing}
.lupa-pasek{padding:14px 18px 20px;text-align:center;color:var(--przygas);font-size:.9rem;line-height:1.5}
.lupa-pasek b{display:block;color:var(--tekst);font-size:.95rem;margin-bottom:3px}
.lupa-licznik{display:block;margin-top:7px;font-size:.78rem;opacity:.65}
.lupa-x,.lupa-nav{position:absolute;background:rgba(28,34,48,.86);border:1px solid var(--linia);color:var(--tekst);border-radius:50%;cursor:pointer;display:grid;place-items:center;font-size:1.35rem;line-height:1}
.lupa-x{top:16px;right:16px;width:46px;height:46px;font-size:1.5rem}
.lupa-nav{top:50%;transform:translateY(-50%);width:52px;height:52px}
.lupa-prev{left:16px}
.lupa-next{right:16px}
.lupa-x:hover,.lupa-nav:hover{background:var(--akcent);border-color:var(--akcent)}
.lupa-podpowiedz{position:absolute;bottom:12px;left:50%;transform:translateX(-50%);font-size:.74rem;color:var(--przygas);opacity:.55;white-space:nowrap}
body.zablokowane{overflow:hidden}

/* ---------- kontakt ---------- */
.kontakt-siatka{display:grid;grid-template-columns:repeat(auto-fit,minmax(245px,1fr));gap:20px}
.kontakt-poz{background:var(--karta);border:1px solid var(--linia);border-radius:13px;padding:25px}
.kontakt-poz a{color:var(--akcent2);text-decoration:none;font-weight:650;font-size:1.05rem;word-break:break-word}
.kontakt-poz a:hover{text-decoration:underline}

/* ---------- pamięć ---------- */
.pamiec{background:var(--karta);border:1px solid var(--linia);border-left:3px solid var(--zloto);border-radius:13px;padding:30px;display:grid;grid-template-columns:190px 1fr;gap:28px;align-items:start}
.pamiec img{border-radius:10px}
.pamiec .daty{color:var(--zloto);font-size:.87rem;font-weight:650;margin-bottom:9px}

/* ---------- stopka ---------- */
footer{background:var(--tlo2);border-top:1px solid var(--linia);padding:46px 0 26px;font-size:.9rem}
.stopka-siatka{display:grid;grid-template-columns:repeat(auto-fit,minmax(195px,1fr));gap:32px;margin-bottom:30px}
footer h4{font-size:.83rem;text-transform:uppercase;letter-spacing:.9px;color:var(--przygas);margin-bottom:13px}
footer ul{list-style:none}
footer li{margin-bottom:8px}
footer a{color:var(--tekst);text-decoration:none}
footer a:hover{color:var(--akcent2)}
.stopka-dol{border-top:1px solid var(--linia);padding-top:22px;color:var(--przygas);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:.85rem}

/* ---------- okruszki i nagłówek podstrony ---------- */
.okruszki{padding:16px 0;font-size:.85rem;color:var(--przygas);border-bottom:1px solid var(--linia)}
.okruszki a{text-decoration:none}
.okruszki a:hover{color:var(--tekst)}
.naglowek{padding:52px 0 40px;border-bottom:1px solid var(--linia)}
.naglowek h1{font-size:clamp(1.85rem,4.2vw,2.85rem);margin-bottom:12px}
.naglowek p{color:var(--przygas);max-width:660px}

@media(max-width:860px){
  .duo{grid-template-columns:1fr;gap:26px}
  .pamiec{grid-template-columns:1fr}
  .pamiec img{max-width:210px}
}
@media(max-width:720px){
  .menu-btn{display:block}
  nav{position:absolute;top:66px;left:0;right:0;background:var(--tlo);border-bottom:1px solid var(--linia);display:none;padding:10px 20px 16px}
  nav.otw{display:block}
  nav ul{flex-direction:column;gap:2px}
  section{padding:48px 0}
  .hero .kontener{padding:54px 20px 46px}
  .lupa-nav{width:44px;height:44px}
  .lupa-prev{left:8px}
  .lupa-next{right:8px}
  .lupa-podpowiedz{display:none}
}
@media(prefers-reduced-motion:reduce){
  *{transition:none!important;scroll-behavior:auto!important}
}