/* ===========================================================================
   CE-29 · Lista usług z podglądem (service list with preview)
   Root:     section.ce-svc
   Design:   Figma crear-v2.0, frame 452:457 (24.09.2026), a 1440 px frame:
             eyebrow „• CORE USŁUGI”, 64 px to a list of six services in
             80 px Expanded Regular (line 1.12, −3.2 px, 23 px apart), the
             current one black (#fff with mix-blend-mode exclusion – black on
             the white page, inverted where it crosses the picture), the rest
             #E9E9E9; a 259 × 296 picture over the end of the current
             service; a 304 px note in 16 px on the right (75.6% in, #F2F2F2
             with mix-blend-mode difference – dark on white)
   Parts:    __eyebrow (h2, with .lf-eyebrow), __body (the positioning box),
             __media (the picture box, moved by the script) with __img (one
             per service; .is-current on top, .is-prev under it), __list,
             __item, __link (the service – a link to its row on uslugi.html;
             data-img = index of its picture, aria-describedby = its note),
             __num (the index „(01)” before the name, aria-hidden – 01.10,
             as in the process list of O nas, CE-38: 17 px TT Hoves Pro
             Medium, 32 px wide, 16 px down, 23 px before the name; it takes
             the link's colour, so it is dark with the current service),
             __name (the text, revealed with data-reveal-text "rise"),
             __aside (the note box, data-appear) with __note (one per
             service, all stacked in one grid cell)
   States:   .is-current on __link, __img and __note; .is-ready on the root
             once the picture box has its first position
   Mechanics (ce/CE-29-service-list.js; Mateusz's comments 27.09):
             only the name itself (the link, as wide as its index and text,
             as tall as its line) is the hover and click area – not the whole strip
             across the window (the rule of 24.09 is reversed); between the
             names the last one hovered stays current. Without the mouse
             over the section – scrolling, touch screens – the service
             nearest the middle of the window is current. The picture trails
             the cursor with a lag, its left edge 20 px right of the cursor,
             centred on it vertically; at rest it stands in the middle of the
             list's height, overlapping the end of the current service by
             66% of its width. It never leaves the section: the script
             presses it against the section's edges (clamp, its size
             included), overflow: clip below is only a safety net. A new
             service opens its picture from the bottom over the old one
             (clip-path 700 ms, scale 1.08 → 1) and changes the note (the old
             one fades out in 250 ms, the new one fades in and rises 8 px
             from 200 ms). Scroll-in: the eyebrow codes in, the names rise out
             of their masks one after another (site.js kit), the note fades in.
   Layout:   below 900 px the picture is hidden, the note (the current
             service's) stands under the list and the names shrink with the
             window.
   Base:     index.html#uslugi-core · registry: ce-registry.js → CE-29
   =========================================================================== */

.ce-svc {
  --svc-size: clamp(2rem, 5.556vw, 80px);            /* 80 px at 1440 */
  padding-block: clamp(72px, 7.57vw, 109px) clamp(96px, 13.9vw, 200px);
  overflow: clip;                /* safety net – the script keeps the picture inside */
}

.ce-svc__eyebrow { margin-bottom: clamp(40px, 4.44vw, 64px); }

.ce-svc__body { position: relative; }

/* ---- list --------------------------------------------------------------------- */
.ce-svc__list {
  display: flex;
  flex-direction: column;
  align-items: flex-start;       /* the items as wide as their names */
  gap: calc(var(--svc-size) * .2875);                 /* 23 px at 80 px */
}
/* The link is the hover / click area: as wide as its index and text and as
   tall as its line (1.12 em – 0.23 em above the capitals, 0.2 em under the
   baseline: the small vertical margin), nothing across the window. */
.ce-svc__link {
  position: relative;            /* painted above the picture, no z-index: the */
  display: inline-flex;          /* blend must see the page and the picture   */
  align-items: flex-start;
  gap: calc(var(--svc-size) * .2875);                 /* 23 px at 80 px */
  vertical-align: top;
  font-family: var(--font-heading);
  font-size: var(--svc-size);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -.04em;        /* −3.2 px at 80 px */
  color: #E9E9E9;
  text-decoration: none;
  transition: color .45s var(--ease-out-quart);
}
.ce-svc__link.is-current {
  color: #fff;
  mix-blend-mode: exclusion;
}
.ce-svc__link:focus-visible { outline: 2px solid var(--ui-ink); outline-offset: 4px; }
/* the index „(01)” – the one of CE-38 (O nas, Figma 608:1188); inside the
   link, so it changes colour (and blends) with the name */
.ce-svc__num {
  flex: none;
  width: 2em;                                        /* 32 px at 16–17 px */
  padding-top: calc(var(--svc-size) * .2);           /* 16 px at 80 px */
  font-family: var(--font-body);
  font-size: clamp(.875rem, 1.18vw, 17px);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -.01em;
  white-space: nowrap;
}
.ce-svc__name { min-width: 0; }

/* ---- picture ------------------------------------------------------------------ */
/* Positioned by the script (--svc-x / --svc-y, px from the top-left of
   __body, eased every frame): at rest in the middle of the list's height,
   overlapping the end of the current service by 66% of its width (as
   „Strony i e-commerce” in the design); under the mouse it trails the
   cursor, left edge 20 px right of it; always inside the section. */
.ce-svc__media {
  position: absolute;
  top: 0;
  left: 0;
  width: 18.6%;                  /* 259 / 1392 */
  aspect-ratio: 259 / 296;
  overflow: hidden;
  opacity: 0;
  transform: translate3d(var(--svc-x, 0px), var(--svc-y, 0px), 0);
  transition: opacity .6s var(--ease-out-quart);
  pointer-events: none;
  will-change: transform;
}
.ce-svc.is-ready .ce-svc__media { opacity: 1; }
.ce-svc__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  visibility: hidden;
  clip-path: inset(100% 0 0 0);
  transform: scale(1.08);
}
.ce-svc__img.is-prev { visibility: visible; clip-path: inset(0); transform: none; }
.ce-svc__img.is-current {
  z-index: 1;
  visibility: visible;
  clip-path: inset(0);
  transform: none;
  transition: clip-path .7s var(--ease-out-expo), transform 1s var(--ease-out-expo);
}

/* ---- note ----------------------------------------------------------------------- */
/* The top of the note's capitals on the top of the first service's
   capitals (Mateusz, 27.09 – before: 123 px lower, as in Figma). Measured
   27.09 (headless, canvas metrics of the loaded fonts): both TT Hoves Pro
   cuts have ascent 1, descent .26 and capitals as tall as the ascenders
   (l, k, d), .70 em – so the capitals and the tall letters start .23 em
   below the top of a name's line (line 1.12) and .32 em (5.1 px) below
   the top of the note's line (16 px, line 1.3). The box goes up by the
   difference: 13.3 px at 1440, 11.2 px at 1280. */
.ce-svc__aside {
  --svc-cap-name: .23;                               /* × --svc-size */
  --svc-cap-note: .32rem;
  position: absolute;
  top: calc(var(--svc-size) * var(--svc-cap-name) - var(--svc-cap-note));
  left: 75.6%;                                        /* 1053 / 1392 */
  width: min(304px, 24.4%);
  display: grid;                 /* every note in the same cell: the box is  */
  font-size: 1rem;               /* as tall as the longest, nothing jumps    */
  line-height: 1.3;
  color: #F2F2F2;
  mix-blend-mode: difference;
}
.ce-svc__note {
  grid-area: 1 / 1;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity .25s var(--ease-out-quart), transform 0s linear .25s, visibility 0s linear .25s;
}
.ce-svc__note.is-current {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity .45s var(--ease-out-quart) .2s, transform .6s var(--ease-out-quart) .2s, visibility 0s;
}

/* ---- narrow ----------------------------------------------------------------------- */
/* No picture; the note of the current service (the one nearest the middle
   of the window, or tapped / focused) under the list – on a phone the whole
   list and its note fit on one screen, so the note changes as the list
   scrolls past the middle. */
@media (max-width: 900px) {
  .ce-svc__media { display: none; }
  .ce-svc__link { gap: 12px; }
  .ce-svc__num { width: 2.2em; padding-top: calc(var(--svc-size) * .18); }
  .ce-svc__aside {
    position: static;
    width: auto;
    max-width: 40ch;
    margin-top: 32px;
    color: var(--ui-text-60);
    mix-blend-mode: normal;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ce-svc__media, .ce-svc__img.is-current, .ce-svc__link,
  .ce-svc__note, .ce-svc__note.is-current { transition: none; }
  .ce-svc__note { transform: none; }
}