/* Hallmark · podstrona: kontakt · system-managed (Workbench) · anchor: signal #0076c0
 * Reużywa wspólny chrome ze style.css (nav, stopka, .btn, .section, .eyebrow, .proces__offer).
 * Tu tylko specyfika: nagłówek strony, formularz, karta danych.
 * states: input/select/textarea/checkbox/submit - default·hover·focus·active·disabled·error·loading·success
 */

/* Kotwice pod stałym navem (pill) */
[id] { scroll-margin-top: 96px; }

/* ---- Nagłówek strony (lekki, bez hero) ---- */
.page-head { max-width: 60ch; }
.page-head h1 {
  font-size: var(--text-4xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  margin-block: var(--space-md) var(--space-md);
}
.page-head h1 b { color: var(--signal-deep); font-weight: 600; }
.page-head__lead { font-size: var(--text-lg); color: var(--ink-soft); max-width: var(--measure); }

/* ---- Układ: formularz (lewa) + dane (prawa) ---- */
.contact {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: clamp(var(--space-lg), 3vw, var(--space-2xl));
  align-items: start;
  margin-top: var(--space-2xl);
}
@media (max-width: 860px) { .contact { grid-template-columns: minmax(0, 1fr); } }

/* ---- Panel formularza ---- */
.cform-panel {
  background: var(--paper-raised);
  border: var(--rule-hair) solid var(--hairline);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-1);
  padding: clamp(24px, 3vw, 44px);
}
.cform-title {
  font-size: var(--text-xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-snug);
  margin-bottom: var(--space-lg);
}

.cform { display: grid; gap: var(--space-lg); }
.cform__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md); }
@media (max-width: 520px) { .cform__row { grid-template-columns: minmax(0, 1fr); } }

/* ---- Pole ---- */
.field { display: grid; gap: 6px; min-width: 0; }
.field__label {
  font-size: var(--text-sm); font-weight: 600; color: var(--ink-2);
}
.field__opt { font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 500; color: var(--slate); letter-spacing: 0.02em; }
.field__req { color: var(--signal); font-weight: 700; }

.field input,
.field select,
.field textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--ink);
  background: var(--mist);
  border: var(--rule-hair) solid var(--hairline-strong);
  border-radius: var(--radius-md);
  padding: 0.72em 0.9em;
  transition: border-color var(--dur-2) var(--ease-out),
              box-shadow var(--dur-2) var(--ease-out),
              background-color var(--dur-2) var(--ease-out);
}
.field textarea { resize: vertical; min-height: 7.5em; line-height: var(--leading-body); }
.field select {
  appearance: none; -webkit-appearance: none; cursor: pointer;
  padding-right: 2.6em;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' stroke='%235b6573' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1em center;
}
.field select:invalid { color: var(--slate-2); }   /* placeholder „— wybierz —" wygląda na wyszarzony */
.field input::placeholder, .field textarea::placeholder { color: var(--slate-2); }

.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--slate); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--signal);
  box-shadow: 0 0 0 3px var(--signal-wash);
  background: var(--paper-raised);
}
.field input:disabled, .field select:disabled, .field textarea:disabled { opacity: 0.6; cursor: not-allowed; }

/* błąd pola (akcent danger) */
.field__err { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--danger); }
.field[data-error] input,
.field[data-error] select,
.field[data-error] textarea {
  border-color: var(--danger);
  box-shadow: 0 0 0 3px var(--danger-wash);
}

/* ---- Zgoda RODO ---- */
.consent { display: grid; grid-template-columns: auto 1fr; gap: var(--space-sm); align-items: start; }
.consent input {
  width: 20px; height: 20px; margin: 2px 0 0; flex: none; cursor: pointer;
  accent-color: var(--signal);
}
.consent input:focus-visible { outline: var(--rule-bold) solid var(--signal); outline-offset: 3px; }
.consent label { font-size: var(--text-sm); color: var(--ink-soft); line-height: 1.55; }
.consent a { color: var(--signal-deep); text-decoration: underline; text-underline-offset: 2px; }
.consent a:hover { color: var(--signal); }
.consent[data-error] label { color: var(--danger); }
.consent .field__err { display: block; margin-top: var(--space-2xs); }

/* ---- Submit + status ---- */
.cform__foot { display: grid; gap: var(--space-sm); margin-top: var(--space-xs); }
.cform__submit { width: 100%; justify-content: center; padding: 1em 1.4em; font-size: var(--text-base); }
.cform__submit:disabled { opacity: 0.65; cursor: progress; transform: none; box-shadow: none; }
.cform[data-state="loading"] { opacity: 0.92; }
.cform__msg { font-family: var(--font-mono); font-size: var(--text-xs); text-align: center; min-height: 1.2em; color: var(--slate); }
.cform__msg[data-kind="error"] { color: var(--danger); }
.cform__note { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--slate); text-align: center; }

/* ---- Sukces: formularz znika, pokazuje się potwierdzenie ---- */
.cform[data-state="success"] { display: none; }
.cform-done { display: none; }
.cform-done.is-shown {
  display: grid; gap: var(--space-md); justify-items: center; text-align: center;
  padding-block: var(--space-2xl);
}
.cform-done__mark {
  width: 56px; height: 56px; border-radius: var(--radius-pill);
  background: var(--signal-wash); color: var(--signal-deep);
  border: var(--rule-hair) solid var(--signal-line);
  display: inline-flex; align-items: center; justify-content: center;
}
.cform-done__mark svg { width: 24px; height: 24px; }
.cform-done h3 { font-size: var(--text-2xl); line-height: var(--leading-tight); letter-spacing: var(--tracking-snug); }
.cform-done p { color: var(--ink-soft); max-width: 40ch; }

/* ---- Karta danych (prawa kolumna) ---- */
.info { display: grid; gap: var(--space-lg); align-content: start; }
.info .proces__offer { margin-top: 0; }   /* reset marginesu z wersji ze strony głównej */

.info-card {
  background: var(--paper-raised);
  border: var(--rule-hair) solid var(--hairline);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-1);
  padding: clamp(20px, 2.4vw, 32px);
  display: grid;
}
.info-card__title {
  font-family: var(--font-mono); font-size: var(--text-xs);
  letter-spacing: var(--tracking-mono); text-transform: uppercase;
  color: var(--slate); margin-bottom: var(--space-md);
}
.info-row { display: grid; gap: 3px; padding-block: var(--space-sm); border-top: var(--rule-hair) solid var(--hairline); }
.info-row:first-of-type { border-top: 0; padding-top: 0; }
.info-row__k { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.14em; text-transform: uppercase; color: var(--slate); }
.info-row__v { font-size: var(--text-base); color: var(--ink); font-weight: 500; line-height: 1.4; }
.info-row__v a { transition: color var(--dur-2) var(--ease-out); }
.info-row__v a:hover { color: var(--signal-deep); }

/* osoba kontaktowa */
.person {
  display: flex; align-items: center; gap: var(--space-md);
  margin-top: var(--space-md); padding-top: var(--space-md);
  border-top: var(--rule-bold) solid var(--signal-line);
}
.person__avatar {
  width: 48px; height: 48px; flex: none; border-radius: var(--radius-pill);
  background: var(--signal-wash); color: var(--signal-deep);
  border: var(--rule-hair) solid var(--signal-line);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 600; font-size: var(--text-lg);
}
.person__meta { display: grid; gap: 2px; min-width: 0; }
.person__name { font-family: var(--font-display); font-weight: 600; color: var(--ink); font-size: var(--text-base); }
.person__role { font-size: var(--text-sm); color: var(--ink-soft); }

/* ---- Telefon / układ złożony: treść widoczna od razu (bez reveal-on-scroll) ----
   Na wąskim ekranie formularz, callout i karta danych lądują pod nagłówkiem,
   tuż pod zgięciem - przez rootMargin observera pokazywały się dopiero po
   drobnym ruchu palcem. Tu wchodzą od razu; na desktopie reveal zostaje. */
@media (max-width: 860px) {
  .reveal { opacity: 1; transform: none; }
}