/* ===========================================================================
   CE-33 · Lead i metryczka realizacji (case lead and facts)
   Root:     div.ce-case-facts (in .lf-wrap)
   Parts:    __in (lead left, facts right), __lead (one large sentence about
             what was done), __list (dl), __row (one fact: label over a
             hairline, value under it from 41% of the column), __label (dt),
             __value (dd; a list of several items as __items)
   Variants: none; any number of rows.
   Mechanics: site.js only – the lead rises line by line
             (data-reveal-text="rise"), the rows come in one after another
             (data-appear, 80 ms apart).
   Layout:   Figma web-design-2026, node 4065:7294 (1512 px frame): lead
             36 px Expanded Regular, line 48, −2.16 px, #1D1D1E, 642 of 1368
             px; facts 556 px at the right edge, 8 px lower: label 16 px
             #778181 (cap-trimmed), 10 px to a 1 px #E9E9E9 line, value 20 px
             #1D1D1E 37 px under the label top and 229 px in; rows 24 px
             apart. Columns in % of the content width, type 1:1 at 1512 px,
             proportionally less below with floors. ≤ 900 px the facts go
             under the lead; ≤ 640 px the value goes under the line.
   Base:     realizacje/drutplast/#o-projekcie · registry: CE-33
   =========================================================================== */

.ce-case-facts { margin-top: clamp(72px, 10.053vw, 152px); }

.ce-case-facts__in {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 40px;
}

.ce-case-facts__lead {
  flex: 0 1 46.93%;                      /* 642 / 1368 */
  margin: 0;
  font-family: var(--font-heading);
  font-size: clamp(24px, 2.381vw, 36px);
  font-weight: 400;
  line-height: 1.3333;                   /* 48 px at 36 px */
  letter-spacing: -.06em;                /* −2.16 px at 36 px, as in Figma */
  color: var(--ui-ink);
}

.ce-case-facts__list {
  flex: 0 0 40.64%;                      /* 556 / 1368 */
  display: grid;
  gap: 24px;
  margin: 0;
  padding-top: 8px;
}

.ce-case-facts__label {
  padding-bottom: 10px;
  border-bottom: 1px solid #e9e9e9;
  font-family: var(--font-heading);
  font-size: clamp(14px, 1.058vw, 16px);
  font-weight: 400;
  line-height: normal;
  color: var(--ui-muted);
}
.ce-case-facts__label,
.ce-case-facts__value { text-box: trim-both cap alphabetic; }   /* as in Figma: boxes of the cap height */

.ce-case-facts__value {
  margin: 15px 0 0 41.19%;               /* 37 − 22 under the line; 229 / 556 in */
  font-family: var(--font-heading);
  font-size: clamp(17px, 1.323vw, 20px);
  font-weight: 400;
  line-height: 1.2;
  color: var(--ui-ink);
}
.ce-case-facts__items { margin: 0; padding: 0; list-style: none; }
/* As in Figma, a long item may run past the column into the page margin –
   only where the margin is wide enough for it. */
@media (min-width: 1200px) {
  .ce-case-facts__items li { white-space: nowrap; }
}
.ce-case-facts__value a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(29, 29, 30, .3);
  text-underline-offset: .2em;
}
.ce-case-facts__value a:hover { text-decoration-color: currentColor; }

@media (max-width: 900px) {
  .ce-case-facts__in { flex-direction: column; gap: 48px; }
  .ce-case-facts__lead,
  .ce-case-facts__list { flex: none; width: 100%; }
}
@media (max-width: 640px) {
  .ce-case-facts__value { margin-left: 0; }
}