/* ===========================================================================
   CE-50 · Popup usługi (service description in a dialog)
   Root:     dialog.ce-svc-popup (#okno-uslugi) at the end of CE-48 (Usługi
             v6.1, 01.10; until 30.09 at the end of CE-49) – one dialog for
             the 24 services
   Parts:    __list (the descriptions of one home – on Usługi inside its
             card, also .ce-svc-stack__services of CE-48), __item (article
             id = the service's slug, data-home = the id of its home – the
             card, with data-num and data-name), __alias (empty old
             anchor), __body (__title H3,
             __text, __actions with the UI button „Zapytaj o …” – data-topic
             = the home card, data-service = the service), __card (the white
             card of the dialog), __top (__home – a link to the home card:
             __home-num, __home-name; __close), __slot (where the article
             sits while the dialog is open; scrolls on its own)
   States:   [open] + .is-open (in) / .is-closing (out) on the root;
             .is-swap on __slot (the content of another service fades
             in); .is-found on __item (revealed in its card by Ctrl+F)
   Mechanics: ce/CE-50-service-popup.js – a click on a service's link
             (href="#slug", its own router since 01.10) moves its article into the
             dialog and opens it modal (showModal: the page is inert, focus
             on the H3, Tab stays in the dialog). Since 01.10 (Mateusz:
             „open it on the right side of the screen, like «zapytanie
             ofertowe»”) the card is the drawer's (CE-03, chrome.js): on the
             right, uncovered from its top edge downwards (clip-path,
             --panel-t 325 ms ease-in) over the #1D1D1E 55% backdrop, the
             content fading in and rising 20 px from --panel-in (260 ms).
             Close: X, Escape, a click on the backdrop – the content fades
             and sinks at once, the card rolls back up from --panel-lag
             (520 ms in all), the article goes back to its card (hidden
             again), the address comes back, focus returns to the link.
             No previous / next service (removed 01.10 with the nav at the
             bottom); a link to another service in the text swaps the
             content in place. „Zapytaj o …” closes the
             dialog and opens the drawer (CE-03) with the topic and the
             line „Dotyczy: <usługa>” (chrome.js). Without JS the articles
             stand in their homes as ordinary sections (styles below);
             with JS they are hidden="until-found" (Ctrl+F shows one in
             its home, .is-found) – before the script by html.cr-js
             without html.cr-svc-ready.
   Layout:   the card as the drawer: 572 px wide (the window minus the
             insets), the window's height, 16 px from the top, right and
             bottom (8 px ≤ 640 px), corners 12 px, no shadow; header row
             20 px from the top and right, 40 px from the left – the home
             card in 12 px Expanded Medium capitals #0A2526 at 65% and the
             X 64 × 44 on #EDEDED (the drawer's); the service 40 px from the
             sides: H3 36 px Expanded Regular −.04em, text 18 px line 1.55,
             the UI button 32 px lower; a longer text scrolls in __slot.
             ≤ 640 px a long button label wraps – in the dialog and in the
             card alike.
             In its home card (no JS, Ctrl+F): a 1 px line on top, H3 26 px.
             Secondary text #0A2526 at 65% (--ui-text-65, 5 : 1).
   Base:     uslugi.html#okno-uslugi (shot with #aplikacja-webowa in the
             address) · registry: ce-registry.js → CE-50
   =========================================================================== */

/* ---- the article in its home (no JS, or revealed by Ctrl+F) ------------------ */
.ce-svc-popup__item { position: relative; }
/* hidden="until-found": the kit's [hidden] {display: none !important} would
   keep it from the browser's find-in-page – the UA's content-visibility
   hides it instead */
.ce-svc-popup__item[hidden="until-found"] { display: block !important; }
/* before the script (html.cr-js from chrome.js, the first frame): hidden */
.cr-js:not(.cr-svc-ready) .ce-svc-popup__list > .ce-svc-popup__item { display: none; }
.ce-svc-popup__alias {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}
:is(.ce-svc-popup__list, .ce-svc-tabs__services) .ce-svc-popup__body {
  max-width: 50rem;
  padding-block: clamp(28px, 2.78vw, 40px);
  border-top: 1px solid var(--st-line, var(--ui-stroke-soft));
}
:is(.ce-svc-popup__list, .ce-svc-tabs__services) .ce-svc-popup__item:first-child .ce-svc-popup__body,
:is(.ce-svc-popup__list, .ce-svc-tabs__services) .ce-svc-popup__item.is-found .ce-svc-popup__body { margin-top: clamp(32px, 3.33vw, 48px); }

.ce-svc-popup__title {
  font-family: var(--font-heading);
  font-size: clamp(1.375rem, 1.806vw, 26px);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -.035em;
  color: var(--ui-ink);
  text-wrap: balance;
}
.ce-svc-popup__text {
  max-width: 38em;
  margin-top: clamp(14px, 1.39vw, 20px);
  font-size: clamp(1rem, 1.25vw, 18px);
  line-height: 1.55;
  letter-spacing: -.01em;
  color: var(--ui-text);
  text-wrap: pretty;
}
.ce-svc-popup__text .lf-link { color: var(--ui-ink); }
.ce-svc-popup__actions { margin-top: clamp(24px, 2.22vw, 32px); }

/* ---- the dialog ------------------------------------------------------------------ */
.ce-svc-popup {
  --pp-inset: 16px;
  --st-line: var(--ui-stroke-soft);
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: var(--pp-inset);
  border: 0;
  background: transparent;
  color: var(--ui-text);
  overflow: hidden;
  overscroll-behavior: contain;
}
/* The card on the right, as the drawer (CE-03): the dialog spans the
   window – its own box is the backdrop's click area – and lays the card
   against its right edge, the window's height minus the insets. */
.ce-svc-popup[open] {
  display: grid;
  justify-items: end;
  align-items: stretch;
}
/* the scrim's timing (chrome.js): in with the card, out after the lag */
.ce-svc-popup::backdrop {
  background: rgba(29, 29, 30, 0);
  transition: background-color var(--panel-t, 325ms) var(--panel-ease, ease) var(--panel-lag, 195ms);
}
.ce-svc-popup.is-open::backdrop {
  background: var(--ui-scrim);
  transition: background-color var(--panel-t, 325ms) var(--panel-ease, ease);
}

/* The drawer's card and motion (chrome.js, 26.09 – pattern
   visacenter.chipsa.design): uncovered from its top edge downwards, the
   content – header row and text – comes in once the card is almost down;
   closing: the content goes at once, the card rolls back up after the lag. */
.ce-svc-popup__card {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(572px, 100%);
  height: 100%;
  overflow: hidden;
  border-radius: 12px;
  background: #fff;
  clip-path: inset(0 0 100% 0 round 12px);
  transition: clip-path var(--panel-t, 325ms) var(--panel-ease-in, ease-in) var(--panel-lag, 195ms);
}
.ce-svc-popup.is-open .ce-svc-popup__card {
  clip-path: inset(0 0 0 0 round 12px);
  transition: clip-path var(--panel-t, 325ms) var(--panel-ease-in, ease-in);
}
.ce-svc-popup__card > * {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity var(--panel-t, 325ms) var(--panel-ease, ease), transform var(--panel-t, 325ms) var(--panel-ease, ease);
}
.ce-svc-popup.is-open .ce-svc-popup__card > * {
  opacity: 1;
  transform: none;
  transition-delay: var(--panel-in, 260ms);
}
.ce-svc-popup.is-closing { pointer-events: none; }

.ce-svc-popup__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 20px 0 40px;
}
.ce-svc-popup__home {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .5em;
  min-width: 0;
  font-family: var(--font-heading);
  font-size: .75rem;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--ui-text-65);
  text-decoration: none;
  transition: color .2s ease;
}
.ce-svc-popup__home:hover { color: var(--ui-ink); }
.ce-svc-popup__home-num { font-weight: 400; font-variant-numeric: tabular-nums; }
.ce-svc-popup__close {
  display: grid;
  place-items: center;
  flex: none;
  width: 64px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: var(--ui-close-bg);
  cursor: pointer;
  transition: background-color .2s ease;
}
.ce-svc-popup__close:hover { background: color-mix(in srgb, var(--ui-close-bg), #000 6%); }
.ce-svc-popup__close-icon { width: 10.6667px; height: 10.6667px; transition: transform .35s var(--ease-out-quart); }
.ce-svc-popup__close:hover .ce-svc-popup__close-icon { transform: rotate(90deg); }
.ce-svc-popup :focus-visible { outline: 2px solid var(--ui-ink); outline-offset: 2px; }
/* the H3 takes the focus on opening (tabindex -1) only to be read out */
.ce-svc-popup .ce-svc-popup__title:focus,
.ce-svc-popup .ce-svc-popup__title:focus-visible { outline: none; }

.ce-svc-popup__slot {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: clamp(28px, 2.78vw, 40px) 40px 64px;
}
.ce-svc-popup__slot .ce-svc-popup__title {
  font-size: clamp(1.625rem, 2.5vw, 36px);
  line-height: 1.12;
  letter-spacing: -.04em;
}
.ce-svc-popup__slot .ce-svc-popup__text { margin-top: clamp(16px, 1.67vw, 24px); }

/* another service (a link in the text): the new content fades in */
@keyframes ce-svc-popup-swap { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.ce-svc-popup__slot.is-swap > * { animation: ce-svc-popup-swap .35s var(--ease-out-quart) both; }

@media (max-width: 640px) {
  .ce-svc-popup { --pp-inset: 8px; }
  .ce-svc-popup__top { padding: 20px 20px 0 24px; }
  /* „(01)” stays on the line of the card's name */
  .ce-svc-popup__home { flex-wrap: nowrap; }
  .ce-svc-popup__home-name { min-width: 0; }
  .ce-svc-popup__slot { padding: 28px 24px 40px; }
  /* a long label wraps – in the dialog, and in the card when Ctrl+F (or a
     page without JS) shows the article there (01.10: five buttons ran off
     a 375 px window) */
  :is(.ce-svc-popup, .ce-svc-popup__item) .lf-btn--ui { max-width: 100%; height: auto; min-height: 40px; padding-block: 11px 12px; }
  /* a label in two lines: the lines apart, the last word not alone */
  :is(.ce-svc-popup, .ce-svc-popup__item) .lf-btn--ui .lf-roll { white-space: normal; line-height: 1.25; text-wrap: balance; }
}

@media (prefers-reduced-motion: reduce) {
  .ce-svc-popup__card,
  .ce-svc-popup.is-open .ce-svc-popup__card { clip-path: inset(0 0 0 0 round 12px); transition: none; }
  .ce-svc-popup__card > *,
  .ce-svc-popup.is-open .ce-svc-popup__card > * { opacity: 1; transform: none; transition: none; }
  .ce-svc-popup::backdrop,
  .ce-svc-popup.is-open::backdrop { background: var(--ui-scrim); transition: none; }
  .ce-svc-popup__slot.is-swap > * { animation: none; }
  .ce-svc-popup__close-icon { transition: none; }
}