/* ============================================================
   responsive.css — читательский слой, мобильное меню и адаптив
   Подключается последним; не трогает базовые clinical.css / skins.css
   ============================================================ */

/* ============================================================
   ЧИТАТЕЛЬСКИЙ СЛОЙ — прогресс чтения + липкая мини-шапка
   ============================================================ */
.readbar{position:fixed;top:0;left:0;right:0;height:3px;z-index:70;pointer-events:none;background:transparent;}
.readbar span{display:block;height:100%;width:100%;background:var(--accent);
  transform:scaleX(0);transform-origin:left center;transition:transform .08s linear;}

.minihead{position:fixed;top:0;left:0;right:0;z-index:55;background:var(--bg);
  border-bottom:1px solid var(--line);box-shadow:0 6px 20px -16px rgba(20,30,30,.5);
  transform:translateY(-100%);transition:transform .26s ease;}
.minihead.show{transform:translateY(0);}
.minihead .wrap{display:flex;align-items:center;gap:16px;height:56px;}
.mh-top{width:34px;height:34px;flex:0 0 auto;border-radius:50%;border:1px solid var(--line-2);
  background:var(--bg);color:var(--ink-2);cursor:pointer;font-size:16px;line-height:1;}
.mh-top:hover{border-color:var(--accent);color:var(--accent-ink);}
.mh-title{flex:1;min-width:0;font-family:var(--display);font-weight:700;font-size:16px;
  letter-spacing:-.01em;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.mh-plan{flex:0 0 auto;border:1px solid var(--line-2);background:var(--bg);border-radius:8px;
  padding:8px 14px;font-family:var(--sans);font-size:13.5px;font-weight:600;color:var(--ink-2);cursor:pointer;
  display:flex;align-items:center;gap:7px;}
.mh-plan:hover{border-color:var(--accent);color:var(--accent-ink);}
.mh-plan span{font-size:10px;opacity:.6;transition:transform .2s;}
.minihead.drop-open .mh-plan span{transform:rotate(180deg);}
.mh-drop{max-height:0;overflow:hidden;transition:max-height .28s ease;background:var(--bg);
  border-top:0 solid var(--line);}
.minihead.drop-open .mh-drop{max-height:70vh;overflow:auto;border-top:1px solid var(--line);}
.mh-drop a{display:block;padding:13px 40px;font-size:15px;color:var(--ink-2);border-bottom:1px solid var(--line);}
.mh-drop a:hover{background:var(--panel);color:var(--accent-ink);}

/* ============================================================
   BURGER + DRAWER
   ============================================================ */
.burger{display:none;width:42px;height:42px;border:1px solid var(--line-2);border-radius:9px;
  background:var(--bg);cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:5px;flex:0 0 auto;}
.burger span{display:block;width:18px;height:2px;background:var(--ink);border-radius:2px;}

.mdrawer{position:fixed;inset:0;z-index:80;visibility:hidden;}
.mdrawer.open{visibility:visible;}
.mdrawer-scrim{position:absolute;inset:0;background:rgba(15,20,20,.42);opacity:0;transition:opacity .26s;}
.mdrawer.open .mdrawer-scrim{opacity:1;}
.mdrawer-panel{position:absolute;top:0;right:0;height:100%;width:320px;max-width:86vw;background:var(--bg);
  box-shadow:-20px 0 50px -20px rgba(15,20,20,.5);transform:translateX(100%);transition:transform .28s ease;
  display:flex;flex-direction:column;padding:24px 26px 30px;}
.mdrawer.open .mdrawer-panel{transform:none;}
.mdrawer-close{align-self:flex-end;width:40px;height:40px;border:none;background:none;font-size:22px;
  color:var(--ink-2);cursor:pointer;line-height:1;}
.mdrawer-nav{display:flex;flex-direction:column;margin-top:10px;}
.mdrawer-nav a{font-family:var(--display);font-weight:600;font-size:22px;color:var(--ink);
  padding:15px 0;border-bottom:1px solid var(--line);}
.mdrawer-nav a:hover{color:var(--accent-ink);}
.mdrawer-tg{margin-top:24px;justify-content:center;padding:14px;}

/* ============================================================
   АДАПТИВ
   ============================================================ */

/* ----- планшет (≤1080): убираем правый рейл, ужимаем сетку статьи ----- */
@media (max-width:1080px){
  .art-layout{grid-template-columns:200px 1fr;gap:36px;}
  .rail{display:none;}
  .strip .wrap{grid-template-columns:repeat(2,1fr);gap:32px 0;}
  .strip .s:nth-child(3){border-left:none;padding-left:0;}
}

/* ----- узкий планшет (≤960): бургер вместо меню ----- */
@media (max-width:960px){
  .mainnav{display:none;}
  .mini-search{display:none;}
  .burger{display:flex;}
  .masthead .wrap{height:66px;gap:16px;}
  .mast-r{gap:10px;}
  .hero h1{font-size:clamp(38px,6vw,56px) !important;}
  .regions{grid-template-columns:repeat(2,1fr);}
  .cards3{grid-template-columns:repeat(2,1fr);}
  .foot .wrap{grid-template-columns:1fr 1fr;gap:30px;}
}

/* ----- телефон (≤720) ----- */
@media (max-width:720px){
  .wrap{padding:0 22px;}
  .util-l{display:none;}
  .util-r a:not(.lang){display:none;}
  .util .wrap{justify-content:space-between;}

  .hero .wrap{padding:48px 22px 46px;}
  .hero h1{font-size:clamp(32px,8.5vw,46px) !important;max-width:none;}
  .hero .sub{font-size:17px;}
  .searchbig{flex-wrap:wrap;border-radius:12px;padding:10px;}
  .searchbig input{width:100%;min-width:0;padding:6px 4px 10px;}
  .searchbig .btn{width:100%;justify-content:center;}

  .block{padding:48px 0;}
  .block-head{flex-wrap:wrap;gap:8px;}
  .regions{grid-template-columns:1fr;gap:14px;}
  .cards3{grid-template-columns:1fr;gap:18px;}

  /* лента материалов → карточки в одну колонку, картинка сверху */
  .row-item{grid-template-columns:1fr !important;gap:0 !important;}
  .row-item .thumb{width:100%;aspect-ratio:16/9;margin-bottom:16px;}
  .ri-desc{max-width:none;}

  /* поиск/раздел → фасеты над результатами, не липкие */
  .searchpage{grid-template-columns:1fr;gap:24px;}

  /* страница статьи → одна колонка; план статьи доступен в мини-шапке */
  .art-layout{grid-template-columns:1fr;gap:0;}
  .outline{display:none;}
  .art-title{font-size:clamp(30px,8vw,40px) !important;}
  .art-sub2{font-size:17px;}
  .toolbar{gap:8px;}
  .toolbar .btn{flex:1;justify-content:center;}
  .pp{grid-template-columns:1fr;}
  .step{grid-template-columns:34px 1fr;gap:14px;}

  .strip .wrap{padding:36px 22px;}
  .cta .wrap{flex-direction:column;align-items:flex-start;gap:18px;padding:36px 22px;}
  .foot .wrap{grid-template-columns:1fr;gap:26px;}
  .foot-bottom{flex-direction:column;gap:8px;}

  /* about */
  .about-hero{grid-template-columns:1fr;gap:26px;}
  .facts4{grid-template-columns:repeat(2,1fr);}
  .focusgrid{grid-template-columns:1fr;}

  /* мини-шапка: спрятать кнопку «План» подпись, оставить компактной */
  .minihead .wrap{gap:12px;}
}

/* ----- editorial-skin: журнальная сетка в одну колонку на телефоне ----- */
@media (max-width:720px){
  body.skin-editorial .rows{grid-template-columns:1fr;gap:34px;}
  body.skin-editorial .row-item:first-child{grid-template-columns:1fr;gap:0;}
  body.skin-editorial .row-item:first-child .thumb{aspect-ratio:16/9;margin-bottom:16px;}
  body.skin-editorial .row-item:first-child .ri-title{font-size:30px;}
  body.skin-editorial .regions{grid-template-columns:1fr;}
  body.skin-editorial .region:nth-child(even){padding-left:0;border-left:none;}
  body.skin-editorial .hero h1{font-size:clamp(40px,11vw,60px) !important;}
}

/* ============================================================
   LIGHTBOX — зум клинических изображений
   ============================================================ */
.fig.zoomable{position:relative;}
.fig.zoomable .ph{cursor:zoom-in;}
.zoombtn{position:absolute;top:10px;right:10px;width:38px;height:38px;border-radius:9px;
  border:1px solid var(--line-2);background:rgba(255,255,255,.92);color:var(--ink);cursor:zoom-in;
  display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .15s,background .15s;backdrop-filter:blur(2px);}
.fig.zoomable:hover .zoombtn{opacity:1;}
.zoombtn:hover{background:#fff;color:var(--accent-ink);border-color:var(--accent);}

.lightbox{position:fixed;inset:0;z-index:90;display:none;align-items:center;justify-content:center;}
.lightbox.open{display:flex;}
.lb-scrim{position:absolute;inset:0;background:rgba(14,18,18,.9);}
.lb-stage{position:relative;z-index:2;max-width:min(1100px,92vw);max-height:88vh;display:flex;flex-direction:column;gap:0;}
.lb-imgwrap{width:min(1100px,92vw);height:auto;aspect-ratio:16/9;max-height:78vh;overflow:hidden;
  border-radius:6px;background:#0c1010;cursor:zoom-in;transition:transform .18s ease;transform-origin:center center;}
.lb-cap{margin-top:14px;display:flex;align-items:baseline;gap:14px;color:#E7E1D2;font-size:15px;line-height:1.4;}
.lb-count{font-family:var(--mono);font-size:12px;letter-spacing:.08em;color:var(--accent);flex:0 0 auto;
  border:1px solid rgba(255,255,255,.2);border-radius:20px;padding:4px 11px;}
.lb-x{position:absolute;top:24px;right:28px;z-index:3;width:46px;height:46px;border-radius:50%;border:none;
  background:rgba(255,255,255,.1);color:#fff;font-size:20px;cursor:pointer;transition:background .15s;}
.lb-x:hover{background:rgba(255,255,255,.22);}
.lb-nav{position:absolute;z-index:3;top:50%;transform:translateY(-50%);width:54px;height:54px;border-radius:50%;
  border:none;background:rgba(255,255,255,.1);color:#fff;font-size:30px;line-height:1;cursor:pointer;transition:background .15s;}
.lb-nav:hover{background:rgba(255,255,255,.22);}
.lb-prev{left:28px;}
.lb-next{right:28px;}
.lb-nav.hidden{display:none;}
@media (max-width:720px){
  .lb-nav{width:44px;height:44px;font-size:24px;}
  .lb-prev{left:10px;}.lb-next{right:10px;}
  .lb-x{top:14px;right:14px;}
  .lb-cap{font-size:13.5px;}
  .zoombtn{opacity:1;}
}

/* ----- очень узкий (≤420) ----- */
@media (max-width:420px){
  .facts4{grid-template-columns:1fr;}
  .strip .wrap{grid-template-columns:1fr;gap:24px;}
  .strip .s{border-left:none;padding-left:0;}
  .dirswitch button{padding:6px 9px;letter-spacing:.04em;}
}

/* ============================================================
   КАТАЛОГ / ПОИСК
   ============================================================ */
.catalog-search{max-width:680px;margin-top:6px;}
.catalog-search input[type=search]{flex:1;border:none;outline:none;background:none;
  font-family:var(--sans);font-size:16.5px;color:var(--ink);min-width:0;}
.catalog-search input::-webkit-search-cancel-button{display:none;}
#searchClear{width:34px;height:34px;padding:0;border-radius:50%;border:1px solid var(--line-2);
  background:var(--bg);color:var(--muted);font-size:13px;display:flex;align-items:center;justify-content:center;}
#searchClear:hover{color:var(--accent-ink);border-color:var(--accent);}

/* фасеты кликабельны */
.facet-reset{margin-top:8px;background:none;border:none;cursor:pointer;font-family:var(--sans);
  font-size:13.5px;font-weight:600;color:var(--accent-ink);padding:6px 0;}

/* сортировка как настоящий select */
.results-top{flex-wrap:wrap;gap:12px;}
.sortsel{cursor:default;}
.sortsel select{font-family:var(--sans);font-size:14px;font-weight:600;color:var(--ink);
  border:none;background:none;cursor:pointer;outline:none;padding:2px 4px;margin-left:4px;}
.rc b{color:var(--ink);font-weight:700;}

/* пустое состояние */
.empty-state{text-align:center;padding:64px 24px;border:1px dashed var(--line-2);border-radius:var(--radius);
  background:var(--panel);}
.empty-state .es-ico{width:54px;height:54px;border-radius:50%;background:var(--bg);border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;margin:0 auto 16px;color:var(--muted);}
.empty-state .es-ico svg{width:24px;height:24px;}
.empty-state h3{font-family:var(--display);font-weight:700;font-size:22px;margin-bottom:8px;}
.empty-state p{color:var(--muted);font-size:15.5px;margin-bottom:18px;}

/* ============================================================
   ДОСТУПНОСТЬ — скип-ссылка, видимый фокус, reduced-motion
   ============================================================ */
.skip-link{position:fixed;top:-60px;left:14px;z-index:120;background:var(--ink);color:#fff;
  font-family:var(--sans);font-size:14px;font-weight:600;padding:11px 18px;border-radius:0 0 8px 8px;
  transition:top .18s ease;text-decoration:none;}
.skip-link:focus{top:0;outline:2px solid var(--accent);outline-offset:2px;}

/* видимый фокус только при навигации с клавиатуры */
a:focus-visible,button:focus-visible,input:focus-visible,
[tabindex]:focus-visible,.chip:focus-visible,.region:focus-visible,
.tcard:focus-visible,.row-item:focus-visible,.zoomable:focus-visible{
  outline:2.5px solid var(--accent);outline-offset:3px;border-radius:3px;
}
.btn.primary:focus-visible{outline-offset:3px;outline-color:var(--ink);}
/* на тёмном герое — светлый контур */
body.skin-bold .hero a:focus-visible,body.skin-bold .hero button:focus-visible,
body.skin-bold .hero input:focus-visible{outline-color:#E0A988;}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important;
  }
}

/* ============================================================
   ПЕЧАТЬ / PDF — чистая статья без интерфейса
   ============================================================ */
@media print{
  @page{margin:18mm 16mm;}
  html,body{background:#fff !important;color:#000 !important;font-size:11.5pt;}
  /* скрыть весь интерфейс */
  .util,.masthead,.crumb,.toolbar,.rail,.outline,.minihead,.readbar,
  .settings,.settings-btn,.dirswitch,.burger,.mdrawer,.lightbox,.zoombtn,
  .reclist,.foot,.cta,.strip,.authorbox .ab-links{display:none !important;}
  /* развернуть колонку статьи на всю ширину */
  .wrap{max-width:none !important;padding:0 !important;}
  .art-layout{display:block !important;}
  .prose{max-width:none !important;}
  .art-top{border-bottom:1.5pt solid #000;padding-bottom:10pt;margin-bottom:14pt;}
  .art-title{font-size:24pt !important;color:#000 !important;}
  .art-sub2{font-size:13pt;color:#333 !important;}
  .art-type .tt{background:none !important;color:#000 !important;border:1pt solid #000;}
  /* плейсхолдеры изображений — рамка с подписью, чтобы не было пустот */
  .ph{background:#fff !important;border:1pt solid #999 !important;min-height:80pt;}
  .ph .ph-l{border:none !important;background:none !important;color:#555 !important;}
  .prose h2{break-after:avoid;border-top:1pt solid #ccc;color:#000 !important;}
  .step,.fig,.callout,.pp,.tbl,.highlights,.abstract{break-inside:avoid;}
  .highlights,.abstract{border:1pt solid #999 !important;background:#fff !important;}
  .tag,.evi{border:1pt solid #999;}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:8pt;color:#666;}
  a[href^="#"]::after{content:"";}
  /* печатный колонтитул */
  .prose::after{content:"Библиотека ортопеда · drmursalov.ru · © 2026 Мурсалов А.К.";
    display:block;margin-top:18pt;padding-top:8pt;border-top:.5pt solid #999;
    font-size:8.5pt;color:#666;}
}

/* Минихед только на мобильном (≤960px), где скрыта основная nav и .outline спрятана/неудобна */
@media (min-width:961px){
  .minihead{display:none !important;}
}