/* =========================================================================
   Alepalmy - landing sprzedazowy
   Zalozenie kolorystyczne: strona zaczyna sie chlodno (polska jesien),
   a rozgrzewa sie ku zieleni i slomie w miare schodzenia w dol.
   ========================================================================= */

:root {
  /* Kolory - nazwy po polsku, zeby bylo wiadomo co jest czym.
     Zasada: ciepla polowa palety (sloma, koral) opowiada o lecie i rozwiazaniu,
     chlodna (basen, mgla) o zimie, wodzie i problemie. Kolor niesie tresc. */
  /* Zielenie wyprowadzone z koloru znaku firmowego #71934E (oliwkowa).
     Sam kolor marki jest za ciemny na tekst (kontrast 4.34 przy wymaganym 4.5),
     wiec sluzy do wypelnien, a do napisow uzywamy jasniejszej odmiany. */
  --marka:         #71934E;
  --dzungla:       #16281B;
  --dzungla-2:     #1F3625;
  --dzungla-3:     #33512F;
  --lisc:          #8FB56A;
  --lisc-jasny:    #A9CC86;
  --sloma:         #E8AE3C;   /* cieplejsze zloto parasoli hawajskich */
  --sloma-ciemna:  #B4841F;
  --koral:         #E2643C;   /* akcent zachodu slonca - palmy LED, strefy eventowe */
  --basen:         #2A9CB8;   /* blekit basenowy - aquaparki, sekcja zimowa */
  --basen-jasny:   #63C4DA;
  --mgla:          #E6E9E4;
  --mgla-2:        #D2D8D1;
  --kreda:         #F8F9F6;
  --beton:         #39423F;
  --beton-2:       #5F6964;
  --biel:          #FFFFFF;
  --blad:          #B4402F;

  /* Kroje pisma */
  --font-display: 'Bricolage Grotesque', 'Segoe UI', system-ui, sans-serif;
  --font-tekst:   'Work Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-dane:    'IBM Plex Mono', ui-monospace, 'Courier New', monospace;

  /* Rytm pionowy */
  --sekcja-y: clamp(3.5rem, 8vw, 7rem);
  --tresc-max: 68rem;
  --waski-max: 44rem;

  --cien: 0 1px 2px rgba(22, 40, 27, .06), 0 8px 24px rgba(22, 40, 27, .08);
  --cien-mocny: 0 2px 4px rgba(22, 40, 27, .1), 0 18px 50px rgba(22, 40, 27, .18);
  --promien: 3px;
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--kreda);
  color: var(--beton);
  font-family: var(--font-tekst);
  font-size: clamp(1rem, .96rem + .2vw, 1.125rem);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

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

/* Bricolage Grotesque jest krojem zmiennym - ustawiamy grubosc i szerokosc osobno.
   Weze litery w duzych naglowkach pozwalaja zmiescic wiecej tresci bez zmniejszania stopnia. */
h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-stretch: 92%;
  line-height: 1.04;
  letter-spacing: -.025em;
  margin: 0;
  text-wrap: balance;
}

h1 {
  font-size: clamp(2.5rem, 1.6rem + 4vw, 5rem);
  font-weight: 800;
  font-stretch: 88%;
  letter-spacing: -.035em;
}

h2 { font-size: clamp(1.95rem, 1.4rem + 2.2vw, 3.2rem); }
h3 { font-size: clamp(1.15rem, 1.05rem + .45vw, 1.5rem); font-stretch: 100%; letter-spacing: -.015em; }

p { margin: 0 0 1.1em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a { color: inherit; }

/* Etykieta / nadtytul - wszedzie ta sama forma */
.etykieta {
  font-family: var(--font-dane);
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--beton-2);
  margin: 0 0 1rem;
  display: block;
}

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

/* ---------- Uklad ---------- */

.sekcja { padding-block: var(--sekcja-y); }

.srodek {
  width: min(100% - 2.5rem, var(--tresc-max));
  margin-inline: auto;
}

.waski { max-width: var(--waski-max); }

/* Tla sekcji - tylko kolory, zadnych marginesow, zeby sie nie znosily */
.tlo-mgla  { background: var(--mgla); }
.tlo-ciemne{ background: var(--dzungla); color: #DCE6E0; }
.tlo-kreda { background: var(--kreda); }

.tlo-ciemne h2, .tlo-ciemne h3 { color: var(--biel); }
.tlo-ciemne .etykieta { color: var(--lisc); }

/* ---------- Pasek gorny ---------- */

.pasek {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(22, 40, 27, .93);
  backdrop-filter: blur(10px);
  color: var(--biel);
  border-bottom: 1px solid rgba(255, 255, 255, .1);
}

.pasek-tresc {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 4.4rem;
  width: min(100% - 2.5rem, var(--tresc-max));
  margin-inline: auto;
}

.marka {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.3rem;
  letter-spacing: -.02em;
  text-decoration: none;
  margin-right: auto;
}

.marka span { color: var(--lisc); }

.pasek-tel {
  font-family: var(--font-dane);
  font-size: 1rem;
  text-decoration: none;
  white-space: nowrap;
  padding: .4rem .2rem;
}

.pasek-tel:hover { color: var(--sloma); }

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

.przycisk {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .9rem 1.6rem;
  border: 0;
  border-radius: var(--promien);
  background: var(--sloma);
  color: var(--dzungla);
  font-family: var(--font-tekst);
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background .18s ease, transform .18s ease;
}

.przycisk:hover { background: #E8B65C; transform: translateY(-1px); }
.przycisk:active { transform: translateY(0); }

.przycisk-duzy { padding: 1.05rem 2rem; font-size: 1.08rem; }

.przycisk-obrys {
  background: transparent;
  color: var(--biel);
  border: 1px solid rgba(255, 255, 255, .35);
}

.przycisk-obrys:hover { background: rgba(255, 255, 255, .1); }

.pasek .przycisk { padding: .6rem 1.1rem; font-size: .92rem; }

/* Na waskich ekranach trzy elementy nie mieszcza sie w pasku i rozpychaja strone.
   Telefon jest wazniejszy od przycisku - to on zostaje. */
@media (max-width: 26rem) {
  .pasek .przycisk { display: none; }
  .marka { font-size: 1.15rem; }
  .pasek-tel { font-size: .92rem; }
}

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

.hero {
  position: relative;
  /* Swiatlo wpadajace z gornego rogu - jak slonce nad basenem na zdjeciu obok */
  background:
    radial-gradient(120% 90% at 85% 0%, rgba(42, 156, 184, .28) 0%, transparent 55%),
    radial-gradient(90% 70% at 5% 100%, rgba(143, 181, 106, .22) 0%, transparent 60%),
    var(--dzungla);
  color: var(--biel);
  overflow: hidden;
}

/* Pasek w barwach palety na styku hero i reszty strony */
.hero::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 4px;
  background: linear-gradient(90deg,
    var(--lisc) 0%, var(--lisc) 34%,
    var(--sloma) 34%, var(--sloma) 67%,
    var(--koral) 67%, var(--koral) 100%);
}

.hero-siatka {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
  padding-block: clamp(3rem, 7vw, 6rem);
}

.hero-tytul { color: var(--biel); }

.hero-lead {
  font-size: clamp(1.08rem, 1rem + .45vw, 1.35rem);
  color: #C3D2CA;
  max-width: 34rem;
  margin-top: 1.4rem;
}

.hero .etykieta { color: var(--sloma); }

.hero-akcje {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  margin-top: 2.2rem;
}

.hero-tel {
  display: flex;
  flex-direction: column;
  font-family: var(--font-dane);
  text-decoration: none;
  line-height: 1.3;
}

.hero-tel small {
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--lisc);
}

.hero-tel strong { font-size: 1.15rem; font-weight: 500; }

.hero-foto {
  position: relative;
  border-radius: var(--promien);
  overflow: hidden;
  box-shadow: var(--cien-mocny);
}

.hero-foto img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

@media (min-width: 60rem) {
  .hero-siatka { grid-template-columns: 1.05fr .95fr; }
}

/* ---------- Sygnatura: kalendarz sezonu ---------- */

.kalendarz { margin-top: 2.5rem; }

.kal-siatka {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

.kal-wiersz { display: grid; gap: .5rem; }

.kal-etykieta {
  font-size: .95rem;
  font-weight: 500;
  color: var(--beton);
}

.kal-pasek {
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  height: 2.6rem;
  background: var(--mgla-2);
  border-radius: var(--promien);
  overflow: hidden;
}

.kal-miesiac {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-dane);
  font-size: .62rem;
  color: var(--beton-2);
  border-right: 1px solid rgba(255, 255, 255, .55);
}

.kal-miesiac:last-child { border-right: 0; }

/* Pasek lezy NAD siatka miesiecy, a nie w niej - inaczej auto-placement
   przesunalby etykiety miesiecy, robiac miejsce dla wypelnienia. */
.kal-wypelnienie {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc((var(--od) - 1) / 12 * 100%);
  width: calc((var(--do) - var(--od) + 1) / 12 * 100%);
  display: flex;
  align-items: center;
  padding-inline: .8rem;
  font-family: var(--font-dane);
  font-size: .72rem;
  font-weight: 500;
  white-space: nowrap;
  border-radius: 2px;
  transform-origin: left center;
  transition: transform .9s cubic-bezier(.22, .8, .3, 1);
}

/* Stan przed animacja - pasek zwiniety do zera */
.kalendarz:not(.widoczny) .kal-wypelnienie { transform: scaleX(0); }

/* Zielen zywa - pasek celowo "chlodny" i przerwany, zeby bylo widac, ze konczy sie we wrzesniu */
.kal-zywe {
  background: repeating-linear-gradient(
    -45deg, #C2CCC4, #C2CCC4 6px, #B6C2B8 6px, #B6C2B8 12px
  );
  color: #3D4A44;
  box-shadow: inset 0 0 0 1px #A8B5AA;
}

/* Nasza zielen - pelny pas przez caly rok, przechodzacy z zieleni w slonce.
   To jest pointa sekcji, wiec jako jedyny element na stronie dostaje gradient. */
.kal-nasze {
  background: linear-gradient(90deg, var(--lisc) 0%, var(--lisc-jasny) 45%, var(--sloma) 100%);
  color: var(--dzungla);
  font-weight: 600;
  box-shadow: 0 2px 12px rgba(143, 181, 106, .5);
}

/* Kolejnosc pojawiania sie - trzeci pasek na koncu, bo to on jest pointa */
.kal-wiersz:nth-child(1) .kal-wypelnienie { transition-delay: .05s; }
.kal-wiersz:nth-child(2) .kal-wypelnienie { transition-delay: .2s; }
.kal-wiersz:nth-child(3) .kal-wypelnienie { transition-delay: .45s; }

.kal-stopka {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--mgla-2);
  font-size: .98rem;
  color: var(--beton-2);
  max-width: 46rem;
}

@media (min-width: 48rem) {
  .kal-wiersz { grid-template-columns: 15rem 1fr; align-items: center; gap: 1.5rem; }
  .kal-etykieta { text-align: right; }
}

/* ---------- Problem ---------- */

.problem-tresc {
  max-width: 40rem;
  margin-top: 1.8rem;
  padding-left: 1.4rem;
  border-left: 3px solid var(--koral);
  font-size: 1.08rem;
}

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

.filtry {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin: 2rem 0 2.5rem;
  padding: 0;
  list-style: none;
}

.filtr {
  padding: .5rem 1.05rem;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 100px;
  background: transparent;
  color: #C3D2CA;
  font-family: var(--font-tekst);
  font-size: .92rem;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}

.filtr:hover { border-color: var(--lisc); color: var(--biel); }

.filtr[aria-pressed="true"] {
  background: var(--lisc);
  border-color: var(--lisc);
  color: var(--dzungla);
  font-weight: 600;
  box-shadow: 0 2px 10px rgba(143, 181, 106, .35);
}

.siatka-zdjec {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: 1rem;
}

.kafel {
  position: relative;
  margin: 0;
  border-radius: var(--promien);
  overflow: hidden;
  background: var(--dzungla-2);
}

.kafel img {
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform .5s ease;
}

.kafel:hover img { transform: scale(1.04); }

.kafel figcaption {
  position: absolute;
  inset: auto 0 0 0;
  padding: 2.5rem .9rem .8rem;
  background: linear-gradient(to top, rgba(22, 40, 27, .93), transparent);
  color: var(--biel);
  font-size: .85rem;
  line-height: 1.35;
}

.kafel[hidden] { display: none; }

/* ---------- Dowod zimowy ---------- */

/* Jedyna sekcja na stronie utrzymana w chlodzie - bo mowi o zimie */
.tlo-zima {
  background: linear-gradient(170deg, #EDF3F5 0%, var(--kreda) 60%);
  border-block: 1px solid #DCE7EA;
}

.tlo-zima .etykieta { color: var(--basen); }

.zima-siatka {
  display: grid;
  gap: clamp(1.8rem, 4vw, 3.5rem);
  align-items: center;
}

.zima-foto {
  position: relative;
  border-radius: var(--promien);
  overflow: hidden;
  box-shadow: var(--cien);
  border: 3px solid var(--basen-jasny);
}

.zima-foto img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }

.zima-tresc p { font-size: 1.1rem; max-width: 32rem; }

.parametry {
  display: grid;
  gap: 1px;
  margin: 2rem 0 0;
  padding: 0;
  background: var(--mgla-2);
  border: 1px solid var(--mgla-2);
  border-radius: var(--promien);
  overflow: hidden;
  list-style: none;
}

.parametr {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: .85rem 1.1rem;
  background: var(--kreda);
  font-size: .95rem;
}

.parametr dt { color: var(--beton-2); }
.parametr dd { margin: 0; font-family: var(--font-dane); font-weight: 500; }

@media (min-width: 56rem) {
  .zima-siatka { grid-template-columns: 1.1fr .9fr; }
}

/* ---------- Proces ---------- */

.kroki {
  display: grid;
  gap: 2rem;
  margin: 2.5rem 0 0;
  padding: 0;
  counter-reset: krok;
  list-style: none;
}

.krok {
  counter-increment: krok;
  position: relative;
  padding-top: 1.2rem;
  border-top: 2px solid var(--kolor-kroku, var(--dzungla-3));
}

.krok::before {
  content: counter(krok, decimal-leading-zero);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 50%;
  background: var(--kolor-kroku, var(--sloma));
  color: var(--dzungla);
  font-family: var(--font-dane);
  font-size: .78rem;
  font-weight: 500;
  margin-bottom: .9rem;
}

/* Kazdy krok innym kolorem - widac postep drogi od zapytania do montazu */
.krok:nth-child(1) { --kolor-kroku: var(--basen); }
.krok:nth-child(2) { --kolor-kroku: var(--sloma); }
.krok:nth-child(3) { --kolor-kroku: var(--lisc); }

.krok h3 { margin-bottom: .5rem; }
.krok p { color: #B9C9C0; font-size: .98rem; }

@media (min-width: 52rem) {
  .kroki { grid-template-columns: repeat(3, 1fr); gap: 2.5rem; }
}

/* ---------- Obiekcje ---------- */

.obiekcje { margin-top: 2.5rem; border-top: 1px solid var(--mgla-2); }

.obiekcja {
  border-bottom: 1px solid var(--mgla-2);
}

.obiekcja summary {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.3rem .2rem;
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 1rem + .3vw, 1.28rem);
  font-weight: 600;
  line-height: 1.3;
  cursor: pointer;
  list-style: none;
}

.obiekcja summary::-webkit-details-marker { display: none; }

.obiekcja summary::after {
  content: '+';
  margin-left: auto;
  flex: none;
  font-family: var(--font-dane);
  font-size: 1.4rem;
  font-weight: 400;
  color: var(--koral);
  transition: transform .2s ease;
}

.obiekcja[open] summary::after { content: '−'; }

.obiekcja summary:hover { color: var(--dzungla-3); }

.obiekcja-tresc {
  padding: 0 .2rem 1.5rem;
  max-width: 46rem;
  color: var(--beton);
}

/* ---------- Formularz ---------- */

.formularz-siatka {
  display: grid;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
}

.formularz-tekst p { color: var(--beton-2); max-width: 26rem; }

.formularz-tel {
  display: inline-flex;
  flex-direction: column;
  margin-top: 1.8rem;
  padding: 1.1rem 1.4rem;
  border: 1px solid var(--mgla-2);
  border-radius: var(--promien);
  background: var(--biel);
  text-decoration: none;
}

.formularz-tel small {
  font-family: var(--font-dane);
  font-size: .7rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--beton-2);
}

.formularz-tel strong {
  font-family: var(--font-dane);
  font-size: 1.3rem;
  font-weight: 500;
  color: var(--dzungla);
}

.karta-formularza {
  padding: clamp(1.4rem, 3vw, 2.2rem);
  background: var(--biel);
  border: 1px solid var(--mgla-2);
  border-radius: var(--promien);
  box-shadow: var(--cien);
}

.pola { display: grid; gap: 1.1rem; }

.pole { display: grid; gap: .35rem; }

.pole label {
  font-size: .9rem;
  font-weight: 500;
  color: var(--beton);
}

.pole-wymagane::after {
  content: ' *';
  color: var(--blad);
}

.pole input,
.pole select,
.pole textarea {
  width: 100%;
  padding: .75rem .85rem;
  border: 1px solid var(--mgla-2);
  border-radius: var(--promien);
  background: var(--kreda);
  color: var(--beton);
  font-family: var(--font-tekst);
  font-size: 1rem;
  transition: border-color .15s ease, background .15s ease;
}

.pole input:focus,
.pole select:focus,
.pole textarea:focus {
  background: var(--biel);
  border-color: var(--lisc);
}

.pole input[aria-invalid="true"],
.pole select[aria-invalid="true"] { border-color: var(--blad); }

.pole-blad {
  font-size: .82rem;
  color: var(--blad);
}

.pole-para { display: grid; gap: 1.1rem; }

@media (min-width: 34rem) {
  .pole-para { grid-template-columns: 1fr 1fr; }
}

/* Wybor kupno/wynajem - segmentowany, bo to najwazniejsze pytanie formularza */
.wybor-modelu {
  display: grid;
  gap: .5rem;
  margin: 0;
  padding: 0;
  border: 0;
}

.wybor-modelu legend {
  padding: 0;
  margin-bottom: .35rem;
  font-size: .9rem;
  font-weight: 500;
  color: var(--beton);
}

.opcja-modelu {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .7rem .85rem;
  border: 1px solid var(--mgla-2);
  border-radius: var(--promien);
  background: var(--kreda);
  font-size: .95rem;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}

.opcja-modelu:hover { border-color: var(--lisc); }

.opcja-modelu input { accent-color: var(--dzungla-3); flex: none; }

.opcja-modelu:has(input:checked) {
  border-color: var(--dzungla-3);
  background: #EEF5F0;
  font-weight: 500;
}

.zgoda {
  display: flex;
  gap: .7rem;
  align-items: flex-start;
  font-size: .84rem;
  line-height: 1.5;
  color: var(--beton-2);
}

.zgoda input { margin-top: .25rem; accent-color: var(--dzungla-3); flex: none; }

.zgoda a { color: var(--dzungla-3); }

/* Pulapka na boty - niewidoczna dla ludzi, ale nie display:none,
   bo czesc botow to wykrywa i pomija */
.pulapka {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.karta-formularza .przycisk { width: 100%; margin-top: .4rem; }

.komunikat {
  padding: .9rem 1.1rem;
  margin-bottom: 1.2rem;
  border-radius: var(--promien);
  border-left: 3px solid var(--blad);
  background: #FBEEEC;
  color: #7E2A1E;
  font-size: .92rem;
}

@media (min-width: 56rem) {
  .formularz-siatka { grid-template-columns: .85fr 1.15fr; }
}

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

.stopka { background: var(--dzungla); color: #9FB3A9; padding-block: 3rem 2rem; font-size: .9rem; }

.stopka-siatka { display: grid; gap: 2rem; }

.stopka strong { color: var(--biel); font-weight: 600; display: block; margin-bottom: .4rem; }

.stopka a { color: #9FB3A9; }

.stopka a:hover { color: var(--sloma); }

.stopka-dol {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, .1);
  font-size: .82rem;
  color: #7D918A;
}

@media (min-width: 44rem) {
  .stopka-siatka { grid-template-columns: repeat(3, 1fr); }
}

/* ---------- Strona podziekowania ---------- */

.potwierdzenie {
  display: grid;
  place-items: center;
  min-height: 70vh;
  text-align: center;
}

.potwierdzenie-tresc { max-width: 34rem; }

.potwierdzenie .znak {
  width: 3.5rem;
  height: 3.5rem;
  margin: 0 auto 1.8rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--lisc);
  color: var(--biel);
  font-size: 1.6rem;
}

/* ---------- Dostepnosc ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
  .kalendarz:not(.widoczny) .kal-wypelnienie { transform: none; }
}

/* Odnosnik pomijajacy nawigacje - widoczny dopiero po tabulacji */
.pomin {
  position: absolute;
  left: -9999px;
  z-index: 100;
  padding: .8rem 1.2rem;
  background: var(--sloma);
  color: var(--dzungla);
  font-weight: 600;
  text-decoration: none;
}

.pomin:focus { left: 1rem; top: 1rem; }

@media print {
  .pasek, .filtry, .karta-formularza { display: none; }
  body { background: #fff; color: #000; }
}

/* ---------- Kafel galerii jako przycisk ---------- */

.kafel-przycisk {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
  position: relative;
}

.kafel-lupa {
  position: absolute;
  top: .6rem;
  right: .6rem;
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: rgba(22, 40, 27, .75);
  color: var(--biel);
  opacity: 0;
  transform: scale(.85);
  transition: opacity .18s ease, transform .18s ease;
}

.kafel-przycisk:hover .kafel-lupa,
.kafel-przycisk:focus-visible .kafel-lupa { opacity: 1; transform: scale(1); }

/* Tekst czytany przez czytniki ekranu, niewidoczny na ekranie */
.kafel-czytnik {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- Podglad zdjecia ---------- */

.podglad {
  width: min(94vw, 1200px);
  max-width: none;
  max-height: 94vh;
  padding: 0;
  border: 0;
  border-radius: var(--promien);
  background: transparent;
  overflow: visible;
}

.podglad::backdrop { background: rgba(14, 26, 17, .9); }

.podglad-tresc { margin: 0; }

.podglad-tresc img {
  width: 100%;
  max-height: 82vh;
  object-fit: contain;
  border-radius: var(--promien);
  background: var(--dzungla-2);
}

.podglad-tresc figcaption {
  margin-top: .9rem;
  color: #DCE6E0;
  font-size: .95rem;
  text-align: center;
}

.podglad-zamknij,
.podglad-strzalka {
  position: absolute;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .12);
  color: var(--biel);
  cursor: pointer;
  transition: background .15s ease;
}

.podglad-zamknij:hover,
.podglad-strzalka:hover { background: var(--sloma); color: var(--dzungla); }

.podglad-zamknij {
  top: -3rem;
  right: 0;
  width: 2.5rem;
  height: 2.5rem;
  font-size: 1.6rem;
  line-height: 1;
}

.podglad-strzalka {
  top: 50%;
  transform: translateY(-50%);
  width: 3rem;
  height: 3rem;
  font-size: 2rem;
  line-height: 1;
}

.podglad-poprzednie { left: -3.8rem; }
.podglad-nastepne   { right: -3.8rem; }

/* Na waskich ekranach strzalki nie zmieszcza sie obok zdjecia - ida na nie */
@media (max-width: 60rem) {
  .podglad-poprzednie { left: .5rem; }
  .podglad-nastepne   { right: .5rem; }
  .podglad-zamknij    { top: .5rem; right: .5rem; background: rgba(14, 26, 17, .8); }
}

/* Logo w pasku - dopasowuje sie do wysokosci paska, gdy plik zostanie wgrany */
.marka-logo { height: 2.7rem; width: auto; display: block; }

@media (max-width: 26rem) { .marka-logo { height: 2.2rem; } }

/* ---------- Rozdzielacz (strona glowna) ---------- */

.rozdzielacz {
  background:
    radial-gradient(120% 80% at 80% 0%, rgba(42, 156, 184, .22) 0%, transparent 55%),
    radial-gradient(90% 70% at 0% 100%, rgba(143, 181, 106, .18) 0%, transparent 60%),
    var(--dzungla);
  color: #DCE6E0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.roz {
  flex: 1;
  display: flex;
  align-items: center;
  padding-block: clamp(2.5rem, 7vw, 5rem);
}

.rozdzielacz .etykieta { color: var(--sloma); }

.roz-tytul {
  color: var(--biel);
  font-size: clamp(2.2rem, 1.5rem + 3.2vw, 3.8rem);
  max-width: 20ch;
}

.roz-lead {
  margin-top: 1.1rem;
  max-width: 42ch;
  font-size: clamp(1rem, .95rem + .35vw, 1.2rem);
  color: #BCCDC3;
}

.roz-kafle {
  display: grid;
  gap: 1rem;
  margin-top: clamp(2rem, 5vw, 3.5rem);
}

@media (min-width: 52rem) {
  .roz-kafle { grid-template-columns: repeat(3, 1fr); }
}

.roz-kafel {
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: var(--promien);
  overflow: hidden;
  background: rgba(255, 255, 255, .04);
  text-decoration: none;
  color: inherit;
  transition: border-color .2s ease, transform .2s ease, background .2s ease;
}

.roz-kafel:hover {
  border-color: var(--lisc);
  background: rgba(255, 255, 255, .07);
  transform: translateY(-3px);
}

.roz-foto { display: block; overflow: hidden; }

.roz-foto img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  transition: transform .5s ease;
}

.roz-kafel:hover .roz-foto img { transform: scale(1.05); }

.roz-tresc {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  padding: 1.15rem 1.25rem 1.35rem;
  flex: 1;
}

.roz-etykieta {
  font-family: var(--font-dane);
  font-size: .68rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--lisc);
}

.roz-naglowek {
  font-family: var(--font-display);
  font-size: 1.22rem;
  font-weight: 700;
  font-stretch: 95%;
  letter-spacing: -.02em;
  line-height: 1.2;
  color: var(--biel);
}

.roz-opis { font-size: .93rem; color: #B4C6BC; flex: 1; }

.roz-strzalka {
  margin-top: .3rem;
  font-size: .9rem;
  font-weight: 600;
  color: var(--sloma);
}

.roz-telefon {
  margin-top: 2.5rem;
  font-size: .95rem;
  color: #9FB3A9;
}

.roz-telefon a {
  font-family: var(--font-dane);
  color: var(--biel);
  font-size: 1.05rem;
  text-decoration: none;
  white-space: nowrap;
}

.roz-telefon a:hover { color: var(--sloma); }