/* Lokatorka: strona główna przed stanowiskiem próbnym (pakiet P21, szablony/brama/glowna.html). Kolory, pola
   i przyciski z vn.css (paleta lazur, tryb ciemny z ustawień telefonu, „Wyraźny ekran”), tu wyłącznie układ strony
   głównej. Wymiary w rem (Aa skaluje całość), bez czcionek i obrazów z zewnątrz, bez stylów w treści (CSP). */

.glowna {
  background-color: var(--tlo);
  background-image:
    radial-gradient(48rem 28rem at 100% -8rem, color-mix(in srgb, var(--marka) 16%, transparent), transparent 70%),
    radial-gradient(36rem 24rem at -12rem 26rem, color-mix(in srgb, var(--marka) 9%, transparent), transparent 70%);
  background-repeat: no-repeat;
}

.g-ramka { width: 100%; max-width: 70rem; margin: 0 auto; padding-left: 1rem; padding-right: 1rem; }
/* napisy w elementach flex: przy literach 200% na telefonie łamią się zamiast wychodzić poza ekran */
.g-napis { min-width: 0; overflow-wrap: anywhere; }
.g-tytul, .g-sekcja__tytul, .g-funkcja h3 { overflow-wrap: anywhere; }

/* --- Góra -------------------------------------------------------------------------------------------------------- */

.g-gora {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.5rem 1rem;
  padding-top: 0.75rem; padding-bottom: 0.75rem;
}
.g-marka {
  display: inline-flex; align-items: center; gap: 0.625rem; min-height: var(--dotyk); min-width: 0;
  color: var(--tekst); text-decoration: none; font-size: 1.222rem; font-weight: 700; letter-spacing: -0.01em;
}
.g-znak { width: 2.25rem; height: 2.25rem; flex: 0 0 auto; }
.g-znak__tlo { fill: var(--marka); }
.g-znak__dom { fill: none; stroke: var(--na-marce); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.g-wejscie {
  display: inline-flex; align-items: center; gap: 0.5rem; min-height: var(--dotyk); padding: 0.25rem 1rem;
  color: var(--tekst); text-decoration: none; font-size: 0.889rem; font-weight: 600;
  background: color-mix(in srgb, var(--karta) 82%, transparent);
  border: 1px solid var(--kreska); border-radius: 999px;
}
.g-wejscie:hover { border-color: var(--marka); }
.g-wejscie__ikona { width: 1.125rem; height: 1.125rem; flex: 0 0 auto; color: var(--marka); }

/* --- Pierwszy ekran ---------------------------------------------------------------------------------------------- */

.g-start { display: grid; gap: 2.5rem; align-items: center; padding-top: 1.5rem; padding-bottom: 3rem; }
.g-start__tekst { min-width: 0; }
.g-znaczek {
  display: inline-flex; align-items: center; gap: 0.625rem; margin: 0 0 1.25rem; padding: 0.375rem 1rem;
  font-size: 0.889rem; font-weight: 600; color: var(--tekst);
  background: color-mix(in srgb, var(--marka) 12%, var(--karta));
  border: 1px solid color-mix(in srgb, var(--marka) 35%, transparent); border-radius: 999px;
}
.g-kropka {
  width: 0.5rem; height: 0.5rem; flex: 0 0 auto; border-radius: 50%; background: var(--marka);
  animation: g-puls 2.4s ease-out infinite;
}
@keyframes g-puls {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--marka) 55%, transparent); }
  70% { box-shadow: 0 0 0 0.5rem color-mix(in srgb, var(--marka) 0%, transparent); }
  100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--marka) 0%, transparent); }
}
.g-tytul {
  margin: 0 0 1rem; font-size: clamp(2rem, 1.25rem + 3.6vw, 3.4rem); font-weight: 700; line-height: 1.08;
  letter-spacing: -0.025em; text-wrap: balance;
}
.g-tytul__akcent { color: var(--marka); }
.g-wstep { max-width: 34rem; margin: 0 0 1.75rem; font-size: 1.111rem; color: var(--tekst-2); text-wrap: pretty; }
.g-akcje { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.g-akcje .przycisk { width: auto; flex: 1 1 auto; padding-left: 1.5rem; padding-right: 1.5rem; }

/* Ilustracja: pokwitowanie i pismo zarządcy jak w aplikacji (dekoracja, aria-hidden) */
.g-ilustracja { display: grid; gap: 1rem; width: 100%; max-width: 26rem; justify-self: center; min-width: 0; }
.g-kartka {
  min-width: 0; padding: 1.25rem; background: var(--karta);
  border: 1px solid var(--kreska); border-radius: 1.125rem;
  box-shadow: 0 1px 2px color-mix(in srgb, var(--tekst) 8%, transparent),
    0 1.25rem 2.5rem -1.25rem color-mix(in srgb, var(--marka) 45%, transparent);
}
.g-kartka p { margin: 0; }
.g-kartka__etykieta { color: var(--tekst-2); font-size: 0.889rem; font-weight: 600; margin-bottom: 0.25rem; }
.g-kartka__tytul { font-weight: 600; }
.g-kwota {
  margin: 0.25rem 0 0.75rem; font-size: 1.778rem; font-weight: 700; letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums; overflow-wrap: anywhere;
}
.g-stan {
  display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.25rem 0.75rem;
  color: var(--ok); background: var(--ok-tlo); border-radius: 999px; font-size: 0.889rem; font-weight: 600;
}
.g-stan__znak { font-size: 0.75em; }
.g-kartka--oplaty .g-kartka__etykieta { margin-bottom: 0.5rem; }
.g-wiersz {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 1rem; padding: 0.5rem 0;
  border-bottom: 1px dashed var(--kreska);
}
.g-wiersz--suma { border-bottom: 0; padding-bottom: 0; font-weight: 700; }
.g-liczba { font-variant-numeric: tabular-nums; }

/* --- Sekcje ------------------------------------------------------------------------------------------------------ */

.g-sekcja { padding-top: 1.5rem; padding-bottom: 2.5rem; }
.g-sekcja__tytul { font-size: 1.556rem; font-weight: 700; letter-spacing: -0.015em; line-height: 1.25; }
.g-sekcja__wstep { max-width: 38rem; margin-bottom: 1.5rem; color: var(--tekst-2); }
.g-funkcje {
  display: grid; gap: 1rem; margin: 0; padding: 0; list-style: none;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
}
.g-funkcja {
  min-width: 0; padding: 1.25rem; background: var(--karta);
  border: 1px solid var(--kreska); border-radius: 1rem;
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.g-funkcja:hover { border-color: color-mix(in srgb, var(--marka) 55%, var(--kreska)); transform: translateY(-2px); }
.g-funkcja h3 { margin: 0 0 0.375rem; font-size: 1.111rem; font-weight: 700; line-height: 1.3; }
.g-funkcja p { margin: 0; color: var(--tekst-2); }
.g-ikona {
  display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem;
  margin-bottom: 0.875rem; border-radius: 0.75rem;
  color: var(--marka); background: color-mix(in srgb, var(--marka) 13%, var(--karta));
}
.g-ikona svg { width: 1.5rem; height: 1.5rem; }

.g-budowa {
  padding: 1.5rem; background: var(--karta);
  border: 1px solid var(--kreska); border-left: 6px solid var(--marka); border-radius: 1rem;
}
.g-budowa > :last-child { margin-bottom: 0; }

/* --- Logowanie dla zespołu: dyskretny panel (details bez JavaScriptu) ---------------------------------------------- */

.g-zespol {
  margin: 0 0 2.5rem; background: color-mix(in srgb, var(--karta) 72%, transparent);
  border: 1px solid var(--kreska); border-radius: 1rem;
}
.g-zespol__tytul {
  display: flex; align-items: center; gap: 0.625rem; min-height: var(--dotyk); padding: 0.25rem 1.25rem;
  color: var(--tekst-2); font-weight: 600; cursor: pointer; list-style: none; border-radius: 1rem;
}
.g-zespol__tytul::-webkit-details-marker { display: none; }
/* znak plus i minus tylko dla oka: pusty tekst alternatywny, więc czytnik nie dopisuje go do nazwy panelu
   (przeglądarka bez tej składni odrzuca drugą deklarację i zostaje przy pierwszej) */
.g-zespol__tytul::after {
  content: "+"; content: "+" / ""; margin-left: auto; font-size: 1.333rem; line-height: 1;
}
.g-zespol[open] > .g-zespol__tytul::after { content: "\2212"; content: "\2212" / ""; }
.g-zespol__tytul:hover { color: var(--tekst); }
.g-zespol__ikona { width: 1.125rem; height: 1.125rem; flex: 0 0 auto; }
.g-zespol__tresc { max-width: 28rem; padding: 0 1.25rem 1.25rem; }
.g-zespol__tresc .formularz { margin-bottom: 0; }
.g-zespol__tresc .bledy { margin-bottom: 0.75rem; }

/* --- Stopka ------------------------------------------------------------------------------------------------------ */

.g-stopka {
  padding-top: 1.5rem; padding-bottom: 2rem; color: var(--tekst-2); font-size: 0.889rem;
  border-top: 1px solid var(--kreska);
}
.g-stopka p { margin: 0 0 0.25rem; }
.g-stopka__marka { color: var(--tekst); font-weight: 700; }

/* --- Szerszy ekran ------------------------------------------------------------------------------------------------ */

@media (min-width: 56rem) {
  .g-gora { padding-top: 1.25rem; padding-bottom: 1.25rem; }
  .g-start {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: 3rem;
    padding-top: 3rem; padding-bottom: 4.5rem;
  }
  .g-akcje .przycisk { flex: 0 0 auto; }
  /* pięć spraw: trzy w pierwszym rzędzie i dwie szersze w drugim, bez samotnej karty */
  .g-funkcje { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .g-funkcja { grid-column: span 2; }
  .g-funkcja:nth-child(n + 4) { grid-column: span 3; }
  .g-kartka--pokwitowanie { transform: rotate(-1.5deg); margin-right: 2.5rem; }
  .g-kartka--oplaty { transform: rotate(1deg); margin-left: 2.5rem; margin-top: -0.5rem; }
}

/* --- „Wyraźny ekran” --------------------------------------------------------------------------------------------- */

html[data-tryb="wyrazny"] .glowna { background-image: none; }
html[data-tryb="wyrazny"] .g-kartka, html[data-tryb="wyrazny"] .g-funkcja,
html[data-tryb="wyrazny"] .g-budowa, html[data-tryb="wyrazny"] .g-zespol,
html[data-tryb="wyrazny"] .g-wejscie, html[data-tryb="wyrazny"] .g-znaczek {
  border: 2px solid var(--tekst); box-shadow: none; transform: none;
}
html[data-tryb="wyrazny"] .g-zespol__tytul { color: var(--tekst); }