/* ============================================================
   Golden Key Africa — komponenty różnicujące rytm strony

   Powód istnienia tego pliku: po zamianie siatek kart na wiersze
   te same `.rows` obsługiwały tryby kupującego, ryzyka i zespół.
   Jednolitość wróciła tylnymi drzwiami, tylko w innym kształcie.
   Każdy z tych trzech bloków ma teraz własną strukturę.
   ============================================================ */

/* --- Ryzyka: akta, nie lista ----------------------------------- */
/* Wiszący numer w mosiądzu, mechanizm w antykwie, obrona w interlinii
   węższej i w kolorze marki. Czyta się jak notatka z akt sprawy. */
.dossier {
  display: grid;
  gap: 0;
  border-top: 2px solid var(--ink);
}
@media (min-width: 900px) {
  .dossier { grid-template-columns: 1fr 1fr; column-gap: var(--s-8); }
  /* Prawa kolumna dostaje własną linię górną, żeby siatka nie wyglądała
     jak przypadkowo rozcięta lista. */
  .dossier > *:nth-child(2) { border-top: 0; }
}
.dossier__item {
  display: grid;
  grid-template-columns: 3.25rem 1fr;
  gap: var(--s-2) var(--s-5);
  padding-block: var(--s-6);
  border-bottom: 1px solid var(--border);
}
.dossier__no {
  grid-row: 1 / span 3;
  font-variant-numeric: tabular-nums lining-nums;
  font-size: 2.25rem;
  line-height: 0.9;
  font-weight: 700;
  color: var(--accent);
  padding-top: 2px;
}
.dossier__item h3 {
  font-size: 1.1875rem;
  line-height: 1.25;
  margin: 0;
}
.dossier__how {
  font-family: var(--font-doc);
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--muted);
  margin: 0;
  max-width: 46ch;
}
.dossier__guard {
  display: flex;
  gap: var(--s-2);
  align-items: baseline;
  font-size: 0.875rem;
  line-height: 1.5;
  padding-top: var(--s-3);
  margin: 0;
  border-top: 1px dashed var(--border);
}
.dossier__guard b {
  flex: 0 0 auto;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brand);
  font-weight: 700;
}

/* --- Zespół: twarze, nie wiersze -------------------------------- */
/* Benchmark stawia na nazwaną osobę z komórką i to jest jego najmocniejszy
   pojedynczy element. Kopiujemy zasadę, nie wygląd: portret, nazwisko,
   bezpośredni numer, godziny. Puste miejsce zostaje puste. */
.people2 {
  display: grid;
  gap: var(--s-5);
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
}
.person2 {
  display: grid;
  gap: var(--s-4);
  align-content: start;
  padding-top: var(--s-5);
  border-top: 2px solid var(--ink);
}
.person2__portrait {
  aspect-ratio: 4 / 5;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  display: grid;
  place-content: center;
  text-align: center;
  gap: var(--s-2);
  color: var(--muted);
  font-size: var(--fs-sm);
  padding: var(--s-4);
  position: relative;
  overflow: hidden;
}
.person2__portrait img { width: 100%; height: 100%; object-fit: cover; }
.person2__role {
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-dark);
  font-weight: 700;
}
.person2__name {
  font-family: var(--font-display);
  font-size: 1.75rem;
  line-height: 1.02;
  font-weight: 700;
  margin: 4px 0 0;
}
.person2__does { font-size: 0.9375rem; line-height: 1.55; color: var(--muted); margin: var(--s-3) 0 0; }
.person2__lines { margin-top: var(--s-3); display: grid; gap: 4px; font-size: 0.9375rem; }
.person2__lines a { font-weight: 700; }
.person2__lines span { color: var(--muted); font-size: var(--fs-sm); }
/* Dane niepotwierdzone wyglądają na niepotwierdzone, a nie na dane. */
.person2--pending .person2__name { color: var(--muted); font-family: var(--font-ui); font-size: 1.125rem; font-weight: 600; }

/* --- Pasmo liczb rynkowych -------------------------------------- */
/* Benchmark ma statystyki bez źródeł. Nasze mają źródło i datę przy każdej
   liczbie — inaczej się nie renderują. Stąd czwarta kolumna przypisu. */
.stats {
  display: grid;
  gap: 0;
  border-block: 1px solid var(--ink);
}
@media (min-width: 760px) { .stats { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .stats { grid-template-columns: repeat(4, 1fr); } }
.stats__item {
  padding: var(--s-6) var(--s-5);
  border-inline-start: 1px solid var(--border);
  display: grid;
  align-content: start;
  gap: var(--s-2);
}
.stats__item:first-child { border-inline-start: 0; }
@media (max-width: 759px) {
  .stats__item { border-inline-start: 0; border-top: 1px solid var(--border); }
  .stats__item:first-child { border-top: 0; }
}
.stats__n {
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 1.6rem + 2.4vw, 3.25rem);
  line-height: 0.94;
  font-weight: 700;
  font-variant-numeric: tabular-nums lining-nums;
  letter-spacing: 0;
}
.stats__k { font-size: 0.9375rem; font-weight: 600; }
.stats__src {
  font-size: 0.75rem;
  line-height: 1.45;
  color: var(--muted);
  padding-top: var(--s-2);
  margin-top: auto;
  border-top: 1px solid var(--border);
}

/* --- Typy lokali z mikroformularzem ----------------------------- */
/* Wzięte wprost z benchmarku: dwa pola przy każdym układzie zamiast
   jednego formularza na dole strony. Ich wersja pyta o imię i telefon
   i to wystarcza, żeby oddzwonić. */
.units2 { display: grid; gap: var(--s-4); }
.unit2 { border: 1px solid var(--border); background: var(--bg); }
.unit2__head {
  display: grid;
  gap: var(--s-2) var(--s-5);
  padding: var(--s-4) var(--s-5);
  align-items: baseline;
}
@media (min-width: 760px) { .unit2__head { grid-template-columns: 1.4fr .7fr 1fr .9fr; } }
.unit2__name { font-weight: 700; font-size: 1.0625rem; }
.unit2__spec, .unit2__left { font-size: var(--fs-sm); color: var(--muted); font-variant-numeric: tabular-nums; }
.unit2__price { font-weight: 700; font-variant-numeric: tabular-nums; }
.unit2__left strong { color: var(--brand); }
.unit2__left--none strong { color: var(--muted); }
.unit2__form {
  display: grid;
  gap: var(--s-3);
  padding: var(--s-4) var(--s-5);
  border-top: 1px solid var(--border);
  background: var(--bg-alt);
}
@media (min-width: 760px) { .unit2__form { grid-template-columns: 1fr 1fr auto; align-items: end; } }
.unit2__form label { display: block; font-size: var(--fs-sm); font-weight: 600; margin-bottom: 4px; }
.unit2__form input {
  min-height: 44px;
  width: 100%;
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  background: var(--bg);
}

/* --- Zakładki „Okolica / Infrastruktura / Udogodnienia” ---------- */
.chiptabs { display: flex; gap: var(--s-2); flex-wrap: wrap; margin-bottom: var(--s-4); }
.chiptabs button {
  min-height: 44px;
  padding: 0 var(--s-4);
  border: 1px solid var(--border);
  background: var(--bg);
  border-radius: var(--r-sm);
  cursor: pointer;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink);
}
.chiptabs button[aria-selected="true"] { background: var(--brand); color: var(--on-brand); border-color: var(--brand); }
.chiplist { display: none; gap: var(--s-2); flex-wrap: wrap; }
.chiplist[data-open="true"] { display: flex; }
.chiplist span {
  border: 1px solid var(--border);
  background: var(--bg-alt);
  padding: var(--s-2) var(--s-4);
  font-size: 0.9375rem;
}

/* --- Modal katalogu --------------------------------------------- */
.catalog {
  border: 0;
  padding: 0;
  max-width: min(34rem, calc(100vw - 2 * var(--gutter)));
  background: var(--bg);
  border: 1px solid var(--ink);
}
.catalog::backdrop { background: oklch(0.22 0.010 260 / .55); }
.catalog__body { padding: var(--s-6); display: grid; gap: var(--s-4); }
.catalog h2 { font-size: 1.5rem; line-height: 1.1; margin: 0; }
.catalog p { font-size: 0.9375rem; line-height: 1.6; color: var(--muted); margin: 0; }
.catalog__close {
  position: absolute; top: var(--s-3); right: var(--s-3);
  width: 44px; height: 44px; display: grid; place-content: center;
  background: none; border: 1px solid var(--border); cursor: pointer;
}
.catalog__what {
  border: 1px solid var(--border);
  background: var(--bg-alt);
  padding: var(--s-4);
  font-size: var(--fs-sm);
  display: grid;
  gap: var(--s-2);
}
.catalog__what b { font-size: 0.75rem; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-dark); }