.lu-tiles{
  /* Геометрия — можно переопределить на инстансе через style="" */
  --lu-tile-radius:      22px;
  --lu-tile-img-radius:  14px;
  --lu-tile-pad:         10px;   /* отступ фото от края плитки */
  --lu-tile-text-pad-x:  6px;
  --lu-tile-margin:      16px;

  --lu-tile-title-size:  18px;
  --lu-tile-sub-size:    14px;

  margin-bottom: 0;

  /* Флекс-ряд вместо bootstrap-флоатов: ровные ряды при разной
     высоте подписей, без «ступенек» и clearfix-проблем. */
  display: flex;
  flex-wrap: wrap;
}

.lu-tiles, .lu-tiles *{ box-sizing: border-box; }

.lu-tiles:before,
.lu-tiles:after{
  display: none;
}

.lu-tiles > [class*="col-"]{
  float: none;
  display: flex;
}

/* =========================================================
   Плитка
   ========================================================= */
.lu-tile{
  position: relative;
  width: 100%;
  height: calc(100% - var(--lu-tile-margin));
  display: flex;
  flex-direction: column;

  margin-bottom: var(--lu-tile-margin);
  padding: var(--lu-tile-pad);

  background: var(--lu-card-bg, #f5f5f5);
  border-radius: var(--lu-tile-radius);
  box-shadow: 0 10px 24px rgba(0,0,0,.04);
}

/* ---------- Фото ---------- */
.lu-tile__media{
  position: relative;
  overflow: hidden;
  line-height: 0;

  padding-top: 75%;                /* 4:3 */
  border-radius: var(--lu-tile-img-radius);
  background: var(--lu-stone, #e8e0d0);
}

/* Перебиваем кракеновский .text-content: у него свои margin/max-width
   на изображениях. Селектор задвоен намеренно. */
.lu-tile img.lu-tile__img,
.text-content .lu-tile img.lu-tile__img{
  position: absolute;
  inset: 0;
  display: block;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover;
  object-position: center center;
  margin: 0 !important;
  margin-bottom: 0 !important;
  border-radius: 0;
}

/* ---------- Чип трека поверх фото ---------- */
.lu-tile__chip{
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 1;

  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;

  font-size: 12px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: .01em;
  white-space: nowrap;

  background: var(--lu-stone, #e8e0d0);
  color: var(--lu-bark-deep, #2d2418);
  box-shadow: 0 1px 3px rgba(0,0,0,.12);
}

.lu-tile__chip--kids{
  background: var(--lu-accent-soft, #dff3cf);
  color: var(--lu-forest-deep, #2f5d4e);
}

.lu-tile__chip--parents{
  background: var(--lu-sky-mist, #d6eef9);
  color: var(--lu-midnight, #1a3a4a);
}

.lu-tile__chip--together{
  background: var(--lu-cream, #f0e4d0);
  color: var(--lu-earth-deep, #5c3d2e);
}

/* ---------- Текст ---------- */
.lu-tile__body{
  flex: 1 1 auto;
  min-width: 0;
  padding: 12px var(--lu-tile-text-pad-x) 4px;
}

.lu-tile__title,
.text-content .lu-tile__title{
  margin: 0 !important;
  font-size: var(--lu-tile-title-size) !important;
  line-height: 1.2 !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em;
  color: var(--lu-bark-deep, #2d2418) !important;
}

.lu-tile__sub,
.text-content .lu-tile__sub{
  margin: 5px 0 0 !important;
  font-size: var(--lu-tile-sub-size) !important;
  line-height: 1.4 !important;
  font-weight: 400 !important;
  color: var(--lu-bark, #6b5d4f) !important;
}

/* =========================================================
   Планшет
   ========================================================= */
@media (max-width: 991px){
  .lu-tiles{
    --lu-tile-title-size: 17px;
  }
}

/* =========================================================
   Мобилка — 2 колонки мини-плиток
   ========================================================= */
@media (max-width: 767px){
  .lu-tiles{
    --lu-tile-radius:     16px;
    --lu-tile-img-radius: 10px;
    --lu-tile-pad:        6px;
    --lu-tile-text-pad-x: 4px;
    --lu-tile-margin:     10px;

    --lu-tile-title-size: 15px;
    --lu-tile-sub-size:   12px;

    /* компенсируем bootstrap-паддинги колонок под узкий экран */
    margin-left: -5px;
    margin-right: -5px;
  }

  .lu-tiles > [class*="col-"]{
    padding-left: 5px;
    padding-right: 5px;
  }

  .lu-tile{
    box-shadow: 0 6px 16px rgba(0,0,0,.04);
  }

  .lu-tile__chip{
    top: 6px;
    left: 6px;
    padding: 2px 8px;
    font-size: 11px;
  }

  .lu-tile__body{
    padding: 8px var(--lu-tile-text-pad-x) 2px;
  }

  .lu-tile__sub,
  .text-content .lu-tile__sub{
    margin-top: 3px !important;
    line-height: 1.35 !important;
  }
}