/* ===== FD301 FULL WIDTH + MOBILE STACK ===== */

/* 1. Снимаем ограничение ширины контейнера блока */
.t897__container,
.t897 .t-container {
  max-width: 100% !important;
  width: 100% !important;
}

/* 2. Основной feed-контейнер (3 в ряд на десктопе) */
ul.t-feed__container.t-feed__container_inrow3 {
  display: flex !important;
  justify-content: space-between;
  gap: 24px !important;

  padding-left: 40px !important;
  padding-right: 40px !important;

  box-sizing: border-box;
  max-width: 100% !important;
}

/* 3. Убираем системные отступы колонок */
ul.t-feed__container.t-feed__container_inrow3 > li.t-col {
  padding: 0 !important;
  margin: 0 !important;
}

/* 4. Карточки: строго 3 в ряд (расчёт учитывает gap 24px между ними) */
ul.t-feed__container.t-feed__container_inrow3 > li.t-feed__post {
  flex: 0 0 calc((100% - 48px) / 3) !important;
  max-width: calc((100% - 48px) / 3) !important;
  box-sizing: border-box;
}

/* 5. Безопасные правки для картинок/высоты — чтобы не "обрывало" блок */
.t-feed__col-grid__post-wrapper {
  height: auto !important;
}
.t-feed__post-imgwrapper,
.t-feed__post-bgimg {
  height: auto !important;
  aspect-ratio: auto !important;
  min-height: 0 !important;
}

/* -------------------------------------------------------
   АДАПТИВ: на мобильных устройствах — посты в колонку
   (подстраивайте breakpoint при необходимости)
   ------------------------------------------------------- */
@media (max-width: 767px) {
  ul.t-feed__container.t-feed__container_inrow3 {
    flex-direction: column !important;
    gap: 24px !important;

    /* на мобильных можно чуть уменьшить отступы по бокам */
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  ul.t-feed__container.t-feed__container_inrow3 > li.t-feed__post {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }

  /* делаем изображение растягивающимся по ширине карточки */
  .t-feed__post-imgwrapper,
  .t-feed__post-bgimg {
    width: 100% !important;
    display: block !important;
    background-size: cover !important;
    background-position: center center !important;
  }
}

/* Доп. рекомендация: если у вас есть специфичные страницы с другим layout,
   можно сузить селектор, добавив #recXXXXXXX перед ul (если нужно только для блока с id). */
/* ===== FD301 MOBILE IMAGE FIX ===== */
@media screen and (max-width: 767px) {

  /* 1. Принудительно показываем обертку картинки */
  .t897 .t-feed__post-imgwrapper {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
  }

  /* 2. Убираем фиксированную высоту, которую Tilda ставит на мобиле */
  .t897 .t-feed__col-grid__post-wrapper {
    height: auto !important;
  }

  /* 3. Нормальный aspect ratio для картинки */
  .t897 .t-feed__post-imgwrapper {
    aspect-ratio: 4 / 3 !important;
  }

  /* 4. Фон-картинка точно отображается */
  .t897 .t-feed__post-bgimg {
    display: block !important;
    background-size: cover !important;
    background-position: center !important;
  }

}

/* ===== FD301 DESKTOP IMAGE RESTORE ===== */
@media screen and (min-width: 768px) {

  /* Возвращаем стандартную логику Tilda */
  .t897 .t-feed__post-imgwrapper {
    display: block !important;
    height: auto !important;
  }

  .t897 .t-feed__col-grid__post-wrapper {
    height: 374px !important; /* стандартная высота FD301 */
  }

  .t897 .t-feed__post-bgimg {
    display: block !important;
  }

}

/* ===== FD301 DESKTOP IMAGE FIX (FINAL) ===== */
@media screen and (min-width: 980px) {

  /* Жёстко возвращаем высоту карточки */
  .t897 .t-feed__col-grid__post-wrapper {
    height: auto !important;
    min-height: 374px !important;
  }

  /* Обёртка картинки */
  .t897 .t-feed__post-imgwrapper {
    display: block !important;
    width: 100% !important;
    aspect-ratio: 1.3 !important;
  }

  /* Сам фон */
  .t897 .t-feed__post-bgimg {
    display: block !important;
    height: 100% !important;
    min-height: 100% !important;
    background-size: cover !important;
    background-position: center !important;
  }

}