/* ============================================================
   BLOKI PODSTRONY KONTAKTOWEJ
   Tylko to, czego nie ma na stronie głównej. Reszta pochodzi
   ze wspólnego arkusza global.css — w tym nagłówek podstrony
   (.page, .page__head), odkąd zaczęła go używać też polityka
   prywatności.

   Spis:
     2. Wiersze kontaktowe       .kontakt
     3. Mapa z bramką zgody      .mapa
     4. Formularz zgłoszenia     .zgloszenie, .pole
     5. Dane rejestrowe          .rejestr
   ============================================================ */

/* ------------------------------------------------------------
   2. WIERSZE KONTAKTOWE
   Zamiast kart — pełnej szerokości wiersze rozdzielone włosowymi
   liniami. Cała powierzchnia wiersza jest odnośnikiem, więc na
   dotyku trafia się w nią bez celowania.
   ------------------------------------------------------------ */
.kontakt{border-top:1px solid var(--line)}
.kontakt__row{border-bottom:1px solid var(--line)}

.kontakt__link{
  display:grid;
  grid-template-columns:minmax(7rem,10rem) minmax(0,1fr) minmax(0,16rem) 3rem;
  align-items:center;
  gap:1rem 2.5rem;
  padding:clamp(1.9rem,3.6vw,3.1rem) 0;
  transition:padding-inline .55s var(--ease), background .55s var(--ease);
}
/* Premium, ale spokojnie: wiersz „podnosi się" na paper (biel na beżu),
   lekko wchodzi do środka, a okrągła strzałka wypełnia się jak arrow-btn
   na stronie głównej. Bez cieni — reszta serwisu jest płaska. */
.kontakt__link:hover,
.kontakt__link:focus-visible{
  background:var(--paper);
  padding-inline:clamp(.9rem,1.9vw,1.7rem);
}

/* Etykieta jako wyciszony nadtytuł z szerszym światłem. */
.kontakt__link .u-meta{align-self:center;color:var(--ink-soft);letter-spacing:.2em}

.kontakt__value{
  font-size:clamp(1.3rem,2.55vw,2.15rem);
  font-weight:600;
  line-height:1.12;
  letter-spacing:-.025em;
  /* Cyfry telefonu równej szerokości — nie skaczą przy zmianie skali. */
  font-variant-numeric:tabular-nums;
}
.kontakt__note{font-size:.9rem;color:var(--ink-soft);line-height:1.5;max-width:24ch}

/* Okrągły przycisk-strzałka — ten sam język co .arrow-btn / .disc.
   Włosowa obwódka w spoczynku, pełne wypełnienie na hover. */
.kontakt__arw{
  justify-self:end;
  width:3rem;height:3rem;
  display:grid;place-content:center;
  border:1px solid var(--line);border-radius:50%;
  font-size:1.05rem;line-height:1;color:var(--ink);
  transition:background .4s var(--ease),color .4s var(--ease),
             border-color .4s var(--ease);
}
.kontakt__link:hover .kontakt__arw,
.kontakt__link:focus-visible .kontakt__arw{
  background:var(--ink);color:var(--paper);border-color:var(--ink);
}

/* Wąskie ekrany: kolumny znoszą się, wszystko idzie w jeden słup,
   a strzałka ląduje przy etykiecie, na wysokości pierwszego wiersza. */
@media (max-width:820px){
  .kontakt__link{
    grid-template-columns:1fr auto;
    gap:.5rem 1rem;
    padding-inline:0;
  }
  .kontakt__link:hover,
  .kontakt__link:focus-visible{padding-inline:0;background:transparent}
  .kontakt__value,
  .kontakt__note{grid-column:1 / -1}
  .kontakt__note{margin-top:.2rem;max-width:none}
  /* Strzałka jest ostatnia w kodzie, więc bez tego spadłaby pod notkę,
     na własny wiersz. Wracamy nią do góry, obok etykiety. */
  .kontakt__arw{grid-column:2;grid-row:1;align-self:center;width:2.6rem;height:2.6rem}
}

/* ------------------------------------------------------------
   3. MAPA
   Mapa Google ustawia ciasteczka już przy wczytaniu ramki, więc
   ramka wstawia się dopiero po kliknięciu. Do tego czasu leży tu
   zaślepka. Szczegóły w komentarzu przy obsłudze w site.js.
   ------------------------------------------------------------ */
.mapa__label{display:block;margin-bottom:1rem}

.mapa{
  position:relative;
  aspect-ratio:21/9;
  background:var(--bone);
  border:1px solid var(--line);
  overflow:hidden;
}
@media (max-width:820px){ .mapa{aspect-ratio:4/3} }

.mapa__img{
  position:absolute;inset:0;
  width:100%;height:100%;
  border:0;display:block;
}

/* Pinezka nad środkiem kadru — mapa jest wyśrodkowana na adresie. */
.mapa__pin{
  position:absolute;top:50%;left:50%;
  translate:-50% -100%;
  width:2rem;height:2rem;color:var(--ink);
  z-index:2;pointer-events:none;
  filter:drop-shadow(0 2px 5px rgba(0,0,0,.35));
}
.mapa__pin svg{width:100%;height:100%;display:block}

.mapa__cta{
  position:absolute;right:1rem;bottom:1rem;z-index:3;
  display:inline-flex;align-items:center;gap:.55rem;
  padding:.62em 1.15em;border-radius:999px;
  background:var(--ink);color:var(--paper);
  font-size:var(--fs-meta);letter-spacing:.14em;text-transform:uppercase;font-weight:700;
  transition:transform .35s var(--ease);
}
.mapa__cta:hover{transform:translateY(-2px)}

.mapa__attr{
  position:absolute;left:.6rem;bottom:.55rem;z-index:3;
  font-size:.68rem;letter-spacing:.02em;color:var(--ink);
  background:rgba(242,241,236,.82);padding:.15em .5em;border-radius:4px;
}
.mapa__attr a{text-decoration:underline}
@media (max-width:520px){ .mapa__cta{font-size:.72rem;padding:.55em .95em} }

/* ------------------------------------------------------------
   4. FORMULARZ ZGŁOSZENIA
   ------------------------------------------------------------ */
.zgloszenie{
  display:grid;
  grid-template-columns:minmax(0,.85fr) minmax(0,1fr);
  gap:clamp(2.5rem,6vw,6rem);
  align-items:start;
}
@media (max-width:960px){ .zgloszenie{grid-template-columns:1fr} }

.zgloszenie__intro{display:grid;gap:1.4rem;max-width:44ch}
.zgloszenie__uwaga{
  font-size:.9rem;line-height:1.55;color:var(--ink-soft);
  border-left:2px solid var(--line);padding-left:1rem;
}

.zgloszenie__form{display:grid;gap:1.9rem}
/* Imię i telefon dzielą wiersz — pola krótkie, szkoda na nie pełnej szerokości. */
.zgloszenie__para{display:grid;grid-template-columns:1fr 1fr;gap:1.9rem}
@media (max-width:560px){ .zgloszenie__para{grid-template-columns:1fr} }

/* Pola bez ramek, tylko podkreślenie — ta sama konwencja co
   formularz newslettera w stopce. */
.pole{display:grid;gap:.45rem}
.pole__etykieta{font-size:var(--fs-meta);letter-spacing:.16em;text-transform:uppercase;
  font-weight:600;color:var(--ink-soft)}
.pole__wejscie{
  font:inherit;color:inherit;
  background:none;border:0;border-bottom:1px solid var(--line);
  padding:.55rem 0;
  outline:none;
  border-radius:0;              /* iOS sam zaokrągla pola */
  transition:border-color .35s var(--ease);
}
.pole__wejscie:focus{border-color:var(--ink)}
.pole__wejscie::placeholder{color:var(--ink-soft);opacity:.55}
textarea.pole__wejscie{resize:vertical;min-height:7.5rem;line-height:1.55}

/* Rozwijana lista: strzałka rysowana tłem, bo systemowa psuje
   spójność między przeglądarkami. */
select.pole__wejscie{
  appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--ink-soft) 50%),
                   linear-gradient(135deg,var(--ink-soft) 50%,transparent 50%);
  background-position:calc(100% - 11px) 55%, calc(100% - 6px) 55%;
  background-size:5px 5px;
  background-repeat:no-repeat;
  padding-right:1.6rem;
  cursor:pointer;
}

.zgoda{display:grid;grid-template-columns:auto 1fr;gap:.85rem;align-items:start}
.zgoda__box{
  appearance:none;
  width:1.15rem;height:1.15rem;margin:.15rem 0 0;
  border:1px solid var(--ink-soft);
  background:none;cursor:pointer;flex:none;
  transition:background .25s var(--ease), border-color .25s var(--ease);
}
.zgoda__box:checked{
  background:var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6.2 4.7 9 10 3.4' fill='none' stroke='%23fff' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/76% no-repeat;
  border-color:var(--ink);
}
.zgoda__tekst{font-size:.86rem;line-height:1.5;color:var(--ink-soft)}
.zgoda__tekst a{border-bottom:1px solid var(--line)}
.zgoda__tekst a:hover{color:var(--ink);border-color:currentColor}

.zgloszenie__stopka{display:flex;flex-wrap:wrap;align-items:center;gap:1.2rem}
.zgloszenie__submit{flex:none}

/* Komunikat po wysłaniu. Dopóki formularz nie jest podpięty pod
   usługę pocztową, mówi to wprost — cicha awaria byłaby gorsza
   niż widoczna. */
.zgloszenie__status{
  font-size:.9rem;line-height:1.5;color:var(--ink-soft);
  border-left:2px solid var(--orange);padding-left:.9rem;
}
.zgloszenie__status:empty{display:none}

/* ------------------------------------------------------------
   5. DANE REJESTROWE
   To przypis prawny, nie nagłówek — stąd mała skala i wyciszony
   kolor. Wcześniej krzyczał tak samo jak wezwanie do kontaktu.
   ------------------------------------------------------------ */
.rejestr{
  display:grid;
  grid-template-columns:minmax(7rem,11rem) minmax(0,1fr);
  gap:1.5rem 2rem;
  border-top:1px solid var(--line);
  padding-top:2.2rem;
  color:var(--ink-soft);
}
@media (max-width:820px){ .rejestr{grid-template-columns:1fr} }

.rejestr__entity{font-size:.95rem;line-height:1.6;margin-bottom:1.4rem}
.rejestr__entity strong{color:var(--ink);font-weight:600}

.rejestr__numery{
  display:flex;flex-wrap:wrap;gap:.6rem 2.6rem;
  font-size:.9rem;
}
.rejestr__num{display:flex;gap:.55rem;align-items:baseline}
.rejestr__num dt{font-size:var(--fs-meta);letter-spacing:.16em;text-transform:uppercase;font-weight:600}
.rejestr__num dd{margin:0;color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums}


/* ============================================================
   Mniej beżu na tej podstronie: krótsze marginesy w hero i w
   ostatniej sekcji (dane rejestrowe). kontakt.css ładuje się tylko
   tutaj, więc te nadpisania dotyczą wyłącznie strony kontakt.
   ============================================================ */
.page{
  padding-block:clamp(5.6rem,6vw,6.2rem) clamp(2.2rem,3.5vw,3rem);
}
main > section:last-child{
  padding-block:clamp(2.6rem,4.5vw,3.6rem);
}

/* Sekcja „Dane kontaktowe" (lista .kontakt) — krótsze marginesy góra/dół,
   żeby beżowy blok nie był taki surowy i pusty. */
.u-section--bone:has(.kontakt){
  padding-block:clamp(3rem,5vw,4rem);
}

/* ============================================================
   Hero kontaktu — tło z 4 kolorów sekcji po skosie (jak na /o-kancelarii/):
   Wiedza=night, Aktualności=orange, Jak to działa=mint, Sprawy=bone.
   ============================================================ */
.page--kolory{
  background:
    linear-gradient(90deg,
      rgba(10,10,10,.62) 0%, rgba(10,10,10,.5) 34%,
      rgba(10,10,10,.14) 68%, rgba(10,10,10,.04) 100%),
    linear-gradient(115deg,
      var(--night) 0 24%,
      var(--orange) 24% 50%,
      var(--mint) 50% 76%,
      var(--bone) 76% 100%);
}
.page--kolory .u-meta{color:var(--paper);opacity:.85}
.page--kolory .u-display{color:var(--paper)}
.page--kolory .u-lede{color:var(--paper);opacity:.94}
@media (max-width:760px){
  .page--kolory{
    background:
      linear-gradient(rgba(10,10,10,.52), rgba(10,10,10,.52)),
      linear-gradient(140deg,
        var(--night) 0 24%,
        var(--orange) 24% 50%,
        var(--mint) 50% 76%,
        var(--bone) 76% 100%);
  }
}