/* ============================================================================
   CRDGAME — Vulkk-like adaptive entry layout
   Отдельный override-файл. 3440px+ не трогаем.
============================================================================ */

/* ============================================================================
   0. ОБЩИЕ ПЕРЕМЕННЫЕ ДЛЯ ЭКРАНОВ ДО 3439px
============================================================================ */

@media (max-width: 2499px) {
  body.tmpl_body {
    --crd-vk-left: 300px;
    --crd-vk-article: 768px;
    --crd-vk-right: 272px;
    --crd-vk-gap: 34px;
    --crd-vk-cluster-half: 537px;

    --pa-side-gap: 0px !important;
  }

  body.tmpl_body .pa-entry-article,
  body.tmpl_body .pa-author-card,
  body.tmpl_body .pa-comments-section,
  body.tmpl_body .pa-comment-form-section,
  body.tmpl_body .pa-comment-locked,
  body.tmpl_body .pa-comment-form-wrap,
  body.tmpl_body .pa-related-section {
    box-sizing: border-box !important;
  }

  body.tmpl_body .pa-entry-content,
  body.tmpl_body .pa-entry-content * {
    box-sizing: border-box !important;
  }

  body.tmpl_body .pa-entry-content img,
  body.tmpl_body .pa-entry-content video,
  body.tmpl_body .pa-entry-content iframe {
    max-width: 100% !important;
  }

  body.tmpl_body .pa-entry-content table {
    max-width: 100% !important;
  }
}

/* ============================================================================
   1. 1600–3439px
   Левый навигатор открыт, статья 768px, справа помещается "По теме".
============================================================================ */

@media (min-width: 1600px) and (max-width: 2499px) and (min-height: 781px) {
  body.tmpl_body {
    --pa-container: 1400px !important;
    --pa-side-gap: 0px !important;
  }

  body.tmpl_body .pa-entry-article,
  body.tmpl_body .pa-author-card,
  body.tmpl_body .pa-comments-section,
  body.tmpl_body .pa-comment-form-section,
  body.tmpl_body .pa-comment-locked,
  body.tmpl_body .pa-comment-form-wrap,
  body.tmpl_body .pa-related-section {
    width: var(--crd-vk-article) !important;
    max-width: var(--crd-vk-article) !important;

    margin-left: max(
  320px,
  calc(((100vw + var(--crd-vk-left)) / 2) - var(--crd-vk-cluster-half))
) !important;

    margin-right: auto !important;
  }

  body.tmpl_body .pa-entry-content {
    width: 100% !important;
    max-width: 100% !important;
  }

  body.tmpl_body .pa-entry-title {
    max-width: 980px !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
  }

  body.tmpl_body .pa-entry-meta {
    max-width: 980px !important;
  }

  body.tmpl_body .crd-topic-rail:not([hidden]) {
    display: block !important;
  }
}

/* ============================================================================
   1.1 HERO для 1600–1699px
   Обложка начинается после левого навигатора.
============================================================================ */

@media (min-width: 1600px) and (max-width: 1699px) and (min-height: 781px) {
  body.tmpl_body {
    --pa-container: calc(100vw - 300px) !important;
  }

  body.tmpl_body .pa-entry-hero-image {
    left: calc(50vw + 150px) !important;
    width: calc(100vw - 300px) !important;
    max-width: calc(100vw - 300px) !important;
    transform: translateX(-50%) !important;
  }

  body.tmpl_body .pa-entry-hero-image:hover {
    transform: translateX(-50%) !important;
  }

  body.tmpl_body .pa-entry-breadcrumbs {
    left: 300px !important;
  }
}

/* ============================================================================
   1.2 HERO для 1700–3439px
   Обложка 1400px, центрирована в области справа от левой панели.
============================================================================ */

@media (min-width: 1700px) and (max-width: 2499px) and (min-height: 781px) {
  body.tmpl_body {
    --pa-container: 1400px !important;
  }

  body.tmpl_body .pa-entry-hero-image {
    left: calc(50vw + 150px) !important;
    width: 1400px !important;
    max-width: 1400px !important;
    transform: translateX(-50%) !important;
  }

  body.tmpl_body .pa-entry-hero-image:hover {
    transform: translateX(-50%) !important;
  }

  body.tmpl_body .pa-entry-breadcrumbs {
    left: max(300px, calc(50vw - 550px)) !important;
  }
}

/* ============================================================================
   2. 1400–1599px
   Как Vulkk на laptop: слева только стрелка, справа "По теме", статья 768px.
============================================================================ */

@media (min-width: 1400px) and (max-width: 1599px) {
  body.tmpl_body {
    --pa-container: min(1320px, calc(100vw - 48px)) !important;
    --pa-side-gap: 0px !important;
  }

  body.tmpl_body .pa-entry-hero-image {
    left: 50% !important;
    width: min(1320px, calc(100vw - 48px)) !important;
    max-width: min(1320px, calc(100vw - 48px)) !important;
    transform: translateX(-50%) !important;
  }

  body.tmpl_body .pa-entry-hero-image:hover {
    transform: translateX(-50%) !important;
  }

  body.tmpl_body .pa-entry-breadcrumbs {
    left: max(0px, calc((100vw - min(1320px, calc(100vw - 48px))) / 2)) !important;
  }

  body.tmpl_body .pa-entry-article,
  body.tmpl_body .pa-author-card,
  body.tmpl_body .pa-comments-section,
  body.tmpl_body .pa-comment-form-section,
  body.tmpl_body .pa-comment-locked,
  body.tmpl_body .pa-comment-form-wrap,
  body.tmpl_body .pa-related-section {
    width: var(--crd-vk-article) !important;
    max-width: var(--crd-vk-article) !important;

    margin-left: max(
      24px,
      calc(50vw - var(--crd-vk-cluster-half))
    ) !important;

    margin-right: auto !important;
  }

  body.tmpl_body .crd-topic-rail:not([hidden]) {
    display: block !important;
  }
}

/* ============================================================================
   3. 768–1399px
   iPad / небольшие ноутбуки: одна центральная колонка 768px, без правого блока.
============================================================================ */

@media (min-width: 768px) and (max-width: 1399px) {
  body.tmpl_body {
    --pa-container: min(768px, calc(100vw - 48px)) !important;
    --pa-side-gap: 0px !important;
  }

  body.tmpl_body .pa-entry-hero-image {
    left: 50% !important;
    width: 100vw !important;
    max-width: 100vw !important;
    transform: translateX(-50%) !important;
  }

  body.tmpl_body .pa-entry-hero-image:hover {
    transform: translateX(-50%) !important;
  }

  body.tmpl_body .pa-entry-breadcrumbs {
    left: 0 !important;
    max-width: 100vw !important;
  }

  body.tmpl_body .pa-entry-article,
  body.tmpl_body .pa-author-card,
  body.tmpl_body .pa-comments-section,
  body.tmpl_body .pa-comment-form-section,
  body.tmpl_body .pa-comment-locked,
  body.tmpl_body .pa-comment-form-wrap,
  body.tmpl_body .pa-related-section {
    width: min(768px, calc(100vw - 48px)) !important;
    max-width: min(768px, calc(100vw - 48px)) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  body.tmpl_body .crd-topic-rail {
    display: none !important;
  }

  body.tmpl_body .pa-entry-title {
    max-width: 860px !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
}

/* ============================================================================
   4. 0–767px
   Телефоны: полная ширина, без правого блока, левый навигатор только стрелкой.
============================================================================ */

@media (max-width: 767px) {
  body.tmpl_body {
    --pa-container: calc(100vw - 28px) !important;
    --pa-side-gap: 0px !important;
  }

  body.tmpl_body .pa-entry-hero {
    --pa-hero-image-height: clamp(250px, 64vw, 390px) !important;
  }

  body.tmpl_body .pa-entry-hero-image {
    left: 50% !important;
    width: 100vw !important;
    max-width: 100vw !important;
    transform: translateX(-50%) !important;
  }

  body.tmpl_body .pa-entry-hero-image:hover {
    transform: translateX(-50%) !important;
  }

  body.tmpl_body .pa-entry-hero-image::before,
  body.tmpl_body .pa-entry-hero-image::after {
    width: 70px !important;
  }

  body.tmpl_body .pa-entry-breadcrumbs {
    left: 0 !important;
    right: auto !important;
    max-width: 100vw !important;
    min-height: 30px !important;
    padding-left: 10px !important;
    padding-right: 10px !important;

    font-size: 8.5px !important;
    line-height: 30px !important;

    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  body.tmpl_body .pa-entry-title-block {
    padding: 24px 14px 30px !important;
  }

  body.tmpl_body .pa-entry-title {
    max-width: calc(100vw - 28px) !important;
    padding-left: 0 !important;
    padding-right: 0 !important;

    font-size: clamp(25px, 8vw, 36px) !important;
    line-height: 1.12 !important;
  }

  body.tmpl_body .pa-entry-meta {
    max-width: calc(100vw - 28px) !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  body.tmpl_body .pa-entry-article,
  body.tmpl_body .pa-author-card,
  body.tmpl_body .pa-comments-section,
  body.tmpl_body .pa-comment-form-section,
  body.tmpl_body .pa-comment-locked,
  body.tmpl_body .pa-comment-form-wrap,
  body.tmpl_body .pa-related-section {
    width: calc(100vw - 28px) !important;
    max-width: calc(100vw - 28px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  body.tmpl_body .crd-topic-rail {
    display: none !important;
  }
}

/* ============================================================================
   5. ТИПОГРАФИКА ВНУТРИ УЗКОГО КОНТЕЙНЕРА
============================================================================ */

@media (max-width: 2499px) {
  body.tmpl_body .pa-entry-content {
    font-size: clamp(15px, 0.98vw, 18px) !important;
    line-height: 1.78 !important;
  }

  body.tmpl_body .pa-entry-content p,
  body.tmpl_body .pa-entry-content li {
    max-width: 100% !important;
  }

  body.tmpl_body .pa-entry-content .about-paragraph,
  body.tmpl_body .pa-entry-content .about-dropcap {
    max-width: 100% !important;
  }

  body.tmpl_body .pa-entry-content .about-section,
  body.tmpl_body .pa-entry-content .about-quote,
  body.tmpl_body .pa-entry-content .about-info-table,
  body.tmpl_body .pa-entry-content .crd-article-img,
  body.tmpl_body .pa-entry-content .news-image-wrap {
    max-width: 100% !important;
  }

  body.tmpl_body .pa-entry-content .about-info-table {
    overflow-x: auto !important;
  }

  body.tmpl_body .pa-entry-content .crd-article-img img,
  body.tmpl_body .pa-entry-content .news-image-wrap img {
    width: 100% !important;
    height: auto !important;
  }
}

/* ============================================================================
   6. ЛЕВЫЙ НАВИГАТОР: 1600–3439px открыт постоянно
   Даже если JS оставил класс is-compact/is-collapsed.
============================================================================ */

@media (min-width: 1600px) and (max-width: 2499px) and (min-height: 781px) {
  body .crd-related-rail,
  body .crd-related-rail.is-compact {
    position: fixed !important;
    top: 85px !important;
    left: 0 !important;
    z-index: 2400 !important;

    width: 300px !important;
    height: calc(100vh - 85px) !important;

    pointer-events: none !important;
    transform: none !important;
  }

  body .crd-related-rail .crd-related-rail__panel,
  body .crd-related-rail.is-compact .crd-related-rail__panel,
  body .crd-related-rail.is-compact.is-collapsed .crd-related-rail__panel,
  body .crd-related-rail.is-collapsed .crd-related-rail__panel {
    position: absolute !important;
    inset: 0 auto 0 0 !important;

    width: 300px !important;
    height: 100% !important;

    transform: none !important;
    transition: none !important;

    pointer-events: auto !important;
  }

  body .crd-related-rail::before,
  body .crd-related-rail.is-compact::before,
  body .crd-related-rail.is-compact:not(.is-collapsed)::before {
    content: none !important;
    display: none !important;
  }

  body .crd-related-rail button.crd-related-rail__tab,
  body .crd-related-rail.is-compact button.crd-related-rail__tab {
    display: none !important;
  }

  body .crd-related-rail .crd-related-rail__top,
  body .crd-related-rail button.crd-related-rail__close {
    display: none !important;
  }

  body.crd-related-rail-open {
    overflow: auto !important;
  }
}

/* ============================================================================
   7. ЛЕВЫЙ НАВИГАТОР: до 1599px и низкая высота — стрелка + выезжающая панель
============================================================================ */

@media (max-width: 1599px), (max-height: 780px) {
  body .crd-related-rail.is-ready {
    display: block !important;
  }

  body .crd-related-rail,
  body .crd-related-rail.is-compact {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;

    z-index: 2400 !important;

    width: 100vw !important;
    height: 100vh !important;

    pointer-events: none !important;
    transform: none !important;
  }

  body .crd-related-rail[hidden] {
    display: none !important;
  }

  body .crd-related-rail .crd-related-rail__panel,
  body .crd-related-rail.is-compact .crd-related-rail__panel {
    position: fixed !important;

    top: 85px !important;
    left: 0 !important;
    bottom: 0 !important;

    width: 300px !important;
    height: calc(100vh - 85px) !important;

    z-index: 2401 !important;

    transform: translateX(0) !important;
    transition: transform 220ms ease !important;

    pointer-events: auto !important;
  }

  body .crd-related-rail.is-collapsed .crd-related-rail__panel,
  body .crd-related-rail.is-compact.is-collapsed .crd-related-rail__panel {
    transform: translateX(-100%) !important;
  }

  body .crd-related-rail .crd-related-rail__top,
  body .crd-related-rail button.crd-related-rail__close {
    display: none !important;
  }

  body .crd-related-rail button.crd-related-rail__tab,
  body .crd-related-rail.is-compact button.crd-related-rail__tab,
  body .crd-related-rail.is-collapsed button.crd-related-rail__tab {
    position: fixed !important;

    top: 95px !important;
    left: 18px !important;

    z-index: 2600 !important;

    width: 34px !important;
    min-width: 34px !important;
    max-width: 34px !important;

    height: 34px !important;
    min-height: 34px !important;
    max-height: 34px !important;

    margin: 0 !important;
    padding: 0 !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    border: 0 !important;
    border-radius: 0 !important;

    background: transparent !important;
    background-image: none !important;

    color: #d8c7aa !important;

    box-shadow: none !important;
    text-shadow: none !important;

    cursor: pointer !important;
    pointer-events: auto !important;

    opacity: 1 !important;
    visibility: visible !important;

    transform: none !important;
  }

  body .crd-related-rail button.crd-related-rail__tab span {
    display: none !important;
  }

  body .crd-related-rail button.crd-related-rail__tab::before {
    content: "›" !important;

    display: block !important;

    font-family: Arial, sans-serif !important;
    font-size: 36px !important;
    line-height: 1 !important;
    font-weight: 300 !important;

    transform: translateY(-2px) !important;
  }

  body .crd-related-rail:not(.is-collapsed) button.crd-related-rail__tab::before {
    content: "‹" !important;
  }

  body .crd-related-rail::before,
  body .crd-related-rail.is-compact::before {
    content: "" !important;

    position: fixed !important;
    inset: 85px 0 0 0 !important;

    z-index: 2400 !important;

    display: none !important;

    background: rgba(0, 0, 0, 0.42) !important;
    pointer-events: auto !important;
  }

  body .crd-related-rail:not(.is-collapsed)::before,
  body .crd-related-rail.is-compact:not(.is-collapsed)::before {
    display: block !important;
  }
}

/* ============================================================================
   8. Мобильная стрелка ниже мобильного меню
============================================================================ */

@media (max-width: 760px) {
  body .crd-related-rail,
  body .crd-related-rail.is-compact {
    --crd-rail-width: min(282px, 78vw) !important;
  }

  body .crd-related-rail .crd-related-rail__panel,
  body .crd-related-rail.is-compact .crd-related-rail__panel {
    top: 56px !important;
    width: min(282px, 78vw) !important;
    height: calc(100vh - 56px) !important;
  }

  body .crd-related-rail button.crd-related-rail__tab,
  body .crd-related-rail.is-compact button.crd-related-rail__tab {
    top: 63px !important;
    left: 14px !important;

    width: 32px !important;
    min-width: 32px !important;
    height: 32px !important;
    min-height: 32px !important;
  }

  body .crd-related-rail button.crd-related-rail__tab::before {
    font-size: 31px !important;
  }

  body .crd-related-rail::before,
  body .crd-related-rail.is-compact::before {
    inset: 56px 0 0 0 !important;
  }
}

/* ============================================================================
   9. Очень узкие экраны
============================================================================ */

@media (max-width: 420px) {
  body.tmpl_body {
    --pa-container: calc(100vw - 20px) !important;
  }

  body.tmpl_body .pa-entry-article,
  body.tmpl_body .pa-author-card,
  body.tmpl_body .pa-comments-section,
  body.tmpl_body .pa-comment-form-section,
  body.tmpl_body .pa-comment-locked,
  body.tmpl_body .pa-comment-form-wrap,
  body.tmpl_body .pa-related-section {
    width: calc(100vw - 20px) !important;
    max-width: calc(100vw - 20px) !important;
  }

  body.tmpl_body .pa-entry-content {
    font-size: 15px !important;
    line-height: 1.72 !important;
  }

  body .crd-related-rail .crd-related-rail__panel,
  body .crd-related-rail.is-compact .crd-related-rail__panel {
    width: min(280px, 82vw) !important;
  }
}

/* ============================================================================
   10. Reduced motion
============================================================================ */

@media (prefers-reduced-motion: reduce) {
  body.tmpl_body .pa-entry-article,
  body.tmpl_body .pa-entry-hero-image,
  body .crd-related-rail,
  body .crd-related-rail * {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}
/* ============================================================================
   CRDGAME — выравнивание заголовка и мета под hero
   1600–2999px: title/meta центрируются вместе со связкой статья + "По теме"
============================================================================ */

@media (min-width: 1600px) and (max-width: 2499px) and (min-height: 781px) {
  body.tmpl_body {
    --crd-vk-title-width: 980px;
    --crd-vk-title-half: 490px;

    --crd-vk-content-center: calc((100vw + var(--crd-vk-left)) / 2);
    --crd-vk-title-left: max(
      320px,
      calc(var(--crd-vk-content-center) - var(--crd-vk-title-half))
    );
  }

  body.tmpl_body .pa-entry-title-block {
    text-align: left !important;
  }

  body.tmpl_body .pa-entry-title {
    width: min(var(--crd-vk-title-width), calc(100vw - 360px)) !important;
    max-width: min(var(--crd-vk-title-width), calc(100vw - 360px)) !important;

    margin-left: var(--crd-vk-title-left) !important;
    margin-right: auto !important;

    padding-left: 0 !important;
    padding-right: 0 !important;

    text-align: center !important;
  }

  body.tmpl_body .pa-entry-meta {
    width: min(var(--crd-vk-title-width), calc(100vw - 360px)) !important;
    max-width: min(var(--crd-vk-title-width), calc(100vw - 360px)) !important;

    margin-left: var(--crd-vk-title-left) !important;
    margin-right: auto !important;

    padding-left: 0 !important;
    padding-right: 0 !important;

    justify-content: center !important;
    text-align: center !important;
  }
}
/* ============================================================================
   CRDGAME — hero full width для Vulkk-layout
   Обложка снова занимает весь экран, левый навигатор лежит поверх неё.
============================================================================ */

@media (min-width: 1600px) and (max-width: 2499px) and (min-height: 781px) {
  body.tmpl_body .pa-entry-hero-image {
    left: 50% !important;

    width: 100vw !important;
    max-width: 100vw !important;

    transform: translateX(-50%) !important;
  }

  body.tmpl_body .pa-entry-hero-image:hover {
    transform: translateX(-50%) !important;
  }

  body.tmpl_body .pa-entry-breadcrumbs {
    left: 300px !important;
  }
}