/* ============================================================================
   statya.css — страница «Статья» Уролесан (Figma node 1876:2125, 1920×5574).
   Детальная статья: hero · мета (тег/дата/шеринг) · тело · «Другие статьи» · форма.
   Поверх base.css + chrome.css + форма из gde-kupit.css. rem = px/16. Figma REST, 2026-07.
   ============================================================================ */

.st { max-width: 120rem; margin-inline: auto; padding-inline: 5rem; padding-top: 11.4375rem; }

.st__crumbs { display: flex; align-items: center; justify-content: center; gap: 1.5rem;   /* 24px: истина старт-старт Главная→Статьи 103 / Статьи→Виды цистита 96 (правка Веры «специалистам→статьи» вскрыла тесный зазор) */
  font-family: var(--wm-font); font-weight: 400; font-size: 0.875rem; color: var(--wm-ink); }
.st__crumbs a { color: inherit; text-decoration: none; opacity: 0.7; }
.st__crumbs .dot { width: 0.1875rem; height: 0.1875rem; border-radius: 50%; background: currentColor; opacity: 0.5; }

.wm .st__title { margin: 3.75rem auto 0; text-align: center;   /* .wm-префикс: перебить сброс base.css `.wm h1{margin:0}` (класс #27) */
  font-family: var(--wm-font-head); font-weight: 600; font-size: 5.125rem; line-height: 1.1;
  letter-spacing: -0.05125rem; text-transform: uppercase; color: var(--wm-ink); }

.st__hero { margin: 3.875rem auto 0; max-width: 110rem; border-radius: 1.625rem; overflow: hidden; }   /* 62px: title→hero по истине Figma */
.st__hero img { display: block; width: 100%; height: auto; }

/* мета-строка: тег + дата слева, «Поделиться» + иконки справа */
/* Мета: тег+дата у ЛЕВОГО края колонки тела (истина x=524); «Поделиться»+иконки — левый
   share-рельс в поле страницы (истина x=80), стопкой. Не space-between (истина Figma). */
.st__meta { max-width: 54.5rem; margin: 5.625rem auto 0; position: relative; display: flex; align-items: center; justify-content: flex-start; }   /* 90px: hero→мета */
.st__tagdate { display: flex; align-items: center; gap: 0.875rem; }
.st__share { position: absolute; left: -27.75rem; top: 0; flex-direction: column; align-items: flex-start; gap: 0.625rem; }   /* −444px = сдвиг от левого края тела (x524) к полю страницы (x80) */
.st__tag { display: inline-flex; align-items: center; height: 2rem; padding: 0 0.875rem;
  border-radius: 0.625rem; background: var(--wm-brand); color: #fff;
  font-family: var(--wm-font); font-weight: 500; font-size: 0.875rem; }
.st__date { font-family: var(--wm-font); font-weight: 400; font-size: 1.125rem; color: var(--wm-ink); }
.st__share { display: flex; align-items: center; gap: 0.75rem; }
.st__share span { font-family: var(--wm-font); font-weight: 400; font-size: 1.125rem; color: var(--wm-ink); }
.st__share img { height: 2.75rem; width: auto; }   /* соцыиконки крупнее (правка Веры р3) — 44px */

/* тело статьи (колонка 872px) */
.st__body { max-width: 54.5rem; margin: 2.5rem auto 0; }
.st__body h2 { margin: 4.25rem 0 1.5rem; font-family: var(--wm-font-head); font-weight: 700;   /* 68px top (margin СХЛОПЫВАЕТСЯ с p-margin 33 → max=68, истина абзац→h2) / 24px bottom (h2→абзац) */
  font-size: 1.625rem; line-height: 1.42; color: var(--wm-ink); }   /* 26px / 37px */
.st__body h2:first-child { margin-top: 0; }
.st__body p { margin: 0 0 2.0625rem; font-family: var(--wm-font); font-weight: 400;   /* 33px = пустая строка \n\n в Figma-тексте (в макете абзацы = один текст-слой) */
  font-size: 1.25rem; line-height: 1.65; color: var(--wm-ink); }    /* 20px / 33px */
.st__body ul { margin: 0 0 1rem; padding-left: 1.5rem; }
.st__body li { margin-bottom: 0.75rem; font-family: var(--wm-font); font-weight: 400; font-size: 1.25rem; line-height: 1.65; color: var(--wm-ink); }   /* шаг пунктов 45px = строка 33 + 12 (истина) */
.wm .st__figure { margin: 4.25rem 0 2.25rem; border-radius: 1.625rem; overflow: hidden; }   /* .wm-префикс: перебить сброс `.wm figure{margin:0}` (#27); 68px top абзац→фигура */
.st__figure img { display: block; width: 100%; height: auto; }

/* «Другие статьи» — декор-разделитель 2054:809 (curved-линии #C8C8C8) + шапка со стрелками 2054:814 */
.st__more-decor { display: block; width: 100%; height: auto; margin: 12rem 0 0; }   /* 192px — зона декор-разделителя (была пустой 347px, правка Веры «пропал декор») */
.st__more-head { position: relative; margin-top: 1.8125rem; display: flex; align-items: center; justify-content: center; }   /* заголовок центр + стрелки absolute-right (заголовок сохраняет y ≈ старая истина) */
.wm .st__more-h { margin: 0; text-align: center; font-family: var(--wm-font-head); font-weight: 600;   /* .wm-префикс: перебить сброс `.wm h2{margin:0}` (#27) */
  font-size: 4.5rem; line-height: 1; letter-spacing: -0.045rem; text-transform: uppercase; color: var(--wm-ink); }   /* 72px */
.st__more-h .brand { color: var(--wm-brand); }
.st__more-nav { position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 8rem; height: 3.75rem; display: flex; gap: 0.5rem; }   /* стрелки 2054:814 */
.st__rel-btn { flex: 0 0 3.75rem; height: 3.75rem; padding: 0; border: 0.043rem solid rgba(24, 24, 24, 0.16); border-radius: 1.125rem; background: transparent; position: relative; }
.st__rel-btn::after { content: ""; position: absolute; left: 50%; top: 50%; width: 0.375rem; height: 0.375rem; border-top: 0.09375rem solid var(--wm-brand); border-right: 0.09375rem solid var(--wm-brand); }
.st__rel-btn--prev::after { transform: translate(-35%, -50%) rotate(-135deg); }
.st__rel-btn--next::after { transform: translate(-65%, -50%) rotate(45deg); }
@media (hover: hover) { .st__rel-btn:hover { border-color: var(--wm-brand); } }
.st__rel {
  margin: 4rem 0 0; display: flex; gap: 0.75rem;
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
}
.st__rel::-webkit-scrollbar { display: none; }
.st__rel-btn:disabled { opacity: 0.35; cursor: default; }
.st__rel-pagination { display: none; }
.st-rel { display: block; flex: 0 0 calc((100% - 1.5rem) / 3); scroll-snap-align: start; text-decoration: none; }
.st-rel__photo { display: block; border-radius: 1.625rem; overflow: hidden; aspect-ratio: 580 / 317; background: #eef0ee; }
.st-rel__photo img { width: 100%; height: 100%; object-fit: cover; }
.st-rel__title { display: block; margin-top: 1.625rem; font-family: var(--wm-font); font-weight: 500;   /* 26px: фото→заголовок (истина) */
  font-size: 1.5rem; line-height: 1.24; color: var(--wm-ink); }
@media (hover: hover) { .st-rel:hover .st-rel__title { color: var(--wm-brand); } }

/* Зазор карточки «Другие статьи»→форма = свойство страницы (истина Figma: низ заголовков карточек
   3850 → форма 4086 = 236px). Общий .gk-ask margin 132px (Онлайн) перекрываем страничным скоупом. */
.wm .st .gk-ask { margin-top: 14.75rem; }   /* 236px */

/* ============================================================================
   АДАПТИВ — «Статья» (2001:6807). rem=px ниже 1280.
   ============================================================================ */
/* общее ≤1279: тело/мета на всю ширину, share-рельс из absolute в поток (иначе −444px = гор.скролл) */
@media (max-width: 1000px) {
  .st__tagdate{width: 100%; justify-content: space-between;}
  .st__more-nav{display: none;}
  .st__more-decor{display: none;}
  .st__rel-pagination { display: flex; }
  .st__body, .st__meta { max-width: none; }
  .st__meta { flex-direction: column; align-items: flex-start; gap: 16px; margin-top: 40px; }
  .st__share { display: none; position: static; left: auto; top: auto; flex-direction: row; }
}
@media (max-width: 1000px) {
  .st { padding-inline: 16px; padding-top: 110px; }
  .wm .st__title { font-size: 34px; margin-top: 52px; }
  .st__hero { margin-top: 52px; max-width: none; }
  .st__hero img{ aspect-ratio: 328/328; height: auto; object-fit: cover;}
  .st__body { margin-top: 24px; }
  .st__body h2 { font-size: 24px; }
  .st__body p, .st__body li { font-size: 18px; }
  .wm .st__more-h { margin-top: 120px; font-size: 34px; }
  .st__rel {
    gap: 8px; margin-top: 60px; padding-bottom: 2px;
    overflow-x: auto; scroll-snap-type: x mandatory;
  }
  .st-rel { flex: 0 0 308px; scroll-snap-align: start; }
  .st-rel__photo { border-radius: 20px; width: 308px; height: 298px; aspect-ratio: auto; }
  .st-rel__title { margin-top: 14px; font-size: 18px; line-height: 1.16; }
  .st__rel-pagination {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    margin-top: 24px;
  }
  .st__rel-bullet {
    width: 5px; height: 5px; padding: 0; border: 0; border-radius: 8px;
    background: #5F5F5F; opacity: 0.5;
    transition: width 0.35s ease;
  }
  .st__rel-bullet.is-active { width: 34px; }
  .wm .st .gk-ask { margin-top: 120px; }
}