/* ============================================================
   KREP_TILES163 · krep-home-tiles163.css · РЕДАКЦИЯ 2
   КРЕПИОН · часть 163 · 31.08.2026 · РЕДАКЦИЯ 6

   Слой ПОВЕРХ krep-home.css. Оригинал не тронут.

   РЕДАКЦИЯ 4 (по решению владельца): четыре плитки в ряд,
   масштаб мельче примерно на 15%, фото заполняет левую часть
   плитки целиком. Ряд резиновый: неполный последний ряд
   растягивается на всю ширину, дыры справа нет.
   Перенос по буквам убран — слова больше не рвутся.
   РЕДАКЦИЯ 5: ширина плитки задана с запасом — ровно четыре в ряд.
   Раньше стояло «четверть минус зазор», и четвёртая плитка не
   влезала на пару пикселей: браузер переносил её вниз.

   ОТКАТ: убрать из index.html строку с krep-home-tiles163.css.
   ============================================================ */

@media screen {

  /* ---------- ряд резиновый: неполный ряд тянется на всю ширину */
  html.khome-on .hero-cards #tiles{
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    grid-template-columns: none !important;
  }

  /* ---------- сама плитка: фото слева, текст справа -------- */
  html.khome-on .hero-cards #tiles .tile{
    flex: 1 1 22% !important;
    min-width: 170px !important;
    display: grid !important;
    grid-template-columns: 88px minmax(0, 1fr) !important;
    align-items: stretch !important;
    min-height: 82px !important;
    overflow: hidden !important;
  }

  html.khome-on .hero-cards #tiles .kimg{
    width: 88px !important;
    height: auto !important;
    min-height: 100% !important;
    aspect-ratio: auto !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    background: #f2f5f3 !important;
    overflow: hidden !important;
    display: block !important;
  }
  html.khome-on .hero-cards #tiles .kimg img{
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: cover !important;
    display: block !important;
  }

  /* ---------- подпись -------------------------------------- */
  html.khome-on .hero-cards #tiles .kcap{
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    padding: 8px 12px !important;
    text-align: left !important;
  }

  html.khome-on .hero-cards #tiles .kcap h3{
    font-size: 18.5px !important;
    line-height: 1.15 !important;
    margin: 0 0 2px !important;
    text-wrap: balance;
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
  }

  /* каша из стандартов под названием убрана — как на макете владельца */
  html.khome-on .hero-cards #tiles .kcap .std{ display: none !important; }

  html.khome-on .hero-cards #tiles .kcap .num{
    font-size: 12.5px !important;
    margin: 0 !important;
  }
}

/* ---------- узкие экраны ---------------------------------- */
@media screen and (max-width: 1100px){
  html.khome-on .hero-cards #tiles .tile{
    flex: 1 1 30% !important;
  }
}

@media screen and (max-width: 820px){
  html.khome-on .hero-cards #tiles .tile{
    flex: 1 1 45% !important;
  }
}

@media screen and (max-width: 560px){
  html.khome-on .hero-cards #tiles{
    gap: 9px !important;
  }
  html.khome-on .hero-cards #tiles .tile{
    flex: 1 1 100% !important;
    min-width: 0 !important;
    grid-template-columns: 76px minmax(0, 1fr) !important;
    min-height: 74px !important;
  }
  html.khome-on .hero-cards #tiles .kimg{ width: 76px !important; }
  html.khome-on .hero-cards #tiles .kcap{ padding: 8px 11px !important; }
  html.khome-on .hero-cards #tiles .kcap h3{ font-size: 17px !important; }
  html.khome-on .hero-cards #tiles .kcap .num{ font-size: 12px !important; }
}