/* ============================================================
   doskapocheta.gudok.ru — Responsive overrides (Bitrix dpochet)
   UPDATED: fixes real template classes (.container_12, .menu, #tophero, .sponsor_box, .jurilist*)
   Save as: responsive-overrides.css
   IMPORTANT: подключать ПОСЛЕДНИМ после всех css шаблона.
   ============================================================ */

*,
*::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 */
  .sponsor_box,
  .hero .bggrey,
  #tophero {
    width: auto !important;
    max-width: 100% !important;
  }

  /* hero slider: allow wrapping instead of 940px fixed row */
  #tophero { height: auto !important; }
  #tophero div { float: none !important; width: auto !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 hero/gallery layouts
   ------------------------------------------------------------ */
@media (max-width: 992px) {
  /* Make top hero slides a flexible grid */
  #tophero {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    align-items: stretch !important;
    justify-content: center !important;
  }

  /* The markup uses .hero.top .slide inside #tophero */
  .hero.top .slide {
    width: auto !important;          /* cancels 188px */
    flex: 1 1 220px !important;      /* 2–3 in row on tablets */
    max-width: 340px !important;
  }

  .hero.top .slide img {
    width: 100% !important;          /* cancels 188px */
    height: auto !important;
    display: block !important;
  }

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

/* ------------------------------------------------------------
   <= 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; }
}

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

  .hero.top .slide {
    flex: 1 1 100% !important;
    max-width: 100% !important;
  }

  .sponsor_box .logo_box {
    max-width: 100% !important;
  }
}