/* /echipa (desktop strip, src/lib/team-page.ts) on the home page's canvas system (home.css). The composition follows
   the original page: doctors in front of the band, the band changing shape along the strip, small names on it.
   Type: 64 hero, 60 section titles, 32 statements, 16 body; names 16, roles 10 px caps. Every text starts at y 218. */

/* The band (--dpe-band, an SVG of the whole strip written by team-page.ts) is the track's own background: one image,
   no joins. Panels are transparent over it. Canvas y 0-900 is the panel's bottom 900 x --uz px. */
/* Panels show part of their 1440 px drawing (--crop from the left, --pw wide), so a few panels are narrower and the
   doctors closer together. The band background is positioned along the whole strip (--dpe-total canvas px). */
.dpe .dp-horizontal-track { background: var(--dpe-band) 0 100% / calc(var(--dpe-total) * 1px * var(--uz)) calc(900px * var(--uz)) no-repeat, #fff; }
.dpe .dpx-p { --dpx-bg: transparent; }
.dpe .dp-astro-horizontal .dp-horizontal-track > section.dpx-p.dpe-p { flex-basis: calc(var(--pw) * 1px * var(--uz)) !important; width: calc(var(--pw) * 1px * var(--uz)) !important; }
body.dp-desktop-horizontal .dpe .dpx-c { left: calc(var(--crop) * -1px); }
/* Stacked (narrow windows): every panel shows its whole drawing and its own slice of the band, at its own scale. */
body:not(.dp-desktop-horizontal) .dpe .dpx-p { background: var(--dpe-band) calc(var(--start) * -1px * var(--uz)) 100% / calc(var(--dpe-total) * 1px * var(--uz)) calc(900px * var(--uz)) no-repeat, #fff; }

/* The migrated site CSS spaces headings and paragraphs; on the canvas only the stack gaps below set spacing. */
.dpx-c :is(.dpe-stack, .dpe-cap) :is(h1, h2, h3, p, blockquote, ol, li, dl, dt, dd) { margin: 0; }

/* ---------- captions: small, centred, on the band ---------- */
.dpe-cap { z-index: 6; display: flex; align-items: center; justify-content: center; text-align: center; color: #fff; }
.dpe-cap__in { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.dpe-cap__btn { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 0; background: none; border: 0; color: inherit; font: inherit; text-align: center; }
button.dpe-cap__btn { cursor: pointer; }
.dpx-c .dpe-cap__name { font: 600 16px/22px var(--dpx-display); color: inherit; }
.dpx-c .dpe-cap__role { font: 500 10px/15px var(--dpx-display); letter-spacing: .08em; text-transform: uppercase; color: inherit; opacity: .72; max-width: 240px; }
.dpe-cap__plus { margin-top: 4px; font: 400 18px/1 var(--dpx-display); color: var(--dp-accent); transition: transform .3s var(--ease-modal); }
.dpx-c .dpe-cap__name { transition: color .25s var(--ease-modal); }
.dpe-cap__link { font: 600 10px/15px var(--dpx-display); letter-spacing: .08em; text-transform: uppercase; color: var(--dp-accent); text-decoration: none; }
.dpe-cap--dark { color: #1f1f1f; }
.dpe-cap--dark .dpe-cap__plus { color: var(--dp-accent-d1); }
@media (hover: hover) { button.dpe-cap__btn:hover .dpe-cap__plus { transform: rotate(45deg); } .dpe-cap__in:hover .dpe-cap__name { color: var(--dp-accent); } .dpe-cap__link:hover { text-decoration: underline; text-underline-offset: 3px; } }
button.dpe-cap__btn:focus-visible, .dpe-cap__link:focus-visible { outline: 2px solid var(--dp-accent); outline-offset: 4px; border-radius: 4px; }

/* ---------- stage text ---------- */
.dpe-stack { z-index: 5; display: flex; flex-direction: column; gap: 24px; color: #1f1f1f; }
.dpe-stack--center { align-items: center; text-align: center; }
.dpx-c .dpe-h1 { font: 700 64px/72px var(--dpx-display); text-wrap: balance; }
.dpx-c .dpe-hero-sub { font: 400 19.2px/30px var(--dpx-display); }
.dpx-c .dpe-title { font: 700 60px/68px var(--dpx-display); text-wrap: balance; }
.dpx-c .dpe-green { color: var(--dp-accent); }
.dpx-c .dpe-sub { font: 200 32px/40px var(--dpx-display); text-wrap: balance; }
.dpx-c .dpe-stmt { font: 700 32px/40px var(--dpx-display); text-wrap: balance; }
.dpx-c .dpe-body { font: 400 16px/26px var(--dpx-display); color: #1f1f1f; }
.dpx-c .dpe-lead { z-index: 5; font: 700 32px/40px var(--dpx-display); color: #fff; text-wrap: balance; }
.dpx-c .dpe-msg { font: 600 20px/28px var(--dpx-display); color: var(--dp-accent-d1); }
.dpe-quote { margin: 0; }
.dpx-c .dpe-quote p { font: 500 24px/34px var(--dpx-display); text-wrap: balance; }

/* Steps of a complex case, in a column on their tile. */
.dpe-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 20px; }
.dpe-steps li { display: flex; flex-direction: column; gap: 6px; }
.dpx-c .dpe-steps h3 { font: 700 19.2px/28px var(--dpx-display); }
.dpx-c .dpe-steps h3 span { color: var(--dp-accent-d1); }
.dpx-c .dpe-steps p { font: 400 16px/26px var(--dpx-display); color: #1f1f1f; }

/* Closing panel: text in white on the dark contact block. */
.dpe-stack--dark { color: #fff; }
.dpx-c .dpe-stack--dark .dpe-body { color: #fff; }
/* Closing panel, as on the original: 44 px titles, 19 px body for Educație continuă. */
.dpx-c .dpe-stack--final .dpe-title { font-size: 44px; line-height: 54px; }
.dpx-c .dpe-stack--final:not(.dpe-stack--dark) .dpe-body { font-size: 19.2px; line-height: 30px; }
.dpe-contact { display: flex; flex-direction: column; margin-top: 24px; }
.dpe-contact > div { display: flex; align-items: center; justify-content: space-between; padding: 20px 0; border-bottom: 1px solid rgba(255, 255, 255, .12); }
.dpe-contact > div:last-child { border-bottom: 0; }
.dpx-c .dpe-contact dt { font: 600 13px/20px var(--dpx-display); letter-spacing: .08em; text-transform: uppercase; color: var(--dp-accent); }
.dpe-contact a { font: 400 16px/24px var(--dpx-display); color: #fff; text-decoration: none; }
.dpx-c .dpe-contact--muted dt { color: rgba(255, 255, 255, .5); }
@media (hover: hover) { .dpe-contact a:hover { color: var(--dp-accent); } }

/* ---------- courses bubble (on hover or focus of a name) ---------- */
.dpe-bubble { position: absolute; bottom: calc(100% + 18px); left: 50%; z-index: 20; width: 380px; max-height: 520px; overflow: auto; box-sizing: border-box; padding: 32px 36px; border-radius: 24px; background: #fff; color: #1f1f1f; text-align: left; box-shadow: 0 24px 60px rgba(0, 0, 0, .22), 0 4px 14px rgba(0, 0, 0, .1); transform: translate(calc(-50% + var(--shift) * 1px), 8px); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .3s var(--ease-modal), transform .3s var(--ease-modal), visibility .3s; }
.dpe-bubble { overflow: visible; }
.dpe-bubble ul { max-height: 420px; overflow: auto; }
.dpe-bubble::after { content: ''; position: absolute; top: 100%; left: calc(50% - var(--shift) * 1px - 10px); border: 10px solid transparent; border-top-color: #fff; }
.dpe-cap__in:hover .dpe-bubble, .dpe-cap__in:focus-within .dpe-bubble { opacity: 1; visibility: visible; pointer-events: auto; transform: translate(calc(-50% + var(--shift) * 1px), 0); }
.dpx-c .dpe-bubble__label { margin: 0 0 16px; padding-bottom: 16px; font: 600 13px/16px var(--dpx-display); letter-spacing: .1em; text-transform: uppercase; color: var(--dp-accent-d1); background: linear-gradient(var(--dp-accent), var(--dp-accent)) 0 100% / 40px 1px no-repeat; }
.dpe-bubble ul { list-style: none; margin: 0; padding: 0; }
.dpe-bubble li { display: flex; flex-direction: column; gap: 2px; padding: 12px 0; border-top: 1px solid rgba(0, 0, 0, .08); }
.dpe-bubble li:first-child { border-top: 0; padding-top: 0; }
.dpe-bubble__title { font: 600 16px/22px var(--dpx-display); }
.dpe-bubble__meta { font: 400 13px/18px var(--dpx-display); color: rgba(31, 31, 31, .55); }

/* ---------- scroll hint on the first panel: three outlined triangles pointing on ---------- */
.dpe .dp-hscroll-hint { display: none; }
.dpe-hint { z-index: 4; display: flex; align-items: center; gap: 6px; pointer-events: none; }
.dpe-hint svg { width: 24px; height: 24px; fill: none; stroke: rgba(31, 31, 31, .34); stroke-width: 2; stroke-linejoin: round; animation: dpeHint 2.4s ease-in-out infinite; }
.dpe-hint svg:nth-child(2) { animation-delay: .2s; }
.dpe-hint svg:nth-child(3) { animation-delay: .4s; }
@keyframes dpeHint { 0%, 60%, 100% { opacity: .45; } 30% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .dpe-hint svg { animation: none; } }
.dpe-p--pasi .dpx-c .dpe-body { max-width: 340px; }
/* Both pillars in one block (panel 4), narrow enough that Dr. Radu and Dr. Zamfir share one frame: statement-size
   green titles, a hairline between the two. The block runs past its panel's edge into the next panel's white. */
.dpx-c .dpe-stack--pillars { gap: 10px; }
.dpx-c .dpe-stack--pillars .dpe-title { font-size: 32px; line-height: 40px; }
.dpx-c .dpe-stack--pillars .dpe-title:not(:first-child) { margin-top: 10px; padding-top: 22px; border-top: 1px solid rgba(31, 31, 31, .12); }
body.dp-desktop-horizontal .dpe .dp-horizontal-track > section.dpe-p--spill { overflow: visible; }