/* =====================================================================
   compare.html — comparison matrix page
   ===================================================================== */

/* .page-hero's own padding shorthand (top/bottom only) zeroes out the left/right
   padding .wrap would otherwise give this <header class="page-hero wrap">, leaving
   the eyebrow/title/lede flush against the viewport edges. Restore the gutter. */
.page-hero.wrap { padding-inline: var(--gutter); }

/* ---- Summary strip (4 highlight cards) ---- */
.cmp-cards .card__body { display: grid; gap: 12px; }

/* ---- Section jump pills ---- */
.cmp-jump {
  position: sticky;
  top: 78px;
  z-index: 25;
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 10px 2px 18px;
  margin-bottom: 4px;
  background: var(--bg);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.cmp-jump::-webkit-scrollbar { display: none; }
.cmp-jump a {
  flex: 0 0 auto;
  padding: 9px 16px;
  border-radius: var(--r-pill);
  border: 1px solid var(--hairline);
  background: var(--surface);
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-3);
  white-space: nowrap;
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.cmp-jump a:hover { border-color: var(--ink-4); color: var(--ink); }
.cmp-jump a.is-active { background: var(--ink); color: #fff; border-color: var(--ink); }

/* ---- Matrix table refinements ---- */
/* Any ancestor with an overflow other than 'visible' (the core .section rule uses
   overflow-x:clip; the core .cmp table clips its own rounded corners with
   overflow:hidden; .cmp-scroll sets overflow-x:auto) becomes the nearest "scroll
   container" for position:sticky — so thead ends up sticking to that ancestor's own
   box instead of the real page, which shows up as the header row jumping down and
   overlapping the first data rows. Strip all of them for this specific section so
   thead resolves against the true page scroll. */
#matrix { overflow-x: visible; }
.cmp-matrix-scroll { position: relative; overflow: visible; }
.cmp-matrix-scroll .cmp { overflow: visible; }
.cmp thead th {
  position: sticky;
  top: 130px;
  z-index: 6;
}
.cmp tr.cmp__section th {
  background: var(--surface-2);
  padding: 11px 20px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-4);
  font-weight: 600;
  text-align: left;
  border-top: 1px solid var(--hairline);
  scroll-margin-top: 178px;
}
.cmp small { line-height: 1.35; }

/* Text-only value cells: colour the copy itself when there's no mark icon */
.cmp td.yes:not(:has(.mark)) { color: #147a55; font-weight: 550; }
.cmp td.no:not(:has(.mark)) { color: #b33a52; }
.cmp td.part:not(:has(.mark)) { color: #915f0a; }
.cmp td.yes .mark + small,
.cmp td.no .mark + small,
.cmp td.part .mark + small { display: block; margin-top: 6px; }

@media (max-width: 760px) {
  .cmp-jump { top: 66px; }
  /* Re-enable horizontal scroll for the narrow viewport. This turns the wrapper back
     into its own scroll container, which would break thead's top-stickiness (see note
     above) — so on mobile we drop the vertical stick entirely and let the table scroll
     horizontally as a plain block. (A sticky left column was tried here too, but
     Chrome mis-paints position:sticky table cells one row off inside a scrolling
     ancestor — not worth the visual corruption for a "nice to have".) */
  .cmp-matrix-scroll { overflow-x: auto; }
  .cmp thead th, .cmp th:first-child, .cmp td:first-child { position: static; }
  .cmp tr.cmp__section th { scroll-margin-top: 70px; }
}

/* ---- Disclosure / honesty note ---- */
.cmp-note__head { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.cmp-note__head h3 { font-size: 19px; font-weight: 600; letter-spacing: -0.02em; margin: 0; }
.cmp-note p { font-size: 15px; line-height: 1.65; color: var(--ink-3); margin-bottom: 14px; }
.cmp-note p:last-child { margin-bottom: 0; }

@media (max-width: 900px) {
  .cmp-jump { top: 60px; }
}

/* Naglowek koncowego CTA ma display--xl (48px na mobile), a dlugie zlozenia
   niemieckie i rosyjskie ("Wartungs-Suite", "функциональный") nie mieszcza sie
   w 330px kolumnie — dzielenie wyrazow zamiast wychodzenia za viewport. */
.cta-final .display { hyphens: auto; overflow-wrap: break-word; }