/* ===========================================================================
   CE-43 · Otwarcie wpisu (post opening)
   Root:     section.ce-post-open (in .lf-wrap) – the first block of an
             Insights post, above its main picture (CE-32 cover)
   Parts:    __top (one row: __crumbs on the left, __facts on the right),
             __crumbs (nav „Okruszki”: ol of text links Insights → topic;
             the topic link opens the list filtered, insights.html?temat=…),
             __facts (dl: date and reading time; the dt labels code in),
             __title (the page's only H1), __bar (two columns: __lead on the
             left, __meta on the right), __meta / __author (photo __photo – a
             round crop of a larger picture, __name, __role)
   Variants: none
   Mechanics: site.js only – the H1 comes in with the sweep of the CE-30
             page head (data-reveal-text="sweep"), the lead and the meta
             rise in (data-appear, 250 / 350 ms), the dt labels code in
             ([data-code], kit). Links: the kit's rest and hover line
             (.lf-line.lf-line--rest). Reduced motion: shown at once.
   Layout:   hi-fi on the kit, after CE-30. Top row: crumbs 14 px #778181
             with a „/” between; the facts at its right end (labels 12 px
             uppercase Expanded Medium #778181, values 14 px, 32 px apart).
             H1 as CE-30 (clamp 32–60 px Expanded Regular, line 1.15,
             −.034em, #0A2526, 15.75 em wide) clamp 16–28 px under the row.
             Bar clamp 24–48 px under the H1: lead 7 / 12 (clamp 17–20 px
             Expanded Regular, line 1.5, −.02em, #1D1D1E) and the author
             4 / 12 at the right edge, aligned to the bottom – photo 56 px,
             name 15 px Expanded Medium, role 13 px #778181. Top clamp
             48–96 px, bottom clamp 40–64 px to the picture – tighter than
             CE-30, so the picture starts in the first screen (at 1440 × 900
             and 1280 × 800 its top at about 2/3 of the window, where CE-32
             uncovers it at load). ≤ 900 px one column.
   Base:     blog/co-to-jest-wordpress/#wpis · registry: ce-registry.js → CE-43
   =========================================================================== */

.ce-post-open {
  padding-block: clamp(48px, 6vw, 96px) clamp(40px, 3.9vw, 64px);
}

/* ---- top row: crumbs and facts --------------------------------------------------- */
.ce-post-open__top {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px 40px;
}
.ce-post-open__crumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 0;
  font-size: .875rem;
  line-height: 1.4;
  color: var(--ui-muted);
}
.ce-post-open__crumbs li + li::before {
  content: "/";
  padding-inline: 10px;
  color: rgba(119, 129, 129, .6);
}
.ce-post-open__crumbs a { color: var(--ui-ink); }

/* ---- title ------------------------------------------------------------------- */
.ce-post-open__title {
  max-width: 15.75em;
  margin-top: clamp(16px, 1.7vw, 28px);
  font-family: var(--font-heading);
  font-size: clamp(2rem, 3.75vw, 60px);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -.034em;
  color: var(--ui-text);
}

/* ---- lead and meta ------------------------------------------------------------ */
.ce-post-open__bar {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
  justify-content: space-between;
  align-items: end;
  gap: 40px clamp(40px, 8vw, 140px);
  margin-top: clamp(24px, 2.8vw, 48px);
}
.ce-post-open__lead {
  max-width: 38em;
  font-family: var(--font-heading);
  font-size: clamp(1.0625rem, 1.3vw, 1.25rem);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: -.02em;
  color: var(--ui-ink);
}

.ce-post-open__author {
  display: flex;
  align-items: center;
  gap: 16px;
}
/* the photo: a round crop of a larger picture (the face of
   assets/img/o-nas/project-manager.jpg: 218% wide, moved left) */
.ce-post-open__photo {
  position: relative;
  flex: none;
  width: 56px;
  height: 56px;
  overflow: hidden;
  border-radius: 50%;
  background: var(--box);
}
.ce-post-open__photo img {
  position: absolute;
  top: 0;
  left: var(--crop-x, -84%);
  width: var(--crop-w, 218%);
  max-width: none;
  height: auto;
}
.ce-post-open__name {
  display: block;
  font-family: var(--font-heading);
  font-size: .9375rem;
  font-weight: 500;
  line-height: 1.3;
  color: var(--ui-ink);
}
.ce-post-open__role {
  display: block;
  margin-top: 2px;
  font-size: .8125rem;
  line-height: 1.4;
  color: var(--ui-muted);
}

.ce-post-open__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 32px;
}
.ce-post-open__facts > div {
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.ce-post-open__facts dt {
  font-family: var(--font-heading);
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .015em;
  text-transform: uppercase;
  color: var(--ui-muted);
}
.ce-post-open__facts dd {
  font-family: var(--font-heading);
  font-size: .875rem;
  color: var(--ui-ink);
}

@media (max-width: 900px) {
  .ce-post-open__bar { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .ce-post-open__facts { column-gap: 20px; }
}