/* ============================================================
   Golden Key Africa — warstwa zmiękczająca
   Ładowana na końcu, żeby dało się ją zdjąć jednym plikiem.

   Decyzja projektowa: pierwotny kierunek „Kataster” opierał się na
   ostrych krawędziach (0 na tabelach i obrazach, 2–3 px na kontrolkach).
   Klient poprosił o formy zaokrąglone, więc rejestr przesuwa się
   z wypisu urzędowego w stronę cieplejszego dokumentu.

   Zasada, która to trzyma w ryzach: zaokrąglamy POWIERZCHNIE, nie DANE.
   Karty, zdjęcia, przyciski i pola stają się miękkie. Tabele liczbowe,
   wstęga faktów i pasek rejestrowy zachowują twarde podziały, bo tam
   krawędź niesie znaczenie: oddziela wartości, a nie ozdabia blok.
   ============================================================ */

:root {
  --r-sm: 8px;    /* kontrolki, drobne elementy */
  --r-md: 14px;   /* karty, panele */
  --r-lg: 20px;   /* zdjęcia, duże płyty */
  --r-pill: 999px;

  /* Wysokość budowana światłem, nie ciężarem. Cienie są niskokontrastowe
     i tonowane w hue marki, żeby nie robić szarej mgły pod kartami. */
  --el-1: 0 1px 2px oklch(0.22 0.010 260 / .05), 0 2px 8px -4px oklch(0.22 0.010 260 / .10);
  --el-2: 0 2px 4px oklch(0.22 0.010 260 / .05), 0 12px 28px -14px oklch(0.22 0.010 260 / .18);
  --el-3: 0 4px 8px oklch(0.22 0.010 260 / .06), 0 28px 60px -28px oklch(0.22 0.010 260 / .28);
}

/* --- Karty ofert ------------------------------------------------- */
.card {
  border-radius: var(--r-md);
  box-shadow: var(--el-1);
  transition: box-shadow var(--dur-ui, 180ms) var(--ease-out-quart, ease),
              transform var(--dur-ui, 180ms) var(--ease-out-quart, ease),
              border-color var(--dur-ui, 180ms) var(--ease-out-quart, ease);
}
.card:hover, .card:focus-within {
  box-shadow: var(--el-2);
  transform: translate3d(0, -2px, 0);
}
.card__media { border-radius: var(--r-md) var(--r-md) 0 0; }
.card__media img, .card__noimg { border-radius: 0; }
.card__rule { border-top-color: var(--border); }

/* Wyróżniona oferta i jej zdjęcie. */
.feature { border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--el-2); border-color: var(--border); }
.feature__plate img { border-radius: 0; }

/* --- Zdjęcia i płyty --------------------------------------------- */
.plate img,
.loc img,
.progress figure,
.dev__prev a,
.person2__portrait,
.gallery__stage,
.gallery__thumbs button {
  border-radius: var(--r-lg);
  overflow: hidden;
}
.gallery__thumbs img, .progress img, .dev__prev img { border-radius: 0; }
.plate--inset figcaption { border-radius: 0 0 var(--r-lg) var(--r-lg); }

/* --- Przyciski i kontrolki ---------------------------------------- */
.btn { border-radius: var(--r-sm); }
.btn--primary { box-shadow: var(--el-1); }
.btn--primary:hover { box-shadow: var(--el-2); }

.field input, .field select, .field textarea,
.calc__input input, .calc__input select,
.roi__field input, .unit2__form input, .empty__form input,
.filters select, .sheet input {
  border-radius: var(--r-sm);
}

/* Chipy i odznaki jako pigułki: to są etykiety, nie pola danych. */
.badge, .chip, .active__chip, .roi__presets button, .chiptabs button, .gallery__tab {
  border-radius: var(--r-pill);
}
.chip, .roi__presets button, .chiptabs button, .gallery__tab { padding-inline: var(--s-5); }
.badge { padding-inline: var(--s-4); }

/* --- Panele i bloki ----------------------------------------------- */
.legalbox, .sourcenote, .calc__out, .roi__out, .dev, .unit2, .heroform,
.mode, .region, .proof, .risk, .flow__node, .flow__never, .flow__seal, .empty {
  border-radius: var(--r-md);
}
.heroform { border-radius: var(--r-lg); box-shadow: var(--el-3); }
.flow__node { box-shadow: var(--el-1); }
.flow__node--highlight { box-shadow: var(--el-2); }

.panel { border-radius: 0 0 var(--r-md) var(--r-md); box-shadow: var(--el-3); }
.sheet { border-radius: var(--r-lg) var(--r-lg) 0 0; }
.catalog { border-radius: var(--r-md); }
.stickybar { border-radius: var(--r-lg) var(--r-lg) 0 0; }

/* --- Dane zostają twarde ------------------------------------------ */
/* Tabela liczb, wstęga faktów i rejestr zaufania mają zachować ostre
   podziały: krawędź oddziela tam wartości i jest częścią odczytu. */
.facts-table, .facts-table td, .facts-table th,
.dist, .rail table, .ribbon, .ribbon__cell,
.ledger, .ledger__cell, .stats, .stats__item {
  border-radius: 0;
}
/* Ale kontener tabeli może być miękki, bez ruszania samych wierszy. */
.facts-table { overflow: hidden; border-radius: var(--r-md); }
.rail { border-radius: var(--r-md); box-shadow: var(--el-1); overflow: hidden; }

/* --- Sekcje pasmowe ----------------------------------------------- */
/* Pas w kolorze marki dostaje zaokrąglone rogi i oddech po bokach,
   przez co czyta się jak wyodrębniona karta, a nie jak przerwa w tle. */
@media (min-width: 900px) {
  .drench {
    border-radius: var(--r-lg);
    margin-inline: var(--gutter);
    width: auto;
  }
  .visit { border-radius: var(--r-lg); margin-inline: var(--gutter); overflow: hidden; }
}

/* --- Akta ryzyk i portrety ---------------------------------------- */
.dossier__item {
  border-radius: var(--r-md);
  padding-inline: var(--s-5);
  border-bottom: 0;
  background: var(--bg);
  box-shadow: var(--el-1);
  margin-bottom: var(--s-4);
}
.dossier { border-top: 0; gap: var(--s-4); }
@media (min-width: 900px) { .dossier { column-gap: var(--s-5); } }
.dossier__guard { border-top-style: solid; border-top-color: var(--border); }

.person2 { border-top: 0; padding: var(--s-5); background: var(--bg); border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: var(--el-1); }

/* --- Wiersze trybów kupującego ------------------------------------ */
/* Wiersze zostają wierszami, ale hover podnosi je jak kartę zamiast
   tylko zmieniać tło. */
.row { border-radius: var(--r-md); padding-inline: var(--s-4); }
.rows { border-top: 0; display: grid; gap: var(--s-2); }
.row { border-bottom: 0; background: var(--bg); border: 1px solid var(--border); box-shadow: var(--el-1); }
.row:hover { box-shadow: var(--el-2); background: var(--bg); }

/* --- Kroki procesu ------------------------------------------------- */
.step { border-radius: var(--r-md); padding-inline: var(--s-4); border-bottom: 0; }
.steps { border-top: 0; display: grid; gap: var(--s-2); }
.step:nth-child(odd) { background: var(--bg-alt); }
.step--key { background: var(--brand-tint); }

/* --- FAQ ------------------------------------------------------------ */
.faq { border-top: 0; display: grid; gap: var(--s-2); }
.faq details {
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--bg);
  padding-inline: var(--s-5);
  box-shadow: var(--el-1);
}
.faq details[open] { box-shadow: var(--el-2); }

/* --- Stopka --------------------------------------------------------- */
@media (min-width: 900px) {
  .footer { border-radius: var(--r-lg) var(--r-lg) 0 0; }
}

/* --- Ograniczenie ruchu ---------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .card:hover, .card:focus-within { transform: none; }
}