/* Кейс DL MED — оформление. Подключается только на странице кейса. Префикс dm-. Сцена макета — 1600 */

@font-face{font-family:'Onest DM';font-style:normal;font-weight:300 700;font-display:swap;
src:url(fonts/onest-cyrillic.woff2) format('woff2'),url(https://fonts.gstatic.com/s/onest/v11/gNMKW3F-SZuj7xmb-HYoEoeyxMI.woff2) format('woff2');
unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Onest DM';font-style:normal;font-weight:300 700;font-display:swap;
src:url(fonts/onest-latin.woff2) format('woff2'),url(https://fonts.gstatic.com/s/onest/v11/gNMKW3F-SZuj7xmf-HYoEoey.woff2) format('woff2');
unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

.dm{
--bl:#3365A7; --tl:#56B9C2; --rd:#D75C68; --dk:#161A25; --gt:#3D4858; --lb:#E1EAF5; --pg:#F8F9FC;
--u:calc(min(var(--cw,100vw),1600px)/1600);
position:relative;background:var(--pg);color:var(--dk);
font-family:'Onest DM','Onest',var(--font,'Inter'),system-ui,sans-serif;font-weight:400;
-webkit-font-smoothing:antialiased;overflow:hidden;isolation:isolate}
.dm :where(p,h2,h3,ul,li){margin:0;padding:0}
.dm :where(ul){list-style:none}
.dm :where(button){font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;text-align:inherit}
.dm :where(a){color:inherit;text-decoration:none}
.dm :where(img){display:block;width:100%;height:100%}

.dm-st{position:relative;width:calc(1600*var(--u));margin:0 auto}
.dm-b{position:relative;height:calc(var(--h)*var(--u))}
.dm-i{position:absolute;left:calc(var(--x)*var(--u));top:calc(var(--y)*var(--u))}
.dm-i[style*="--w"]{width:calc(var(--w)*var(--u))}
.dm-i[style*="--h"]{height:calc(var(--h)*var(--u))}
.dm-k{position:absolute;left:calc(var(--x)*var(--u));top:calc(var(--y)*var(--u));width:calc(var(--w)*var(--u));height:calc(var(--h)*var(--u));
border-radius:calc(20*var(--u));overflow:hidden;transform:translateZ(0)}
.dm-k--w{background:#fff}
.dm-k--l{background:var(--lb)}
.dm-k--b{background:var(--bl)}
.dm-full img{width:100%;height:100%}
.dm-k2{border-radius:calc(20*var(--u));overflow:hidden}
.dm-sh2 img{border-radius:calc(20*var(--u))}
.dm-phi{z-index:2}
.dm-sh{filter:drop-shadow(0 calc(30*var(--u)) calc(40*var(--u)) rgba(14,40,90,.28))}
.dm-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- подписи-«таблетки» ---------- */
.dm-pl{position:absolute;left:calc(var(--x)*var(--u));top:calc(var(--y)*var(--u));width:calc(var(--w)*var(--u));
display:flex;justify-content:space-between;z-index:3;pointer-events:none}
.dm-pl span{display:flex;align-items:center;justify-content:center;height:calc(34*var(--u));min-width:calc(36*var(--u));padding:0 calc(16*var(--u));box-sizing:border-box;
border:1px solid #CBD9EA;border-radius:calc(10*var(--u));font-size:calc(12*var(--u));line-height:1;text-transform:uppercase;color:var(--dk)}
.dm-pl span+span{padding:0}
.dm-pl--d span{border-color:rgba(255,255,255,.28);color:#fff}

/* ---------- типографика ---------- */
.dm-h2{font-size:calc(var(--fs)*var(--u));line-height:calc(var(--lh)*var(--u));font-weight:600;color:var(--dk)}
.dm-h2 i{font-style:normal;color:var(--bl)}
.dm-t{font-size:calc(var(--fs)*var(--u));line-height:calc(var(--lh)*var(--u))}
.dm-t--acc{font-weight:600;color:var(--bl)}
.dm-t--g{color:var(--gt)}
.dm-t--l{font-weight:300}
.dm-t--w{color:#fff}

/* ---------- 05 стеклянная карточка врача ---------- */
.dm-gl{box-sizing:border-box;padding:calc(30*var(--u));border-radius:calc(20*var(--u));
background:linear-gradient(135deg,rgba(255,255,255,.8),rgba(255,255,255,.2));
-webkit-backdrop-filter:blur(calc(14*var(--u)));backdrop-filter:blur(calc(14*var(--u)));
box-shadow:calc(20*var(--u)) calc(30*var(--u)) calc(40*var(--u)) rgba(43,82,102,.25);z-index:2}
.dm-gl__r{font-size:calc(16*var(--u));line-height:calc(22*var(--u));color:#646F76}
.dm-gl__n{margin-top:calc(9*var(--u));font-size:calc(24*var(--u));line-height:calc(31*var(--u));font-weight:600;color:var(--dk)}
.dm-gl__a{display:inline-block;margin-top:calc(20*var(--u));font-size:calc(14*var(--u));line-height:calc(18*var(--u));color:var(--tl);
background:linear-gradient(currentColor,currentColor) 0 100%/100% 1px no-repeat;transition:background-size .35s}
.dm-gl__a:is(:hover,:focus-visible){background-size:0 1px;background-position:100% 100%}

/* ---------- бесконечные ряды ---------- */
.dm-mq{position:absolute;left:0;top:calc(var(--y)*var(--u));width:100%;height:calc(var(--h)*var(--u));pointer-events:none}
.dm-mq__t{display:flex;width:max-content;will-change:transform}
.dm-mq__t img{flex:none;width:calc(var(--w)*var(--u));height:100%}
.dm-mq--sp .dm-mq__t{gap:calc(var(--gap)*var(--u))}

/* ---------- 06 Onest ---------- */
.dm-on{font-size:calc(228.8*var(--u));line-height:calc(292*var(--u));font-weight:var(--wg,600);font-variation-settings:'wght' var(--wg,600);
letter-spacing:0;white-space:nowrap;overflow:hidden;color:var(--dk)}
.dm-ch{display:inline-block;will-change:transform}
.dm-wt{display:flex;gap:calc(30*var(--u))}
.dm-wt button{position:relative;font-size:calc(18*var(--u));line-height:calc(23*var(--u));font-weight:600;text-transform:uppercase;color:rgba(22,26,37,.4);transition:color .3s}
.dm-wt button::after{content:'';position:absolute;left:0;right:0;bottom:calc(-6*var(--u));height:2px;background:var(--bl);transform:scaleX(0);transform-origin:0 50%;transition:transform .35s}
.dm-wt li.is-on button,.dm-wt button:is(:hover,:focus-visible){color:var(--dk)}
.dm-wt li.is-on button::after{transform:scaleX(1)}

/* ---------- 07 цвета ---------- */
.dm-cl{border-radius:calc(20*var(--u));overflow:hidden}
.dm-cl img{position:absolute;inset:0}
.dm-cl__h{position:absolute;left:calc(32*var(--u));top:calc(30*var(--u));font-size:calc(15*var(--u));line-height:calc(22*var(--u));color:#fff;text-transform:uppercase;z-index:1}
.dm-cl__h--b{top:calc(507*var(--u));color:var(--dk)}
.dm-cl--dk .dm-cl__h--b{color:#fff}
.dm-cl__h::after{content:'копировать';margin-left:.7em;opacity:0;font-size:.8em;transition:opacity .25s}
.dm-cl__h:is(:hover,:focus-visible)::after{opacity:.7}
.dm-toast{position:fixed;left:50%;bottom:calc(28px + env(safe-area-inset-bottom));transform:translate(-50%,16px);
z-index:60;padding:10px 18px;border-radius:999px;background:var(--bl);color:#fff;font-size:14px;font-weight:600;
opacity:0;pointer-events:none;transition:opacity .25s,transform .25s}
.dm-toast.is-on{opacity:1;transform:translate(-50%,0)}

/* ---------- 08 страница в «окне» листается ---------- */
.dm-win{overflow:hidden;border-radius:calc(20*var(--u));background:#fff}
.dm-win img{height:auto;will-change:transform}

/* ---------- 12 фото внизу карточки ---------- */
.dm-ph13{overflow:hidden}
.dm-ph13 img{width:100%;height:100%}

/* ---------- 14 финал ---------- */
.dm-th{font-size:calc(171.2*var(--u));line-height:calc(218*var(--u));font-weight:700;color:#fff;text-transform:uppercase;letter-spacing:0;white-space:nowrap}
.dm-th__r{display:block;overflow:hidden}
.dm-tg{display:flex;gap:calc(10*var(--u))}
.dm-tg li{display:flex;align-items:center;height:calc(41*var(--u));padding:0 calc(16*var(--u));border:1px solid rgba(255,255,255,.3);border-radius:calc(10*var(--u));
font-size:calc(14*var(--u));color:#fff;white-space:nowrap}
.dm-mol{will-change:transform;mix-blend-mode:soft-light}

/* шире 1600px сцена стоит по центру — края гасим */
@media (min-width:1601px){
.dm-mq{-webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)}}

/* ---------- состояния до анимации ---------- */
.dm .dm-wd{display:inline-block;overflow:hidden;vertical-align:top}
.dm .dm-wd__i{display:inline-block;will-change:transform}
.is-js [data-dm-in]{opacity:0;transform:translateY(calc(24*var(--u)))}
.is-js [data-dm-rise]{opacity:0;transform:translateY(calc(80*var(--u)))}
.is-js [data-dm-pop]{opacity:0;transform:scale(.7)}
.is-js [data-dm-cl]{opacity:0;transform:translateY(calc(70*var(--u)))}
.is-js .dm-phi img{opacity:0}

@media (prefers-reduced-motion:reduce){
.is-js [data-dm-in],.is-js [data-dm-rise],.is-js [data-dm-pop],.is-js [data-dm-cl]{opacity:1;transform:none}
.is-js .dm-phi img{opacity:1}}

/* ---------- мобильная раскладка: всё в одну колонку ---------- */
@media (max-width:999px){
.dm{--u:calc((100vw - 32px)/1580)}
.dm-st{width:100%;padding:0 16px;box-sizing:border-box}
.dm-b{height:auto!important;padding:10px 0;display:flex;flex-direction:column}
.dm-b>.dm-i{position:relative;left:auto;top:auto;width:auto!important;height:auto!important}
.dm-b>.dm-i>img{height:auto}
.dm-b>.dm-i+.dm-i{margin-top:14px}
/* карточки с фоном — своя сцена во всю ширину */
.dm-b>.dm-k{position:relative;left:auto;top:auto;width:auto;height:auto;aspect-ratio:var(--w)/var(--h);--u:calc((100vw - 32px)/var(--w))}
.dm-b>.dm-k+.dm-k{margin-top:10px}
.dm-pl{position:relative;left:auto;top:auto;width:auto;order:-1;margin:14px 0 6px}
.dm-pl span{height:26px;font-size:10px;padding:0 10px;border-radius:8px;min-width:26px}
.dm-pl--d span{border-color:#CBD9EA;color:var(--dk)}
.dm-h2{font-size:20px;line-height:1.35;padding:0 4px}
.dm-t{font-size:15px;line-height:1.5;padding:0 4px}
.dm-t--w{color:var(--dk)}
.dm-b>.dm-k--w:first-child,.dm-b>.dm-k--l:first-child{display:none}
.dm-b>.dm-phi{width:62%!important;max-width:300px;margin:18px auto 0}
.dm-on{font-size:min(25vw,170px);line-height:1.1}
.dm-wt{gap:18px;margin-top:10px}
.dm-wt button{font-size:14px}
.dm-b>.dm-cl{aspect-ratio:388/550;width:calc(50% - 5px)!important}
.dm-b:has(>.dm-cl){flex-direction:row;flex-wrap:wrap;gap:10px}
.dm-b>.dm-cl+.dm-cl{margin-top:0}
.dm-cl__h{font-size:12px;left:14px;top:14px}
.dm-cl__h--b{top:auto;bottom:14px}
.dm-b>.dm-win{aspect-ratio:1040/1687}
.dm-b:has(>[data-dm-pop]){flex-direction:row;flex-wrap:wrap;gap:10px;align-items:flex-start}
.dm-b:has(>[data-dm-pop])>.dm-pl{flex:0 0 100%}
.dm-b>[data-dm-pop]{width:calc(var(--w)*.42px)!important;max-width:100%;margin:0!important}
.dm-b>[data-dm-pop]+[data-dm-pop]{margin:0!important}
.dm-tall{display:none!important}
.dm-th{font-size:min(13vw,70px);line-height:1.05;color:var(--dk);margin-top:18px}
.dm-tg{flex-wrap:wrap;gap:8px;margin-top:12px}
.dm-tg li{height:30px;font-size:11px;border-color:#CBD9EA;color:var(--dk);padding:0 10px}
}

/* обложка кейса (первый экран шаблона) */
.case-cover [data-cover="dlmed"] img{object-position:50% 30%}