/* ===========================================================================
   CE-41 · Siatka wpisów (post cards grid)
   Root:     section.ce-post-grid (in .lf-wrap) – the posts of Insights as
             cards in three columns
   Parts:    __head (__title H2; in "related" also __all – text link to the
             list), __list (ul; data-page-size = cards per page), __item
             (li; data-topic for the filter CE-39; .is-beyond past the
             current page), __card (the whole card is one link), __media
             (data-appear drives the reveal) with __mask / __mask-in and
             __img, __topic (.lf-eyebrow), __card-title (H3, its text in
             span.lf-line), __lead (3 lines at most), __meta (date and
             reading time), __more (status line with a progress hairline
             __bar, and the UI button „Pokaż więcej wpisów”), __empty (a
             topic without posts)
   Variants: related – „Powiązane wpisy” under a post (blog/co-to-jest-wordpress/):
             a 1 px #E9E9E9 line above, the head with the H2 on the left and
             the link „Wszystkie wpisy” on the right, three cards, no pages,
             no filter.
   Mechanics: ce/CE-41-post-grid.js – pages of data-page-size cards
             („Pokaż więcej wpisów” adds a page; the status reads „6 z 11
             wpisów” and its hairline fills); after the topic filter
             (CE-39, event "cr:topic-filter") the list starts again from one
             page of the cards of that topic; the column of every shown card
             (--card-i, 0–2) staggers its reveal by 80 ms. Reveal (as CE-27):
             data-appear on __media gives .is-in; the outer mask comes down
             from −100%, the inner one up from +100%, the picture settles
             from 1.2 to 1, the box grows from .95 to 1 (0.7 s power2.out);
             the text under it rises in 120 ms later (kit data-appear on the
             card's text is not used – the same .is-in of the picture drives
             it). Cards shown by the filter or by „Pokaż więcej” uncover the
             same way when they come into view. Hover and keyboard focus:
             the picture zooms to 1.05 (1.2 s ease-out-quart), the title's
             line is drawn from the left (kit .lf-line, 0.3 s). The topic
             label codes in (kit). Reduced motion: no reveal, no zoom.
   Layout:   hi-fi on the kit: columns 3 (≥ 1024 px), 2 (641–1023), 1
             (≤ 640); gaps clamp 16–24 across, 48–80 down; picture 4 : 3;
             topic 18 px under it; title clamp 20–26 px Expanded Regular
             (line 1.25, −.02em, #1D1D1E); lead 16 px #1D1D1E 65%; meta
             13 px #778181.
   Base:     insights.html#wpisy · registry: ce-registry.js → CE-41
   =========================================================================== */

.ce-post-grid { padding-block: clamp(72px, 8vw, 128px) 0; }

.ce-post-grid__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px 40px;
  margin-bottom: clamp(32px, 3.5vw, 56px);
}
.ce-post-grid__title {
  font-size: clamp(1.75rem, 2.9vw, 46px);
  font-weight: 400;
  letter-spacing: -.04em;
  color: var(--ui-ink);
}

.ce-post-grid__list {
  --cols: 3;
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  gap: clamp(48px, 5vw, 80px) clamp(16px, 1.6vw, 24px);
}
@media (max-width: 1023px) { .ce-post-grid__list { --cols: 2; } }
@media (max-width: 640px) { .ce-post-grid__list { --cols: 1; gap: 48px; } }

.ce-post-grid__item.is-beyond { display: none; }

.ce-post-grid__card {
  display: block;
  color: inherit;
  text-decoration: none;
}
.ce-post-grid__card:focus-visible { outline: 2px solid var(--ui-ink); outline-offset: 6px; }

/* ---- picture -------------------------------------------------------------- */
.ce-post-grid__media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--box);
}
.ce-post-grid__mask,
.ce-post-grid__mask-in {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.ce-post-grid__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  transition: transform 1.2s var(--ease-out-quart);
}

/* ---- text ----------------------------------------------------------------- */
.ce-post-grid__topic { margin-top: clamp(16px, 1.3vw, 20px); font-size: .75rem; gap: 14px; }
.ce-post-grid__card-title {
  margin-top: 12px;
  font-family: var(--font-heading);
  font-size: clamp(1.25rem, 1.6vw, 26px);
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: -.02em;
  color: var(--ui-ink);
  text-wrap: balance;
}
.ce-post-grid__lead {
  display: -webkit-box;
  margin-top: 12px;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  font-size: 1rem;
  line-height: 1.55;
  color: rgba(29, 29, 30, .65);
}
.ce-post-grid__meta {
  margin-top: 16px;
  font-size: .8125rem;
  line-height: 1.4;
  color: var(--ui-muted);
}
.ce-post-grid__meta span[aria-hidden] { padding-inline: 6px; }

/* ---- pages ----------------------------------------------------------------- */
.ce-post-grid__more {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  margin-top: clamp(56px, 5.5vw, 88px);
}
.ce-post-grid__status {
  display: grid;
  justify-items: center;
  gap: 10px;
  font-size: .8125rem;
  color: var(--ui-muted);
  font-variant-numeric: tabular-nums;
}
.ce-post-grid__bar {
  position: relative;
  display: block;
  width: 160px;
  height: 1px;
  background: #e1e1e1;
  overflow: hidden;
}
.ce-post-grid__bar::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--ui-ink);
  transform-origin: left center;
  transform: scaleX(var(--shown, 1));
  transition: transform .6s var(--ease-out-quart);
}
.ce-post-grid__empty {
  padding-block: 40px;
  font-family: var(--font-heading);
  font-size: 1.125rem;
  color: var(--ui-muted);
}

/* ---- variant related ------------------------------------------------------- */
.ce-post-grid[data-ce-variant~="related"] .lf-wrap > .ce-post-grid__head {
  padding-top: clamp(40px, 3.7vw, 56px);
  border-top: 1px solid #e9e9e9;
}
.ce-post-grid[data-ce-variant~="related"] { padding-bottom: clamp(72px, 8vw, 128px); }
/* the last section of a page (Insights since 05.10.2026): the same gap above the footer */
.ce-post-grid:last-child { padding-bottom: clamp(72px, 8vw, 128px); }
.ce-post-grid__all { font-family: var(--font-heading); font-size: 1rem; }

/* ---- reveal and hover ------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .cr-js .ce-post-grid__media[data-appear] {
    background: transparent;          /* no grey frame before and during the reveal (as CE-27, 27.09) */
    opacity: 1;
    transform: scale(.95);
    transition: transform .7s var(--ease-out-power2) calc(var(--card-i, 0) * 80ms);
  }
  .cr-js .ce-post-grid__media .ce-post-grid__mask { transform: translateY(-100%); }
  .cr-js .ce-post-grid__media .ce-post-grid__mask-in { transform: translateY(100%); }
  .cr-js .ce-post-grid__media .ce-post-grid__img { scale: 1.2; }
  .cr-js .ce-post-grid__media :is(.ce-post-grid__mask, .ce-post-grid__mask-in) {
    transition: transform .7s var(--ease-out-power2) calc(var(--card-i, 0) * 80ms);
  }
  .cr-js .ce-post-grid__media .ce-post-grid__img {
    transition: scale .7s var(--ease-out-power2) calc(var(--card-i, 0) * 80ms), transform 1.2s var(--ease-out-quart);
  }
  .cr-js .ce-post-grid__media.is-in,
  .cr-js .ce-post-grid__media.is-in :is(.ce-post-grid__mask, .ce-post-grid__mask-in) { transform: none; }
  .cr-js .ce-post-grid__media.is-in .ce-post-grid__img { scale: 1; }

  /* the text follows its picture */
  .cr-js .ce-post-grid__media ~ :not(.ce-post-grid__topic) {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity .8s var(--ease-out-quart) calc(120ms + var(--card-i, 0) * 80ms), transform .8s var(--ease-out-quart) calc(120ms + var(--card-i, 0) * 80ms);
  }
  .cr-js .ce-post-grid__media.is-in ~ :not(.ce-post-grid__topic) { opacity: 1; transform: none; }

  .ce-post-grid__card:is(:hover, :focus-visible) .ce-post-grid__img { transform: scale(1.05); }
}
.ce-post-grid__card:is(:hover, :focus-visible) .ce-post-grid__card-title .lf-line {
  background-size: 100% 1px;
  background-position: 0 var(--line-y);
}