/* ============================================================
   Golden Key Africa — warstwa „Kataster”
   Ładowana po gka.css. Zamienia układy kartowe i powtarzalne
   nagłówkowe etykiety na system dokumentu rejestrowego.

   Zasada nadrzędna: strona ma czytać się jak wypis z rejestru,
   a nie jak landing. Numeracja paragrafów, marginalia, linie,
   cyfry tabelaryczne. Zero kart tam, gdzie wystarczy linia.
   ============================================================ */

/* --- Krój wyświetleniowy --------------------------------------- */
/* Kenyan Coffee: wąski, wysoki, o dużej wysokości x. Te same piksele
   czytają się większe niż w Archivo, więc display idzie w górę,
   a tracking wraca do zera — ujemny zlepiałby litery. */
:root { --font-display: 'Kenyan Coffee', 'Archivo Narrow', 'Arial Narrow', sans-serif; }

.display, .clause__title, .hero__title, .offer__title, h1, h2 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0;
  word-spacing: .05em;
  text-transform: none;
}
h1, .hero__title { font-size: clamp(3rem, 2rem + 4.6vw, 6.5rem); line-height: .94; }
h2, .clause__title { font-size: clamp(2rem, 1.5rem + 2.2vw, 3.5rem); line-height: 1; }
h3 { font-family: var(--font-ui); font-weight: 600; }

/* --- Paragrafy: numeracja na marginesie -------------------------- */
/* To jest system, nie ozdobnik: każda sekcja strony ma numer, tak jak
   każda klauzula w dokumencie. Zastępuje powtarzalne etykiety
   wersalikowe nad każdym nagłówkiem. */
.clause { position: relative; }
.clause__head {
  display: grid; gap: var(--s-3) var(--s-6); align-items: start;
  padding-bottom: var(--s-5); margin-bottom: var(--s-6);
  border-bottom: 1px solid var(--ink);
}
@media (min-width: 900px) {
  .clause__head { grid-template-columns: 84px minmax(0, 1fr) minmax(0, 22rem); }
}
.clause__no {
  font-family: var(--font-ui);
  font-variant-numeric: tabular-nums lining-nums;
  font-size: 0.8125rem; font-weight: 700; letter-spacing: .14em;
  color: var(--accent-dark); padding-top: .55em;
}
.clause__title { max-width: 20ch; margin: 0; }
.clause__note {
  font-family: var(--font-doc); font-size: 0.9375rem; line-height: 1.55;
  color: var(--muted); padding-top: .35em;
}
.clause__note strong { color: var(--ink); font-weight: 600; }

/* --- Rejestr zaufania: wiersz danych, nie cztery kafle ----------- */
.ledger { border-block: 1px solid var(--ink); background: var(--bg-alt); }
.ledger__row { display: grid; }
@media (min-width: 720px)  { .ledger__row { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .ledger__row { grid-template-columns: repeat(4, 1fr); } }
.ledger__cell { padding: var(--s-4) var(--s-5); border-inline-start: 1px solid var(--border); }
.ledger__cell:first-child { border-inline-start: 0; }
@media (max-width: 719px) { .ledger__cell { border-inline-start: 0; border-top: 1px solid var(--border); } }
.ledger__k {
  display: block; font-size: 0.6875rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted); font-weight: 600; margin-bottom: 6px;
}
.ledger__v { font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.3; }
.ledger__v small { display: block; font-weight: 400; color: var(--muted); font-size: var(--fs-sm); margin-top: 2px; }
/* Pole niepotwierdzone wygląda na niepotwierdzone. Nie udaje danych. */
.ledger__cell--void .ledger__v { color: var(--muted); font-weight: 500; }
.ledger__cell--void .ledger__v::before {
  content: ''; display: inline-block; width: 18px; height: 1px;
  background: var(--border-strong); vertical-align: middle; margin-inline-end: 8px;
}

/* --- Wiersze z wiszącą numeracją: zamiast siatek kart ------------ */
.rows { border-top: 1px solid var(--ink); }
.row {
  display: grid; gap: var(--s-2) var(--s-6);
  padding-block: var(--s-6);
  border-bottom: 1px solid var(--border);
  grid-template-columns: 56px minmax(0, 1fr);
  align-items: start;
}
@media (min-width: 1000px) {
  .row { grid-template-columns: 56px minmax(0, 20rem) minmax(0, 1fr) auto; align-items: baseline; }
}
.row:hover { background: var(--bg-alt); }
.row__no {
  font-variant-numeric: tabular-nums lining-nums;
  font-size: 1.75rem; font-weight: 700; line-height: 1;
  color: var(--border-strong);
}
.row__title { font-size: 1.375rem; line-height: 1.2; font-weight: 600; }
.row__title a { color: inherit; text-decoration: none; }
.row__title a::after { content: ''; position: absolute; inset: 0; }
.row__body { color: var(--muted); font-size: 0.9375rem; line-height: 1.6; grid-column: 2 / -1; }
@media (min-width: 1000px) { .row__body { grid-column: auto; max-width: 52ch; } }
.row__aside { grid-column: 2 / -1; }
@media (min-width: 1000px) { .row__aside { grid-column: auto; text-align: right; white-space: nowrap; } }
.row__stat { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--accent-dark); display: block; }
.row__go { font-size: var(--fs-sm); color: var(--brand); font-weight: 600; }
.row--link { position: relative; }
.row--link:hover .row__title a { text-decoration: underline; text-underline-offset: .18em; }
.row--flag .row__no { color: var(--warn); }

/* --- Klauzule prawne: lista z wiszącym numerem, bez pudełek ------ */
.clauses { display: grid; gap: 0; }
@media (min-width: 780px) { .clauses { grid-template-columns: 1fr 1fr; column-gap: var(--s-8); } }
.clauses li {
  display: grid; grid-template-columns: 2.5rem 1fr; gap: var(--s-4);
  padding-block: var(--s-5); border-top: 1px solid currentColor;
}
.clauses li > span:first-child {
  font-variant-numeric: tabular-nums; font-weight: 700; font-size: 1.125rem; opacity: .55;
}
.clauses h3 { font-size: 1.0625rem; line-height: 1.3; margin-bottom: var(--s-2); }
.clauses p { font-size: 0.9375rem; line-height: 1.6; opacity: .82; margin: 0; }

/* --- Pas pełnoekranowy w kolorze marki --------------------------- */
/* Kolor niesie 25–35% powierzchni strony. To jest zaangażowanie,
   nie akcent: sekcja prawna jest fizycznie inną przestrzenią. */
.drench { background: var(--brand); color: var(--bg); }
.drench a { color: var(--bg); }
.drench .clause__head { border-bottom-color: oklch(0.62 0.04 210); }
.drench .clause__no { color: var(--accent); }
.drench .clause__note { color: oklch(0.86 0.02 210); }
.drench .clause__note strong { color: var(--bg); }
.drench .clauses li { border-top-color: oklch(0.55 0.045 210); }
.drench .verdict {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.75rem, 1.2rem + 2.4vw, 3rem); line-height: 1.06;
  max-width: 20ch;
}
.drench .verdict em { font-style: normal; color: var(--accent); }

/* --- Fotografia z metryką ---------------------------------------- */
/* Zdjęcie zawsze z podpisem, autorem i licencją. Dla marki, której
   argumentem jest pochodzenie danych, kredyt fotograficzny jest częścią
   głosu, a nie drobnym drukiem. */
.plate { position: relative; }
.plate img { width: 100%; height: 100%; object-fit: cover; display: block; }
.plate figcaption {
  display: flex; gap: var(--s-3); justify-content: space-between; flex-wrap: wrap;
  padding-top: var(--s-2); font-size: 0.75rem; line-height: 1.4; color: var(--muted);
}
.plate cite { font-style: normal; }
.plate--inset figcaption {
  position: absolute; inset-inline: 0; bottom: 0; margin: 0;
  padding: var(--s-3) var(--s-4);
  background: oklch(0.22 0.014 210 / .78); color: oklch(0.92 0.01 210);
  backdrop-filter: none;
}
.plate--inset cite { color: oklch(0.82 0.02 210); }

/* Stempel: pojedynczy fakt wybity na zdjęciu, jak pieczęć na wypisie. */
.stamp {
  position: absolute; top: var(--s-5); right: var(--s-5);
  display: grid; gap: 2px; padding: var(--s-3) var(--s-4);
  background: oklch(0.985 0.004 210 / .94);
  border: 2px solid var(--accent-dark);
  max-width: 15rem;
}
.stamp b { font-family: var(--font-display); font-size: 1.5rem; line-height: 1; letter-spacing: 0; }
.stamp span { font-size: 0.6875rem; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-dark); font-weight: 700; }
.stamp small { font-size: 0.75rem; color: var(--muted); line-height: 1.35; }

/* --- Hero: asymetryczny, zdjęcie wychodzi poza kontener ---------- */
.hero2 { padding-block: clamp(2rem, 1rem + 4vw, 4.5rem) 0; overflow: hidden; }
.hero2__grid { display: grid; gap: var(--s-6); align-items: end; }
@media (min-width: 980px) {
  .hero2__grid { grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr); gap: var(--s-8); }
}
.hero2__title { max-width: 15ch; }
.hero2__title em { font-style: normal; color: var(--brand); display: block; }
.hero2__lead { margin-top: var(--s-5); font-size: var(--fs-lead); line-height: 1.55; max-width: 46ch; }
.hero2__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-6); }
.hero2__meta {
  margin-top: var(--s-6); padding-top: var(--s-4); border-top: 1px solid var(--border);
  display: flex; gap: var(--s-5) var(--s-7); flex-wrap: wrap;
}
.hero2__meta div { display: grid; gap: 2px; }
.hero2__meta dt { font-size: 0.6875rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.hero2__meta dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.hero2__plate { position: relative; align-self: stretch; min-height: 26rem; }
@media (min-width: 980px) {
  /* Zdjęcie dobija do prawej krawędzi okna: łamie kontener celowo,
     żeby układ nie był wyśrodkowanym stosem.

     Odległość od prawej krawędzi treści do krawędzi okna to połowa tego,
     co zostaje poza kontenerem, plus margines boczny. Skrót `50% - 50vw`
     tu nie działa, bo `50%` odnosi się do szerokości samego elementu,
     a nie strony: przy 1440 px zdjęcie wychodziło o 366 px za daleko
     i wypychało stempel poza ekran. */
  .hero2__plate {
    margin-inline-end: calc(-1 * ((100vw - min(var(--w-wide), 100vw)) / 2 + var(--gutter)));
    min-height: 34rem;
  }
}
.hero2__plate img { position: absolute; inset: 0; }
.hero2__credit {
  position: absolute; left: 0; bottom: 0; padding: var(--s-2) var(--s-3);
  background: oklch(0.22 0.014 210 / .74); color: oklch(0.88 0.015 210);
  font-size: 0.6875rem; letter-spacing: .02em;
}
.hero2__credit a { color: inherit; }

/* --- Wyróżniona oferta: łamie regularność siatki ------------------ */
.feature {
  display: grid; border: 1px solid var(--ink); background: var(--bg);
  grid-column: 1 / -1;
}
@media (min-width: 860px) { .feature { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); } }
.feature__plate { position: relative; min-height: 18rem; }
.feature__plate img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.feature__body { padding: var(--s-6); display: flex; flex-direction: column; gap: var(--s-4); }
.feature__eyebrow { font-size: 0.6875rem; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-dark); font-weight: 700; }
.feature__title { font-family: var(--font-display); font-size: clamp(1.75rem, 1.3rem + 1.8vw, 2.5rem); line-height: 1.02; font-weight: 700; }
.feature__title a { color: inherit; text-decoration: none; }
.feature__price { font-size: var(--fs-price); font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: var(--tr-price); line-height: 1.05; }
.feature__pln { color: var(--muted); font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.feature__spec { display: flex; gap: var(--s-5); flex-wrap: wrap; padding-block: var(--s-3); border-block: 1px solid var(--border); }
.feature__spec div { display: grid; gap: 2px; }
.feature__spec dt { font-size: 0.6875rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.feature__spec dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.feature__cta { margin-top: auto; display: flex; gap: var(--s-3); flex-wrap: wrap; align-items: center; }

/* --- Nota źródłowa: bez pionowej kreski przy krawędzi ------------- */
/* Poprzednia wersja używała lewej listwy 3 px. To wzorzec-wytrych;
   zastąpiony pełną ramką hairline i tłem. */
.sourcenote {
  margin-top: var(--s-4); padding: var(--s-4);
  border: 1px solid var(--border); background: var(--bg-alt);
  font-size: var(--fs-sm); line-height: 1.55; color: var(--muted);
}
.sourcenote strong { color: var(--ink); }
.sourcenote::before {
  content: 'Źródło'; display: block; margin-bottom: 4px;
  font-size: 0.6875rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent-dark); font-weight: 700;
}

/* --- Blok prawny bez listwy bocznej ------------------------------- */
.legalbox { border: 1px solid var(--ink); border-radius: 0; background: var(--brand-tint); padding: var(--s-6); }
.legalbox::before {
  content: ''; display: block; width: 100%; height: 3px;
  background: repeating-linear-gradient(90deg, var(--accent) 0 14px, transparent 14px 22px);
  margin-bottom: var(--s-5);
}

/* --- Wizja lokalna: pełna szerokość, zdjęcie pod treścią ---------- */
.visit { position: relative; color: var(--bg); }
.visit__plate { position: absolute; inset: 0; }
.visit__plate img { width: 100%; height: 100%; object-fit: cover; }
.visit__plate::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, oklch(0.22 0.014 210 / .92) 0%, oklch(0.22 0.014 210 / .74) 52%, oklch(0.22 0.014 210 / .35) 100%); }
.visit__body { position: relative; padding-block: clamp(4rem, 3rem + 5vw, 8rem); max-width: 46rem; }
.visit__body h2 { color: var(--bg); }
.visit__body p { color: oklch(0.88 0.015 210); max-width: 52ch; }
.visit__list { display: grid; gap: var(--s-3); margin-block: var(--s-5); }
.visit__list li { display: grid; grid-template-columns: 1.5rem 1fr; gap: var(--s-3); color: oklch(0.9 0.012 210); }
.visit__list b { color: var(--accent); font-variant-numeric: tabular-nums; }
.visit__credit { position: absolute; right: var(--gutter); bottom: var(--s-3); font-size: 0.6875rem; color: oklch(0.75 0.02 210); }

/* --- Kolofon w stopce --------------------------------------------- */
.colophon { font-size: 0.75rem; line-height: 1.6; color: oklch(0.78 0.02 210); }
.colophon dt { float: left; clear: left; width: 6.5rem; color: oklch(0.66 0.02 210); }
.colophon dd { margin: 0 0 4px 6.5rem; }
.colophon a { color: oklch(0.86 0.02 210); }

/* --- Drobne poprawki typograficzne dla polszczyzny ---------------- */
.lead, .row__body, .clause__note, .block p { text-wrap: pretty; }