/* ==========================================================================
   CRDGAME — UNIVERSAL PUBL GAME HERO V3
   crd-publ-game-1 ... crd-publ-game-8

   - собственное изображение каждой игры
   - единая высота hero
   - единая позиция текста с Crimson Desert
   - адаптивная X-ось текста
   - длинные названия переносятся автоматически
   ========================================================================== */


/* ==========================================================================
   DESKTOP
   ========================================================================== */

@media (min-width: 1181px) {

  html body.tmpl_body.crd-publ-page:not(.crd-publ-home)
  .crd-module-hero.crd-module-hero--publ:not(.crd-module-hero--publ-home).crd-publ-hero-unified {
    --crd-module-hero-h: 520px !important;
    --crd-module-hero-top: 115px !important;
    --crd-module-hero-bottom: 0px !important;

    position: relative !important;
    z-index: 1 !important;

    display: flex !important;
    align-items: center !important;

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

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

    margin: 115px auto 0 !important;
    padding: 0 !important;

    overflow: hidden !important;

    background: #090705 !important;

    border: 0 !important;
    border-bottom: 1px solid rgba(174, 137, 84, .24) !important;

    box-shadow:
      inset 0 -90px 120px rgba(0, 0, 0, .34),
      0 24px 70px rgba(0, 0, 0, .28) !important;

    transform: none !important;

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


  /* =========================================================
     Старые overlay-слои PUBL отключаем.
     Затемнение находится непосредственно в background.
     ========================================================= */

  html body.tmpl_body.crd-publ-page:not(.crd-publ-home)
  .crd-module-hero.crd-module-hero--publ.crd-publ-hero-unified::before,

  html body.tmpl_body.crd-publ-page:not(.crd-publ-home)
  .crd-module-hero.crd-module-hero--publ.crd-publ-hero-unified::after {
    content: none !important;
    display: none !important;
  }


  /* =========================================================
     BACKGROUND
     ========================================================= */

  html body.tmpl_body.crd-publ-page:not(.crd-publ-home)
  .crd-module-hero.crd-module-hero--publ.crd-publ-hero-unified
  > .crd-module-hero__bg {
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;

    display: block !important;

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

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

    opacity: 1 !important;
    filter: none !important;

    background-image:
      linear-gradient(
        90deg,
        rgba(0, 0, 0, .61) 0%,
        rgba(0, 0, 0, .1708) 27%,
        rgba(0, 0, 0, .061) 50%,
        rgba(0, 0, 0, .1708) 73%,
        rgba(0, 0, 0, .61) 100%
      ),
      linear-gradient(
        180deg,
        rgba(0, 0, 0, 0) 0%,
        rgba(0, 0, 0, .102) 40%,
        rgba(0, 0, 0, .357) 72%,
        rgba(5, 4, 3, .85) 100%
      ),
      var(--crd-publ-live-game-image) !important;

    background-repeat:
      no-repeat,
      no-repeat,
      no-repeat !important;

    background-size:
      100% 100%,
      100% 100%,
      cover !important;

    background-position:
      center center,
      center center,
      center center !important;

    transform: none !important;
    transform-origin: center center !important;

    pointer-events: none !important;
  }


  /* =========================================================
     CONTENT
     Та же ось, что у Crimson Desert.

     <=1960px  = 0
     2200px    = -120px
     2400px    = -220px
     >=2560px  = -300px
     ========================================================= */

  html body.tmpl_body.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;

    z-index: 6 !important;

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

    width:
      min(
        1800px,
        calc(100% - 160px)
      ) !important;

    max-width: 1800px !important;
    min-width: 0 !important;

    height: 100% !important;

    margin: 0 auto !important;
    padding: 46px 0 30px !important;

    transform:
      translateX(
        clamp(
          -300px,
          calc(980px - 50vw),
          0px
        )
      ) !important;

    box-sizing: border-box !important;
  }


  /* =========================================================
     KICKER / H1 / DESCRIPTION
     ========================================================= */

  html body.tmpl_body.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.crd-publ-page:not(.crd-publ-home)
  .crd-module-hero.crd-module-hero--publ.crd-publ-hero-unified
  > .crd-module-hero__wrap h1,

  html body.tmpl_body.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;
    z-index: 7 !important;
  }


  /* =========================================================
     LONG GAME TITLES
     ========================================================= */

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

    max-width:
      min(
        1050px,
        calc(100vw - 220px)
      ) !important;

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

    text-wrap: balance !important;

    line-height: 1.06 !important;
  }


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

    max-width:
      min(
        850px,
        calc(100vw - 220px)
      ) !important;

    white-space: normal !important;

    line-height: 1.55 !important;
  }


  /* =========================================================
     BREADCRUMBS
     ========================================================= */

  html body.tmpl_body.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: 0 !important;
    right: auto !important;
    bottom: auto !important;

    z-index: 8 !important;

    margin: 0 !important;

    transform: none !important;
  }
}


/* ==========================================================================
   TABLET
   ========================================================================== */

@media (max-width: 1180px) {

  html body.tmpl_body.crd-publ-page:not(.crd-publ-home)
  .crd-module-hero.crd-module-hero--publ.crd-publ-hero-unified
  > .crd-module-hero__wrap {
    width: calc(100% - 64px) !important;
    max-width: none !important;

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

    transform: none !important;
  }


  html body.tmpl_body.crd-publ-page:not(.crd-publ-home)
  .crd-module-hero.crd-module-hero--publ.crd-publ-hero-unified
  > .crd-module-hero__wrap h1 {
    max-width: 900px !important;

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

    text-wrap: balance !important;
  }


  html body.tmpl_body.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: 760px !important;
  }
}


/* ==========================================================================
   MOBILE
   ========================================================================== */

@media (max-width: 768px) {

  html body.tmpl_body.crd-publ-page:not(.crd-publ-home)
  .crd-module-hero.crd-module-hero--publ.crd-publ-hero-unified
  > .crd-module-hero__wrap {
    width: calc(100% - 28px) !important;
    max-width: none !important;

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

    transform: none !important;
  }


  html body.tmpl_body.crd-publ-page:not(.crd-publ-home)
  .crd-module-hero.crd-module-hero--publ.crd-publ-hero-unified
  > .crd-module-hero__wrap h1 {
    width: 100% !important;
    max-width: 100% !important;

    white-space: normal !important;

    text-wrap: balance !important;
  }


  html body.tmpl_body.crd-publ-page:not(.crd-publ-home)
  .crd-module-hero.crd-module-hero--publ.crd-publ-hero-unified
  > .crd-module-hero__wrap p {
    width: 100% !important;
    max-width: 100% !important;
  }
}
/* ==========================================================================
   CRDGAME — PUBL SECTION / CATEGORY MOBILE HEADER FIX

   Sticky header уже занимает 94px в normal flow.
   Поэтому внутри hero повторная компенсация через
   --crd-publ-menu-h больше не нужна.
   ========================================================================== */

@media (max-width: 768px) {

  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;
  }


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

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


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

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

}