/* /servicii on the canvas (src/lib/servicii-page.ts). The canvas rules of home.css without its type and component
   styles, so the migrated page's own CSS keeps styling every block as before: each panel is one 1440 x 900 drawing
   scaled by --uz (height sets it; narrow windows fall back to width) and pinned to the panel's bottom edge. */
:root { --uz: min(tan(atan2(100vh, 900px)), tan(atan2(100vw, 1280px))); }
.dpx-p { position: relative; flex: none; width: calc(1440px * var(--uz)); height: 100vh; overflow: hidden; background: var(--dpx-bg, #fff); }
.dp-astro-horizontal .dp-horizontal-track > section.dpx-p { flex: 0 0 calc(1440px * var(--uz)) !important; width: calc(1440px * var(--uz)) !important; overflow: hidden; }
/* Not horizontal (narrow windows): the panels stack, each scaled to the screen width. */
body[data-horizontal-page]:not(.dp-desktop-horizontal) #siteWrapper section.page-section.dpx-p, body:not(.dp-desktop-horizontal) .dpx-p { --uz: tan(atan2(100vw, 1440px)); width: 100vw !important; height: calc(900px * var(--uz)) !important; min-height: 0 !important; }
.dpx-c { position: absolute; left: 0; bottom: 0; width: 1440px; height: 900px; zoom: var(--uz); }
.dpx-b { position: absolute; left: calc(var(--x, 0) * 1px); top: calc(var(--y, 0) * 1px); width: calc(var(--w, 0) * 1px); height: calc(var(--h, 0) * 1px); margin: 0; }

/* Every migrated block fills the box measured for it; the section's padding, height and Fluid Engine grid no longer
   apply, and the vertical alignment and padding the grid gave each block come from the measurement. */
#siteWrapper section.page-section.dps-p { padding: 0 !important; min-height: 0 !important; }
.dps-b > .fe-block { position: absolute !important; inset: 0 !important; width: auto !important; height: auto !important; grid-area: auto !important; margin: 0 !important; transform: none !important; }
.dps-b > .fe-block > .sqs-block { display: flex; flex-direction: column; justify-content: var(--dps-align); height: 100%; padding: var(--dps-pad) !important; box-sizing: var(--dps-sizing); }
/* Panel background (video or photo), as the migrated section drew it: 1 px past the top left edge. */
.dps-bg { position: absolute; top: -1px; left: -1px; width: 100%; height: 100%; object-fit: cover; }

/* Technology panel: a soft dark band behind the white text, and the photo a hovered technology fades in. */
.dps-shade { background: rgba(24, 24, 24, .5); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.dps-bg--swap { opacity: 0; transition: opacity .6s var(--ease-modal, ease); }

/* Service tabs on desktop: the modal's content in a bubble above the tab, opened by hover or keyboard focus, in the
   courses bubble's style on /echipa. The bars let it out (their corners are kept on the end tabs). */
.dps-p :is(.dp-signature-tabs, .dp-complex-tabs, .dp-services-tabs) { overflow: visible !important; }
.dps-p .dps-tab { position: relative; }
.dps-p .dps-tab:first-child { border-top-left-radius: inherit; border-bottom-left-radius: inherit; }
.dps-p .dps-tab:last-child { border-top-right-radius: inherit; border-bottom-right-radius: inherit; }
.dps-bubble { position: absolute; bottom: calc(100% + 18px); left: 50%; z-index: 30; width: 440px; box-sizing: border-box; padding: 32px 36px; border-radius: 24px; background: #fff; color: #1f1f1f; text-align: left; white-space: normal; cursor: default;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .22), 0 4px 14px rgba(0, 0, 0, .1); transform: translate(-50%, 8px); opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .3s var(--ease-modal, ease), transform .3s var(--ease-modal, ease), visibility .3s; }
/* The tail, and an invisible bridge over the gap so the pointer can travel from the tab into the bubble. */
.dps-bubble::after { content: ''; position: absolute; top: 100%; left: calc(50% - 10px); border: 10px solid transparent; border-top-color: #fff; }
.dps-bubble::before { content: ''; position: absolute; top: 100%; left: 0; right: 0; height: 20px; }
.dps-tab:first-child .dps-bubble { left: 0; transform: translate(0, 8px); }
.dps-tab:first-child .dps-bubble::after { left: 40px; }
.dps-tab:last-child .dps-bubble { left: auto; right: 0; transform: translate(0, 8px); }
.dps-tab:last-child .dps-bubble::after { left: auto; right: 40px; }
.dps-tab:is(:hover, :focus-visible) .dps-bubble { opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, 0); }
.dps-tab:is(:first-child, :last-child):is(:hover, :focus-visible) .dps-bubble { transform: none; }
.dps-bubble__in { max-height: 520px; overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.dps-bubble .dp-modal__title { padding-right: 0; }
.dps-bubble .dp-modal__list:last-child, .dps-bubble .dp-modal__desc:last-child { margin-bottom: 0; }
@media (prefers-reduced-motion: reduce) { .dps-bubble, .dps-bg--swap { transition: none; } }