/* ===========================================================================
   CE-12 · Kolumny liczb (number columns)
   Root:     section.ce-numbers
   Parts:    __title (optional H2, with .lf-h2), __grid (ul), __item (li),
             __big (the figure), __label (short title in small caps –
             <h3> under an H2, <p> when the section has no H2), __text
   Variants: three (O nas: three columns, no heading) · dark-index (O nas,
             26.09: on #1D1D1E, __index „(01)” over each column, a thin
             vertical rule on the left, large type; 27.09: rolling figures
             [data-reel] and coded indexes [data-code] from the kit)
   Layout:   4 columns ≥ 900 px → 2 columns ≥ 640 px → 1 column
             (three: 3 columns ≥ 900 px, 1 column below)
   Base:     index.html#dlaczego · registry: ce-registry.js → CE-12
   =========================================================================== */

.ce-numbers__title { margin-bottom: var(--sp-blk); max-width: 18ch; }

.ce-numbers__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2rem, 4vw, 4rem) clamp(1.5rem, 3vw, 3rem);
}

.ce-numbers__big {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 3.4vw, 2.75rem);
  line-height: 1;
  letter-spacing: var(--track-hero);
  font-weight: 500;
  color: var(--ink);
}

/* An <h3> on Home, a <p> on O nas – a small-caps label either way, so the
   text font, not the heading one. */
.ce-numbers__label {
  margin-top: .6rem;
  font-family: var(--font-body);
  font-size: var(--t-sm);
  line-height: 1.4;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--ink-3);
}

.ce-numbers__text {
  margin-top: .9rem;
  max-width: 42ch;
  font-size: .9375rem;
  color: var(--ink-2);
}

@media (min-width: 640px) {
  .ce-numbers__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
  .ce-numbers__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---- variants ------------------------------------------------------------ */
/* three: three columns; one column until there is room for all three. */
@media (min-width: 640px) {
  .ce-numbers[data-ce-variant~="three"] .ce-numbers__grid { grid-template-columns: minmax(0, 1fr); }
}
@media (min-width: 900px) {
  .ce-numbers[data-ce-variant~="three"] .ce-numbers__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* dark-index (O nas, 26.09.2026 – Figma crear-v2.0, frame 608:1127, node
   608:1160): the bottom of the dark block #1D1D1E opened by CE-15
   dark-statement. Three columns 381 / 400 / 400 px, 96 px apart, each with
   a 1 px rule #363636 on its left (416 px tall) and the content 40 px from
   it: __index „(01)” (17 px TT Hoves Pro Medium, white at .5), 80 px, the
   figure 100 px Expanded Regular (line 1.05, −4 px), 8 px, the label 28 px
   Expanded Regular (−1.12 px), 24 px, the text 18 px (line 1.38, white at
   .6). 80 px to the bottom of the block. 1:1 at 1440 px, proportionally
   below; ≤ 900 px one column. Scroll-in: each column fades in (data-appear,
   120 ms apart) while its rule grows from the top; since 27.09 (Mateusz:
   „dodaj ciekawe animacje odliczania do tych dużych liczb”, „te numery z
   animacją jak kickery”) the figure rolls in on the kit's combination-lock
   wheels (data-reel, site.js §10 – as CE-35 on Funk; data-reel-delay
   0 / 120 / 240 ms with its column) and the index „(01)” codes itself in
   like the labels (data-code, same delays). Tabular digits come with the
   kit's [data-reel]. */
.ce-numbers[data-ce-variant~="dark-index"] {
  padding-block: clamp(80px, 13.33vw, 192px) clamp(56px, 5.56vw, 80px);
  background: var(--ui-ink);
  color: #fff;
}
.ce-numbers[data-ce-variant~="dark-index"] .ce-numbers__grid { gap: 56px clamp(32px, 6.67vw, 96px); }
@media (min-width: 900px) {
  .ce-numbers[data-ce-variant~="dark-index"] .ce-numbers__grid { grid-template-columns: 381fr 400fr 400fr; }
}
.ce-numbers[data-ce-variant~="dark-index"] .ce-numbers__item {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: min(416px, 28.89vw);
  padding-left: clamp(20px, 2.78vw, 40px);
}
.ce-numbers[data-ce-variant~="dark-index"] .ce-numbers__item::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 1px;
  background: #363636;
  transform-origin: top;
}
.ce-numbers__index {
  display: block;
  font-size: clamp(.9375rem, 1.18vw, 17px);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -.01em;
  color: rgba(255, 255, 255, .5);
}
.ce-numbers[data-ce-variant~="dark-index"] .ce-numbers__big {
  margin-top: clamp(40px, 5.56vw, 80px);
  font-size: clamp(3.5rem, 6.944vw, 100px);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -.04em;                /* −4 px at 100 px */
  color: #fff;
}
.ce-numbers[data-ce-variant~="dark-index"] .ce-numbers__label {
  margin-top: 8px;
  font-family: var(--font-heading);
  font-size: clamp(1.25rem, 1.944vw, 28px);
  font-weight: 400;
  line-height: normal;
  letter-spacing: -.04em;                /* −1.12 px at 28 px */
  text-transform: none;
  color: #fff;
}
.ce-numbers[data-ce-variant~="dark-index"] .ce-numbers__text {
  margin-top: clamp(16px, 1.67vw, 24px);
  max-width: 21em;
  font-size: clamp(1rem, 1.25vw, 18px);
  line-height: 1.38;
  letter-spacing: -.01em;
  color: rgba(255, 255, 255, .6);
}
@media (prefers-reduced-motion: no-preference) {
  .cr-js .ce-numbers[data-ce-variant~="dark-index"] .ce-numbers__item[data-appear]::before {
    transform: scaleY(0);
    transition: transform 1.2s var(--ease-out-expo) var(--appear-delay, 0ms);
  }
  .cr-js .ce-numbers[data-ce-variant~="dark-index"] .ce-numbers__item[data-appear].is-in::before { transform: none; }
}