/* ============================================================
   Golden Key Africa — warstwa „panel”
   Ładowana na samym końcu.

   Kierunek wskazany przez klienta: treść leży na kolorowym podłożu
   jako duży, zaokrąglony panel, zdjęcia siedzą we własnych ramach,
   nawigacja jest lekka i pływa nad panelem.

   Przy okazji znika usterka warstwowania: wcześniej pasek nawigacji
   był pozycjonowany absolutnie nad zdjęciem i zakrywał pasek górny.
   Tutaj oba paski wracają do normalnego przepływu i leżą na podłożu,
   a nie na fotografii, więc nie mają jak na siebie nachodzić.
   ============================================================ */

:root {
  --r-panel: 28px;
  --r-frame: 20px;
  /* Brief §7: biel bazowa. Ciemne podłoże pod białą płytą było
     chwytem kierunku „Kataster” — teraz strona stoi na bieli. */
  --ground: var(--bg);
}

/* --- Podłoże ------------------------------------------------------ */
html { background: var(--ground); }
body { background: var(--ground); }

/* --- Paski nad panelem -------------------------------------------- */
/* Oba leżą na podłożu, jeden pod drugim, w normalnym przepływie. */
.masthead {
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  position: static;
  box-shadow: none;
}
.masthead .logo__name { color: var(--ink); }
.masthead .logo__sub { color: var(--muted); }
.masthead .nav__link { color: var(--ink); }
.masthead .nav__link:hover { border-bottom-color: var(--accent); }
.masthead .nav__link[aria-current="page"] { border-bottom-color: var(--accent); color: var(--ink); }
.masthead .header__tel { color: var(--ink); }
.masthead .burger { border-color: var(--border-strong); color: var(--ink); }
/* CTA w nagłówku zostaje złote, tak jak wszystkie przyciski główne (§7).
   Wcześniej było odwrócone, bo pasek był ciemny. */
.masthead .btn--primary { background: var(--accent); color: var(--on-accent); }
.masthead .btn--primary:hover { background: var(--accent-dark); color: #fff; }

/* Nagłówek przestaje się chować: nie przykrywa już niczego, a znikanie
   paska na kolorowym tle czytało się jak błąd renderowania. */
.masthead[data-hidden="true"] { transform: none; }

/* --- Panel treści --------------------------------------------------- */
/*
 * Płyta treści była biała i unosiła się nad ciemnym podłożem — miała sens,
 * dopóki podłoże było grafitowe. Po przejściu na biel (§7) zaokrąglony róg
 * i cień rysowały się już tylko nad zdjęciami, czyli wyglądały jak błąd
 * przycięcia hero, a boczny margines odcinał obraz od krawędzi ekranu.
 * Zostaje samo tło, bez ramy.
 */
.shell {
  background: var(--bg);
  border-radius: 0;
  margin-inline: 0;
  margin-bottom: 0;
  overflow: visible;
  box-shadow: none;
}

/* Sekcje pasmowe wewnątrz panelu nie potrzebują już własnych marginesów,
   bo panel sam jest wyodrębniony z tła. */
.drench, .visit { border-radius: 0; margin-inline: 0; width: auto; }

/* --- Stopka ---------------------------------------------------------- */
/*
 * Tło było zdejmowane, bo stopka leżała na grafitowym podłożu strony
 * i drugi raz go nie potrzebowała. Po przejściu na biel (§7) zostawał
 * biały tekst na białym tle — stopka znikała. Brief §23 wprost wymaga
 * stopki grafitowej, więc kolor wraca do niej samej.
 */
.footer {
  background: var(--brand-dark);
  color: var(--on-brand);
  border-radius: 0;
  margin-top: var(--s-8);
  padding-top: var(--s-8);
}

/* --- Hero w ramie ---------------------------------------------------- */
/* Zdjęcie nie idzie już pod nawigację, tylko siedzi we własnej ramie
   wewnątrz panelu. Stąd zniknął cały problem z przezroczystym paskiem. */
.heroX {
  min-height: 0;
  padding: var(--s-5);
  align-items: stretch;
}
.heroX__bg {
  inset: var(--s-5);
  border-radius: var(--r-frame);
  overflow: hidden;
  z-index: -1;
}
.heroX__bg::after { border-radius: var(--r-frame); }
.heroX__grid { padding: clamp(var(--s-5), 2vw, var(--s-8)); align-items: center; }
.heroX__credit {
  position: absolute;
  right: var(--s-5);
  bottom: var(--s-5);
  border-radius: 0 0 var(--r-frame) 0;
  padding: var(--s-2) var(--s-4);
}
@media (max-width: 999px) {
  .heroX { padding: var(--s-3); }
  .heroX__bg { inset: var(--s-3); }
  .heroX__grid { padding-inline: 0; padding-block: var(--s-6); }
  /* .heroX jest kontenerem flex, więc jego dziecko dostaje min-width:auto
     i nie chce zejść poniżej szerokości własnej treści. To ten sam mechanizm,
     który wcześniej rozpychał podpis fotografii. */
  .heroX > .wrap, .heroX__grid, .heroX__grid > * { min-width: 0; }
  .heroX__credit { position: static; width: 100%; padding-inline: var(--s-4); border-radius: 0; }
}

/* --- Ramy dla obrazów ------------------------------------------------ */
.plate img, .loc img, .gallery__stage, .progress figure, .dev__prev a,
.person2__portrait, .feature, .card__media {
  border-radius: var(--r-frame);
}
.card__media { border-radius: var(--r-frame) var(--r-frame) 0 0; }
.card { border-radius: var(--r-frame); }

/* Reguły odwracające kolory w szufladzie mobilnej usunięto 2026-09-01.
   Pochodziły z czasu, gdy podłoże strony było grafitowe: ustawiały biały
   tekst na `--ground`. Po przemalowaniu palety na biel oba tokeny dały
   biel, więc nazwa marki, ikona zamknięcia i przełącznik znikały —
   ten sam błąd, który wcześniej wyłączył stopkę. Szuflada bierze teraz
   kolory z gka.css: biała, tekst grafitowy. */

/* --- Pasek przyklejony na dole --------------------------------------- */
.stickybar {
  margin-inline: 10px;
  margin-bottom: 10px;
  border-radius: var(--r-frame);
  border: 1px solid var(--border);
}


/* --- Róg cięty: jeden narożnik znacznie większy od pozostałych ------- */
/* Zabieg z trzeciej referencji: panel nie jest równomiernie zaokrąglony,
   tylko ma jeden narożnik wyraźnie większy. Daje kierunek i sprawia,
   że blok czyta się jak przedmiot, a nie jak prostokąt z zaokrągleniem. */
:root { --r-cut: 72px; }
@media (max-width: 900px) { :root { --r-cut: 40px; } }

.shell { border-radius: var(--r-panel) var(--r-cut) var(--r-panel) var(--r-panel); }
.heroX__bg,
.heroX__bg::after { border-radius: var(--r-frame) var(--r-cut) var(--r-frame) var(--r-frame); }
.feature { border-radius: var(--r-frame) var(--r-cut) var(--r-frame) var(--r-frame); }
.heroform { border-radius: var(--r-frame) var(--r-frame) var(--r-frame) var(--r-cut); }
.drench { border-radius: 0; }

/* Pas prawny dostaje własny, cięty narożnik, żeby kolor marki czytał się
   jak wsunięta karta, a nie jak przerwa w tle. */
@media (min-width: 900px) {
  .drench {
    border-radius: var(--r-cut) var(--r-frame) var(--r-frame) var(--r-frame);
  }
}

/* --- Zdjęcie w ramie: kadr dostaje ten sam gest -------------------- */
.plate img, .loc img, .person2__portrait {
  border-radius: var(--r-frame) var(--r-frame) var(--r-frame) var(--r-frame);
}
.card__media { border-radius: var(--r-frame) var(--r-frame) 0 0; }


/* §25: na telefonie pasek nad nagłówkiem nie niesie już treści (zdanie
   ukryte jako zbyt długie), więc zostawał pustym szarym pasem nad logotypem. */