/* ==========================================================================
   CRDGAME — ARCHIVE HERO RESPONSIVE LAYER
   NEWS + PUBL
   Version: 20260810_archive_hero_responsive_1

   Назначение:
   - единое поведение hero NEWS и PUBL в переходном диапазоне 769–1180px;
   - исправление длинных названий разделов;
   - исправление breadcrumbs;
   - исправление мобильной оси всего .crd-module-hero__wrap;
   - desktop >=1181px не меняется.

   Подключать ПОСЛЕ текущих NEWS/PUBL hero CSS.
   ========================================================================== */


/* ==========================================================================
   MID-RANGE
   769px — 1180px

   На этих ширинах header уже участвует в normal/sticky flow.
   Desktop-компенсация 115px здесь не нужна.
   ========================================================================== */

@media (min-width: 769px) and (max-width: 1180px) {

  /* ------------------------------------------------------------------------
     HERO GEOMETRY
     ------------------------------------------------------------------------ */

  html body.tmpl_body.archive_page.crd-news-crimson-one
  .crd-module-hero.crd-game-section-hero,

  html body.tmpl_body.archive_page.crd-publ-page:not(.crd-publ-home)
  .crd-module-hero.crd-module-hero--publ.crd-publ-hero-unified {
    position: relative !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;

    height: clamp(420px, 52vw, 520px) !important;
    min-height: clamp(420px, 52vw, 520px) !important;
    max-height: clamp(420px, 52vw, 520px) !important;

    margin-top: 0 !important;
    margin-right: 0 !important;
    margin-bottom: 0 !important;
    margin-left: 0 !important;

    padding: 0 !important;

    overflow: hidden !important;

    box-sizing: border-box !important;
  }


  /* ------------------------------------------------------------------------
     CONTENT WRAP
     ------------------------------------------------------------------------ */

  html body.tmpl_body.archive_page.crd-news-crimson-one
  .crd-module-hero.crd-game-section-hero
  > .crd-module-hero__wrap,

  html body.tmpl_body.archive_page.crd-publ-page:not(.crd-publ-home)
  .crd-module-hero.crd-module-hero--publ.crd-publ-hero-unified
  > .crd-module-hero__wrap {
    position: relative !important;

    top: 0 !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;

    width: calc(100% - 64px) !important;
    min-width: 0 !important;
    max-width: none !important;

    height: 100% !important;

    margin: 0 auto !important;

    padding:
      clamp(54px, 7vw, 72px)
      0
      clamp(26px, 4vw, 34px)
      !important;

    transform: none !important;

    box-sizing: border-box !important;
  }


  /* ------------------------------------------------------------------------
     BREADCRUMBS
     Проверенное положение:
     left = 1px.

     right:auto + width:max-content не дают полосе растягиваться
     на всю ширину hero.
     ------------------------------------------------------------------------ */

  html body.tmpl_body.archive_page.crd-news-crimson-one
  .crd-module-hero.crd-game-section-hero
  > .crd-news-breadcrumbs,

  html body.tmpl_body.archive_page.crd-publ-page:not(.crd-publ-home)
  .crd-module-hero.crd-module-hero--publ.crd-publ-hero-unified
  > .crd-news-breadcrumbs {
    position: absolute !important;

    top: 0 !important;
    left: 1px !important;
    right: auto !important;
    bottom: auto !important;

    display: block !important;

    width: max-content !important;
    min-width: 0 !important;
    max-width: calc(100% - 2px) !important;

    margin: 0 !important;

    white-space: normal !important;

    transform: none !important;

    box-sizing: border-box !important;
  }


  /* ------------------------------------------------------------------------
     SECTION TITLE
     Длинные названия не могут выйти за viewport.
     ------------------------------------------------------------------------ */

  html body.tmpl_body.archive_page.crd-news-crimson-one
  .crd-module-hero.crd-game-section-hero
  > .crd-module-hero__wrap h1,

  html body.tmpl_body.archive_page.crd-publ-page:not(.crd-publ-home)
  .crd-module-hero.crd-module-hero--publ.crd-publ-hero-unified
  > .crd-module-hero__wrap h1 {
    position: relative !important;

    top: auto !important;
    left: 0 !important;
    right: auto !important;
    bottom: auto !important;

    display: block !important;
    align-self: stretch !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

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

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

    font-size: clamp(34px, 4.6vw, 48px) !important;
    line-height: 1.04 !important;

    text-align: left !important;
    text-indent: 0 !important;

    white-space: normal !important;

    overflow: visible !important;
    overflow-wrap: break-word !important;
    word-break: normal !important;

    text-wrap: balance !important;

    transform: none !important;

    box-sizing: border-box !important;
  }


  /* ------------------------------------------------------------------------
     KICKER + DESCRIPTION
     ------------------------------------------------------------------------ */

  html body.tmpl_body.archive_page.crd-news-crimson-one
  .crd-module-hero.crd-game-section-hero
  > .crd-module-hero__wrap .crd-kicker,

  html body.tmpl_body.archive_page.crd-news-crimson-one
  .crd-module-hero.crd-game-section-hero
  > .crd-module-hero__wrap p,

  html body.tmpl_body.archive_page.crd-publ-page:not(.crd-publ-home)
  .crd-module-hero.crd-module-hero--publ.crd-publ-hero-unified
  > .crd-module-hero__wrap .crd-kicker,

  html body.tmpl_body.archive_page.crd-publ-page:not(.crd-publ-home)
  .crd-module-hero.crd-module-hero--publ.crd-publ-hero-unified
  > .crd-module-hero__wrap p {
    position: relative !important;

    left: 0 !important;
    right: auto !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

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

    white-space: normal !important;
    overflow-wrap: break-word !important;

    transform: none !important;

    box-sizing: border-box !important;
  }


  html body.tmpl_body.archive_page.crd-news-crimson-one
  .crd-module-hero.crd-game-section-hero
  > .crd-module-hero__wrap p,

  html body.tmpl_body.archive_page.crd-publ-page:not(.crd-publ-home)
  .crd-module-hero.crd-module-hero--publ.crd-publ-hero-unified
  > .crd-module-hero__wrap p {
    max-width: min(760px, 100%) !important;

    font-size: clamp(14px, 1.65vw, 17px) !important;
    line-height: 1.5 !important;
  }
}


/* ==========================================================================
   MOBILE
   <=768px

   Важно:
   здесь исправляется не отдельно h1, а ВЕСЬ hero wrap.
   Именно родительский wrap был причиной ухода kicker/title/description
   вправо за viewport.
   ========================================================================== */

@media (max-width: 768px) {

  /* ------------------------------------------------------------------------
     PUBL HEADER COMPENSATION
     Sticky header уже занял своё место в normal flow.
     ------------------------------------------------------------------------ */

  html body.tmpl_body.archive_page.crd-publ-page.crd-publ-section,
  html body.tmpl_body.archive_page.crd-publ-page.crd-publ-category {
    --crd-publ-menu-h: 0px !important;
  }


  html body.tmpl_body.archive_page.crd-publ-page.crd-publ-section
  .crd-module-hero.crd-module-hero--publ.crd-publ-hero-unified,

  html body.tmpl_body.archive_page.crd-publ-page.crd-publ-category
  .crd-module-hero.crd-module-hero--publ.crd-publ-hero-unified {
    margin-top: 0 !important;
  }


  /* ------------------------------------------------------------------------
     MOBILE CONTENT WRAP
     Полный сброс старой геометрии.
     ------------------------------------------------------------------------ */

  html body.tmpl_body.archive_page.crd-news-crimson-one
  .crd-module-hero.crd-game-section-hero
  > .crd-module-hero__wrap,

  html body.tmpl_body.archive_page.crd-publ-page:not(.crd-publ-home)
  .crd-module-hero.crd-module-hero--publ.crd-publ-hero-unified
  > .crd-module-hero__wrap {
    position: relative !important;

    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;

    inset: auto !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;

    width: calc(100% - 28px) !important;
    min-width: 0 !important;
    max-width: none !important;

    height: 100% !important;

    margin: 0 auto !important;

    /*
     * Вертикальные padding из текущего module CSS сохраняются.
     * Здесь обнуляем только горизонтальные.
     */
    padding-left: 0 !important;
    padding-right: 0 !important;

    transform: none !important;

    box-sizing: border-box !important;
  }


  /* ------------------------------------------------------------------------
     MOBILE BREADCRUMBS
     Натуральная ширина, а не полоса на весь экран.
     ------------------------------------------------------------------------ */

  html body.tmpl_body.archive_page.crd-news-crimson-one
  .crd-module-hero.crd-game-section-hero
  > .crd-news-breadcrumbs,

  html body.tmpl_body.archive_page.crd-publ-page:not(.crd-publ-home)
  .crd-module-hero.crd-module-hero--publ.crd-publ-hero-unified
  > .crd-news-breadcrumbs {
    position: absolute !important;

    top: 0 !important;
    left: 1px !important;
    right: auto !important;
    bottom: auto !important;

    display: block !important;

    width: max-content !important;
    min-width: 0 !important;
    max-width: calc(100% - 2px) !important;

    margin: 0 !important;

    white-space: normal !important;

    transform: none !important;

    box-sizing: border-box !important;
  }


  /* ------------------------------------------------------------------------
     MOBILE SECTION TITLE
     ------------------------------------------------------------------------ */

  html body.tmpl_body.archive_page.crd-news-crimson-one
  .crd-module-hero.crd-game-section-hero
  > .crd-module-hero__wrap h1,

  html body.tmpl_body.archive_page.crd-publ-page:not(.crd-publ-home)
  .crd-module-hero.crd-module-hero--publ.crd-publ-hero-unified
  > .crd-module-hero__wrap h1 {
    position: relative !important;

    top: auto !important;
    left: 0 !important;
    right: auto !important;
    bottom: auto !important;

    display: block !important;
    align-self: stretch !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

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

    padding: 0 !important;

    font-size: clamp(28px, 7vw, 38px) !important;
    line-height: 1.04 !important;

    text-align: left !important;
    text-indent: 0 !important;

    white-space: normal !important;

    overflow: visible !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;

    text-wrap: balance !important;

    transform: none !important;

    box-sizing: border-box !important;
  }


  /* ------------------------------------------------------------------------
     MOBILE KICKER + DESCRIPTION
     ------------------------------------------------------------------------ */

  html body.tmpl_body.archive_page.crd-news-crimson-one
  .crd-module-hero.crd-game-section-hero
  > .crd-module-hero__wrap .crd-kicker,

  html body.tmpl_body.archive_page.crd-news-crimson-one
  .crd-module-hero.crd-game-section-hero
  > .crd-module-hero__wrap p,

  html body.tmpl_body.archive_page.crd-publ-page:not(.crd-publ-home)
  .crd-module-hero.crd-module-hero--publ.crd-publ-hero-unified
  > .crd-module-hero__wrap .crd-kicker,

  html body.tmpl_body.archive_page.crd-publ-page:not(.crd-publ-home)
  .crd-module-hero.crd-module-hero--publ.crd-publ-hero-unified
  > .crd-module-hero__wrap p {
    position: relative !important;

    top: auto !important;
    left: 0 !important;
    right: auto !important;
    bottom: auto !important;

    display: block !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

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

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

    text-align: left !important;

    white-space: normal !important;
    overflow-wrap: break-word !important;

    transform: none !important;

    box-sizing: border-box !important;
  }
}