/* Katalog — podglad stron A4 z paskiem postepu */
.ax-cat {
  position: relative;
  padding: var(--ax-sec-pad-m) 0;
  background: var(--ax-paper);
  color: var(--ax-navy);
  overflow: hidden;
}

.ax-cat__inner {
  position: relative;
  z-index: 1;
  max-width: var(--ax-maxw);
  margin: 0 auto;
  padding: 0 var(--ax-gutter);
}

.ax-cat__watermark {
  position: absolute;
  /* Sekcja ma overflow: hidden, a line-height poniżej 1 wypuszcza rysunek cyfr
     nad pudełko wiersza — stąd zapas u góry, żeby nic się nie ucinało. */
  top: clamp(8px, 0.9vw, 16px);
  right: var(--ax-gutter);
  z-index: 0;
  font-weight: 300;
  font-size: clamp(110px, 15vw, 230px);
  line-height: 0.8;
  letter-spacing: -0.05em;
  color: rgba(53, 59, 102, 0.05);
  pointer-events: none;
  user-select: none;
}

.ax-cat__grid {
  display: grid;
  /* Podgląd katalogu jest tu główną atrakcją, więc dostaje więcej miejsca niż tekst. */
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  gap: clamp(24px, 3.4vw, 68px);
  align-items: center;
}

.ax-cat__eyebrow {
  display: block;
  margin-bottom: var(--ax-label-gap);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ax-steel);
}

.ax-cat__heading {
  margin: 0 0 clamp(16px, 2vw, 26px);
  font-weight: 300;
  font-size: clamp(30px, 4vw, 62px);
  line-height: 1.02;
  letter-spacing: -0.035em;
  text-wrap: pretty;
}

/* Kursywa zawsze od nowej linii — inaczej "strona" zostawała przy prefiksie. */
.ax-cat__heading .ax-heading-italic { display: block; }

.ax-cat__body {
  margin: 0 0 clamp(22px, 2.6vw, 34px);
  max-width: 52ch;
}

.ax-cat__body p {
  margin: 0 0 16px;
  font-size: 16.5px;
  line-height: 1.72;
  color: rgba(53, 59, 102, 0.72);
  text-wrap: pretty;
}

.ax-cat__body p:last-child { margin-bottom: 0; }

.ax-cat__stats {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(20px, 2.8vw, 50px);
  margin-bottom: clamp(22px, 2.6vw, 34px);
}

.ax-cat__stat-num {
  display: block;
  font-weight: 300;
  font-size: clamp(26px, 2.9vw, 44px);
  line-height: 1;
  letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums;
}

.ax-cat__stat-label {
  display: block;
  margin-top: 10px;
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(53, 59, 102, 0.5);
}

.ax-cat__cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.ax-cat__cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  border-radius: 10px;
  padding: 19px 28px;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background 380ms ease, border-color 380ms ease, color 380ms ease;
}

.ax-cat__cta--primary { background: var(--ax-navy); color: var(--ax-paper); }
.ax-cat__cta--ghost { border: 1px solid rgba(53, 59, 102, 0.3); color: var(--ax-navy); }

@media (hover: hover) and (pointer: fine) {
  .ax-cat__cta--primary:hover { background: var(--ax-steel); color: var(--ax-ink); }
  .ax-cat__cta--ghost:hover { background: rgba(53, 59, 102, 0.06); border-color: var(--ax-navy); }
}

/* Scena: strony leżą na sobie, aktywna wychodzi na wierzch. */
.ax-cat__stage {
  position: relative;
  aspect-ratio: 1 / 1.414;
  max-height: min(86svh, 880px);
  margin: 0 auto;
  perspective: 2400px;
}

.ax-cat__page {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  transform: rotateY(-6deg);
  transform-origin: left center;
  border-radius: 6px;
  box-shadow: 0 18px 44px rgba(20, 24, 51, 0.18);
  transition: opacity 560ms ease, transform 720ms cubic-bezier(0.16, 1, 0.3, 1);
}

.ax-cat__page.is-active {
  opacity: 1;
  transform: rotateY(0deg);
  z-index: 2;
}

.ax-cat__stage-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: clamp(14px, 1.6vw, 22px);
}

.ax-cat__page-label {
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(53, 59, 102, 0.5);
}

.ax-cat__count {
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.18em;
  font-variant-numeric: tabular-nums;
  color: rgba(53, 59, 102, 0.5);
}

.ax-cat__nav { display: flex; gap: 9px; }

.ax-cat__btn {
  width: 46px;
  height: 46px;
  border: 1px solid rgba(53, 59, 102, 0.24);
  border-radius: 50%;
  background: none;
  color: var(--ax-navy);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 320ms ease, border-color 320ms ease, color 320ms ease;
}

.ax-cat__btn:disabled { opacity: 0.35; cursor: default; }

@media (hover: hover) and (pointer: fine) {
  .ax-cat__btn:not(:disabled):hover {
    background: var(--ax-navy);
    border-color: var(--ax-navy);
    color: var(--ax-paper);
  }
}

.ax-cat__controls {
  display: flex;
  align-items: center;
  gap: clamp(12px, 1.4vw, 20px);
  margin-top: clamp(12px, 1.4vw, 18px);
}

/* Suwak stron: tor z wypełnieniem sterowanym z JS przez --fill. */
.ax-cat__scrub {
  -webkit-appearance: none;
  appearance: none;
  flex: 1 1 auto;
  min-width: 0;
  height: 22px;
  margin: 0;
  background: transparent;
  cursor: pointer;
}

.ax-cat__scrub::-webkit-slider-runnable-track {
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(to right, var(--ax-navy) 0%, var(--ax-navy) var(--fill, 0%), rgba(53, 59, 102, 0.16) var(--fill, 0%), rgba(53, 59, 102, 0.16) 100%);
}

.ax-cat__scrub::-moz-range-track {
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(to right, var(--ax-navy) 0%, var(--ax-navy) var(--fill, 0%), rgba(53, 59, 102, 0.16) var(--fill, 0%), rgba(53, 59, 102, 0.16) 100%);
}

.ax-cat__scrub::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  margin-top: -8px;
  border: 1px solid rgba(53, 59, 102, 0.3);
  border-radius: 50%;
  background: var(--ax-paper);
  box-shadow: 0 2px 8px rgba(20, 24, 51, 0.18);
  transition: transform 200ms ease;
}

.ax-cat__scrub::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border: 1px solid rgba(53, 59, 102, 0.3);
  border-radius: 50%;
  background: var(--ax-paper);
  box-shadow: 0 2px 8px rgba(20, 24, 51, 0.18);
}

.ax-cat__scrub:focus-visible::-webkit-slider-thumb { transform: scale(1.18); }

@media (hover: hover) and (pointer: fine) {
  .ax-cat__scrub:hover::-webkit-slider-thumb { transform: scale(1.12); }
}

@media (max-width: 900px) {
  .ax-cat__grid { grid-template-columns: 1fr; }
  .ax-cat__stage { max-height: min(72svh, 640px); }
  .ax-cat__btn { min-width: 44px; min-height: 44px; }
  .ax-cat__scrub { height: 44px; }

  .ax-cat__cta {
    width: 100%;
    justify-content: center;
    min-height: 44px;
    box-sizing: border-box;
  }

  .ax-cat__watermark { font-size: clamp(90px, 30vw, 160px); }
}

@media (prefers-reduced-motion: reduce) {
  .ax-cat__page { transition: opacity 200ms ease !important; transform: none !important; }
}