/* =========================================================
   Zielony Gaj — gospodarstwo szkółkarskie
   Arkusz główny
   ========================================================= */

:root{
  /* Paleta: ciemna zieleń lasu, wapień, sucha trawa */
  --las:        #101a13;
  --kwatera:    #16231a;
  --kwatera-2:  #1c2b20;
  --linia:      #2b3b2e;
  --lisc:       #93a788;
  --wapno:      #e7e5d9;
  --sloma:      #c2ae84;

  --serif: "Spectral", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --sans:  "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;

  --marg: clamp(1.25rem, 5vw, 5.5rem);
  --max:  86rem;
  --kol:  62ch;
}

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

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}

body{
  margin:0;
  background:var(--las);
  color:var(--wapno);
  font-family:var(--sans);
  font-size:clamp(1rem, .96rem + .2vw, 1.0625rem);
  line-height:1.65;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; }

::selection{ background:var(--sloma); color:var(--las); }

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

.pomin{
  position:absolute; left:-9999px; top:0;
  background:var(--sloma); color:var(--las);
  padding:.75rem 1.25rem; z-index:999; font-weight:500;
}
.pomin:focus{ left:1rem; top:1rem; }

/* ---------- Siatka / pojemniki ---------- */

.opak{
  width:100%;
  max-width:var(--max);
  margin-inline:auto;
  padding-inline:var(--marg);
}

.tekst{ max-width:var(--kol); }

.sekcja{ padding-block:clamp(4.5rem, 9vw, 9rem); }
.sekcja-ciasna{ padding-block:clamp(3rem, 6vw, 6rem); }
.tlo-kwatera{ background:var(--kwatera); }

/* ---------- Typografia ---------- */

h1,h2,h3,h4{
  font-family:var(--serif);
  font-weight:300;
  letter-spacing:-.012em;
  margin:0;
  text-wrap:balance;
}

.tyt-xl{
  font-size:clamp(2.6rem, 7.2vw, 5.6rem);
  line-height:1.02;
}
.tyt-l{
  font-size:clamp(2rem, 4.4vw, 3.4rem);
  line-height:1.1;
}
.tyt-m{
  font-size:clamp(1.5rem, 2.6vw, 2.1rem);
  line-height:1.18;
}
.tyt-s{
  font-family:var(--sans);
  font-size:1rem;
  font-weight:500;
  letter-spacing:.005em;
  line-height:1.35;
}

p{ margin:0 0 1.15em; }
p:last-child{ margin-bottom:0; }

.wiodacy{
  font-size:clamp(1.1rem, 1.6vw, 1.35rem);
  line-height:1.55;
  color:var(--wapno);
}
.cicho{ color:var(--lisc); }
.lacina{ font-family:var(--serif); font-style:italic; font-weight:400; }

/* Znacznik sekcji — niesie informację, nie ozdobę */
.znacznik{
  display:block;
  font-size:.875rem;
  color:var(--lisc);
  letter-spacing:.01em;
  margin-bottom:1.1rem;
  padding-top:1rem;
  border-top:1px solid var(--linia);
}

/* ---------- Przyciski ---------- */

.przycisk{
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--sans); font-size:.95rem; font-weight:500;
  padding:.95rem 1.9rem;
  border:1px solid var(--sloma);
  background:var(--sloma); color:var(--las);
  text-decoration:none; cursor:pointer;
  transition:background .25s ease, color .25s ease, border-color .25s ease;
}
.przycisk:hover{ background:transparent; color:var(--sloma); }

.przycisk-obrys{
  background:transparent;
  color:var(--wapno);
  border-color:var(--linia);
}
.przycisk-obrys:hover{ border-color:var(--wapno); background:transparent; color:var(--wapno); }

.przyciski{ display:flex; flex-wrap:wrap; gap:.85rem; }

.odn{
  color:var(--sloma);
  text-decoration:none;
  border-bottom:1px solid rgba(194,174,132,.35);
  padding-bottom:1px;
  transition:border-color .2s ease;
}
.odn:hover{ border-color:var(--sloma); }

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

.szczyt{
  position:fixed; inset:0 0 auto 0; z-index:100;
  transition:background .35s ease, border-color .35s ease, backdrop-filter .35s ease;
  border-bottom:1px solid transparent;
}
.szczyt.przyklejony{
  background:rgba(16,26,19,.92);
  backdrop-filter:blur(10px);
  border-bottom-color:var(--linia);
}
.szczyt-w{
  display:flex; align-items:center; justify-content:space-between;
  gap:2rem;
  padding-block:1.1rem;
}
.marka{ display:block; line-height:0; }
.marka img{ width:clamp(112px, 12vw, 148px); }

.nawigacja{ display:flex; align-items:center; gap:clamp(1.1rem,2.2vw,2.2rem); }
.nawigacja a{
  font-size:.95rem; text-decoration:none; color:var(--wapno);
  padding-block:.25rem;
  border-bottom:1px solid transparent;
  transition:border-color .2s ease, color .2s ease;
}
.nawigacja a:hover{ border-bottom-color:var(--sloma); }
.nawigacja a[aria-current="page"]{ color:var(--sloma); border-bottom-color:var(--sloma); }

.tel-szczyt{
  font-size:.95rem; text-decoration:none; color:var(--sloma);
  white-space:nowrap;
  border:1px solid var(--linia);
  padding:.55rem 1.1rem;
  transition:border-color .2s ease;
}
.tel-szczyt:hover{ border-color:var(--sloma); }

.burger{
  display:none;
  width:44px; height:44px;
  background:none; border:1px solid var(--linia);
  color:var(--wapno); cursor:pointer;
  align-items:center; justify-content:center;
  padding:0;
}
.burger span{
  display:block; width:18px; height:1px; background:currentColor;
  position:relative;
  transition:background .2s ease;
}
.burger span::before,.burger span::after{
  content:""; position:absolute; left:0; width:18px; height:1px; background:currentColor;
  transition:transform .28s ease, top .2s ease;
}
.burger span::before{ top:-6px; }
.burger span::after{ top:6px; }
.burger[aria-expanded="true"] span{ background:transparent; }
.burger[aria-expanded="true"] span::before{ top:0; transform:rotate(45deg); }
.burger[aria-expanded="true"] span::after{ top:0; transform:rotate(-45deg); }

/* ---------- Ekran otwierający ---------- */

.otwarcie{
  position:relative;
  min-height:min(100svh, 56rem);
  display:flex; flex-direction:column; justify-content:flex-end;
  overflow:hidden;
}
.otwarcie-tlo{
  position:absolute; inset:0;
  background:var(--las);
}
.otwarcie-tlo img{
  width:100%; height:100%; object-fit:cover;
  opacity:.7;
}
.otwarcie-tlo::after{
  content:"";
  position:absolute; inset:0;
  background:
    linear-gradient(to top, var(--las) 2%, rgba(16,26,19,.72) 38%, rgba(16,26,19,.25) 78%),
    linear-gradient(to right, rgba(16,26,19,.85), rgba(16,26,19,.1) 60%);
}
.otwarcie-tresc{
  position:relative;
  padding-top:11rem;
  padding-bottom:clamp(2.5rem, 5vw, 4.5rem);
}
.otwarcie-tresc .tyt-xl{ max-width:16ch; margin-bottom:1.5rem; }
.otwarcie-tresc .wiodacy{ max-width:46ch; margin-bottom:2.2rem; }
.otwarcie-nad{
  font-size:.925rem; color:var(--sloma);
  margin-bottom:1.6rem;
}

/* Listwa faktów pod otwarciem */
.listwa{
  position:relative;
  border-top:1px solid var(--linia);
  background:var(--las);
}
.listwa-w{
  display:grid;
  grid-template-columns:repeat(3,1fr);
}
.listwa-p{
  padding:1.6rem 0;
  padding-right:2rem;
}
.listwa-p + .listwa-p{
  border-left:1px solid var(--linia);
  padding-left:clamp(1rem,2.5vw,2.5rem);
}
.listwa-e{ display:block; font-size:.825rem; color:var(--lisc); margin-bottom:.3rem; }
.listwa-d{ font-size:1rem; }
.listwa-d a{ text-decoration:none; }
.listwa-d a:hover{ color:var(--sloma); }

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

.czolo{
  position:relative;
  padding-top:clamp(9rem, 16vw, 13rem);
  padding-bottom:clamp(3rem, 6vw, 5rem);
  border-bottom:1px solid var(--linia);
  overflow:hidden;
}
.czolo-tlo{ position:absolute; inset:0; }
.czolo-tlo img{ width:100%; height:100%; object-fit:cover; opacity:.36; }
.czolo-tlo::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to top, var(--las), rgba(16,26,19,.55));
}
.czolo-w{ position:relative; }
.czolo .wiodacy{ margin-top:1.4rem; max-width:52ch; }

/* ---------- Rozkład dwukolumnowy ---------- */

.para{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:clamp(2rem,4vw,4.5rem);
  align-items:start;
}
.para-lewa{ grid-column:1 / span 5; }
.para-prawa{ grid-column:7 / span 6; }
.para-lewa-sz{ grid-column:1 / span 6; }
.para-prawa-w{ grid-column:8 / span 5; }

.obraz-ramka{ position:relative; }
.obraz-ramka img{ width:100%; }
.podpis{
  display:block;
  font-size:.825rem; color:var(--lisc);
  margin-top:.75rem;
  padding-left:.9rem;
  border-left:1px solid var(--linia);
}

/* Dwa zdjęcia z przesunięciem */
.duet{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(.75rem,1.5vw,1.5rem); align-items:end; }
.duet > :first-child{ padding-bottom:clamp(1.5rem,4vw,4rem); }

/* ---------- Zasady / atuty ---------- */

.atuty{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:0;
  border-top:1px solid var(--linia);
}
.atut{
  padding:2rem clamp(1rem,2vw,2rem) 0 0;
  border-right:1px solid var(--linia);
}
.atut:last-child{ border-right:none; }
.atut:not(:first-child){ padding-left:clamp(1rem,2vw,2rem); }
.atut .tyt-s{ margin-bottom:.6rem; }
.atut p{ font-size:.95rem; color:var(--lisc); }

/* ---------- Katalog / rejestr gatunków ---------- */

.rzedy-tlo{
  position:relative;
}
.rzedy-tlo::before{
  content:"";
  position:absolute; inset:0;
  background-image:repeating-linear-gradient(
    to right,
    rgba(147,167,136,.055) 0 1px,
    transparent 1px 7.5rem
  );
  -webkit-mask-image:linear-gradient(to bottom, transparent, #000 22%, #000 74%, transparent);
  mask-image:linear-gradient(to bottom, transparent, #000 22%, #000 74%, transparent);
  pointer-events:none;
}
.rzedy-tlo > *{ position:relative; }

.rejestr{
  width:100%;
  border-collapse:collapse;
  text-align:left;
}
.rejestr col.k-nazwa{ width:32%; }
.rejestr col.k-poj{ width:13%; }
.rejestr col.k-forma{ width:19%; }
.rejestr col.k-cechy{ width:36%; }
.rejestr thead th{
  font-family:var(--sans);
  font-size:.8rem; font-weight:500;
  color:var(--lisc);
  letter-spacing:.02em;
  padding:0 1rem .8rem 0;
  border-bottom:1px solid var(--linia);
  white-space:nowrap;
}
.rejestr tbody tr{ border-bottom:1px solid var(--linia); }
.rejestr tbody tr.ukryty{ display:none; }
.rejestr td{
  padding:1.15rem 1rem 1.15rem 0;
  vertical-align:top;
}
.rejestr td:last-child{ padding-right:0; }
.nazwa-lac{
  font-family:var(--serif); font-style:italic; font-weight:400;
  font-size:1.15rem; line-height:1.25;
  display:block;
}
.nazwa-pl{
  font-size:.9rem; color:var(--lisc);
  display:block; margin-top:.2rem;
}
.kom-wart{ font-size:.925rem; color:var(--wapno); white-space:nowrap; }
.cechy{ display:flex; flex-wrap:wrap; gap:.4rem; }
.cecha{
  font-size:.775rem; line-height:1;
  padding:.4rem .6rem;
  border:1px solid var(--linia);
  color:var(--lisc);
  white-space:nowrap;
}
.cecha-akc{ color:var(--sloma); border-color:rgba(194,174,132,.4); }

/* Filtry */
.filtry{
  display:flex; flex-wrap:wrap; gap:.5rem;
  margin-bottom:2rem;
  align-items:center;
}
.filtr{
  position:relative;
}
.filtr input{
  position:absolute; opacity:0; width:1px; height:1px;
}
.filtr span{
  display:inline-block;
  font-size:.85rem;
  padding:.55rem 1rem;
  border:1px solid var(--linia);
  color:var(--lisc);
  cursor:pointer;
  transition:border-color .2s ease, color .2s ease, background .2s ease;
}
.filtr span:hover{ border-color:var(--lisc); }
.filtr input:checked + span{
  background:var(--sloma); border-color:var(--sloma); color:var(--las);
}
.filtr input:focus-visible + span{ outline:2px solid var(--sloma); outline-offset:3px; }
.licznik{
  display:block;
  font-size:.85rem; color:var(--lisc);
  margin:-1rem 0 2rem;
}
.pusto{
  padding:2.5rem 0; color:var(--lisc);
}

/* ---------- Galeria ---------- */

.siatka-gal{
  columns:3;
  column-gap:clamp(.6rem,1.2vw,1.1rem);
}
.kafel{
  break-inside:avoid;
  margin-bottom:clamp(.6rem,1.2vw,1.1rem);
  display:block; width:100%;
  padding:0; border:none; background:none; cursor:zoom-in;
  position:relative;
  line-height:0;
}
.kafel img{
  width:100%;
  filter:saturate(.9) brightness(.95);
  transition:filter .4s ease, opacity .4s ease;
}
.kafel:hover img{ filter:saturate(1) brightness(1.03); }

/* Podgląd zdjęcia */
.podglad{
  position:fixed; inset:0; z-index:200;
  background:rgba(9,15,11,.96);
  display:none;
  align-items:center; justify-content:center;
  padding:clamp(1rem,4vw,3.5rem);
}
.podglad.otwarty{ display:flex; }
.podglad img{
  max-width:100%; max-height:82svh;
  object-fit:contain;
}
.podglad-opis{
  position:absolute; left:0; right:0; bottom:clamp(1rem,3vw,2.5rem);
  text-align:center; color:var(--lisc); font-size:.9rem;
  padding-inline:1.5rem;
}
.podglad-x,.podglad-nawig{
  position:absolute;
  background:none; border:1px solid var(--linia); color:var(--wapno);
  width:48px; height:48px; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  font-size:1.25rem; line-height:1;
  transition:border-color .2s ease;
}
.podglad-x:hover,.podglad-nawig:hover{ border-color:var(--sloma); }
.podglad-x{ top:clamp(1rem,3vw,2rem); right:clamp(1rem,3vw,2rem); }
.poprz{ left:clamp(.75rem,2vw,2rem); top:50%; transform:translateY(-50%); }
.nast{ right:clamp(.75rem,2vw,2rem); top:50%; transform:translateY(-50%); }

/* ---------- Kontakt ---------- */

.dane-kontakt{ border-top:1px solid var(--linia); }
.dana{
  display:grid;
  grid-template-columns:10rem 1fr;
  gap:1.5rem;
  padding:1.3rem 0;
  border-bottom:1px solid var(--linia);
  align-items:baseline;
}
.dana dt{ font-size:.875rem; color:var(--lisc); }
.dana dd{ margin:0; font-size:1.05rem; }
.dana dd a{ text-decoration:none; }
.dana dd a:hover{ color:var(--sloma); }

.formularz{ display:grid; gap:1.35rem; }
.pole{ display:grid; gap:.45rem; }
.pole label{ font-size:.875rem; color:var(--lisc); }
.pole input,.pole textarea{
  font-family:var(--sans); font-size:1rem;
  color:var(--wapno);
  background:var(--las);
  border:1px solid var(--linia);
  padding:.9rem 1rem;
  width:100%;
  transition:border-color .2s ease;
}
.pole input:focus,.pole textarea:focus{
  border-color:var(--lisc); outline:none;
}
.pole textarea{ min-height:9rem; resize:vertical; }
.zgoda{
  display:grid; grid-template-columns:auto 1fr; gap:.8rem;
  font-size:.85rem; color:var(--lisc); line-height:1.5;
  align-items:start;
}
.zgoda input{ width:1.05rem; height:1.05rem; margin-top:.25rem; accent-color:var(--sloma); }
.komunikat{
  font-size:.925rem;
  padding:.9rem 1.1rem;
  border:1px solid var(--linia);
  display:none;
}
.komunikat.widoczny{ display:block; }
.komunikat.ok{ border-color:rgba(194,174,132,.5); color:var(--sloma); }
.komunikat.blad{ border-color:#7c4a42; color:#e0a79c; }

.mapa{
  width:100%; height:100%; min-height:22rem;
  border:1px solid var(--linia);
  filter:grayscale(.55) saturate(.7) brightness(.82) contrast(1.05);
}

/* ---------- Wezwanie ---------- */

.wezwanie{
  position:relative; overflow:hidden;
  border-top:1px solid var(--linia);
}
.wezwanie-tlo{ position:absolute; inset:0; }
.wezwanie-tlo img{ width:100%; height:100%; object-fit:cover; opacity:.38; }
.wezwanie-tlo::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to right, var(--las) 6%, rgba(16,26,19,.72) 55%, rgba(16,26,19,.55));
}
.wezwanie-w{ position:relative; }

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

.stopka{
  border-top:1px solid var(--linia);
  background:var(--kwatera);
  padding-block:clamp(3rem,5vw,4.5rem) 2rem;
}
.stopka-siatka{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr 1.2fr;
  gap:clamp(2rem,4vw,3.5rem);
  padding-bottom:3rem;
}
.stopka h3{
  font-family:var(--sans); font-size:.85rem; font-weight:500;
  color:var(--lisc); margin-bottom:1rem;
}
.stopka-lista{ list-style:none; margin:0; padding:0; display:grid; gap:.6rem; }
.stopka-lista a{ text-decoration:none; font-size:.95rem; }
.stopka-lista a:hover{ color:var(--sloma); }
.stopka p{ font-size:.95rem; }
.stopka .marka img{ width:132px; margin-bottom:1.2rem; }
.stopka-dol{
  border-top:1px solid var(--linia);
  padding-top:1.6rem;
  display:flex; flex-wrap:wrap; gap:1rem 2rem;
  justify-content:space-between;
  font-size:.85rem; color:var(--lisc);
}
.stopka-dol a{ text-decoration:none; }
.stopka-dol a:hover{ color:var(--sloma); }

/* ---------- Treść prawna ---------- */

.proza{ max-width:68ch; }
.proza h2{ font-size:1.5rem; margin-top:2.8rem; margin-bottom:.9rem; }
.proza h2:first-child{ margin-top:0; }
.proza ul{ padding-left:1.2rem; margin:0 0 1.15em; }
.proza li{ margin-bottom:.4rem; }

/* ---------- Wejście ---------- */

.wejscie{ opacity:0; transform:translateY(14px); }
.wejscie.jest{
  opacity:1; transform:none;
  transition:opacity .9s cubic-bezier(.22,.61,.36,1), transform .9s cubic-bezier(.22,.61,.36,1);
}
@media (prefers-reduced-motion: reduce){
  .wejscie{ opacity:1; transform:none; }
}

/* =========================================================
   Węższe ekrany
   ========================================================= */

@media (max-width: 1080px){
  .stopka-siatka{ grid-template-columns:1fr 1fr; }
  .atuty{ grid-template-columns:1fr 1fr; }
  .atut{ padding-bottom:1.6rem; }
  .atut:nth-child(2n){ border-right:none; }
  .atut:nth-child(n+3){ border-top:1px solid var(--linia); padding-top:2rem; }
  .siatka-gal{ columns:2; }
}

@media (max-width: 900px){
  .nawigacja{
    position:fixed; inset:0 0 auto 0;
    flex-direction:column; align-items:flex-start;
    gap:0;
    background:var(--kwatera);
    border-bottom:1px solid var(--linia);
    padding:6rem var(--marg) 2.5rem;
    transform:translateY(-101%);
    transition:transform .4s cubic-bezier(.22,.61,.36,1);
  }
  .nawigacja.otwarta{ transform:translateY(0); }
  .nawigacja a{
    width:100%;
    font-family:var(--serif); font-size:1.5rem; font-weight:300;
    padding:1rem 0;
    border-bottom:1px solid var(--linia);
  }
  .nawigacja a:hover{ border-bottom-color:var(--linia); color:var(--sloma); }
  .burger{ display:flex; position:relative; z-index:2; }
  .tel-szczyt{ display:none; }
  .szczyt{ background:rgba(16,26,19,.92); backdrop-filter:blur(10px); }

  .para-lewa,.para-prawa,.para-lewa-sz,.para-prawa-w{ grid-column:1 / -1; }

  .listwa-w{ grid-template-columns:1fr; }
  .listwa-p + .listwa-p{
    border-left:none; padding-left:0;
    border-top:1px solid var(--linia);
  }
  .listwa-p{ padding-block:1.1rem; }

  .otwarcie{ min-height:auto; }
  .otwarcie-tresc{ padding-top:9rem; padding-bottom:3rem; }

  .dana{ grid-template-columns:1fr; gap:.3rem; }
}

@media (max-width: 620px){
  .atuty{ grid-template-columns:1fr; }
  .atut{ border-right:none; padding-left:0 !important; padding-right:0; }
  .atut:not(:first-child){ border-top:1px solid var(--linia); padding-top:1.8rem; }
  .stopka-siatka{ grid-template-columns:1fr; gap:2.5rem; }
  .siatka-gal{ columns:1; }
  .duet{ grid-template-columns:1fr; }
  .duet > :first-child{ padding-bottom:0; }
  .przyciski .przycisk{ flex:1 1 100%; }

  /* Rejestr jako lista na wąskim ekranie */
  .rejestr thead,.rejestr colgroup{ display:none; }
  .rejestr,.rejestr tbody{ display:block; width:100%; }
  .rejestr tbody tr{ display:block; width:100%; padding-block:1.35rem; }
  .rejestr td{ display:block; padding:0; }
  .rejestr td + td{ margin-top:.65rem; }
  .kom-wart::before{
    content:attr(data-etykieta) " ";
    color:var(--lisc); font-size:.8rem;
  }
  .rzedy-tlo::before{ background-size:2.75rem 100%; }
}