/* ===========================================================================
   CE-40 · Wpis wyróżniony (featured post)
   Root:     section.ce-post-featured (in .lf-wrap) – one large post at the
             top of the Insights list; carries data-topic, so the topic
             filter (CE-39) hides it when another topic is picked
   Parts:    __link (the whole block is one link), __media (the picture box:
             data-appear drives the reveal, data-parallax="drift" the scroll
             drift), __mask / __mask-in (the two reveal masks, as CE-27 and
             CE-32), __img, __body (the text column), __eyebrow (.lf-eyebrow:
             „Wyróżnione · <topic>”), __title (H2), __lead, __meta (author,
             date, reading time), __more (text button „Czytaj wpis” with the
             kit's .lf-roll / .lf-swap)
   Variants: none
   Mechanics: site.js, ce/CE-32-case-media.js (drift) and a small
             ce/CE-40-post-featured.js (the start). Reveal: data-appear on
             __media gives .is-in when it scrolls into view (kit threshold) –
             or, when the block already stands in the first screen below that
             threshold, 400 ms after the H1 begins its sweep (the script, as
             the CE-27 cards at load); here .is-in uncovers the picture as the CE-27
             cards – the outer mask comes down from −100%, the inner one up
             from +100%, the picture settles from 1.2 to 1 (scale), the box
             grows from .95 to 1; .7 s power2.out. No grey box before and during
             the reveal (as CE-27).
             The kit's fade and rise of data-appear is switched off for the
             box. Drift: the picture is 120% of its frame and moves ±9.6% of
             the frame while it passes the window (the script of CE-32 –
             `transform` on the img; the reveal keeps `scale`). The text
             column rises in (data-appear, 150 ms later), the
             eyebrow codes in (kit). The title has no line reveal: its text
             sits in span.lf-line for the hover line, which a split would
             break. Hover (and
             keyboard focus): the picture zooms to 1.04 in 1.2 s
             ease-out-quart (`scale` of the inner mask), the title's line is
             drawn under it (kit .lf-line, 0.3 s), the button rolls (.lf-roll,
             .lf-swap). Reduced motion: no reveal, no drift, no zoom.
   Layout:   hi-fi on the kit: picture 7 / 12 of the width on the left
             (16 : 10.5), text on the right aligned to the bottom; title
             clamp 28–44 px Expanded Regular (line 1.15, −.03em, #1D1D1E),
             lead 17–19 px #1D1D1E 70%, meta 13 px #778181. ≤ 900 px one
             column: picture, then text.
   Base:     insights.html#wyrozniony · registry: ce-registry.js → CE-40
   =========================================================================== */

.ce-post-featured { padding-block: clamp(40px, 4.5vw, 72px) 0; }

.ce-post-featured__link {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  align-items: end;
  gap: clamp(28px, 4.2vw, 72px);
  color: inherit;
  text-decoration: none;
}
.ce-post-featured__link:focus-visible { outline: 2px solid var(--ui-ink); outline-offset: 6px; }

/* ---- picture -------------------------------------------------------------- */
.ce-post-featured__media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 10.5;
  background: var(--box);
}
.ce-post-featured__mask,
.ce-post-featured__mask-in {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.ce-post-featured__mask-in { transition: scale 1.2s var(--ease-out-quart); }
/* --par-over: the margin of the scroll drift (set by ce/CE-32-case-media.js) */
.ce-post-featured__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;
}

/* ---- text ----------------------------------------------------------------- */
.ce-post-featured__body { padding-bottom: 4px; }
.ce-post-featured__eyebrow { margin-bottom: clamp(18px, 1.8vw, 28px); }
.ce-post-featured__title {
  font-family: var(--font-heading);
  font-size: clamp(1.75rem, 2.75vw, 44px);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -.03em;
  color: var(--ui-ink);
  text-wrap: balance;
}
.ce-post-featured__lead {
  margin-top: clamp(16px, 1.5vw, 24px);
  max-width: 34em;
  font-size: clamp(1.0625rem, 1.2vw, 1.1875rem);
  line-height: 1.6;
  color: rgba(29, 29, 30, .7);
}
.ce-post-featured__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 0;
  margin-top: clamp(18px, 1.8vw, 28px);
  font-size: .8125rem;
  line-height: 1.4;
  color: var(--ui-muted);
}
.ce-post-featured__meta > * + *::before {
  content: "";
  display: inline-block;
  width: 3px;
  height: 3px;
  margin: 0 10px;
  border-radius: 1px;
  background: currentColor;
  vertical-align: middle;
}
.ce-post-featured__more {
  display: inline-flex;
  align-items: center;
  gap: 15.5px;
  margin-top: clamp(24px, 2.4vw, 40px);
  color: var(--ui-button-2);
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 500;
  line-height: 20px;
}
.ce-post-featured__more .lf-btn__icon { width: 10.2803px; height: 10.2803px; }
.ce-post-featured__more .lf-swap > img { width: 10.2803px; height: 10.2803px; margin: -5.14px 0 0 -5.14px; }

@media (max-width: 900px) {
  .ce-post-featured__link { grid-template-columns: minmax(0, 1fr); }
}

/* ---- reveal and hover ------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .cr-js .ce-post-featured__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) var(--appear-delay, 0ms);
  }
  .cr-js .ce-post-featured__media .ce-post-featured__mask { transform: translateY(-100%); }
  .cr-js .ce-post-featured__media .ce-post-featured__mask-in { transform: translateY(100%); }
  .cr-js .ce-post-featured__media .ce-post-featured__img { scale: 1.2; }
  .cr-js .ce-post-featured__media :is(.ce-post-featured__mask, .ce-post-featured__mask-in) {
    transition: transform .7s var(--ease-out-power2) var(--appear-delay, 0ms), scale 1.2s var(--ease-out-quart);
  }
  .cr-js .ce-post-featured__media .ce-post-featured__img { transition: scale .7s var(--ease-out-power2) var(--appear-delay, 0ms); }
  .cr-js .ce-post-featured__media.is-in,
  .cr-js .ce-post-featured__media.is-in :is(.ce-post-featured__mask, .ce-post-featured__mask-in) { transform: none; }
  .cr-js .ce-post-featured__media.is-in .ce-post-featured__img { scale: 1; }

  .ce-post-featured__link:is(:hover, :focus-visible) .ce-post-featured__mask-in { scale: 1.04; }
}
.ce-post-featured__link:is(:hover, :focus-visible) .ce-post-featured__title .lf-line {
  background-size: 100% 1px;
  background-position: 0 var(--line-y);
}