/* ============================================================
   doskapocheta.gudok.ru — Responsive overrides (Bitrix dpochet)
   Save as: responsive-overrides.css
   IMPORTANT: подключать ПОСЛЕДНИМ после всех css шаблона.
   NOTE: УБРАНЫ ВСЕ ПРАВКИ ДЛЯ ПЕРВОГО СЛАЙДЕРА (#tophero / .hero.top .slide)
   ============================================================ */

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }
body {
  overflow-x: hidden;
  min-width: 0 !important; /* 960gs default.css: body{min-width:960px} */
}

img, video, iframe { max-width: 100%; height: auto; }

/* ------------------------------------------------------------
   <= 1200px: make the fixed 960 grid fluid
   ------------------------------------------------------------ */
@media (max-width: 1200px) {
  .container_12 {
    width: auto !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    background-repeat: repeat !important;
  }

  /* 960gs columns -> stack */
  [class^="grid_"],
  [class*=" grid_"] {
    float: none !important;
    display: block !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* remove 960gs offsets */
  [class^="push_"], [class*=" push_"],
  [class^="pull_"], [class*=" pull_"] { left: auto !important; right: auto !important; }

  [class^="prefix_"], [class*=" prefix_"],
  [class^="suffix_"], [class*=" suffix_"] { padding-left: 0 !important; padding-right: 0 !important; }

  /* fixed-width blocks in include/2023/css/style.css (кроме #tophero — его НЕ трогаем) */
  .sponsor_box,
  .hero .bggrey {
    width: auto !important;
    max-width: 100% !important;
  }

  /* Jury blocks often have fixed widths */
  .jurilist .box.bggrey .article,
  .jurilist .box.bggrey .podpis {
    width: auto !important;
    float: none !important;
    display: block !important;
    text-align: left !important;
  }
}

/* ------------------------------------------------------------
   <= 992px: improve layouts
   ------------------------------------------------------------ */
@media (max-width: 992px) {
  /* sponsor logos wrap */
  .sponsor_box {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    justify-content: center !important;
  }
  .sponsor_box .logo_box {
    width: 140px !important; /* keep logo cell, but let line wrap */
    max-width: calc(50% - 10px) !important;
  }

  /* remove hard heights that ломают карточки */
  .jurilist-wrapper .item-juri {
    height: auto !important;
    min-height: 0 !important;
  }

  .box { width: 100%; }
  .search .itext { width: 100%; }
  .sf-menu { padding-left: 0 !important; }
  .juri .bggrey { width: 100%; }
}

/* ------------------------------------------------------------
   <= 768px: menu becomes vertical + typography
   ------------------------------------------------------------ */
@media (max-width: 768px) {
  body { font-size: 16px !important; line-height: 1.45; }
  h1 { font-size: 22px !important; line-height: 1.15; }
  h2 { font-size: 18px !important; line-height: 1.2; }

  /* Main menu (.menu) from include/2023/css/style.css */
  .menu { height: auto !important; }
  .menu ul { text-align: left !important; }
  .menu li { display: block !important; }
  .menu li a {
    display: block !important;
    font-size: 16px !important;  /* cancels 22px */
    padding: 10px 12px !important;
    border-radius: 10px;
  }

  /* Reduce padding in text blocks a bit */
  p { padding: 8px 0 !important; }

  /* Tables: scroll */
  table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* ============================================================
     bxSlider pager on mobile: replace ugly numeric list with dots
     + fix "dots not clickable" (z-index / overlay)
     (это общее для всех слайдеров, #tophero отдельно НЕ правим)
     ============================================================ */
  .bx-wrapper { position: relative !important; z-index: 1 !important; }
  .bx-wrapper .bx-viewport { overflow: hidden !important; position: relative !important; z-index: 1 !important; }

  .bx-wrapper .bx-pager {
    position: relative !important;
    z-index: 50 !important;
    pointer-events: auto !important;

    width: 100% !important;
    text-align: center !important;
    padding: 10px 0 6px !important;
    margin: 0 !important;

    display: flex !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  .bx-wrapper .bx-pager .bx-pager-item {
    display: inline-flex !important;
    float: none !important;
    margin: 0 !important;
    line-height: 0 !important;
  }

  /* make pager links dots (hide numbers) */
  .bx-wrapper .bx-pager.bx-default-pager a,
  .bx-wrapper .bx-pager a {
    display: inline-block !important;
    width: 10px !important;
    height: 10px !important;
    border-radius: 999px !important;
    background: rgba(0,0,0,.25) !important;
    text-indent: -9999px !important;
    overflow: hidden !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .bx-wrapper .bx-pager.bx-default-pager a.active,
  .bx-wrapper .bx-pager a.active {
    background: rgba(0,0,0,.65) !important;
  }

  /* optional: hide prev/next arrows on mobile */
  .bx-wrapper .bx-controls-direction a { display: none !important; }
}

/* ------------------------------------------------------------
   <= 480px: tighter paddings
   ------------------------------------------------------------ */
@media (max-width: 480px) {
  .container_12 { padding-left: 12px !important; padding-right: 12px !important; }

  .sponsor_box .logo_box {
    max-width: 100% !important;
  }
}
/* ============================================================
   Mobile menu (<=1200) for #example.sf-menu
   ============================================================ */
.mnav-toggle  {  display: none;  }
@media (max-width: 1200px) {
  /* Кнопка бургера */
  .mnav-toggle {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    cursor: pointer !important;
    padding: 10px 12px !important;
    border-radius: 12px !important;
    background: #fff !important;
    border: 1px solid rgba(0,0,0,.12) !important;
  }

  .mnav-toggle .mnav-ico {
    width: 22px !important;
    height: 16px !important;
    position: relative !important;
    display: inline-block !important;
  }
  .mnav-toggle .mnav-ico::before,
  .mnav-toggle .mnav-ico::after,
  .mnav-toggle .mnav-ico span {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    height: 2px !important;
    background: rgba(0,0,0,.75) !important;
    border-radius: 2px !important;
  }
  .mnav-toggle .mnav-ico::before { top: 0 !important; }
  .mnav-toggle .mnav-ico span { top: 7px !important; }
  .mnav-toggle .mnav-ico::after { top: 14px !important; }

  /* Само меню по умолчанию скрыто */
  #example.sf-menu {
    display: none !important;
    padding-left: 0 !important; /* перебиваем inline 190px */
    margin: 10px 0 0 !important;
    width: 100% !important;
  }

  /* Открытое состояние */
  .grid_12.mnav-open #example.sf-menu {
    display: block !important;
  }

  /* Вертикальная раскладка */
  #example.sf-menu > li {
    float: none !important;
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
  }
  #example.sf-menu > li > a {
    display: block !important;
    font-size: 16px !important;
    padding: 12px 14px !important;
    border-radius: 10px !important;
    white-space: normal !important;
  }

  /* Подменю: делаем “вложенным списком” */
  #example.sf-menu ul {
    position: static !important;
    visibility: visible !important;
    width: 100% !important;
    margin: 6px 0 10px !important;
    padding-left: 12px !important;
    box-shadow: none !important;
  }
  #example.sf-menu ul li { float: none !important; }
  #example.sf-menu ul a { padding: 10px 12px !important; }
  
    /* зона меню (div.grid_12, где лежит ul#example) */
  .grid_12 { position: relative; }

  /* кнопка-бургер */
  .mnav-toggle{
    display:inline-flex !important;
    align-items:center !important;
    gap:10px !important;
    cursor:pointer !important;

    padding:10px 12px !important;
    border-radius: 0px !important;
    background:#fff !important;
    border: 0px !important;

    margin: 8px 0 10px !important;
  }
  .mnav-toggle .mnav-ico{ width:22px !important; height:16px !important; position:relative !important; display:inline-block !important; }
  .mnav-toggle .mnav-ico::before,
  .mnav-toggle .mnav-ico::after,
  .mnav-toggle .mnav-ico span{
    content:"" !important;
    position:absolute !important; left:0 !important; right:0 !important;
    height:2px !important; background:rgba(0,0,0,.75) !important; border-radius:2px !important;
  }
  .mnav-toggle .mnav-ico::before{ top:0 !important; }
  .mnav-toggle .mnav-ico span{ top:7px !important; }
  .mnav-toggle .mnav-ico::after{ top:14px !important; }

  /* UL меню — по умолчанию скрыто */
  #example.sf-menu{
    display:none !important;
    padding-left:0 !important;              /* перебиваем inline padding-left:190px */
    margin:0 !important;
    width:100% !important;

    background:#fff !important;
    border:1px solid rgba(0,0,0,.10) !important;
    border-radius:14px !important;
    overflow:hidden !important;
  }
  .grid_12.mnav-open #example.sf-menu{ display:block !important; }

  /* общий сброс "десктопной суперфишевской" геометрии */
  #example.sf-menu,
  #example.sf-menu li,
  #example.sf-menu a{
    float:none !important;
    height:auto !important;
    line-height:normal !important;
    background:none !important;
  }

  /* пункты 1 уровня */
  #example.sf-menu > li{
    display:block !important;
    width:100% !important;
    margin:0 !important;
    border-top:1px solid rgba(0,0,0,.08) !important;
  }
  #example.sf-menu > li:first-child{ border-top:none !important; }

  #example.sf-menu > li > a{
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;

    padding:12px 14px !important;
    font-size:16px !important;
    font-weight:600 !important;
    color:#0b2f55 !important;

    text-decoration:none !important;
  }

  /* активный пункт — аккуратная подсветка (вместо огромного синего блока) */
  #example.sf-menu > li.active > a,
  #example.sf-menu > li > a:hover{
    background: rgba(11,47,85,.08) !important;
  }

  /* ===== Вложенность (подменю) ===== */
  /* superfish на десктопе прячет/абсолютит. На мобилке делаем статично */
  #example.sf-menu > li > ul{
    position:static !important;
    left:auto !important; 
	top:auto !important;
    visibility:visible !important;

    margin:0 !important;
    padding:6px 0 10px !important;

    background: rgba(0,0,0,.03) !important;
    border-top:1px solid rgba(0,0,0,.08) !important;
  }

  #example.sf-menu > li > ul > li{
    border:none !important;
    margin:0 !important;
  }

  #example.sf-menu > li > ul > li > a{
    
    padding:10px 14px 10px 28px !important;   /* отступ вложенности */
    font-size:14px !important;
    font-weight:500 !important;
    color:#0b2f55 !important;
    text-decoration:none !important;
  }

  #example.sf-menu > li > ul > li > a:hover{
    background: rgba(11,47,85,.08) !important;
  }

  /* стрелочка у пунктов с подменю */
  #example.sf-menu > li:has(> ul) > a::after{
    content:"▾" !important;
    font-size:14px !important;
    opacity:.65 !important;
    margin-left:10px !important;
  }

 #example.sf-menu > li:has(> ul) > a::after{ content:"▾" !important; }
 #example.sf-menu > li.sub-open > a::after{ content:"▴" !important; }
 /*  
 #example.sf-menu > li > ul {
	 display: none !important;
 }

 #example.sf-menu > li.sub-open > ul { display: block !important; }*/
}