/* ===========================================================================
   CE-37 · Inne realizacje – slider (other case studies)
   Root:     section.ce-case-more (in .lf-wrap) – the close of a case study
   Parts:    __in (a hairline on top; head and arrows on the left, the card
             on the right), __head (__title H2, __all – text link to the
             works list), __nav (__btn --prev / --next, each with the
             __arrow of CE-13), __slides (ul, the cards stacked in one grid
             cell), __slide (li: is-current, is-leaving, is-from +
             data-dir), __card (the whole card is one link, laid out as a
             CE-27 card): __media (__img), __name (H3, in a __line mask),
             __sector (in a __line mask), __tags (ul of __tag chips over
             the bottom-right corner of the picture – after the text in
             the markup, as CE-27, so the link reads name → sector → tags)
   Variants: pair (Usługi, 27.09, again from 01.10 – see the end of the
             file): the head across the top (eyebrow, H2, the arrows on the
             right), two cards side by side in a sliding track on #F4F4F4;
             long tags wrap, a placeholder sector (.is-placeholder on
             __sector) has a dashed underline; white chips on a dark glass
             (no difference) and, from 901 px, the scale of the design's
             692 px card (01.10)
   Mechanics: ce/CE-37-case-more.js – the arrows, ←/→ with focus in the
             section and a swipe change the card (no loop: the arrow at an
             end is disabled – no outline, faint arrow). The new card's
             picture is uncovered from the side it comes from (clip-path
             0.9 s, power4.out, the picture settling from 1.15 to 1) over
             the old one; its name and sector rise out of their masks
             (0.8 s, 0.25 / 0.33 s later) and its chips fade in after them
             (0.6 s from 0.45 s), while the old text and chips fade (0.3 s).
             Hidden cards have inert. Entrance: the H2 letter by letter
             (site.js „chars”), the card and the arrows with data-appear.
             Reduced motion: the cards swap at once.
             Scroll drift (26.09, as the "other projects" cards of the
             Halston template): the picture is 120% of its frame and moves
             ±9.6% of the frame while the card passes the window – the
             script of CE-32 runs it (data-parallax="drift" on __media, as
             `transform`; the card change keeps `scale` and clip-path).
             Without that script the picture simply rests.
   Layout:   Figma web-design-2026, node 4065:7370 (1512 px frame): 1 px
             #E9E9E9 line, 56 px to the content; H2 52 px Expanded Regular,
             line 59, −3.12 px, #1D1D1E, 447 px wide; the arrows at the
             bottom of the left column; the card 582 of 1364 px at the
             right edge. ≤ 900 px one column: head, card, arrows.
   Arrows:   (26.09 evening, Mateusz: "the same as the arrows at the client
             quotes carousel on home") the buttons of CE-13, copied from
             ce/CE-13-quotes.css: 60 × 40, radius 4, 8 px apart, "next"
             outlined rgba(18,18,19,.12); hover: outline .24 and a 3% ink
             ground, the arrow (16 px, stroke 1.1, the same SVG) slides
             4 px its way in .35 s ease-out-expo; press 0.94; focus ring
             2 px at 2 px. Disabled (CE-13 loops and has no such state):
             no outline, no hover, the arrow at 30%.
   Card:     (26.09 evening, Mateusz: "picture and caption as on the case
             studies list") the CE-27 card: picture 787 : 680 (was
             582 : 420), chips in its bottom-right corner (outline #C0C0C0,
             difference blend, 13 px uppercase Expanded Medium, 38 px from
             the right, 40 px above the bottom), name 36 px Expanded
             Regular (line 1, −.03em, #1D1D1E) 22 px under the picture,
             sector 17 px #778181 14 px under the name (to its cap height),
             both indented 38 px. Sizes as CE-27 at the same window: 1 px
             of the design = min(1 px, the width of a works-list card /
             787), so the text matches the list card at any width (floors
             24 / 15 / 11 / 14 / 10 px, as CE-27); ≤ 900 px indent 20 and
             chips 20 px above the bottom, as CE-27.
   Base:     realizacje/drutplast/#inne-realizacje · registry: CE-37
   =========================================================================== */

.ce-case-more {
  /* 1 px of the CE-27 design at this window: a works-list card is
     (window − 2 × page margin − 6 px) / 2 wide, 787 px in the design. */
  --cm-u: min(1px, (100vw - 2 * var(--gut) - 6px) / 1574);
  --cm-indent: calc(38 * var(--cm-u));
  --cm-gap-media: max(14px, 22 * var(--cm-u));
  --cm-gap-text: max(10px, 14 * var(--cm-u));
  --cm-tags-bottom: calc(40 * var(--cm-u));
  --cm-name: max(24px, 36 * var(--cm-u));
  --cm-sector: max(15px, 17 * var(--cm-u));
  --cm-tag: max(11px, 13 * var(--cm-u));

  padding-block: clamp(72px, 10.053vw, 152px);
}

.ce-case-more__in {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 42.67%;     /* the card: 582 / 1364 */
  grid-template-rows: auto 1fr;
  grid-template-areas: "head slides" "nav slides";
  column-gap: 40px;
  padding-top: clamp(40px, 3.704vw, 56px);
  border-top: 1px solid #e9e9e9;
}

.ce-case-more__head { grid-area: head; }
.ce-case-more__title {
  max-width: 8.7em;                      /* 447 px at 52 px: two lines */
  margin: 0;
  font-family: var(--font-heading);
  font-size: clamp(32px, 3.439vw, 52px);
  font-weight: 400;
  line-height: 1.1346;                   /* 59 px at 52 px */
  letter-spacing: -.06em;                /* −3.12 px, as in Figma */
  color: var(--ui-ink);
}
.ce-case-more__all {
  display: inline-block;
  margin-top: 20px;
  font-family: var(--font-heading);
  font-size: .9375rem;
  color: var(--ui-muted);
}

/* ---- arrows: the buttons of CE-13 (ce/CE-13-quotes.css, 26.09) ------------- */
.ce-case-more__nav {
  grid-area: nav;
  align-self: end;
  display: flex;
  gap: 8px;
}
.ce-case-more__btn {
  display: grid;
  place-items: center;
  width: 60px;
  height: 40px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 4px;
  background: transparent;
  color: var(--ui-ink);
  cursor: pointer;
  transition: border-color .25s ease, background-color .25s ease, transform .15s ease;
}
.ce-case-more__btn--next { border-color: rgba(18, 18, 19, .12); }
.ce-case-more__btn:hover:not([aria-disabled="true"]) { border-color: rgba(18, 18, 19, .24); background: rgba(18, 18, 19, .03); }
.ce-case-more__btn:active:not([aria-disabled="true"]) { transform: scale(.94); }
.ce-case-more__btn:focus-visible { outline: 2px solid var(--ui-ink); outline-offset: 2px; }
.ce-case-more__arrow { width: 16px; height: 16px; transition: transform .35s var(--ease-out-expo), opacity .25s ease; }
.ce-case-more__btn--prev:hover:not([aria-disabled="true"]) .ce-case-more__arrow { transform: translateX(-4px); }
.ce-case-more__btn--next:hover:not([aria-disabled="true"]) .ce-case-more__arrow { transform: translateX(4px); }
/* the end of the list (no loop here): no outline, a faint arrow */
.ce-case-more__btn[aria-disabled="true"] { border-color: transparent; cursor: default; }
.ce-case-more__btn[aria-disabled="true"] .ce-case-more__arrow { opacity: .3; }

/* ---- cards ------------------------------------------------------------------ */
.ce-case-more__slides {
  grid-area: slides;
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ce-case-more__slide {
  grid-area: 1 / 1;
  visibility: hidden;
}
.ce-case-more__slide.is-current,
.ce-case-more__slide.is-leaving { visibility: visible; }
.ce-case-more__slide.is-current { z-index: 2; }
.ce-case-more__slide.is-leaving { z-index: 1; }

.ce-case-more__card {
  position: relative;            /* the chips sit over the picture… */
  isolation: isolate;            /* …and blend with the card only */
  display: block;
  color: inherit;
  text-decoration: none;
}
.ce-case-more__card:focus-visible { outline: 2px solid var(--ui-ink); outline-offset: 4px; }

.ce-case-more__media {
  position: relative;
  aspect-ratio: 787 / 680;               /* the CE-27 card (26.09; was 582 : 420) */
  overflow: hidden;
  background: var(--box);
  clip-path: inset(0);
}
/* --par-over: the margin of the scroll drift (data-parallax="drift" on
   __media, run by ce/CE-32-case-media.js; 1 without it). */
.ce-case-more__img {
  position: absolute;
  top: calc(50% - var(--par-over, 1) * 50%);
  left: 0;
  width: 100%;
  max-width: none;
  height: calc(var(--par-over, 1) * 100%);
  object-fit: cover;
  transition: scale .6s var(--ease-out-quart);
}
.ce-case-more__card:hover .ce-case-more__img { scale: 1.03; }

.ce-case-more__line { display: block; overflow: clip; }
.ce-case-more__line > span { display: block; }

/* Text as the CE-27 card: one line each, indented from the card edge. */
.ce-case-more__name,
.ce-case-more__sector {
  padding-inline: var(--cm-indent);
  font-family: var(--font-heading);
  font-weight: 400;
  white-space: nowrap;
}
.ce-case-more__name {
  margin: var(--cm-gap-media) 0 0;
  font-size: var(--cm-name);
  line-height: 1;
  letter-spacing: -.03em;                /* −1.08 px at 36 px */
  color: #1d1d1e;
}
.ce-case-more__name .ce-case-more__line {
  padding-bottom: .14em;                 /* room for the descenders inside the mask */
  margin-bottom: -.14em;
}
/* CE-27 trims the sector to its cap height (text-box); inside a mask that
   would cut the descenders, so here the box stays whole (line 1.25 = the
   font's ascent 1 + descent .25) and the margin gives back the .3 em
   between the top of that box and the cap height. */
.ce-case-more__sector {
  margin: calc(var(--cm-gap-text) - .3em) 0 0;
  font-size: var(--cm-sector);
  line-height: 1.25;
  letter-spacing: -.01em;                /* −0.17 px at 17 px */
  color: #778181;
}

/* Chips in the bottom-right corner of the picture, as CE-27: a box of the
   picture's size over it (no z-index, no transform – they blend with it). */
.ce-case-more__tags {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  aspect-ratio: 787 / 680;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  gap: 4px;
  margin: 0;
  padding: 0 var(--cm-indent) var(--cm-tags-bottom);
  list-style: none;
  pointer-events: none;                  /* a click on a chip is a click on the card */
}
.ce-case-more__tag {
  padding: .3846em .6154em .4615em;      /* 5 / 8 / 6 px at 13 px */
  border: 1px solid #c0c0c0;
  border-radius: .2308em;                /* 3 px at 13 px */
  color: #c0c0c0;
  font-family: var(--font-heading);
  font-size: var(--cm-tag);
  font-weight: 500;
  line-height: 1.077;                    /* 14 px at 13 px */
  letter-spacing: .015em;
  text-transform: uppercase;
  white-space: nowrap;
  mix-blend-mode: difference;            /* light on the dark parts of the picture, dark on the light ones */
}

/* ---- change of card (JS sets the classes) ---------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .ce-case-more__slide .ce-case-more__media { transition: clip-path .9s var(--ease-out-power4); }
  .ce-case-more__slide .ce-case-more__line > span { transition: transform .8s var(--ease-out-power4) .25s; }
  .ce-case-more__slide .ce-case-more__sector .ce-case-more__line > span { transition-delay: .33s; }
  .ce-case-more__slide .ce-case-more__tags { transition: opacity .6s ease .45s; }
  .ce-case-more__slide.is-current .ce-case-more__img { transition: scale 1.2s var(--ease-out-power4); }
  .ce-case-more__slide.is-leaving :is(.ce-case-more__name, .ce-case-more__sector, .ce-case-more__tags) {
    opacity: 0;
    transition: opacity .3s ease;
  }

  /* start state of the incoming card: no transition, so it jumps there */
  .ce-case-more__slide.is-from .ce-case-more__media,
  .ce-case-more__slide.is-from .ce-case-more__img,
  .ce-case-more__slide.is-from .ce-case-more__line > span,
  .ce-case-more__slide.is-from .ce-case-more__tags { transition: none; }
  .ce-case-more__slide.is-from[data-dir="next"] .ce-case-more__media { clip-path: inset(0 0 0 100%); }
  .ce-case-more__slide.is-from[data-dir="prev"] .ce-case-more__media { clip-path: inset(0 100% 0 0); }
  .ce-case-more__slide.is-from .ce-case-more__img { scale: 1.15; }
  .ce-case-more__slide.is-from .ce-case-more__line > span { transform: translateY(110%); }
  .ce-case-more__slide.is-from .ce-case-more__tags { opacity: 0; }
}

/* ---- one column --------------------------------------------------------------- */
@media (max-width: 900px) {
  .ce-case-more {
    --cm-u: min(1px, (100vw - 2 * var(--gut)) / 787);   /* a card is the full width, as CE-27 */
    --cm-indent: 20px;
    --cm-tags-bottom: 20px;
  }
  .ce-case-more__in {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    grid-template-areas: "head" "slides" "nav";
    row-gap: 32px;
  }
}

/* ---- variant: pair (Usługi, 27.09.2026) --------------------------------------
   Figma crear-v2.0, frame 608:1649, node 608:1814 (1440 px): #F4F4F4,
   160 px above and below; the eyebrow („• CASE STUDIES”, kit .lf-eyebrow),
   28 px to a row with the H2 (56 px Expanded Regular, line 1.05, −2.24 px)
   on the left and the arrows (CE-13 buttons, as the base) on the right,
   centred on it; 80 px lower two cards side by side (692 × 594 + text in
   the design) – here the CE-27 card of the base (787 : 680, 6 px apart,
   the same text, chips and drift), so it matches the works list. The
   cards sit in a track (__viewport clips it) that slides by one card per
   arrow, ←/→ or swipe (ce/CE-37-case-more.js: transform 0.9 s
   power4.out); two cards are visible from 901 px, one below; the arrow at
   an end is disabled as in the base. Cards out of view have inert.
   Reduced motion: the track jumps. No hairline on top (not in the design). */
.ce-case-more[data-ce-variant~="pair"] {
  --cm-pair-gap: 6px;
  padding-block: clamp(80px, 11.111vw, 160px);
}
.ce-case-more[data-ce-variant~="pair"] .ce-case-more__in {
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  grid-template-areas: "head nav" "slides slides";
  column-gap: 40px;
  row-gap: clamp(48px, 5.556vw, 80px);
  padding-top: 0;
  border-top: 0;
}
.ce-case-more[data-ce-variant~="pair"] .ce-case-more__eyebrow { margin: 0 0 clamp(20px, 1.944vw, 28px); }
.ce-case-more[data-ce-variant~="pair"] .ce-case-more__title {
  max-width: none;
  font-size: clamp(34px, 3.889vw, 56px);
  line-height: 1.05;
  letter-spacing: -.04em;                /* −2.24 px at 56 px */
}
.ce-case-more[data-ce-variant~="pair"] .ce-case-more__nav { align-self: end; padding-bottom: clamp(0px, .66vw, 9.5px); }
.ce-case-more[data-ce-variant~="pair"] .ce-case-more__viewport {
  grid-area: slides;
  overflow: hidden;
  min-width: 0;
}
.ce-case-more[data-ce-variant~="pair"] .ce-case-more__slides {
  display: flex;
  gap: var(--cm-pair-gap);
  will-change: transform;
}
.ce-case-more[data-ce-variant~="pair"] .ce-case-more__slide {
  flex: 0 0 calc((100% - var(--cm-pair-gap)) / 2);
  min-width: 0;
  visibility: visible;
}
/* Usługi v6.1 (01.10): the tags are the names of services („Strona
   internetowa dla firmy”) – longer than the base's, so they wrap into a
   second row at the bottom right instead of running off the picture; a
   sector not yet confirmed („[branża]”) is marked as a placeholder */
.ce-case-more[data-ce-variant~="pair"] .ce-case-more__tags {
  flex-wrap: wrap;
  align-content: flex-end;
}
.ce-case-more__sector.is-placeholder > .ce-case-more__line > span {
  text-decoration: underline 1px dashed;
  text-underline-offset: .18em;
}
/* Usługi v6.1 (01.10): the long service names in difference mode (#C0C0C0)
   vanished on mid-grey pictures (the concrete of xCargo) – here the chips
   are white on a dark glass instead; the base on Funk keeps difference */
.ce-case-more[data-ce-variant~="pair"] .ce-case-more__tag {
  mix-blend-mode: normal;
  color: #fff;
  border-color: rgba(255, 255, 255, .28);
  background: rgba(29, 29, 30, .62);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
/* the scale of the pair's own card (Figma 608:1814: 692 px wide, name
   36 px, sector 17 px, indent 32 px) instead of the works-list card's
   (787 px) – the captions were about 15% under the design; one column
   (≤ 900 px) keeps the base */
@media (min-width: 901px) {
  .ce-case-more[data-ce-variant~="pair"] {
    --cm-u: min(1px, (100vw - 2 * var(--gut) - 6px) / 1384);   /* 1384 = 2 × 692 */
    --cm-indent: calc(32 * var(--cm-u));
  }
}
@media (prefers-reduced-motion: no-preference) {
  .ce-case-more[data-ce-variant~="pair"] .ce-case-more__slides { transition: transform .9s var(--ease-out-power4); }
}
@media (max-width: 900px) {
  .ce-case-more[data-ce-variant~="pair"] .ce-case-more__in {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "head" "slides" "nav";
    row-gap: 32px;
  }
  .ce-case-more[data-ce-variant~="pair"] .ce-case-more__slide { flex-basis: 100%; }
  .ce-case-more[data-ce-variant~="pair"] .ce-case-more__nav { padding-bottom: 0; }
}