/* ===========================================================================
   CE-31 · Otwarcie realizacji (case study opening)
   Root:     section.ce-case-open – the first block of a case study page,
             right under the shared header (CE-01)
   Parts:    __title (H1, the client's name), __bar (subtitle on the left,
             button on the right, bottom-aligned), __subtitle (one sentence
             about the project), __btn (the notched UI button: __btn-label
             with the kit's .lf-roll, __btn-icon with .lf-swap)
   Variants: none yet. The design keeps a hidden „Zobacz online” button
             (Figma 4065:7288) for a link to the live site – a variant to add
             when a case needs it.
   Mechanics: site.js only – the H1 rises out of its mask
             (data-reveal-text="rise"), the subtitle comes in with
             data-appear, the button grows in with data-pop; hover as every
             UI button (.lf-roll / .lf-swap).
   Layout:   Figma web-design-2026, frame 4065:7265 „Case 01”, node 4065:7284
             (1512 px frame): H1 100 px Expanded Regular, line 109, −6 px,
             #1D1D1E; 47 px to the bar; subtitle 24 px, −0.72 px, #778181;
             button 177 × 33, #202121, radius 3, a V-notch at the top and
             bottom edge 34 px from the right, label 13 px white. The title
             stands 80 px under the header line (100 px from the sticky
             header here) and 189 px above the first picture. 1:1 at 1512 px,
             proportionally less below with floors; ≤ 640 px the button
             wraps under the subtitle.
   Base:     realizacje/drutplast/#realizacja · registry: CE-31
   =========================================================================== */

.ce-case-open {
  padding-block: clamp(40px, 6.614vw, 100px) clamp(56px, 12.5vw, 189px);
}

.ce-case-open__title {
  margin: 0;
  font-family: var(--font-heading);
  font-size: clamp(56px, 6.614vw, 100px);
  font-weight: 400;
  line-height: 1.09;                     /* 109 px at 100 px */
  letter-spacing: -.06em;                /* −6 px at 100 px, as in Figma */
  color: var(--ui-ink);
}

.ce-case-open__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px 40px;
  margin-top: clamp(20px, 3.108vw, 47px);
}

.ce-case-open__subtitle {
  flex: 0 1 auto;
  margin: 0;
  font-family: var(--font-heading);
  font-size: clamp(17px, 1.587vw, 24px);
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: -.03em;                /* −0.72 px at 24 px */
  color: var(--ui-muted);
}

/* ---- the notched button (Figma 4248:1056) ---------------------------------- */
/* A dark bar with a small V cut into its top and bottom edge where the icon
   cell starts – drawn with two triangles in the page colour (--notch), so the
   button keeps any label width. */
.ce-case-open__btn {
  --notch: var(--bg);
  --icon-w: 34.25px;                     /* the icon cell: 177 − 142.75 */
  position: relative;
  display: inline-flex;
  align-items: stretch;
  flex: none;
  min-width: 177px;
  height: 33px;
  border-radius: 3px;
  background: #202121;
  color: #fff;
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 400;
  line-height: 16px;
  letter-spacing: .01em;                 /* 0.13 px */
  text-decoration: none;
  transition: background-color .2s ease;
}
.ce-case-open__btn:hover { background: #3a3a3a; }
.ce-case-open__btn:focus-visible { outline: 2px solid var(--ui-ink); outline-offset: 3px; }
.ce-case-open__btn::before,
.ce-case-open__btn::after {
  content: "";
  position: absolute;
  right: calc(var(--icon-w) - 3.38px);
  width: 6.76px;
  height: 3.52px;
  background: var(--notch);
}
.ce-case-open__btn::before { top: 0; clip-path: polygon(0 0, 100% 0, 50% 100%); }
.ce-case-open__btn::after { bottom: 0; clip-path: polygon(50% 0, 100% 100%, 0 100%); }

.ce-case-open__btn-label {
  flex: 1 1 auto;
  align-self: center;
  padding: 0 24px 1px 11px;
}
.ce-case-open__btn-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: var(--icon-w);
}
.ce-case-open__btn-icon img { width: 9.3333px; height: 9.3333px; }

@media (max-width: 640px) {
  .ce-case-open__bar { align-items: flex-start; flex-direction: column; }
}