/* /design/mob/about.css
   About page overrides (clean + non-conflicting)
   - Advantages: one column on <=1024px
   - Proper spacing before reviews (no overlay)
*/

@media (max-width: 1024px){

  /* ===== Advantages: one column + contain legacy floats ===== */
  .pi-section-w.zk-about-advantages .pi-section{
    display: flow-root !important;
  }

  .pi-section-w.zk-about-advantages ul{
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .pi-section-w.zk-about-advantages li{
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
    box-sizing: border-box !important;
    margin: 0 0 18px 0 !important;
    padding: 0 !important;
    list-style: none !important;
  }

  .pi-section-w.zk-about-advantages li::before,
  .pi-section-w.zk-about-advantages li::after{
    content: none !important;
    display: none !important;
  }

  .pi-section-w.zk-about-advantages h1,
  .pi-section-w.zk-about-advantages h2,
  .pi-section-w.zk-about-advantages h3,
  .pi-section-w.zk-about-advantages p{
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    white-space: normal !important;
  }

  /* ===== Reviews: IMPORTANT — keep a real gap above ===== */
  .pi-section-w.zk-about-reviews{
    clear: both !important;
    float: none !important;
    display: block !important;

    /* gap between sections (this is what was being zeroed before) */
    margin-top: 32px !important;
  }

  /* Never allow theme “pull-up” tricks */
  .pi-section-w.zk-about-reviews,
  .pi-section-w.zk-about-reviews .pi-section{
    top: 0 !important;
    transform: none !important;
  }

  /* Reviews title: ensure it stays in normal flow */
  .pi-section-w.zk-about-reviews .pi-section > h2{
    position: static !important;
    transform: none !important;
    float: none !important;
    clear: both !important;

    display: block !important;
    width: 100% !important;
    margin: 0 0 12px 0 !important;
    padding: 0 !important;
    line-height: 1.2 !important;
  }

  /* Slight internal padding so title never “touches” previous text */
  .pi-section-w.zk-about-reviews .pi-section{
    padding-top: 16px !important;
  }
}
@media (max-width: 1024px){
  .pi-section-w.zk-about-advantages .pi-section{
    overflow: hidden !important;
    padding-bottom: 24px !important;
  }
}

@media (max-width: 1024px){

  /* Reviews must sit on top and hide anything behind it */
  .pi-section-w.zk-about-reviews,
  .pi-section-w.zk-about-reviews .pi-section{
    position: relative !important;
    z-index: 50 !important;
    background: #fff !important; /* или тот цвет, который у страницы */
  }

  /* оставляем твой отступ сверху */
  .pi-section-w.zk-about-reviews{
    margin-top: 32px !important;
  }
}

@media (max-width: 1024px){

  /* главное: убираем фиксированную высоту с десктопа */
  .pi-section-w.zk-about-advantages{
    height: auto !important;
    min-height: 0 !important;
  }

  /* и на всякий случай то же на внутреннюю секцию */
  .pi-section-w.zk-about-advantages .pi-section{
    height: auto !important;
    min-height: 0 !important;
  }

  /* убираем фиксированную ширину абзацев, чтобы не выталкивало вправо */
  .pi-section-w.zk-about-advantages ul li p{
    width: auto !important;
    max-width: 100% !important;
  }

  /* твой 1-колоночный режим (оставь, если уже есть) */
  .pi-section-w.zk-about-advantages ul,
  .pi-section-w.zk-about-advantages li{
    float: none !important;
    width: 100% !important;
  }
}

@media (max-width: 1024px){

  /* миниатюры: 2 в ряд, переносятся на следующую строку */
  .pi-section-w.zk-about-reviews .zk-reviews .zk-cont ul{
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
  }

  .pi-section-w.zk-about-reviews .zk-reviews .zk-cont ul > li{
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    width: auto !important;
    box-sizing: border-box !important;

    /* чтобы background-миниатюры имели высоту и не слипались */
    aspect-ratio: 3 / 4;
    min-height: 160px;
    background-position: center center !important;
    background-size: cover !important;
    position: relative !important;
    border-radius: 8px; /* можно убрать, если не надо */
  }

  /* ссылка кликабельна по всей плитке */
  .pi-section-w.zk-about-reviews .zk-reviews .zk-cont ul > li > a{
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
  }

  /* очень узкие экраны — по 1 в ряд */
  @media (max-width: 380px){
    .pi-section-w.zk-about-reviews .zk-reviews .zk-cont ul{
      grid-template-columns: 1fr !important;
    }
  }
}

@media (max-width: 1024px){

  .pi-section-w.zk-about-reviews .zk-reviews .zk-cont ul{
    width: 100% !important;
    max-width: 100% !important;
  }

  .pi-section-w.zk-about-reviews .zk-reviews .zk-cont ul > li{
    /* убиваем наследие десктопа, из-за которого уезжает вправо */
    float: none !important;
    display: block !important;
    width: auto !important;
    max-width: 100% !important;
    min-width: 0 !important;

    margin: 0 !important;        /* важно */
    margin-left: 0 !important;
    margin-right: 0 !important;

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

  /* на всякий случай — если у ссылок/обёрток есть фикс. ширина */
  .pi-section-w.zk-about-reviews .zk-reviews .zk-cont ul > li > a{
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
}

@media (max-width:1024px){
  .pi-section-w.zk-about-reviews .zk-reviews .zk-cont{ overflow: visible !important; }
  .pi-section-w.zk-about-reviews .zk-reviews{ overflow: visible !important; }
}

@media (max-width: 1024px){

  /* контейнер миниатюр: перенос на строки */
  .pi-section-w.zk-about-reviews .zk-reviews ul{
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;

    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;

    width: 100% !important;
    max-width: 100% !important;
  }

  /* каждая миниатюра: 2 в ряд */
  .pi-section-w.zk-about-reviews .zk-reviews ul > li{
    float: none !important;        /* важно: убить десктопный float */
    width: auto !important;        /* убить width:50% и т.п. */
    margin: 0 !important;
    padding: 0 !important;

    flex: 0 0 calc(50% - 5px) !important;
    max-width: calc(50% - 5px) !important;

    box-sizing: border-box !important;
    position: relative !important;

    /* чтобы background-миниатюры не “слипались” */
    aspect-ratio: 3 / 4;
    min-height: 160px;
    background-size: cover !important;
    background-position: center !important;
  }

  /* ссылка кликабельна по всей плитке */
  .pi-section-w.zk-about-reviews .zk-reviews ul > li > a{
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
  }

  /* очень узкие — по 1 в ряд */
  @media (max-width: 380px){
    .pi-section-w.zk-about-reviews .zk-reviews ul > li{
      flex-basis: 100% !important;
      max-width: 100% !important;
    }
  }
}

@media (max-width: 1024px){

  /* выключаем “ленту” из _custom.css */
  .pi-section-w.zk-about-reviews .zk-reviews{
    padding: 0 !important;
    overflow: visible !important;
  }
  .pi-section-w.zk-about-reviews .zk-reviews .zk-cont{
    width: 100% !important;
    max-width: 100% !important;
  }

  /* сетка 2 в ряд */
  .pi-section-w.zk-about-reviews .zk-reviews .zk-cont ul{
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
  }

  /* убиваем float/фиксированные размеры/отступы, которые уводят 2 и 4 вправо */
  .pi-section-w.zk-about-reviews .zk-reviews .zk-cont li{
    float: none !important;
    display: block !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;

    aspect-ratio: 3 / 4;
    min-height: 160px;
    background-size: cover !important;
    background-position: center !important;
    position: relative !important;
  }

  /* кликабельная зона на всю плитку */
  .pi-section-w.zk-about-reviews .zk-reviews .zk-cont li a{
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
  }

  /* очень узко — 1 в ряд */
  @media (max-width: 380px){
    .pi-section-w.zk-about-reviews .zk-reviews .zk-cont ul{
      grid-template-columns: 1fr !important;
    }
  }
}