/* ===========================================================================
   CE-14 · CTA końcowe (closing call to action)
   Root:     section.ce-final-cta (the last section before the footer)
   Parts:    __title (H2, with .lf-h2), __lead, __actions (the button opens
             the drawer: [data-drawer]), __note (the 24-hour promise)
   Variants: no-note (O nas: no note under the button) · centered (O nas,
             26.09: __eyebrow over a large centred H2, the button under
             it; no lead – on Usługi the same from 01.10, v6.1; on 30.09
             Usługi had no eyebrow and a lead between the H2 and the
             button – the lead rule stays) · quiet (Home, 26.09: a pale band, one centred
             26 px statement and a text button; no lead, no note)
   Base:     index.html#cta · registry: ce-registry.js → CE-14
   =========================================================================== */

.ce-final-cta__title { max-width: 20ch; }

.ce-final-cta__lead {
  margin-top: 1.25rem;
  max-width: 50ch;
  font-size: var(--t-lead);
  line-height: 1.6;
  color: var(--ink-2);
}

.ce-final-cta__actions {
  margin-top: var(--sp-blk);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem 1.25rem;
}

.ce-final-cta__note {
  margin-top: 1.25rem;
  font-size: var(--t-sm);
  color: var(--ink-3);
}

/* ---- variants ------------------------------------------------------------ */
/* no-note: the button closes the block, so the block ends a little sooner. */
.ce-final-cta[data-ce-variant~="no-note"] { padding-bottom: clamp(4rem, 8vw, 7rem); }

/* centered (O nas, 26.09.2026 – Figma crear-v2.0, frame 608:1127, node
   608:1410): everything centred in a 969 px column – the eyebrow
   „• ZACZNIJMY TO RAZEM” (#778181 at .7), 48 px, the H2 in 56 px Expanded
   Regular (line 1.05, −2.24 px, #1D1D1E), 48 px, the UI button (lf-btn--ui,
   with the kit's pop entrance and hover). 200 px above, 204 px below. 1:1
   at 1440 px, proportionally below. */
.ce-final-cta[data-ce-variant~="centered"] {
  padding-block: clamp(96px, 13.89vw, 200px) clamp(96px, 14.17vw, 204px);
  text-align: center;
}
.ce-final-cta[data-ce-variant~="centered"] .lf-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(28px, 3.33vw, 48px);
}
.ce-final-cta__eyebrow { justify-content: center; }
.ce-final-cta[data-ce-variant~="centered"] .ce-final-cta__title {
  max-width: 17.3em;                     /* 969 px at 56 px */
  font-size: clamp(1.75rem, 3.889vw, 56px);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -.04em;                /* −2.24 px at 56 px */
  color: var(--ui-ink);
  text-wrap: wrap;                       /* the design's lines, not balanced */
}
.ce-final-cta[data-ce-variant~="centered"] .ce-final-cta__actions { margin-top: 0; justify-content: center; }
/* right after a white FAQ (Usługi, 30.09): the 200 px above read as a hole
   (with the FAQ's 120 px below, 320 px of white) – on O nas the same
   space follows a grey band and reads as a field; here it shrinks to
   the FAQ's own step */
.ce-faq + .ce-final-cta[data-ce-variant~="centered"] { padding-top: clamp(40px, 5.56vw, 80px); }
/* centered with a lead (Usługi v6, 30.09 – no occurrence since 01.10): the
   lead between the H2 and the button – 20 px TT Hoves Pro, line 1.5,
   #0A2526, 640 px */
.ce-final-cta[data-ce-variant~="centered"] .ce-final-cta__lead {
  max-width: 32em;
  margin-top: 0;
  font-size: clamp(1.0625rem, 1.389vw, 20px);
  line-height: 1.5;
  letter-spacing: -.01em;
  color: var(--ui-text);
  text-wrap: pretty;
}

/* quiet (Home, 26.09.2026 – Figma crear-v2.0, frame 612:2602, 1600 × 403):
   a full-width band in #F8F8FA; centred in a 940 px column the statement in
   26 px Expanded Regular (line 1.4, −1.04 px, #1D1D1E), 25 px below it the
   text button „Zapytaj o ofertę” (btn_1: 56 px high, label 16 px Expanded
   Medium #1E1E1E, 16 px to the 9 px arrow at 40% – assets/img/cta/). 125 px
   above and below. 1:1 at 1600 px, proportionally below with floors. The
   statement enters with the kit's „chars” (every main .lf-h2), the button
   rises in with data-appear; its hover is the kit's .lf-roll / .lf-swap. */
.ce-final-cta[data-ce-variant~="quiet"] {
  padding-block: clamp(72px, 7.8125vw, 125px);
  background: #F8F8FA;
  text-align: center;
}
.ce-final-cta[data-ce-variant~="quiet"] .lf-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.ce-final-cta[data-ce-variant~="quiet"] .ce-final-cta__title {
  max-width: 36.16em;                    /* 940 px at 26 px */
  font-size: clamp(1.25rem, 1.625vw, 26px);
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: -.04em;                /* −1.04 px at 26 px */
  color: var(--ui-ink);
  text-wrap: wrap;                       /* the design's lines, not balanced */
}
.ce-final-cta[data-ce-variant~="quiet"] .ce-final-cta__actions {
  margin-top: clamp(16px, 1.5625vw, 25px);
  justify-content: center;
}
.ce-final-cta[data-ce-variant~="quiet"] .ce-final-cta__text-btn {
  display: inline-flex;
  align-items: center;
  gap: 15.5px;                           /* 16 px to the 9 px arrow (its SVG box starts 0.5 px sooner) */
  height: 56px;
  padding: 0;
  border: 0;
  border-radius: 40px;
  background: none;
  color: var(--ui-button-2);
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 500;
  line-height: 20px;
  cursor: pointer;
}
.ce-final-cta[data-ce-variant~="quiet"] .ce-final-cta__text-btn:focus-visible { outline-offset: 4px; }
.ce-final-cta[data-ce-variant~="quiet"] .ce-final-cta__text-btn .lf-btn__icon { width: 10.2803px; height: 10.2803px; }
.ce-final-cta[data-ce-variant~="quiet"] .ce-final-cta__text-btn .lf-swap > img {
  width: 10.2803px;
  height: 10.2803px;
  margin: -5.14px 0 0 -5.14px;
}