/* ====================================================================
   css/inquiry.css — zapytanie jako drukowany kwestionariusz
   (strona główna #kontakt + publiczna /oferta/). Spec:
   docs/superpowers/specs/2026-10-10-oferta-zapytanie-design.md
   Bez kart, ramek, kółek radio i plakietek: numer pytania, cienkie linie,
   opcje jako tekst, wybrana podkreślona kobaltem. Tokeny z editorial.css.
   ==================================================================== */

/* ── komponent .inq ────────────────────────────────────────────────── */
.inq { --inq-err: #b42318; --inq-gutter: 56px; container-type: inline-size; border-top: 1.5px solid var(--ink); }

.inq__q { position: relative; margin: 0; min-width: 0; padding: 26px 0 28px var(--inq-gutter); border: 0; border-bottom: 1px solid var(--line-soft); }
.inq__n { position: absolute; left: 0; top: 33px; font-size: 13px; font-weight: 400; font-variant-numeric: tabular-nums; letter-spacing: .02em; color: var(--muted); }
.inq__label { display: block; margin: 0 0 14px; padding: 0; font-size: 21px; font-weight: 500; line-height: 1.3; letter-spacing: -.015em; color: var(--ink); }
/* legend jako zwykły blok w obszarze paddingu fieldsetu (spójne odstępy z pytaniami 02/05) */
fieldset.inq__q > legend.inq__label { float: left; width: 100%; }
.inq__hint { font-size: 15px; font-weight: 400; letter-spacing: 0; color: var(--muted); }
.inq__help { margin: -8px 0 6px; font-size: 14px; line-height: 1.5; color: var(--muted); }

/* opcje: tekst w wierszu z kropką po opcji; w parach i na wąskim kontenerze pionowo */
.inq__opts { clear: both; display: flex; flex-wrap: wrap; align-items: baseline; margin: 0; padding: 0; list-style: none; }
.inq__opts li { display: inline-flex; align-items: baseline; }
.inq__opts li:not(:last-child)::after { content: "·"; padding: 0 12px; font-size: 17px; color: var(--line-2); }
/* Radio ukryte wizualnie; stan pokazuje sąsiedni <span> (selektor rodzeństwa działa też w starszych przeglądarkach). */
.inq__opt { position: relative; display: inline-flex; align-items: center; min-height: 44px; cursor: pointer; font-size: 17px; line-height: 1.4; color: var(--ink); }
.inq__opt input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.inq__opt span {
  text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 1px; text-underline-offset: 7px;
  transition: color .15s, text-decoration-color .15s;
}
.inq__opt:hover span { text-decoration-color: var(--ink); }
.inq__opt input:checked + span { color: var(--accent-text); text-decoration-color: var(--accent); text-decoration-thickness: 2px; }
.inq__opt input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 6px; }
.inq__pair .inq__opts { flex-direction: column; align-items: flex-start; }
.inq__pair .inq__opts li:not(:last-child)::after { content: none; }

/* pola tekstowe: tylko dolna linia */
.inq__field {
  width: 100%; padding: 8px 0 10px; border: 0; border-bottom: 1px solid var(--line-2); border-radius: 0; background: none;
  font: inherit; font-size: 17px; line-height: 1.5; color: var(--ink); transition: border-color .15s;
}
.inq__field::placeholder { color: #9a9ea8; opacity: 1; }
.inq__field:focus { border-bottom-color: var(--ink); }
.inq__field[aria-invalid="true"] { border-bottom-color: var(--inq-err); }
textarea.inq__field { min-height: 92px; resize: vertical; }
.inq__err { margin: 8px 0 0; font-size: 13px; line-height: 1.45; color: var(--inq-err); }

/* dane kontaktowe i stopka formularza */
.inq__contact { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; padding: 30px 0 8px var(--inq-gutter); }
.inq__small { display: block; margin-bottom: 2px; font-size: 13px; font-weight: 500; color: var(--ink); }
.inq__small .inq__hint { font-size: 13px; }
.inq__hp { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.inq__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; padding: 36px 0 0 var(--inq-gutter); }
.inq__rodo { max-width: 46ch; margin: 0; font-size: 13px; line-height: 1.55; color: var(--muted); }
.inq__send {
  display: inline-flex; align-items: center; gap: 14px; padding: 18px 26px; border: 0; border-radius: 2px;
  background: var(--ink); color: #fff; font: inherit; font-size: 15px; font-weight: 500; cursor: pointer; transition: background .15s;
}
.inq__send:hover { background: #000; }
.inq__send[disabled] { cursor: progress; background: #3a3d44; }
.inq__arrow { transition: transform .15s; }
.inq__send:hover .inq__arrow { transform: translateX(3px); }
.inq__status { margin: 18px 0 0 var(--inq-gutter); font-size: 14px; line-height: 1.55; }
.inq__status:empty { margin-top: 0; }
.inq__status[data-state="err"] { color: var(--inq-err); }
.inq__status a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }

@container (min-width: 560px) {
  .inq__pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 40px; border-bottom: 1px solid var(--line-soft); }
  .inq__pair > .inq__q { border-bottom: 0; }
}
@container (min-width: 720px) {
  .inq__contact { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
}
@container (max-width: 559px) {
  /* @container styluje tylko potomków .inq, więc zmienną ustawiamy na nich. */
  .inq__q, .inq__contact, .inq__foot, .inq__status { --inq-gutter: 38px; }
  .inq__label { font-size: 19px; }
  .inq__opts { flex-direction: column; align-items: flex-start; }
  .inq__opts li:not(:last-child)::after { content: none; }
  .inq__foot { flex-direction: column; align-items: stretch; }
  .inq__send { justify-content: space-between; }
}

/* ── publiczna /oferta/ (bez tokenu) ───────────────────────────────── */
.offer-resolving [data-offer-public] { display: none !important; }
.offer-public { max-width: var(--maxw); margin: 0 auto; padding: calc(var(--header-h) + 64px) 0 120px; }
.offer-public__hero { max-width: 900px; margin-bottom: clamp(56px, 7vw, 104px); }
.offer-public__h { margin: 0 0 24px; font-size: clamp(40px, 5.6vw, 80px); font-weight: 450; line-height: 1.02; letter-spacing: -.055em; color: var(--ink); }
.offer-public__lead { max-width: 54ch; margin: 0; font-size: 17px; line-height: 1.6; color: var(--muted); }
.offer-public__expired { max-width: 60ch; margin: 22px 0 0; padding-left: 14px; border-left: 2px solid var(--accent); font-size: 15px; line-height: 1.55; color: var(--ink); }
.offer-public__layout {
  display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(40px, 6vw, 120px); align-items: start;
  grid-template-areas: "what form" "next form";
}
.offer-public__what { grid-area: what; }
.offer-public__form { grid-area: form; min-width: 0; }
.offer-public__next { grid-area: next; align-self: end; padding-bottom: 6px; }
.offer-public__aside-h { margin: 0 0 14px; font-size: 13px; font-weight: 500; letter-spacing: .01em; color: var(--muted); }
.offer-public__list { margin: 0; padding: 0; list-style: none; }
.offer-public__list li { padding: 12px 0; border-top: 1px solid var(--line-soft); font-size: 16px; line-height: 1.55; color: var(--ink); }
.offer-public__list li:last-child { border-bottom: 1px solid var(--line-soft); }
.offer-public__list a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--line-2); text-decoration-thickness: 1px; text-underline-offset: 4px; }
.offer-public__list a:hover { color: var(--accent-text); text-decoration-color: var(--accent); }
.offer-public__next-p { max-width: 40ch; margin: 0; font-size: 16px; line-height: 1.65; color: var(--ink); }
.offer-public__sign { display: block; width: 74px; height: 77px; margin-top: 22px; color: var(--ink); }

@media (max-width: 900px) {
  .offer-public__layout { grid-template-columns: minmax(0, 1fr); grid-template-areas: "what" "form" "next"; gap: 56px; }
}
@media (max-width: 560px) {
  .offer-public { padding-top: calc(var(--header-h) + 32px); padding-bottom: 88px; }
}

@media (prefers-reduced-motion: reduce) {
  .inq__opt span, .inq__field, .inq__send, .inq__arrow { transition: none; }
  .inq__send:hover .inq__arrow { transform: none; }
}