/* ===================================================================
   features.html — Features Hub (pillar switcher + panels + compare)
   Page-specific layer on top of style.css. Light canvas only; the single
   .island.is-dark is the closing CTA.
   =================================================================== */

/* ---- page-hero row (btn row under lede) --------------------------- */
.page-hero__row { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 8px; }

/* Kolumna naglowka ma ok. 620px przy 1440px, a .display siega 92px — dlugie
   zlozenia (DE/CS) wychodzily poza kolumne. Dzielenie wyrazow jako zabezpieczenie
   niezalezne od tlumaczenia. */
.page-hero .display { hyphens: auto; overflow-wrap: break-word; }

/* ---- sticky pillar switcher ---------------------------------------- */
.pillar-switcher {
  position: sticky;
  top: 92px;
  z-index: 40;
  margin: 0 0 clamp(40px, 5vw, 64px);
}
.pillar-switcher__track {
  display: inline-flex;
  gap: 4px;
  max-width: 100%;
  padding: 6px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.86);
  border: 1px solid var(--hairline);
  box-shadow: var(--shadow-sm);
  -webkit-backdrop-filter: saturate(160%) blur(18px);
  backdrop-filter: saturate(160%) blur(18px);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.pillar-switcher__track::-webkit-scrollbar { display: none; }
/* Powyzej mobile pasek zawija sie do dwoch rzedow — przy 1440px szesc
   zakladek ma 1367px, wiec poziome przewijanie chowaloby dwie ostatnie
   bez zadnej wskazowki dla uzytkownika. */
@media (min-width: 641px) {
  .pillar-switcher { display: flex; justify-content: center; }
  .pillar-switcher__track {
    flex-wrap: wrap; justify-content: center;
    row-gap: 4px; overflow-x: visible;
  }
}

.feat-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  padding: 10px 16px;
  border: 0;
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--ink-3);
  font-family: var(--font);
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.25s ease, color 0.2s ease;
}
.feat-tab:hover { background: var(--bg-2); color: var(--ink); }
.feat-tab.is-active { background: var(--ink); color: #fff; }
.feat-tab__idx {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.03em;
  opacity: 0.5;
}
.feat-tab.is-active .feat-tab__idx { opacity: 0.65; }
.feat-tab svg { width: 16px; height: 16px; flex: 0 0 auto; }

/* ---- panels ---------------------------------------------------------- */
.feat-panel {
  position: relative;
  padding-bottom: clamp(56px, 7vw, 96px);
  margin-bottom: clamp(56px, 7vw, 96px);
  border-bottom: 1px solid var(--hairline);
}
.feat-panel:last-of-type { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
.feat-panel:not(.is-active) { display: none; }

.pillar-glyph {
  z-index: 0;
}
.pillar-glyph--r { right: -1%; top: -6%; }
.pillar-glyph--l { left: -1%; top: -6%; }

.pillar-body { position: relative; z-index: 1; }

.pillar-body .split { margin-bottom: 0; }

/* Flow divider between pillar hero and the subfeature grid */
.flow--between {
  position: relative;
  display: block;
  height: clamp(56px, 7vw, 100px);
  width: min(100%, 700px);
  margin: 8px auto 4px;
  color: var(--ink-4);
  opacity: 0.7;
}
@media (max-width: 900px) { .flow--between { display: none; } }

/* ---- subfeature grid tag chip spacing ------------------------------- */
.pillar-body .grid--3 .card__body { display: grid; gap: 10px; align-content: start; }
.pillar-body .grid--3 .card__body .chip { justify-self: start; margin-top: 4px; }

/* ---- compare panel ---------------------------------------------------- */
.feat-panel--compare .sh { margin-bottom: clamp(28px, 3.4vw, 44px); }
.cmp-cta { text-align: center; margin-top: 28px; }

/* ---- mobile: no horizontal overflow ---------------------------------- */
@media (max-width: 640px) {
  .pillar-switcher { top: 78px; }
  .feat-tab { padding: 9px 13px; font-size: 12.5px; }
}