/* ============================================================
   Sołectwo Wisła Wielka — wisla-wielka.pl
   Arkusz stylów wspólny dla wszystkich podstron
   ============================================================ */

:root{
  --glab:      #0f2830;
  --woda:      #1b5566;
  --woda-jasna:#2f7f92;
  --trzcina:   #8a7b36;
  --cegla:     #9d3f2b;
  --papier:    #f4f5f1;
  --papier-2:  #e6e9e1;
  --linia:     #cdd3c9;
  --tekst:     #16211f;
  --tekst-mid: #4b585b;
  --biel:      #ffffff;

  --max: 1140px;
  --radius: 3px;
  --cien: 0 1px 2px rgba(15,40,48,.06), 0 8px 24px rgba(15,40,48,.06);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--papier);
  color:var(--tekst);
  font-family:'Karla', 'Segoe UI', Arial, sans-serif;
  font-size:17.5px;
  line-height:1.72;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; display:block; }

a{ color:var(--woda); text-decoration-thickness:1px; text-underline-offset:3px; }
a:hover{ color:var(--cegla); }

:focus-visible{
  outline:3px solid var(--trzcina);
  outline-offset:2px;
}

h1,h2,h3{
  font-family:'Bitter', Georgia, serif;
  line-height:1.18;
  letter-spacing:-.01em;
  margin:0 0 .6em;
  font-weight:700;
}

h1{ font-size:clamp(2rem, 1.4rem + 2.6vw, 3.1rem); }
h2{ font-size:clamp(1.35rem, 1.1rem + 1.1vw, 1.85rem); margin-top:2.2em; }
h3{ font-size:1.06rem; }

p{ margin:0 0 1.25em; }

.wrap{
  width:100%;
  max-width:var(--max);
  margin:0 auto;
  padding:0 22px;
}

/* ---------- Pasek górny ---------- */

.pasek{
  background:var(--glab);
  color:#b9cbd2;
  font-size:.82rem;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.pasek .wrap{
  display:flex;
  flex-wrap:wrap;
  gap:6px 20px;
  align-items:center;
  min-height:38px;
  padding-top:6px;
  padding-bottom:6px;
}
.pasek a{ color:#b9cbd2; text-decoration:none; }
.pasek a:hover{ color:var(--biel); }
.pasek span{ color:#6d8891; }

/* ---------- Nagłówek ---------- */

.naglowek{
  position:sticky;
  top:0;
  z-index:40;
  background:rgba(244,245,241,.94);
  backdrop-filter:saturate(140%) blur(8px);
  border-bottom:1px solid var(--linia);
}
.naglowek .wrap{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  min-height:76px;
  flex-wrap:wrap;
}
.marka{
  display:flex;
  align-items:center;
  gap:12px;
  text-decoration:none;
  color:var(--tekst);
}
.marka .herb{
  width:38px; height:44px;
  flex:0 0 38px;
}
.marka b{
  display:block;
  font-family:'Bitter', Georgia, serif;
  font-size:1.12rem;
  letter-spacing:-.01em;
  line-height:1.1;
}
.marka small{
  display:block;
  font-size:.72rem;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--tekst-mid);
}

.menu{
  display:flex;
  flex-wrap:wrap;
  gap:4px;
  list-style:none;
  margin:0; padding:0;
}
.menu a{
  display:block;
  padding:8px 13px;
  font-size:.94rem;
  font-weight:600;
  color:var(--tekst);
  text-decoration:none;
  border-bottom:2px solid transparent;
}
.menu a:hover{ color:var(--woda); border-bottom-color:var(--woda-jasna); }
.menu a.tu{ color:var(--cegla); border-bottom-color:var(--cegla); }

/* ---------- Fala (element sygnaturowy) ---------- */

.fala{
  display:block;
  width:100%;
  height:26px;
}
.fala path{ fill:none; stroke:currentColor; stroke-width:1.4; opacity:.5; }

/* ---------- Hero ---------- */

.hero{
  background:
    radial-gradient(1200px 400px at 78% 0%, rgba(47,127,146,.35), transparent 65%),
    linear-gradient(178deg, var(--glab), #14424f);
  color:#e7eef0;
  padding:64px 0 0;
  position:relative;
  overflow:hidden;
}
.hero .wrap{ position:relative; z-index:2; }
.hero .kicker{
  font-size:.78rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:#7fb3c0;
  margin-bottom:16px;
}
.hero h1{ color:#fff; max-width:17ch; }
.hero .lead{
  font-size:1.14rem;
  max-width:62ch;
  color:#c9dbe0;
}
.hero-akcje{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin:26px 0 54px;
}

.btn{
  display:inline-block;
  padding:12px 22px;
  font-weight:700;
  font-size:.95rem;
  text-decoration:none;
  border-radius:var(--radius);
  border:1.5px solid transparent;
}
.btn-glowny{ background:var(--cegla); color:#fff; }
.btn-glowny:hover{ background:#83321f; color:#fff; }
.btn-drugi{ border-color:#5f8f9c; color:#dcebef; }
.btn-drugi:hover{ background:rgba(255,255,255,.09); color:#fff; }

.hero .fala{ color:#7fb3c0; }

/* ---------- Pas wodny (sygnatura strony głównej) ---------- */

.pas-wodny{
  background:var(--biel);
  border-top:1px solid var(--linia);
  border-bottom:1px solid var(--linia);
  padding:34px 0;
}
.pas-wodny .tytul{
  font-size:.78rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--tekst-mid);
  margin-bottom:20px;
}
.warstwy{
  display:grid;
  gap:0;
  border:1px solid var(--linia);
  border-radius:var(--radius);
  overflow:hidden;
}
.warstwa{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:4px 16px;
  padding:16px 20px;
}
.warstwa + .warstwa{ border-top:1px solid var(--linia); }
.warstwa strong{
  font-family:'Bitter', Georgia, serif;
  font-size:1.05rem;
  min-width:230px;
}
.warstwa span{ color:var(--tekst-mid); font-size:.95rem; }
.warstwa .kier{
  font-size:.72rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--trzcina);
  font-weight:700;
}
.w-polnoc{ background:linear-gradient(90deg, rgba(47,127,146,.16), rgba(47,127,146,.03)); }
.w-wies{   background:#fbfbf8; }
.w-poludnie{ background:linear-gradient(90deg, rgba(27,85,102,.22), rgba(27,85,102,.04)); }

/* ---------- Sekcje ---------- */

.sekcja{ padding:60px 0; }
.sekcja-biala{ background:var(--biel); border-top:1px solid var(--linia); border-bottom:1px solid var(--linia); }
.sekcja-ciemna{ background:var(--glab); color:#d6e3e7; }
.sekcja-ciemna h2{ color:#fff; }
.sekcja-ciemna a{ color:#8fc4d1; }

.naglowek-sekcji{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:20px;
  flex-wrap:wrap;
  margin-bottom:8px;
}
.naglowek-sekcji h2{ margin:0; }
.eyebrow{
  font-size:.75rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--trzcina);
  font-weight:700;
  margin-bottom:10px;
}

/* ---------- Aktualności ---------- */

.wpisy{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(280px,1fr));
  gap:20px;
  margin-top:26px;
}
.wpis{
  background:var(--biel);
  border:1px solid var(--linia);
  border-left:3px solid var(--woda-jasna);
  border-radius:var(--radius);
  padding:22px 22px 18px;
  box-shadow:var(--cien);
}
.wpis .data{
  font-size:.76rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--cegla);
  font-weight:700;
  margin-bottom:8px;
}
.wpis h3{ margin-bottom:.5em; font-size:1.12rem; }
.wpis p{ margin:0; font-size:.97rem; color:var(--tekst-mid); }
.wpis.pilny{ border-left-color:var(--cegla); }

/* ---------- Kafle rozdziałów ---------- */

.kafle{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(250px,1fr));
  gap:20px;
  margin-top:28px;
}
.kafel{
  display:block;
  padding:26px 24px;
  background:var(--papier);
  border:1px solid var(--linia);
  border-radius:var(--radius);
  text-decoration:none;
  color:var(--tekst);
  transition:transform .18s ease, border-color .18s ease;
}
.kafel:hover{ transform:translateY(-3px); border-color:var(--woda-jasna); color:var(--tekst); }
.kafel .nr{
  font-family:'Bitter', Georgia, serif;
  font-size:.8rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--trzcina);
  display:block;
  margin-bottom:12px;
}
.kafel h3{ margin-bottom:.4em; }
.kafel p{ margin:0; font-size:.95rem; color:var(--tekst-mid); }

/* ---------- Artykuł ---------- */

.artykul{
  max-width:74ch;
  margin:0 auto;
}
.artykul h1{ margin-bottom:.5em; }
.artykul h2{ color:var(--woda); }
.artykul p:first-of-type{ font-size:1.08rem; }

.lead-box{
  border-left:3px solid var(--trzcina);
  padding:4px 0 4px 20px;
  margin:0 0 34px;
  color:var(--tekst-mid);
  font-size:1.04rem;
}

/* ---------- Tabela ---------- */

.tabela-opak{ overflow-x:auto; margin:30px 0 34px; }
table{
  width:100%;
  border-collapse:collapse;
  font-size:.95rem;
  background:var(--biel);
  border:1px solid var(--linia);
}
caption{
  caption-side:top;
  text-align:left;
  font-size:.78rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--tekst-mid);
  padding-bottom:10px;
  font-weight:700;
}
th,td{
  padding:11px 14px;
  border-bottom:1px solid var(--linia);
  text-align:left;
  vertical-align:top;
}
thead th{
  background:var(--glab);
  color:#dbe7ea;
  font-family:'Bitter', Georgia, serif;
  font-size:.9rem;
  letter-spacing:.02em;
}
tbody tr:nth-child(even){ background:#fafbf8; }

/* ---------- Listy ---------- */

.lista-rzecz{
  margin:0 0 1.6em;
  padding-left:1.1em;
}
.lista-rzecz li{ margin-bottom:.45em; }

/* ---------- Partnerzy ---------- */

.partnerzy{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(300px,1fr));
  gap:18px;
  margin-top:30px;
}
.partner{
  background:var(--biel);
  border:1px solid var(--linia);
  border-radius:var(--radius);
  overflow:hidden;
  display:flex;
  flex-direction:column;
}
.partner .mini{
  height:74px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.partner .mini svg{ height:100%; width:100%; }
.partner .tresc{ padding:16px 18px 18px; }
.partner h3{
  font-size:1rem;
  margin-bottom:.35em;
}
.partner p{
  font-size:.9rem;
  color:var(--tekst-mid);
  margin:0 0 .8em;
}
.partner a{
  font-size:.82rem;
  word-break:break-all;
  color:var(--woda);
}

/* ---------- Stopka ---------- */

.stopka{
  background:var(--glab);
  color:#9fb8c0;
  padding:52px 0 26px;
  font-size:.94rem;
}
.stopka h3{
  color:#fff;
  font-size:.82rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  margin-bottom:14px;
}
.stopka a{ color:#c4d7dc; text-decoration:none; }
.stopka a:hover{ color:#fff; text-decoration:underline; }
.stopka-siatka{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(220px,1fr));
  gap:34px;
}
.stopka ul{ list-style:none; margin:0; padding:0; }
.stopka li{ margin-bottom:7px; }
.stopka-dol{
  margin-top:40px;
  padding-top:20px;
  border-top:1px solid rgba(255,255,255,.12);
  display:flex;
  flex-wrap:wrap;
  gap:10px 26px;
  justify-content:space-between;
  font-size:.85rem;
  color:#7c959d;
}

/* ---------- Responsywność ---------- */

@media (max-width:900px){
  .partnerzy{ grid-template-columns:repeat(auto-fill, minmax(260px,1fr)); }
}
@media (max-width:680px){
  body{ font-size:16.5px; }
  .naglowek .wrap{ min-height:auto; padding-top:12px; padding-bottom:8px; }
  .menu{ width:100%; }
  .menu a{ padding:7px 10px; font-size:.88rem; }
  .hero{ padding-top:44px; }
  .sekcja{ padding:44px 0; }
  .warstwa strong{ min-width:0; }
  .partnerzy{ grid-template-columns:1fr; }
}

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