/* ===========================================================================
   CE-27 · Karty realizacji rozszerzane (expanding works cards)
   Root:     section.ce-works-expand – full window width with 10 px margins
             (no .lf-wrap); the size container (container-type: inline-size)
             whose width drives every size below
   Parts:    __head (H2 on the left, the "all works" link on the right; in
             the 1800 px container, indented like the text of the cards; the
             link wraps under the H2 on a phone), __title (H2, with .lf-h2),
             __all (text link „Zobacz wszystkie realizacje →”, with .lf-link),
             __row (two cards side by side), __card (the whole card is one
             link), __media (the image box: one height per row, clips),
             __img (the card image, object-fit: cover), __video (muted looping
             clip over the image, invisible until it plays), __name (H3, the
             client), __sector (industry), __tags (ul over the bottom-right
             corner of the image – placed AFTER the text in the markup, so the
             link reads name → sector → tags), __tag (li: one chip, 1 px
             outline, difference blend)
   States:   .is-active on a card + .has-active on its row – the widened card;
             .is-playing on a card – its video is visible. Both are set by
             ce/CE-27-works-expand.js (hover, keyboard focus, click).
   Variants: list – the cards alone on a list page (case-studies.html):
             no __head in the markup, no data-bg-scroll (white, no
             #F4F4F4), no top padding – the page head CE-30 above holds
             the 100 px to the first row. Only visual differences: the
             cards, their reveal, the 70% cap, the hover, the video and the
             widening are the Home ones (27.09, Mateusz: "must work the same
             here and on the home page")
   Mechanics: hover or keyboard focus widens a card by --expand (1.15 = +15 %)
             and narrows its neighbour in the row by as much (flex-grow,
             600 ms); the image height of a row never changes – a wider card
             shows more of the picture. The image turns into a muted looping
             video (fade 300 ms). Touch screens: static images, no widening.
             Reduced motion: no widening, the video plays after a click on
             the image.
   Layout:   two cards per row from 901 px. At a 1600 px window the sizes are
             the design's (Figma web-design-2026, frame 4071:7737): card
             787 × 680 + text, gaps 6 / 100, text indent 38; below that every
             size shrinks with the card width, above it they stay (container
             max 1800 px). The image is never taller than 70% of the window
             (27.09): a lower window crops it, the card keeps its width.
             ≤ 900 px: one column, 40 px between the cards, text indent
             20 px, image 787 : 680 (and the same 70% cap).
   Colour:   a hi-fi section on the lo-fi page: colours from the design
             (name #1d1d1e, sector #778181, chips #c0c0c0); corners square,
             as in Figma
   Base:     index.html#realizacje · registry: ce-registry.js → CE-27
   =========================================================================== */

.ce-works-expand {
  /* How much the hovered card grows; its neighbour shrinks by as much, so
     1.15 gives 57.5 : 42.5. Mateusz: somewhere between 1.1 and 1.2. */
  --expand: 1.15;

  --works-max: 100000px;                   /* no cap: full window width (24.09) */
  --works-gap-x: 6px;                      /* between the two cards of a row */
  --works-time: 600ms;                     /* widening */
  --works-ease: cubic-bezier(.2, .7, .2, 1);
  --works-fade: 300ms;                     /* video over the image (JS: FADE) */

  /* Everything is computed from the width of the content. The section is the
     size container, so 100cqi is its width inside the 10 px margins – no
     100vw, no error from the scrollbar. */
  --works-cw: min(100cqi, var(--works-max));
  --works-card: calc((var(--works-cw) - var(--works-gap-x)) / 2);   /* a card at rest */
  /* Image height of every row: 787 : 680 by the card width, but never more
     than 70% of the window height (27.09, Mateusz: on a low screen a card
     has to fit in the window) – a capped image keeps the card width and is
     cropped (object-fit: cover); the widening works as before. svh where
     known, so a phone's toolbar never makes it taller than the screen. */
  --works-max-h: 70vh;
  --works-media-h: min(var(--works-card) * 680 / 787, var(--works-max-h));

  /* 1 px of the design (card 787 px wide) in CSS px, never above 1 px: the
     design values from a 1600 px window up, proportionally less below it.
     Type and the small gaps have a floor, so they stay readable. */
  --works-u: min(1px, var(--works-card) / 787);
  --works-indent: calc(38 * var(--works-u));            /* text and tags from the card edge */
  --works-gap-y: calc(100 * var(--works-u));            /* between the rows */
  --works-gap-media: max(14px, 22 * var(--works-u));    /* image → name */
  --works-gap-text: max(10px, 14 * var(--works-u));     /* name → sector (to the cap height) */
  --works-tags-bottom: calc(40 * var(--works-u));       /* chips above the bottom of the image */
  --works-name: max(24px, 36 * var(--works-u));
  --works-sector: max(15px, 17 * var(--works-u));
  --works-tag: max(11px, 13 * var(--works-u));

  container-type: inline-size;
  padding-inline: var(--gut);             /* the page's side margins (24.09; was 10 px) */
}

/* Without container units: the window width (a scrollbar makes it a few px off). */
@supports not (width: 1cqi) {
  .ce-works-expand { --works-cw: calc(100vw - 2 * var(--gut)); }
}
@supports (height: 1svh) {
  .ce-works-expand { --works-max-h: 70svh; }
}

/* ---- head: Figma crear-v2.0, frame 440:227 (24.09.2026) -------------------- */
/* Eyebrow „• NASZE REALIZACJE” (14 px here), 37 px to the H2; H2 60 px
   Expanded Regular, line 1.12, −1.5 px, #0A2526, 860 px wide at a 1600 px
   frame; 100 px to the cards; 140 px from the top of the section. Sizes
   follow the window below 1600 px. Aligned with the page margin (--gut).
   The H2 comes in with the sweep of the CE-06 hero (site.css UI kit). */
.ce-works-expand { padding-top: clamp(80px, 8.75vw, 140px); }
.ce-works-expand__head {
  max-width: var(--works-max);
  margin: 0 auto clamp(56px, 6.25vw, 100px);
}
.ce-works-expand__eyebrow {
  font-size: .875rem;                    /* 14 px, 0.21 px tracking */
  margin-bottom: clamp(24px, 2.3vw, 37px);
}
.ce-works-expand__title {
  max-width: 14.33em;                    /* 860 px at 60 px */
  font-family: var(--font-heading);
  font-size: clamp(2rem, 3.75vw, 60px);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -.025em;               /* −1.5 px at 60 px */
  color: var(--ui-text);
}

/* ---- variant list: the cards alone under a page head (CE-30) ----------- */
.ce-works-expand[data-ce-variant~="list"] { padding-top: 0; }
/* the last section of a page (case-studies.html): a gap above the footer */
.ce-works-expand:last-child { padding-bottom: clamp(80px, 8.75vw, 140px); }

/* ---- rows and cards --------------------------------------------------------- */
.ce-works-expand__row {
  display: flex;
  gap: var(--works-gap-x);
  max-width: var(--works-max);
  margin-inline: auto;
}
.ce-works-expand__row + .ce-works-expand__row { margin-top: var(--works-gap-y); }

.ce-works-expand__card {
  position: relative;            /* the tags sit over the image… */
  isolation: isolate;            /* …and blend with the card only */
  flex: 1 1 0;
  min-width: 0;
  color: inherit;
  text-decoration: none;
  transition: flex-grow var(--works-time) var(--works-ease);
}

/* Widening (JS sets the classes; this guard keeps it off on phones, touch
   screens and with reduced motion even if a class is left behind). */
@media (width > 900px) and (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .ce-works-expand__row.has-active > .ce-works-expand__card { flex-grow: calc(2 - var(--expand)); }
  .ce-works-expand__row.has-active > .ce-works-expand__card.is-active { flex-grow: var(--expand); }
}

/* ---- media -------------------------------------------------------------------- */
.ce-works-expand__media {
  position: relative;
  height: var(--works-media-h);  /* from the container, never from the card: widening keeps it */
  overflow: hidden;
  background: var(--box);        /* until the image arrives */
}

/* The image and the video are at least as wide as a card at rest and centred:
   at rest they are cropped exactly as in Figma, a narrowed card crops more
   instead of zooming out, a widened one shows more (object-fit: cover). */
.ce-works-expand__img,
.ce-works-expand__video {
  position: absolute;
  top: 0;
  left: min(0px, 50% - var(--works-card) / 2);
  width: max(100%, var(--works-card));
  max-width: none;
  height: 100%;
  object-fit: cover;
}

.ce-works-expand__video {
  opacity: 0;
  transition: opacity var(--works-fade) ease;
}
.ce-works-expand__card.is-playing .ce-works-expand__video { opacity: 1; }

/* ---- text: never reflows while the card changes width --------------------- */
.ce-works-expand__name {
  margin-top: var(--works-gap-media);
  padding-inline: var(--works-indent);
  font-family: var(--font-heading);
  font-size: var(--works-name);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -.03em;        /* −1.08 px at 36 px */
  color: #1d1d1e;
  white-space: nowrap;
  overflow-x: clip;              /* a name longer than the card ends in "…" */
  text-overflow: ellipsis;
}

.ce-works-expand__sector {
  margin-top: var(--works-gap-text);
  padding-inline: var(--works-indent);
  font-family: var(--font-heading);     /* Expanded, like the name – the whole text block of the card in Figma */
  font-size: var(--works-sector);
  font-weight: 400;
  line-height: normal;
  letter-spacing: -.01em;        /* −0.17 px at 17 px */
  color: #778181;
  text-box: trim-both cap alphabetic;   /* as in Figma: the box is the cap height */
  white-space: nowrap;
  overflow-x: clip;
  text-overflow: ellipsis;
}

/* ---- tags: bottom-right corner of the image ------------------------------ */
.ce-works-expand__tags {
  position: absolute;            /* no z-index and no transform: the chips must */
  top: 0;                        /* blend with the image, not inside a layer of their own */
  right: var(--works-indent);
  height: var(--works-media-h);
  display: flex;
  align-items: flex-end;
  gap: 4px;
  padding-bottom: var(--works-tags-bottom);
  pointer-events: none;          /* a click on a chip is a click on the image */
}

.ce-works-expand__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(--works-tag);
  font-weight: 500;
  line-height: 1.077;                   /* 14 px at 13 px – the chip is 27 px tall in Figma */
  letter-spacing: .015em;               /* 0.195 px at 13 px */
  text-transform: uppercase;
  white-space: nowrap;
  mix-blend-mode: difference;           /* light on the dark parts of the image, dark on the light ones */
}

/* ---- one column --------------------------------------------------------------- */
@media (max-width: 900px) {
  .ce-works-expand {
    --works-card: var(--works-cw);      /* a card is the full width; image 787 : 680 */
    --works-indent: 20px;
    --works-gap-y: 40px;
    --works-tags-bottom: 20px;
  }
  .ce-works-expand__row {
    flex-direction: column;
    gap: var(--works-gap-y);
  }
  .ce-works-expand__card { flex: none; }
}

/* Touch screens: static images (the script never starts a video there either). */
@media (pointer: coarse) {
  .ce-works-expand__video { display: none; }
}

/* ---- reveal on scroll (24.09.2026, second version; 27.09) ---------------- */
/* As the grid on ref.digital/work (measured 24.09.2026), without its frame:
   the image sits in two masks – the outer one starts a full height above
   (−100%), the inner one a full height below (+100%) – which both slide to
   0, so the picture is uncovered from the top down while it stays in
   place; meanwhile the image settles from 1.2 to 1 and the media box from
   0.95 to 1. 0.7 s, power2.out, each next card of a row 80 ms later.
   The hidden state hangs on html.cr-js (27.09, Mateusz: on case-studies
   the pictures were first shown, then closed from the bottom up and only
   then uncovered): chrome.js sets that class in <head>, before the first
   paint, so a card is closed from the very first frame and is uncovered
   once – never shown, closed and reopened. ce/CE-27-works-expand.js marks
   a card .is-visible (the rules and the timing are in its header). Without
   scripts nothing is hidden. The tags fade in after the image. Reduced
   motion: no reveal. */
.ce-works-expand__card:nth-child(2) { --works-i: 1; }
.ce-works-expand__mask,
.ce-works-expand__mask-in {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
@media (prefers-reduced-motion: no-preference) {
  /* no grey box behind the masks (27.09): on the white list it showed as
     an empty frame before and during the reveal (on the #F4F4F4 of Home
     it was invisible); the script waits for the pictures anyway */
  .cr-js .ce-works-expand .ce-works-expand__media { transform: scale(.95); background: transparent; }
  .cr-js .ce-works-expand .ce-works-expand__mask { transform: translateY(-100%); }
  .cr-js .ce-works-expand .ce-works-expand__mask-in { transform: translateY(100%); }
  .cr-js .ce-works-expand .ce-works-expand__img,
  .cr-js .ce-works-expand .ce-works-expand__video { scale: 1.2; }
  .cr-js .ce-works-expand :is(.ce-works-expand__media, .ce-works-expand__mask, .ce-works-expand__mask-in) {
    transition: transform .7s var(--ease-out-power2) calc(var(--works-i, 0) * 80ms);
  }
  .cr-js .ce-works-expand :is(.ce-works-expand__img, .ce-works-expand__video) {
    transition: scale .7s var(--ease-out-power2) calc(var(--works-i, 0) * 80ms), opacity var(--works-fade) ease;
  }
  .cr-js .ce-works-expand .is-visible :is(.ce-works-expand__media, .ce-works-expand__mask, .ce-works-expand__mask-in) { transform: none; }
  .cr-js .ce-works-expand .is-visible :is(.ce-works-expand__img, .ce-works-expand__video) { scale: 1; }
  .cr-js .ce-works-expand .ce-works-expand__tags {
    opacity: 0;
    transition: opacity .6s ease calc(.45s + var(--works-i, 0) * 80ms);
  }
  .cr-js .ce-works-expand .ce-works-expand__card.is-visible .ce-works-expand__tags { opacity: 1; }
}