/* =====================================================================
   MILEKTRON - paleta leśna (runda 3, uwagi p. Ewy)
   Zieleń zamiast brązów i beży: ciemna zieleń w nagłówku, menu i stopce,
   zieleń liścia (z dotychczasowej strony, #2B8201) w przyciskach,
   szałwia w sekcjach informacyjnych. Kolor drewna tylko na zdjęciach.
   ===================================================================== */
:root {
  /* kolory */
  --len: #F7FAF7;            /* jasne tło */
  --len-2: #E3EEE2;          /* szałwia - sekcje informacyjne */
  --karta: #FFFFFF;
  --kora: #183D2B;           /* ciemna zieleń - nagłówek, menu, stopka */
  --atrament: #13241A;       /* tekst */
  --mut: #4D5E54;            /* tekst drugorzędny */
  --miod: #2F7A14;           /* zieleń liścia - główne CTA (z dawnej strony #2B8201) */
  --miod-c: #23600D;
  --las: #2F6545;            /* zieleń leśna */
  --las-c: #234D34;
  --las-tlo: #DCEBDD;
  --lisc-jasny: #BFE3A0;     /* akcent na ciemnej zieleni */
  --morze: #1F6F8B;          /* tylko oferta Bułgarii - wyróżnienie osobnej linii */
  --linia: rgba(24, 61, 43, 0.14);
  --linia-2: rgba(24, 61, 43, 0.27);

  /* typografia */
  --f-disp: "Fraunces", Georgia, serif;
  --f-body: "Nunito Sans", system-ui, sans-serif;
  --fs-300: clamp(0.78rem, 0.76rem + 0.1vw, 0.84rem);
  --fs-400: clamp(0.95rem, 0.92rem + 0.15vw, 1.02rem);
  --fs-500: clamp(1.05rem, 1rem + 0.25vw, 1.15rem);
  --fs-600: clamp(1.2rem, 1.1rem + 0.5vw, 1.45rem);
  --fs-700: clamp(1.6rem, 1.4rem + 1vw, 2.1rem);
  --fs-800: clamp(2rem, 1.6rem + 2vw, 2.9rem);
  --fs-900: clamp(2.4rem, 1.8rem + 3vw, 3.8rem);

  --r: 12px;
  --r-lg: 18px;
  --cien-sm: 0 1px 2px rgba(16, 40, 26, 0.05), 0 2px 8px rgba(16, 40, 26, 0.05);
  --cien-md: 0 6px 20px rgba(16, 40, 26, 0.1), 0 2px 6px rgba(16, 40, 26, 0.05);
  --cien-lg: 0 18px 44px rgba(16, 40, 26, 0.16);
  --sekcja: clamp(3.5rem, 2.5rem + 4vw, 6.5rem);
  --miara: 1180px;
  --przej: 200ms ease;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 92px; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-delay: 0ms !important;
    transition-duration: 0.001ms !important;
  }
}
body {
  font-family: var(--f-body);
  font-size: var(--fs-500);
  line-height: 1.65;
  color: var(--atrament);
  background: var(--len);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
input, textarea, select { font: inherit; color: inherit; }
ul, ol { list-style: none; padding: 0; }
:focus-visible { outline: 3px solid var(--miod); outline-offset: 2px; border-radius: 4px; }

.miara { max-width: var(--miara); margin-inline: auto; padding-inline: clamp(1.1rem, 4vw, 2rem); }
.sekcja { padding-block: var(--sekcja); }
.sekcja-len2 { background: var(--len-2); }

h1, h2, h3, h4 { font-family: var(--f-disp); font-weight: 600; line-height: 1.14; letter-spacing: -0.01em; }
h1 { font-size: var(--fs-900); }
h2 { font-size: var(--fs-800); }
h3 { font-size: var(--fs-600); }

.naglowek-sekcji { max-width: 720px; margin-bottom: clamp(2rem, 1.5rem + 2vw, 3.2rem); }
.etykieta {
  display: inline-flex; align-items: center; gap: 0.55rem;
  font-size: var(--fs-300); font-weight: 800; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--miod); margin-bottom: 0.9rem;
}
.etykieta::before { content: ""; width: 22px; height: 2px; background: currentColor; }
.etykieta-las { color: var(--las); }
.opis-sekcji { margin-top: 0.9rem; color: var(--mut); max-width: 62ch; }

/* ---------------- przyciski ---------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem;
  min-height: 50px; padding: 0.8rem 1.5rem;
  font-weight: 800; font-size: var(--fs-400); line-height: 1.2;
  border-radius: 10px; border: 2px solid transparent;
  transition: background var(--przej), color var(--przej), border-color var(--przej), transform var(--przej), box-shadow var(--przej);
  text-align: center;
}
.btn:active { transform: translateY(1px); }
.btn svg { width: 1.1em; height: 1.1em; flex: none; }
.btn-miod { background: var(--miod); color: #fff; }
.btn-miod:hover { background: var(--miod-c); box-shadow: var(--cien-sm); }
.btn-las { background: var(--las); color: #fff; }
.btn-las:hover { background: var(--las-c); box-shadow: var(--cien-sm); }
.btn-kontur { border-color: var(--linia-2); color: var(--atrament); background: transparent; }
.btn-kontur:hover { border-color: var(--atrament); }
.btn-kontur-jasny { border-color: rgba(255,255,255,0.55); color: #fff; background: rgba(255,255,255,0.06); }
.btn-kontur-jasny:hover { border-color: #fff; background: rgba(255,255,255,0.14); }

/* ---------------- nagłówek strony ---------------- */
.naglowek {
  position: sticky; top: 0; z-index: 300;
  background: var(--kora);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.naglowek-pasek :focus-visible { outline-color: var(--lisc-jasny); }
.naglowek-pasek {
  max-width: var(--miara); margin-inline: auto;
  padding: 0.6rem clamp(1.1rem, 4vw, 2rem);
  min-height: 74px;
  display: flex; align-items: center; gap: 0.75rem;
  position: relative; z-index: 260; /* nad panelem mobilnym (250) - logo i przycisk zamknięcia zawsze widoczne */
  background: var(--kora);
}
/* MIEJSCE NA LOGO: do czasu otrzymania pliku od klientki działa znak słowny.
   Po wrzuceniu img/logo.svg (lub .png/.webp) build.py sam podstawia <img class="logo-plik">. */
.logo { display: flex; align-items: center; gap: 0.65rem; margin-right: auto; flex: none; }
.logo-plik { display: block; height: 52px; width: auto; max-width: 220px; object-fit: contain; }
.stopka-marka .logo-plik { height: 64px; }
@media (max-width: 599.98px) { .logo-plik { height: 44px; } }
.logo-tekst { display: flex; flex-direction: column; line-height: 1.15; }
.logo-nazwa { font-family: var(--f-disp); font-weight: 700; font-size: 1.32rem; letter-spacing: 0.06em; color: #fff; }
.logo-motto { font-size: 0.66rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255, 255, 255, 0.66); }
/* kompaktowy nagłówek na telefonie (przewodnik): pełne motto tylko od 600px */
@media (max-width: 599.98px) {
  .naglowek .logo-motto { display: none; }
  .naglowek-pasek { gap: 0.6rem; }
}

.nav { display: none; }
.nav-lista { display: flex; align-items: center; gap: 0.15rem; }
.nav-poz { position: relative; }
.nav-link, .nav-przelacznik {
  display: inline-flex; align-items: center; gap: 0.35rem;
  padding: 0.62rem 0.8rem; border-radius: 8px;
  font-weight: 700; font-size: var(--fs-400); color: #fff;
  transition: color var(--przej), background var(--przej);
  white-space: nowrap;
}
.nav-link:hover, .nav-przelacznik:hover { color: var(--lisc-jasny); background: rgba(255, 255, 255, 0.06); }
.nav-link[aria-current="page"], .nav-przelacznik.aktywna { color: var(--lisc-jasny); }
.nav-strzalka { transition: transform var(--przej); }
.nav-poz.otwarte .nav-strzalka { transform: rotate(180deg); }

.podmenu {
  position: absolute; top: calc(100% + 8px); left: 0;
  min-width: 250px;
  background: var(--karta); border: 1px solid var(--linia);
  border-radius: var(--r); box-shadow: var(--cien-lg);
  padding: 0.45rem;
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity var(--przej), transform var(--przej), visibility var(--przej);
}
.nav-poz.otwarte .podmenu { opacity: 1; visibility: visible; transform: none; }
.podmenu a {
  display: block; padding: 0.6rem 0.8rem; border-radius: 8px;
  font-weight: 700; font-size: var(--fs-400);
}
.podmenu a:hover { background: var(--len-2); color: var(--miod-c); }
.podmenu-naglowek { display: block; padding: 0.5rem 0.8rem 0.2rem; font-size: var(--fs-300); font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--mut); }
.podmenu a[aria-current="page"] { color: var(--miod); }
.podmenu-sep { height: 1px; background: var(--linia); margin: 0.4rem 0.5rem; }

.naglowek-cta { display: none; }
.naglowek .btn-miod, .naglowek .tel-mobilny { background: var(--lisc-jasny); color: var(--kora); }
.naglowek .btn-miod:hover, .naglowek .tel-mobilny:hover { background: #fff; }
@media (min-width: 1060px) {
  .nav { display: block; }
  .naglowek-cta { display: inline-flex; }
  .burger { display: none !important; }
}
.naglowek .btn { min-height: 44px; padding: 0.55rem 1.05rem; font-size: var(--fs-300); }

/* telefon w nagłówku na mobile - widoczny bez przewijania na każdej podstronie */
.tel-mobilny {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; flex: none;
  border-radius: 10px;
  background: var(--miod); color: #fff;
  transition: background var(--przej);
}
.tel-mobilny:hover { background: var(--miod-c); }
.tel-mobilny svg { width: 22px; height: 22px; }
@media (min-width: 1060px) { .tel-mobilny { display: none; } }

/* burger - widoczny, kontrastowy, 48px */
.burger {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; flex: none;
  border-radius: 10px; border: 1.5px solid rgba(255, 255, 255, 0.35);
  color: #fff; background: transparent;
  transition: background var(--przej), border-color var(--przej);
}
.burger:hover { border-color: var(--lisc-jasny); color: var(--lisc-jasny); }
.burger svg { width: 24px; height: 24px; }
.burger .ikona-zamknij { display: none; }
.burger[aria-expanded="true"] .ikona-menu { display: none; }
.burger[aria-expanded="true"] .ikona-zamknij { display: block; }

/* panel mobilny */
.panel-mobilny {
  position: fixed; inset: 0; top: 0; z-index: 250;
  padding-top: 90px;
  background: var(--len);
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform 260ms ease, visibility 0s linear 260ms; /* zwijanie też animowane */
  visibility: hidden;
}
.panel-mobilny.otwarty { transform: none; visibility: visible; transition: transform 260ms ease; }
@media (prefers-reduced-motion: reduce) { .panel-mobilny { transition: none; } }
body.menu-otwarte { overflow: hidden; }
.panel-lista { padding: 0.8rem 1.2rem 2rem; }
.panel-lista > li { border-bottom: 1px solid var(--linia); }
.panel-lista a, .panel-akordeon-przycisk {
  display: flex; align-items: center; justify-content: space-between; gap: 0.8rem;
  width: 100%; min-height: 52px; padding: 0.75rem 0.3rem;
  font-weight: 800; font-size: 1.05rem; color: var(--atrament);
}
.panel-lista a[aria-current="page"] { color: var(--miod); }
.panel-akordeon-przycisk svg { transition: transform var(--przej); flex: none; color: var(--miod); }
.panel-akordeon-przycisk[aria-expanded="true"] svg { transform: rotate(180deg); }
.panel-podlista { display: none; padding: 0 0 0.7rem 0.9rem; }
.panel-podlista.otwarta { display: block; }
.panel-podlista a { min-height: 48px; font-weight: 700; color: #2E4A38; }
.panel-cta { display: grid; gap: 0.7rem; padding: 1.3rem 1.2rem 2.5rem; }
.panel-cta .btn { width: 100%; }

/* ---------------- hero ---------------- */
.hero {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--kora);
  color: #fff;
  padding-block: clamp(4rem, 3rem + 6vw, 8rem) clamp(5rem, 4rem + 6vw, 9rem);
}
.hero-tlo {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover;
}
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(100deg, rgba(10, 30, 18, 0.86) 0%, rgba(10, 30, 18, 0.62) 55%, rgba(10, 30, 18, 0.35) 100%);
}
.hero-las::before {
  background: linear-gradient(100deg, rgba(8, 28, 20, 0.88) 0%, rgba(8, 28, 20, 0.62) 55%, rgba(8, 28, 20, 0.35) 100%);
}
.hero-tresc { max-width: 720px; }
.hero .etykieta { color: var(--lisc-jasny); }
.hero-las .etykieta { color: var(--lisc-jasny); }
.hero h1 { color: #fff; text-wrap: balance; }
.h1-lok {
  display: block; margin-top: 0.55rem;
  font-family: var(--f-body); font-weight: 800;
  font-size: var(--fs-400); letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--lisc-jasny);
}
.hero-las .h1-lok { color: var(--lisc-jasny); }
.hero-opis { margin-top: 1.2rem; max-width: 58ch; color: rgba(255, 255, 255, 0.88); }
.hero-akcje { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 2rem; }
.hero-tel {
  display: inline-flex; align-items: center; gap: 0.5rem;
  margin-top: 1.5rem; font-weight: 800; color: #fff;
}
.hero-tel:hover { color: var(--lisc-jasny); }

/* kompaktowe hero na telefonie: CTA i telefon nad linią zgięcia (również 667px) */
@media (max-width: 767.98px) {
  .hero { padding-block: 2.4rem 3.4rem; }
  .hero h1 { font-size: clamp(1.9rem, 1.5rem + 2.6vw, 2.4rem); }
  .h1-lok { margin-top: 0.45rem; font-size: 0.74rem; }
  .hero-opis { margin-top: 0.9rem; font-size: 1rem; line-height: 1.55; }
  .hero-akcje { margin-top: 1.3rem; gap: 0.6rem; }
  .hero-akcje .btn { width: 100%; }
  .hero-tel { margin-top: 1rem; }
}
.hero-sloje {
  position: absolute; right: -70px; top: -70px; z-index: -1;
  opacity: 0.2; pointer-events: none;
}
/* na telefonie kręgi przecinały tekst nagłówka i wystawały poza ekran - dekoracja tylko od 900px */
@media (max-width: 899.98px) { .hero-sloje { display: none; } }

/* zęby piły - przejście sekcji */
.zeby { position: absolute; left: 0; right: 0; bottom: -1px; height: 16px; z-index: 2;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='16' viewBox='0 0 28 16'%3E%3Cpath d='M0 16 14 0l14 16z' fill='%23F7FAF7'/%3E%3C/svg%3E");
  background-repeat: repeat-x; background-size: 28px 16px;
}
.zeby-len2 { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='16' viewBox='0 0 28 16'%3E%3Cpath d='M0 16 14 0l14 16z' fill='%23E3EEE2'/%3E%3C/svg%3E"); }

/* ---------------- pasek zaufania ---------------- */
.pasek-zaufania { border-bottom: 1px solid var(--linia); background: var(--len); }
.pasek-zaufania-lista {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0.4rem 1.5rem;
  padding-block: 1rem;
}
@media (min-width: 900px) { .pasek-zaufania-lista { grid-template-columns: repeat(4, auto); justify-content: space-between; } }
.pasek-zaufania-lista li {
  display: flex; align-items: center; gap: 0.5rem;
  font-size: var(--fs-300); font-weight: 800; letter-spacing: 0.02em;
}
.pasek-zaufania-lista svg { width: 18px; height: 18px; color: var(--miod); flex: none; }

/* ---------------- karty ---------------- */
.siatka { display: grid; gap: 1.2rem; }
@media (min-width: 640px) { .siatka-2 { grid-template-columns: 1fr 1fr; } }
@media (min-width: 960px) { .siatka-3 { grid-template-columns: repeat(3, 1fr); } .siatka-4 { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 640px) and (max-width: 959.98px) { .siatka-3, .siatka-4 { grid-template-columns: 1fr 1fr; } }

.karta {
  background: var(--karta); border: 1px solid var(--linia);
  border-radius: var(--r-lg); padding: 1.5rem 1.4rem;
  box-shadow: var(--cien-sm);
}
a.karta { display: flex; flex-direction: column; gap: 0.65rem; transition: transform var(--przej), box-shadow var(--przej), border-color var(--przej); }
a.karta:hover { transform: translateY(-4px); box-shadow: var(--cien-md); border-color: var(--linia-2); }
.karta h3 { color: var(--kora); }
.karta p { color: var(--mut); font-size: var(--fs-400); }
.karta-ikona {
  width: 46px; height: 46px; border-radius: 12px; flex: none;
  display: grid; place-content: center;
  background: #E1EFD9; color: var(--miod);
  margin-bottom: 0.4rem;
}
.karta-ikona svg { width: 24px; height: 24px; }
.karta-strzalka { margin-top: auto; padding-top: 0.5rem; color: var(--miod); font-weight: 800; display: inline-flex; align-items: center; gap: 0.4rem; }
.karta-strzalka svg { width: 18px; height: 18px; transition: transform var(--przej); }
a.karta:hover .karta-strzalka svg { transform: translateX(4px); }

/* karty kierunkowe (dwie linie firmy) na stronie głównej */
.kierunki { display: grid; gap: 1.4rem; }
@media (min-width: 900px) { .kierunki { grid-template-columns: 1fr 1fr; } }
.kierunek {
  position: relative; isolation: isolate; overflow: hidden;
  border-radius: var(--r-lg); padding: clamp(1.8rem, 3vw, 2.6rem);
  color: #fff; display: flex; flex-direction: column; gap: 0.9rem;
  min-height: 340px; justify-content: flex-end;
  box-shadow: var(--cien-md);
}
.kierunek img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.kierunek::before { content: ""; position: absolute; inset: 0; z-index: -1; }
.kierunek-drewno::before { background: linear-gradient(180deg, rgba(10,30,18,0.1), rgba(10,30,18,0.88) 78%); }
.kierunek-las::before { background: linear-gradient(180deg, rgba(8,28,20,0.15), rgba(8,28,20,0.9) 78%); }
.kierunek h2 { font-size: var(--fs-700); color: #fff; }
.kierunek p { color: rgba(255,255,255,0.86); font-size: var(--fs-400); max-width: 46ch; }
.kierunek .btn { align-self: flex-start; margin-top: 0.4rem; }

/* listy z „sękiem" (checki) */
.lista-checki { display: grid; gap: 0.75rem; }
.lista-checki li { display: flex; gap: 0.7rem; align-items: flex-start; font-weight: 700; }
.lista-checki svg { width: 21px; height: 21px; flex: none; margin-top: 0.2em; color: var(--las); }
.lista-checki span { display: block; }
.lista-checki small { display: block; font-weight: 400; color: var(--mut); font-size: var(--fs-400); }

/* ---------------- proces / kroki ---------------- */
.kroki { display: grid; gap: 1.2rem; counter-reset: krok; }
@media (min-width: 900px) { .kroki { grid-template-columns: repeat(var(--kroki-kol, 4), 1fr); } }
.krok {
  background: var(--karta); border: 1px solid var(--linia); border-radius: var(--r-lg);
  padding: 1.4rem 1.3rem; position: relative;
}
.krok-nr {
  width: 42px; height: 42px; border-radius: 50%;
  display: grid; place-content: center;
  background: var(--miod); color: #fff;
  font-family: var(--f-disp); font-weight: 700; font-size: 1.15rem;
  margin-bottom: 0.9rem;
}
.krok-las .krok-nr { background: var(--las); }
.krok h3 { font-size: var(--fs-500); font-family: var(--f-body); font-weight: 800; }
.krok p { color: var(--mut); font-size: var(--fs-400); margin-top: 0.4rem; }

/* ---------------- oś czasu ---------------- */
.os-czasu { position: relative; display: grid; gap: 1.6rem; padding-left: 1.6rem; max-width: 640px; }
.os-czasu::before { content: ""; position: absolute; left: 6px; top: 8px; bottom: 8px; width: 2px; background: var(--linia-2); }
.os-czasu li { position: relative; }
.os-czasu li::before {
  content: ""; position: absolute; left: calc(-1.6rem + 1px); top: 0.5em;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--miod); border: 2.5px solid var(--len);
  box-shadow: 0 0 0 2px var(--miod);
}
.os-rok { font-family: var(--f-disp); font-weight: 700; font-size: var(--fs-600); color: var(--kora); display: block; }
.os-czasu p { color: var(--mut); }

/* ---------------- FAQ ---------------- */
.faq { max-width: 780px; border-top: 1px solid var(--linia); }
.faq details { border-bottom: 1px solid var(--linia); }
.faq summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  min-height: 56px; padding: 0.9rem 0.2rem;
  font-weight: 800;
  transition: color var(--przej);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--miod); }
.faq summary svg { flex: none; width: 20px; height: 20px; color: var(--miod); transition: transform var(--przej); }
.faq details[open] summary svg { transform: rotate(45deg); }
.faq details p { padding: 0 0.2rem 1.2rem; color: var(--mut); max-width: 64ch; }

/* ---------------- chipsy / filtry ---------------- */
.chipsy { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.chips {
  display: inline-flex; align-items: center; gap: 0.4rem;
  min-height: 44px; padding: 0.5rem 1.05rem;
  border-radius: 999px; border: 1.5px solid var(--linia-2);
  font-weight: 700; font-size: var(--fs-400); background: var(--karta);
  transition: background var(--przej), color var(--przej), border-color var(--przej);
}
button.chips:hover { border-color: var(--miod); color: var(--miod); }
.chips.aktywny { background: var(--kora); color: #fff; border-color: var(--kora); }

/* ---------------- realizacje ---------------- */
.realizacja { overflow: hidden; padding: 0; }
.realizacja figure { position: relative; aspect-ratio: 4 / 3; overflow: hidden; }
.realizacja img { width: 100%; height: 100%; object-fit: cover; transition: transform 400ms ease; }
a.realizacja:hover img { transform: scale(1.04); }
.realizacja figcaption {
  position: absolute; left: 0.8rem; bottom: 0.8rem;
  background: rgba(16, 40, 26, 0.78); color: #fff;
  font-size: var(--fs-300); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 0.3rem 0.7rem; border-radius: 7px;
}
.realizacja-tresc { padding: 1.1rem 1.3rem 1.3rem; }

/* ---------------- tabela cennika ---------------- */
.tabela-otoczka { overflow-x: auto; border: 1px solid var(--linia); border-radius: var(--r-lg); background: var(--karta); box-shadow: var(--cien-sm); }
.cennik { width: 100%; border-collapse: collapse; min-width: 460px; }
.cennik caption { text-align: left; padding: 1.1rem 1.3rem 0.3rem; font-weight: 800; color: var(--mut); font-size: var(--fs-300); letter-spacing: 0.1em; text-transform: uppercase; }
.cennik th, .cennik td { padding: 0.85rem 1.3rem; text-align: left; }
.cennik tbody tr { border-top: 1px solid var(--linia); }
.cennik tbody tr:nth-child(odd) { background: rgba(227, 238, 226, 0.55); }
.cennik td:last-child { font-weight: 800; white-space: nowrap; color: var(--kora); }
/* na telefonie wiersze cennika układają się w pary etykieta/wartość - bez poziomego przewijania */
@media (max-width: 559.98px) {
  .cennik { min-width: 0; }
  .cennik thead { display: none; }
  .cennik tr { display: block; padding: 0.7rem 1.1rem; }
  .cennik td { display: block; padding: 0; white-space: normal; }
  .cennik td:first-child { font-size: var(--fs-300); color: var(--mut); font-weight: 700; }
}

/* ---------------- formularz ---------------- */
.formularz {
  background: var(--karta); border: 1px solid var(--linia); border-radius: var(--r-lg);
  padding: clamp(1.4rem, 3vw, 2.2rem); box-shadow: var(--cien-sm);
  display: grid; gap: 1.1rem; max-width: 760px;
}
.pole { display: grid; gap: 0.35rem; }
.pole label { font-weight: 800; font-size: var(--fs-400); }
.pole input, .pole select, .pole textarea {
  width: 100%; min-height: 50px; padding: 0.7rem 0.9rem;
  font-size: 16px; /* zapobiega auto-zoomowi na iOS */
  border: 1.5px solid var(--linia-2); border-radius: 10px;
  background: var(--len); color: var(--atrament);
  transition: border-color var(--przej), background var(--przej);
}
.pole textarea { min-height: 130px; resize: vertical; }
.pole input:focus, .pole select:focus, .pole textarea:focus {
  outline: none; border-color: var(--miod); background: #fff;
}
.pole-2 { display: grid; gap: 1.1rem; }
@media (min-width: 640px) { .pole-2 { grid-template-columns: 1fr 1fr; } }
.zgoda { display: flex; gap: 0.7rem; align-items: flex-start; font-size: var(--fs-400); color: var(--mut); }
.zgoda input { width: 22px; height: 22px; margin-top: 0.15em; accent-color: var(--miod); flex: none; }
.formularz .btn { justify-self: start; }
.formularz-info { font-size: var(--fs-300); color: var(--mut); }

/* ---------------- pasy CTA ---------------- */
.pas-cta { background: var(--kora); color: #fff; }
.pas-cta-las { background: var(--las); }
.pas-cta-siatka { display: grid; gap: 2rem; padding-block: clamp(2.5rem, 2rem + 2vw, 4rem); }
@media (min-width: 900px) { .pas-cta-siatka { grid-template-columns: 1fr 1fr; } }
.pas-cta h2 { color: #fff; font-size: var(--fs-700); margin-bottom: 1.1rem; }
.pas-cta p { color: rgba(255,255,255,0.82); margin-bottom: 1.1rem; }

/* ---------------- info-karty kontaktu ---------------- */
.kontakt-dane { display: grid; gap: 0.5rem; }
.kontakt-dane a { font-weight: 800; color: var(--miod); }
.kontakt-dane a:hover { text-decoration: underline; }
.kontakt-wiersz { display: flex; align-items: flex-start; gap: 0.6rem; }
.kontakt-wiersz svg { width: 20px; height: 20px; flex: none; color: var(--miod); margin-top: 0.25em; }

/* ---------------- stopka ---------------- */
.stopka { background: var(--kora); color: rgba(255, 255, 255, 0.85); margin-top: auto; }
.stopka-siatka {
  display: grid; gap: 2.2rem;
  padding-block: clamp(2.5rem, 2rem + 2vw, 4rem) 2rem;
}
@media (min-width: 900px) { .stopka-siatka { grid-template-columns: 1.3fr 1fr 1fr; } }
.stopka h3 { color: #fff; font-size: var(--fs-500); font-family: var(--f-body); font-weight: 800; margin-bottom: 0.9rem; }
.stopka a:hover { color: var(--lisc-jasny); }
.stopka-lista { display: grid; gap: 0.45rem; }
.stopka-lista a { display: inline-flex; min-height: 32px; align-items: center; }
.stopka-marka { display: flex; align-items: center; gap: 0.65rem; margin-bottom: 1rem; color: #fff; }
.stopka-marka .logo-nazwa { color: #fff; }
.stopka-marka .logo-motto { color: rgba(255,255,255,0.6); }
.stopka-marka .logo-sloje { color: var(--lisc-jasny); }
.stopka-dol {
  border-top: 1px solid rgba(255,255,255,0.16);
  padding-block: 1.1rem;
  display: flex; flex-wrap: wrap; gap: 0.6rem 2rem; justify-content: space-between;
  font-size: var(--fs-300); color: rgba(255,255,255,0.6);
}

/* ---------------- opinie ---------------- */
.opinia { display: flex; flex-direction: column; gap: 0.7rem; }
.opinia-gwiazdki { display: flex; gap: 0.15rem; color: var(--miod); }
.opinia-gwiazdki svg { width: 18px; height: 18px; fill: currentColor; stroke: none; }
.opinia-autor { margin-top: auto; display: flex; align-items: center; gap: 0.6rem; font-weight: 800; font-size: var(--fs-400); }
.znak-google {
  width: 26px; height: 26px; flex: none; border-radius: 50%;
  background: var(--karta); border: 1px solid var(--linia);
  display: grid; place-content: center;
  font-family: var(--f-body); font-weight: 800; font-size: 0.95rem; color: var(--miod);
}

/* ---------------- mapa ---------------- */
.mapa {
  border: 1px solid var(--linia); border-radius: var(--r-lg);
  overflow: hidden; box-shadow: var(--cien-sm); background: var(--karta);
}
.mapa iframe { display: block; width: 100%; height: clamp(280px, 40vw, 420px); border: 0; }
.mapa-nota { padding: 0.8rem 1.2rem; font-size: var(--fs-300); color: var(--mut); border-top: 1px solid var(--linia); }

/* ---------------- odsłanianie ---------------- */
.js .odslon { opacity: 0; transform: translateY(14px); transition: opacity 480ms ease, transform 480ms ease; }
.js .odslon.widoczne { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js .odslon { opacity: 1; transform: none; } }

.skip-link {
  position: absolute; left: 1rem; top: -100px; z-index: 999;
  background: var(--kora); color: #fff; padding: 0.7rem 1.1rem;
  border-radius: 8px; font-weight: 800; transition: top 0.2s;
}
.skip-link:focus { top: 1rem; }

/* strona jako kolumna - stopka zawsze na dole */
body { display: flex; flex-direction: column; min-height: 100vh; }

/* =====================================================================
   RUNDA 3 - nowe elementy (uwagi p. Ewy)
   ===================================================================== */

/* hero: powolne przybliżenie zdjęcia (tylko gdy ruch dozwolony) */
@media (prefers-reduced-motion: no-preference) {
  .hero-tlo { animation: hero-zoom 18s ease-out both; }
  @keyframes hero-zoom { from { transform: scale(1.08); } to { transform: scale(1); } }
}
.hero-glowne { padding-block: clamp(4.5rem, 3rem + 8vw, 10rem) clamp(5.5rem, 4rem + 8vw, 11rem); }
.hero-glowne .hero-tresc { max-width: 780px; }
.hero-glowne h1 { font-size: clamp(2.3rem, 1.6rem + 3.6vw, 4.3rem); }
.hero-specjalizacje { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.4rem; }
.hero-specjalizacje a {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0.35rem 0.95rem;
  border-radius: 999px; border: 1px solid rgba(255,255,255,0.32);
  background: rgba(255,255,255,0.08); color: #fff; font-weight: 800; font-size: var(--fs-400);
  backdrop-filter: blur(4px); transition: background var(--przej), border-color var(--przej);
}
.hero-specjalizacje a:hover { background: rgba(255,255,255,0.2); border-color: #fff; }

/* cztery główne kategorie */
.kategorie { display: grid; gap: 1.2rem; }
@media (min-width: 640px) { .kategorie { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .kategorie { grid-template-columns: repeat(4, 1fr); } }
.kat {
  display: flex; flex-direction: column;
  background: var(--karta); border: 1px solid var(--linia); border-radius: var(--r-lg);
  overflow: hidden; box-shadow: var(--cien-sm);
  transition: transform var(--przej), box-shadow var(--przej);
}
.kat:hover { transform: translateY(-4px); box-shadow: var(--cien-md); }
.kat-foto { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--len-2); }
.kat-foto img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms ease; }
.kat:hover .kat-foto img { transform: scale(1.05); }
.kat-nr {
  position: absolute; left: 0.8rem; top: 0.8rem;
  background: var(--kora); color: #fff; font-family: var(--f-disp); font-weight: 700;
  width: 38px; height: 38px; border-radius: 50%; display: grid; place-content: center; font-size: 0.95rem;
}
.kat-tresc { display: flex; flex-direction: column; gap: 0.6rem; padding: 1.3rem 1.3rem 1.4rem; flex: 1; }
.kat-tresc h3 { color: var(--kora); font-size: var(--fs-700); }
.kat-tresc p { color: var(--mut); font-size: var(--fs-400); }
.kat-akcje { margin-top: auto; padding-top: 0.6rem; display: grid; gap: 0.5rem; }
.kat-akcje .btn { min-height: 46px; padding: 0.55rem 1rem; font-size: var(--fs-300); width: 100%; }
.kat-tresc h3 a:hover { color: var(--miod); }
.foto-43 img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }

/* pas "Budujemy na miarę Twoich potrzeb" */
.na-miare { background: var(--kora); color: #fff; position: relative; overflow: hidden; isolation: isolate; }
.na-miare-siatka { display: grid; gap: 2rem; align-items: center; padding-block: var(--sekcja); }
@media (min-width: 900px) { .na-miare-siatka { grid-template-columns: 1.1fr 0.9fr; gap: 3.5rem; } }
.na-miare h2 { color: #fff; }
.na-miare .etykieta { color: var(--lisc-jasny); }
.na-miare-opis { color: rgba(255,255,255,0.86); max-width: 58ch; margin-top: 1rem; }
.na-miare .hero-akcje { margin-top: 1.8rem; }
.na-miare .btn-miod { background: var(--lisc-jasny); color: var(--kora); }
.na-miare .btn-miod:hover { background: #fff; }
.na-miare-lista { display: grid; gap: 0.9rem; }
.na-miare-lista li {
  display: flex; gap: 0.9rem; align-items: flex-start;
  padding: 1rem 1.1rem; border-radius: var(--r);
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12);
}
.na-miare-lista svg { width: 22px; height: 22px; flex: none; color: var(--lisc-jasny); margin-top: 0.15em; }
.na-miare-lista strong { display: block; color: #fff; }
.na-miare-lista span { color: rgba(255,255,255,0.75); font-size: var(--fs-400); }
.na-miare-sloje { position: absolute; right: -120px; bottom: -160px; z-index: -1; opacity: 0.08; pointer-events: none; }

/* galeria realizacji */
.galeria { display: grid; gap: 0.8rem; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 760px) { .galeria { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1100px) { .galeria-4 { grid-template-columns: repeat(4, 1fr); } }
.galeria-poz {
  position: relative; display: block; overflow: hidden; border-radius: var(--r);
  aspect-ratio: 4 / 3; background: var(--len-2); cursor: zoom-in;
  border: 0; padding: 0; width: 100%;
}
.galeria-poz img { width: 100%; height: 100%; object-fit: cover; transition: transform 500ms ease; }
.galeria-poz:hover img { transform: scale(1.05); }
.galeria-podpis {
  position: absolute; left: 0.6rem; bottom: 0.6rem;
  background: rgba(10, 30, 18, 0.78); color: #fff;
  font-size: 0.72rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 0.25rem 0.6rem; border-radius: 6px;
}
.galeria-wiecej { margin-top: 1.6rem; display: flex; flex-wrap: wrap; gap: 0.8rem 1.4rem; align-items: center; }
.galeria-nota { font-size: var(--fs-300); color: var(--mut); }
.chips-licznik { font-size: 0.78em; opacity: 0.7; font-weight: 800; }

/* lightbox */
.lightbox {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(6, 18, 11, 0.94);
  display: grid; grid-template-rows: auto 1fr auto;
  opacity: 0; visibility: hidden; transition: opacity 220ms ease, visibility 0s linear 220ms;
}
.lightbox.otwarty { opacity: 1; visibility: visible; transition: opacity 220ms ease; }
.lightbox-pasek { display: flex; justify-content: space-between; align-items: center; padding: 0.8rem 1rem; color: rgba(255,255,255,0.8); font-weight: 700; font-size: var(--fs-400); }
.lightbox-scena { position: relative; display: grid; place-items: center; min-height: 0; padding: 0 4rem; }
.lightbox-scena img { max-width: 100%; max-height: calc(100vh - 160px); object-fit: contain; border-radius: 8px; box-shadow: 0 20px 60px rgba(0,0,0,0.5); }
.lightbox button { color: #fff; width: 48px; height: 48px; border-radius: 50%; display: grid; place-content: center; background: rgba(255,255,255,0.1); }
.lightbox button:hover { background: rgba(255,255,255,0.22); }
.lightbox button svg { width: 24px; height: 24px; }
.lightbox-poprz, .lightbox-nast { position: absolute; top: 50%; transform: translateY(-50%); }
.lightbox-poprz { left: 0.6rem; } .lightbox-nast { right: 0.6rem; }
.lightbox-podpis { text-align: center; padding: 0.8rem 1rem 1.2rem; color: rgba(255,255,255,0.8); font-size: var(--fs-400); }
@media (max-width: 599.98px) {
  .lightbox-scena { padding: 0 0.5rem; }
  .lightbox-poprz, .lightbox-nast { top: auto; bottom: 0.5rem; transform: none; }
  .lightbox-scena img { max-height: calc(100vh - 220px); }
  .lightbox-scena { padding-bottom: 4rem; }
}

/* pozostała oferta - kompaktowe karty ze zdjęciem */
.oferta-mini { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 560px) { .oferta-mini { grid-template-columns: 1fr 1fr; } }
@media (min-width: 960px) { .oferta-mini { grid-template-columns: repeat(3, 1fr); } }
.mini {
  display: grid; grid-template-columns: 96px 1fr; gap: 0.9rem; align-items: center;
  background: var(--karta); border: 1px solid var(--linia); border-radius: var(--r);
  padding: 0.6rem; transition: border-color var(--przej), box-shadow var(--przej), transform var(--przej);
}
a.mini:hover { border-color: var(--miod); box-shadow: var(--cien-sm); transform: translateY(-2px); }
.mini img { width: 96px; height: 80px; object-fit: cover; border-radius: 8px; }
.mini h3 { font-size: var(--fs-500); font-family: var(--f-body); font-weight: 800; color: var(--kora); }
.mini p { font-size: var(--fs-300); color: var(--mut); margin-top: 0.15rem; line-height: 1.45; }

/* sekcje oferty z galerią (strona "Pozostała oferta" i strony kategorii) */
.oferta-blok { display: grid; gap: 1.6rem; padding-block: clamp(2rem, 1.5rem + 2vw, 3rem); border-top: 1px solid var(--linia); }
.oferta-blok:first-of-type { border-top: 0; padding-top: 0; }
@media (min-width: 900px) { .oferta-blok { grid-template-columns: 0.85fr 1.15fr; gap: 2.6rem; align-items: start; } }
.oferta-blok h2 { font-size: var(--fs-700); color: var(--kora); }
.oferta-blok p { color: var(--mut); margin-top: 0.7rem; }
.oferta-blok .lista-checki { margin-top: 1rem; }
.oferta-blok .btn { margin-top: 1.3rem; }
.oferta-blok .galeria { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 560px) { .oferta-blok .galeria { grid-template-columns: repeat(3, 1fr); } }

/* spis kotwic */
.spis { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 2.2rem; }
.spis a { display: inline-flex; align-items: center; min-height: 40px; padding: 0.35rem 0.9rem; border-radius: 999px; background: var(--karta); border: 1px solid var(--linia-2); font-weight: 700; font-size: var(--fs-400); }
.spis a:hover { border-color: var(--miod); color: var(--miod-c); }

/* oznaczenie treści do uzupełnienia przez klientkę */
.do-uzup {
  display: inline-block; padding: 0.05rem 0.45rem; border-radius: 5px;
  background: #FFF4CC; color: #5E4A00; border: 1px dashed #C9A400;
  font-size: 0.82em; font-weight: 700; line-height: 1.5;
}

/* domki na wynajem - trzy obiekty */
.domki-3 { display: grid; gap: 1.2rem; }
@media (min-width: 900px) { .domki-3 { grid-template-columns: repeat(3, 1fr); } }
.domek { display: flex; flex-direction: column; background: var(--karta); border: 1px solid var(--linia); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--cien-sm); }
.domek-foto { aspect-ratio: 4 / 3; background: var(--las-tlo); position: relative; overflow: hidden; }
.domek-foto img { width: 100%; height: 100%; object-fit: cover; }
.domek-tresc { padding: 1.3rem 1.3rem 1.4rem; display: flex; flex-direction: column; gap: 0.7rem; flex: 1; }
.domek-tresc h3 { color: var(--kora); }
.domek-tresc .lista-checki { gap: 0.45rem; font-size: var(--fs-400); }
.domek-tresc .btn { margin-top: auto; align-self: flex-start; }
.status-rezerwacji {
  display: flex; gap: 0.9rem; align-items: flex-start;
  background: var(--karta); border: 1px solid var(--linia); border-left: 5px solid var(--las);
  border-radius: var(--r); padding: 1.1rem 1.2rem; margin-top: 1.6rem;
}
.status-rezerwacji svg { width: 24px; height: 24px; flex: none; color: var(--las); }
.status-rezerwacji p { color: var(--mut); font-size: var(--fs-400); }
.status-rezerwacji strong { color: var(--kora); }

/* apartamenty w Bułgarii - osobna linia, wyraźnie oddzielona od drewna i Osinowa */
.bulgaria { background: #EAF3F6; border-block: 1px solid rgba(31, 111, 139, 0.18); }
.bulgaria .etykieta { color: var(--morze); }
.bulgaria h2 { color: #123B4A; }
.bulgaria-siatka { display: grid; gap: 1.8rem; align-items: center; }
@media (min-width: 900px) { .bulgaria-siatka { grid-template-columns: 1fr 1fr; gap: 3rem; } }
.bulgaria-ceny { display: grid; gap: 0.7rem; margin-top: 1.3rem; }
.bulgaria-cena { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; background: #fff; border: 1px solid rgba(31,111,139,0.18); border-radius: var(--r); padding: 0.9rem 1.1rem; }
.bulgaria-cena strong { font-family: var(--f-disp); font-size: var(--fs-600); color: #123B4A; white-space: nowrap; }
.bulgaria-cena span { font-weight: 700; }
.btn-morze { background: var(--morze); color: #fff; }
.btn-morze:hover { background: #17566C; }
.bulgaria-kolaz { display: grid; grid-template-columns: 1.4fr 1fr; grid-template-rows: 1fr 1fr; gap: 0.7rem; aspect-ratio: 5 / 4; }
.bulgaria-kolaz .galeria-poz { aspect-ratio: auto; height: 100%; }
.bulgaria-kolaz .galeria-poz:first-child { grid-row: span 2; }
.oznaczenie-linii { display: inline-flex; align-items: center; gap: 0.45rem; font-size: var(--fs-300); font-weight: 800; color: var(--morze); background: #fff; border: 1px solid rgba(31,111,139,0.25); border-radius: 999px; padding: 0.25rem 0.75rem; margin-bottom: 0.9rem; }
.hero-morze::before { background: linear-gradient(100deg, rgba(10, 36, 48, 0.88) 0%, rgba(10, 36, 48, 0.6) 55%, rgba(10, 36, 48, 0.3) 100%); }
.hero-morze .etykieta, .hero-morze .h1-lok { color: #A9DDEC; }
.lista-checki-morze svg { color: var(--morze); }

/* przykładowe modele i orientacyjne ceny - sekcja przygotowana, ukryta do czasu materiałów */
.ceny-modele { display: grid; gap: 1.2rem; }
@media (min-width: 760px) { .ceny-modele { grid-template-columns: repeat(3, 1fr); } }
.model-cena { font-family: var(--f-disp); font-size: var(--fs-600); color: var(--miod-c); }

/* o firmie - atuty */
.atuty { display: grid; gap: 0.7rem; margin-top: 1.2rem; }
@media (min-width: 640px) { .atuty { grid-template-columns: 1fr 1fr; } }
.atuty li { display: flex; gap: 0.6rem; align-items: flex-start; font-weight: 700; }
.atuty svg { width: 20px; height: 20px; flex: none; color: var(--miod); margin-top: 0.2em; }
.firma-siatka { display: grid; gap: 2rem; align-items: center; }
@media (min-width: 900px) { .firma-siatka { grid-template-columns: 1.1fr 0.9fr; gap: 3.5rem; } }
.firma-rok { font-family: var(--f-disp); font-weight: 700; font-size: clamp(4rem, 3rem + 5vw, 7.5rem); line-height: 0.9; color: var(--las); letter-spacing: -0.03em; }
.firma-rok small { display: block; font-family: var(--f-body); font-size: var(--fs-400); letter-spacing: 0.12em; text-transform: uppercase; color: var(--mut); margin-top: 0.6rem; }

/* kontakt na stronie głównej */
.kontakt-dom { display: grid; gap: 2rem; }
@media (min-width: 960px) { .kontakt-dom { grid-template-columns: 0.8fr 1.2fr; gap: 3rem; align-items: start; } }
.kontakt-dom .formularz { max-width: none; }
.kontakt-telefony { display: grid; gap: 1rem; margin-top: 1.4rem; }
.kontakt-telefony a { display: flex; align-items: center; gap: 0.7rem; font-family: var(--f-disp); font-size: var(--fs-700); color: var(--kora); font-weight: 600; line-height: 1.1; }
.kontakt-telefony a:hover { color: var(--miod); }
.kontakt-telefony svg { width: 26px; height: 26px; color: var(--miod); flex: none; }
.kontakt-telefony small { display: block; font-family: var(--f-body); font-size: var(--fs-300); color: var(--mut); font-weight: 700; margin-top: 0.2rem; }

/* hero strony głównej: mozaika czterech specjalizacji zamiast jednego zdjęcia */
.hero-mozaika { background: var(--kora); padding-block: clamp(3rem, 2rem + 4vw, 5.5rem) clamp(4.5rem, 3.5rem + 4vw, 7rem); }
.hero-mozaika::before { background: radial-gradient(120% 90% at 85% 10%, rgba(191, 227, 160, 0.10), transparent 60%); }
.hero-mozaika-siatka { display: grid; gap: 2.4rem; align-items: center; }
@media (min-width: 1000px) { .hero-mozaika-siatka { grid-template-columns: 1.1fr 1fr; gap: 3rem; } }
.hero-mozaika h1 { font-size: clamp(2.1rem, 1.4rem + 2.6vw, 3.45rem); }
.hero-mozaika .hero-tresc { max-width: 620px; }
.mozaika {
  display: grid; gap: 0.7rem;
  grid-template-columns: 1.15fr 1fr; grid-template-rows: 1fr 1fr 0.9fr;
  aspect-ratio: 1 / 1.02; max-height: 640px;
}
.kafel {
  position: relative; overflow: hidden; border-radius: 14px; display: block;
  background: #0f2a1c; box-shadow: 0 18px 40px rgba(0, 0, 0, 0.28);
  isolation: isolate;
}
.kafel img { width: 100%; height: 100%; object-fit: cover; transition: transform 700ms cubic-bezier(.2,.7,.2,1); }
.kafel::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 50%, rgba(6, 22, 13, 0.82)); z-index: 1; }
.kafel:hover img, .kafel:focus-visible img { transform: scale(1.06); }
.kafel-duzy { grid-row: span 2; }
.kafel-szeroki { grid-column: span 2; }
.kafel-podpis {
  position: absolute; left: 0.9rem; right: 0.9rem; bottom: 0.8rem; z-index: 2;
  display: flex; align-items: baseline; gap: 0.55rem;
  color: #fff; font-family: var(--f-disp); font-weight: 600; font-size: clamp(1.05rem, 0.9rem + 0.6vw, 1.45rem); line-height: 1.1;
}
.kafel-nr { font-family: var(--f-body); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.12em; color: var(--lisc-jasny); }
.kafel:hover .kafel-podpis { color: var(--lisc-jasny); }
@media (prefers-reduced-motion: no-preference) {
  .kafel { animation: kafel-wejscie 900ms cubic-bezier(.2,.7,.2,1) both; animation-delay: calc(var(--i) * 120ms + 150ms); }
  @keyframes kafel-wejscie { from { opacity: 0; transform: translateY(18px) scale(0.98); } to { opacity: 1; transform: none; } }
}
@media (max-width: 999.98px) {
  .mozaika { aspect-ratio: auto; grid-template-rows: 150px 150px 140px; max-height: none; }
}
@media (max-width: 599.98px) {
  .hero-mozaika-siatka { gap: 1.8rem; }
  .mozaika { gap: 0.5rem; grid-template-rows: 120px 120px 110px; }
  .kafel { border-radius: 10px; }
  .kafel-podpis { left: 0.6rem; bottom: 0.5rem; font-size: 1rem; }
}