/* ===========================================================================
   CE-23 · FAQ
   Root:     section.ce-faq (with-heading) – or a div inside a larger
             section (no-heading, Usługi: under the talk block CE-22)
   Parts:    __head (optional: wraps __title and __meta), __title
             (with-heading: H2, with .lf-h2), __meta (optional: „Aktualizacja:
             …” under the title, the date a <time> __date), __subtitle (no-heading: an optional H3
             inside the root), __list, __item (<details>, may carry an id;
             the first one carries `open`), __q (<summary>, "+" / "–" on the
             right via ::after), __q-text (optional: the question as an H3
             inside __q), __alias (empty old anchor inside __q-text), __a
             (the answer)
   Variants: with-heading (Kontakt, Usługi) · no-heading (no occurrence) ·
             ui (Usługi v6, 30.09: Hi-Fi type, the heading in a sticky
             column on the left, a drawn „+” that folds into „–”, the
             answer opening smoothly where ::details-content exists)
   Mechanics: native details/summary, no JS (on Usługi ce/CE-49-service-
             tabs.js opens a question an in-page link points to).
   Base:     kontakt.html#faq · registry: ce-registry.js → CE-23
   =========================================================================== */

.ce-faq__title { margin-bottom: var(--sp-blk); }

/* no-heading: the H3 over the list. The questions are set in --t-h3 too, so
   the H3 takes a step of its own – 1.35 × the question size, just under
   --t-h2 – and more room below it: title first, then the questions. */
.ce-faq__subtitle {
  margin-bottom: clamp(1.5rem, 2.5vw, 2rem);
  font-family: var(--font-heading);
  font-size: calc(var(--t-h3) * 1.35);
  line-height: 1.2;
  letter-spacing: var(--track-h2);
  font-weight: 500;
  text-wrap: balance;
}

.ce-faq__list { border-top: 1px solid var(--line); }

.ce-faq__item { border-bottom: 1px solid var(--line); }

.ce-faq__q {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: 1.4rem;
  font-family: var(--font-heading);
  font-size: var(--t-h3);
  line-height: 1.3;
  letter-spacing: var(--track-h3);
  font-weight: 500;
  text-wrap: balance;
  list-style: none;
  cursor: pointer;
}
.ce-faq__q::-webkit-details-marker { display: none; }
.ce-faq__q::marker { content: ""; }
.ce-faq__q:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .15em; }
.ce-faq__q:focus-visible { outline-offset: 4px; }

/* Text chevron; the alt text after "/" keeps screen readers quiet. */
.ce-faq__q::after {
  content: "+";
  content: "+" / "";
  flex: none;
  width: 1em;
  text-align: center;
  font-weight: 400;
  color: var(--ink-2);
}
.ce-faq__item[open] > .ce-faq__q::after {
  content: "\2013";
  content: "\2013" / "";
}

.ce-faq__a {
  padding-bottom: 1.5rem;
  max-width: 66ch;
  font-size: .9375rem;
  color: var(--ink-2);
}
.ce-faq__a > * + * { margin-top: .75rem; }

/* ---- variants ------------------------------------------------------------ */
/* with-heading: a standalone section, the H2 above the list. */
.ce-faq[data-ce-variant~="with-heading"] .ce-faq__title { max-width: 24ch; }

/* no-heading: part of a larger section – set apart from the block above
   (padding, not margin: the root's top edge then marks where the FAQ starts). */
.ce-faq[data-ce-variant~="no-heading"] { padding-top: clamp(2.5rem, 5vw, 3.5rem); }

/* ui (Usługi v6, 30.09.2026 – tresci/uslugi-v6-przekaz.md §04): the FAQ in
   the Hi-Fi standard of the page. From 901 px a 4 : 8 grid – on the left
   __head (H2 40 px Expanded Regular −.04em, #1D1D1E, lit letter by letter
   – kit „chars”; under it __meta „Aktualizacja: …” 14 px #0A2526 at 65%,
   the date a <time> __date – .is-placeholder while it is „[miesiąc rok]”),
   sticky under the header; on the right the list with #EBEBEB lines. The
   question: an H3 in <summary>, 20 px Expanded Regular (−.02em, line
   1.35), 24 px above and below; the „+” is drawn (two 1.2 px bars) and its
   upright bar folds away when the question opens (350 ms easeOutQuart).
   The answer 18 px TT Hoves Pro (line 1.55, #0A2526), links kit lf-link.
   Browsers with ::details-content open and close the answer smoothly
   (height, 350 ms); the rest at once. Reduced motion: no movement. */
.ce-faq__alias { display: inline; }
.ce-faq[data-ce-variant~="ui"] { padding-block: clamp(72px, 8.33vw, 120px); }
.ce-faq[data-ce-variant~="ui"] > .lf-wrap {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: 32px clamp(40px, 5.56vw, 80px);
  align-items: start;
}
.ce-faq[data-ce-variant~="ui"] .ce-faq__head {
  position: sticky;
  top: calc(var(--header-h) + 24px);
}
.ce-faq[data-ce-variant~="ui"] .ce-faq__title {
  max-width: 10em;
  margin: 0;
  font-size: clamp(1.75rem, 2.778vw, 40px);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -.04em;
  color: var(--ui-ink);
}
.ce-faq__meta {
  margin-top: 16px;
  font-size: .875rem;
  line-height: 1.4;
  color: var(--ui-text-65);
}
/* the date: <time datetime> = dateModified of the page's JSON-LD (30.09);
   until the date is set it is a placeholder – dashed underline, so
   „[miesiąc rok]” reads as a gap to fill, not as an error */
.ce-faq__date.is-placeholder {
  padding-bottom: 1px;
  border-bottom: 1px dashed var(--ui-stroke);
}
.ce-faq[data-ce-variant~="ui"] .ce-faq__list { border-top-color: #ebebeb; }
.ce-faq[data-ce-variant~="ui"] .ce-faq__item { border-bottom-color: #ebebeb; }
.ce-faq[data-ce-variant~="ui"] .ce-faq__q {
  align-items: flex-start;
  padding-block: 24px;
  font-size: clamp(1.0625rem, 1.389vw, 20px);
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: -.02em;
  color: var(--ui-ink);
}
.ce-faq[data-ce-variant~="ui"] .ce-faq__q:hover { text-decoration: none; }
.ce-faq[data-ce-variant~="ui"] .ce-faq__q-text {
  font: inherit;
  letter-spacing: inherit;
  transition: opacity .2s ease;
}
.ce-faq[data-ce-variant~="ui"] .ce-faq__q:hover .ce-faq__q-text { opacity: .72; }
.ce-faq[data-ce-variant~="ui"] .ce-faq__q::after {
  content: "";
  content: "" / "";
  flex: none;
  width: 14px;
  height: 14px;
  margin-top: .3em;
  color: var(--ui-ink);
  background:
    linear-gradient(currentColor, currentColor) center / 14px 1.2px no-repeat,
    linear-gradient(currentColor, currentColor) center / 1.2px 14px no-repeat;
  transition: background-size .35s var(--ease-out-quart);
}
.ce-faq[data-ce-variant~="ui"] .ce-faq__item[open] > .ce-faq__q::after {
  content: "";
  content: "" / "";
  background-size: 14px 1.2px, 1.2px 0;
}
.ce-faq[data-ce-variant~="ui"] .ce-faq__a {
  max-width: 40em;
  padding-bottom: 28px;
  font-size: clamp(1rem, 1.25vw, 18px);
  line-height: 1.55;
  letter-spacing: -.01em;
  color: var(--ui-text);
}
.ce-faq[data-ce-variant~="ui"] .ce-faq__a .lf-link { color: var(--ui-ink); }
@supports selector(::details-content) {
  @media (prefers-reduced-motion: no-preference) {
    .ce-faq[data-ce-variant~="ui"] { interpolate-size: allow-keywords; }
    .ce-faq[data-ce-variant~="ui"] .ce-faq__item::details-content {
      height: 0;
      overflow: clip;
      transition: height .35s var(--ease-out-quart), content-visibility .35s allow-discrete;
    }
    .ce-faq[data-ce-variant~="ui"] .ce-faq__item[open]::details-content { height: auto; }
  }
}
@media (max-width: 900px) {
  .ce-faq[data-ce-variant~="ui"] > .lf-wrap { grid-template-columns: minmax(0, 1fr); }
  .ce-faq[data-ce-variant~="ui"] .ce-faq__head { position: static; }
}
@media (prefers-reduced-motion: reduce) {
  .ce-faq[data-ce-variant~="ui"] .ce-faq__q::after,
  .ce-faq[data-ce-variant~="ui"] .ce-faq__q-text { transition: none; }
}