/* ===========================================================================
   CE-34 · Bloki opisu w prawej połowie (case story blocks)
   Root:     section.ce-case-story (in .lf-wrap)
   Parts:    __block (one block: H2 and text, in the right half of the page),
             __title (H2), __text (paragraphs, a blank line apart). Blocks
             after the first get a hairline over the full content width,
             80 px above and below it.
   Variants: none; any number of blocks (the design: „Wyzwanie” and
             „Rozwiązanie”).
   Mechanics: site.js only – the H2 comes in letter by letter as every
             section heading (data-reveal-text="chars"), the text with
             data-appear.
   Layout:   Figma web-design-2026, node 4065:7317 (1512 px frame): block
             672 of 1368 px at the right edge; H2 46 px Expanded Regular,
             line 56, −2.76 px, #1D1D1E; 33 px to the text; text 20 px, line
             31, #1D1D1E (cap-trimmed), paragraphs 31 px apart; line #E9E9E9.
             Type 1:1 at 1512 px, proportionally less below with floors;
             ≤ 900 px the blocks take the full width.
   Base:     realizacje/drutplast/#wyzwanie · registry: CE-34
   =========================================================================== */

.ce-case-story {
  margin-top: clamp(72px, 10.053vw, 152px);
  padding-block: 0;
}

.ce-case-story__block {
  width: 49.12%;                         /* 672 / 1368 */
  margin-left: auto;
}
.ce-case-story__block + .ce-case-story__block {
  position: relative;
  margin-top: clamp(48px, 5.291vw, 80px);
  padding-top: clamp(48px, 5.291vw, 80px);
}
/* the hairline spans the whole content width, not only the block */
.ce-case-story__block + .ce-case-story__block::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: calc(100% / .4912);
  border-top: 1px solid #e9e9e9;
}

.ce-case-story__title {
  margin: 0;
  font-family: var(--font-heading);
  font-size: clamp(32px, 3.042vw, 46px);
  font-weight: 400;
  line-height: 1.2174;                   /* 56 px at 46 px */
  letter-spacing: -.06em;                /* −2.76 px at 46 px, as in Figma */
  color: var(--ui-ink);
}

.ce-case-story__text {
  margin-top: clamp(20px, 2.183vw, 33px);
  font-size: clamp(17px, 1.323vw, 20px);
  font-family: var(--font-heading);
  font-weight: 400;
  line-height: 1.55;                     /* 31 px at 20 px */
  color: var(--ui-ink);
  text-box: trim-both cap alphabetic;
}
.ce-case-story__text p { margin: 0; }
.ce-case-story__text p + p { margin-top: 1.55em; }   /* the design's blank line */
/* lists in the story (08.10.2026, the case studies of t3media.pl: problems,
   technologies) – a dash, the same rhythm as the paragraphs */
.ce-case-story__text ul { margin: 0; padding: 0; list-style: none; }
.ce-case-story__text * + ul,
.ce-case-story__text ul + * { margin-top: 1.55em; }
.ce-case-story__text li { position: relative; padding-left: 1.4em; }
.ce-case-story__text li + li { margin-top: .5em; }
.ce-case-story__text li::before { content: "–"; position: absolute; left: 0; }
.ce-case-story__text strong { font-weight: 500; }
.ce-case-story__text a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(29, 29, 30, .3);
  text-underline-offset: .2em;
}
.ce-case-story__text a:hover { text-decoration-color: currentColor; }

@media (max-width: 900px) {
  .ce-case-story__block { width: 100%; }
  .ce-case-story__block + .ce-case-story__block::before { width: 100%; }
}

/* ---- block with a picture (08.10.2026, case studies from t3media.pl) -------
   The picture of a point stands in the left half the block leaves empty,
   sticky while its text scrolls past – one point ≈ one screen instead of a
   text block followed by a full-width gallery. The picture is shown whole
   (contain) on the grey box, like the "screens" variant of CE-32. */
.ce-case-story__block--media {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 49.12%;
  column-gap: clamp(32px, 5vw, 80px);
  align-items: start;
  width: 100%;
}
.ce-case-story__block--media > .ce-case-story__title,
.ce-case-story__block--media > .ce-case-story__text { grid-column: 2; }
.ce-case-story__media {
  grid-column: 1;
  grid-row: 1 / span 2;
  position: sticky;
  top: calc(var(--header-h) + 24px);
  margin: 0;
  aspect-ratio: 4 / 3;
  background: var(--box);
}
.ce-case-story__media img {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  padding: clamp(12px, 2vw, 32px);
  object-fit: contain;
}
.ce-case-story__block--media + .ce-case-story__block::before,
.ce-case-story__block + .ce-case-story__block--media::before { width: 100%; }

@media (max-width: 900px) {
  .ce-case-story__block--media { grid-template-columns: minmax(0, 1fr); row-gap: clamp(20px, 4vw, 32px); }
  .ce-case-story__block--media > .ce-case-story__title,
  .ce-case-story__block--media > .ce-case-story__text { grid-column: 1; }
  .ce-case-story__media { grid-row: auto; position: static; }
}