/* Layer kontaktu (K19) — element motywu, task03.26; punkt wyjścia: makieta task01.41.
   Wg FeuerDS: „Kontakt stopka layer" 7:6979 (karta 489×717, padding 24, odstępy 24),
   „Kontakt stopka layer mobile" 7:7028 (pełny ekran 393, padding 16; pasek statusu 48
   w ramce to telefon, nie komponent), widok „Layer kontakt" 2:6654 (woal #2b303a 70 %,
   karta wycentrowana). Natywny <dialog> (moduł feuer-layer wtyczki — js/layer.js): sam dialog wypełnia viewport
   i jest przezroczysty (klik poza kartą = klik w woal), woal na ::backdrop.
   Animacja 400 ms (decyzja użytkownika): woal i karta pojawiają się z zanikaniem, karta
   wjeżdża 16 px z dołu; mobile — warstwa wsuwa się z dołu; prefers-reduced-motion: bez ruchu.
   Pola = atomy A51 / A54, przycisk A41 (atomy.css); lokalnie tylko pole „Wiadomość" (niżej).
   Poniżej 1024 px układ mobile (tablet bez projektu). Wartości px z Figmy w rem (baza 16). */

.layer {
  --layer-woal: rgb(43 48 58 / 0.7);      /* #2b303a 70 % z widoku 2:6654 */
  --layer-czas: 400ms;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--kolor-tekstu);
  place-items: center;
  opacity: 0;
  transition: opacity var(--layer-czas), display var(--layer-czas) allow-discrete, overlay var(--layer-czas) allow-discrete;
}

.layer[open] {
  display: grid;
  opacity: 1;
  @starting-style { opacity: 0; }
}

.layer::backdrop {
  background: var(--layer-woal);
  opacity: 0;
  transition: opacity var(--layer-czas), display var(--layer-czas) allow-discrete, overlay var(--layer-czas) allow-discrete;
}

.layer[open]::backdrop {
  opacity: 1;
  @starting-style { opacity: 0; }
}

/* Karta: 489, padding 24, układ pionowy, odstępy 24; przy niskim oknie przewijana. */
.layer-karta {
  box-sizing: border-box;
  width: 30.5625rem;                      /* 489 */
  max-height: 100%;
  overflow: auto;
  padding: var(--odstep-3);               /* 24 */
  background: var(--kolor-tla);
  display: flex;
  flex-direction: column;
  gap: var(--odstep-3);
  transform: translateY(1rem);            /* wjazd 16 z dołu */
  transition: transform var(--layer-czas);
}

.layer[open] .layer-karta {
  transform: none;
  @starting-style { transform: translateY(1rem); }
}

.layer-zamknij {
  align-self: flex-end;
  width: 1.5rem;                          /* 24 — Icon-X 2:186 */
  height: 1.5rem;
  padding: 0;
  border: 0;
  background: none;
  color: var(--kolor-tekstu);
  cursor: pointer;
}

.layer-zamknij svg { display: block; width: 100%; height: 100%; }

.layer-tytul {
  margin: 0;
  font-size: var(--tekst-26);             /* 26/36.4 ExtraBold (A26) */
  line-height: var(--interlinia-26);
  font-weight: var(--waga-najgrubsza);
}

.layer-formularz {
  display: flex;
  flex-direction: column;
  gap: var(--odstep-3);                   /* 24 */
}

.layer-karta .przycisk { align-self: flex-start; }   /* hug 218 jak w obu ramkach; także „Zamknij" */

/* Widoki karty (task03.26): formularz / podziękowanie po wysłaniu — elementy w rytmie karty. */
.layer-widok { display: contents; }
.layer-widok[hidden] { display: none; }
.layer-tytul:focus { outline: none; }    /* fokus programowy na „Dziękujemy!" (czytnik ekranu) */
.layer-tekst,
.layer-blad { margin: 0; }
.layer-pulapka { display: none; }        /* honeypot — pole tylko dla botów */

/* Pole „Wiadomość": A51 wielowierszowe, ok. 4 wiersze (rows) — doprojektowanie bez atomu w DS
   (docs/spojnosc-designu.md). */
.layer-formularz textarea.pole-wejscie {
  height: auto;
  padding-block: 1rem;                    /* 16 — jak tekst wycentrowany w polu 56 */
  resize: vertical;
}

/* Poniżej 1024 px: pełnoekranowa warstwa (ramka 7:7028): padding 10 / 16 / 16 (X 10 pod górą,
   16 od prawej), tytuł 24 pod X; wsuwa się z dołu. */
@media (max-width: 1023px) {
  .layer-karta {
    width: 100%;
    height: 100%;
    padding: 0.625rem var(--odstep-2) var(--odstep-2);
    transform: translateY(100%);
  }
  .layer[open] .layer-karta { @starting-style { transform: translateY(100%); } }
}

@media (prefers-reduced-motion: reduce) {
  .layer, .layer::backdrop, .layer-karta { transition-duration: 0s; }
}