/* Frontend catalog optimization overrides — lazy image states, default cover, aspect-ratio */

.edlix-cover {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  background-color: transparent;
  background-image: url('/static/assets/img/loader.gif');
  background-size: 64px 64px;
  background-repeat: no-repeat;
  background-position: center;
  border-radius: 10px;
  overflow: hidden;
}

.edlix-cover--absolute {
  position: absolute;
  inset: 0;
  aspect-ratio: auto;
  border-radius: 0;
}

.edlix-cover img {
  position: absolute;
  inset: 0;
  /* выше фона-заглушки .edlix-cover (в app.css у img слайдеров z-index:-1),
     но ниже текстовых overlay — см. правила ниже */
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.edlix-cover img.loaded {
  opacity: 1;
}

.edlix-cover img.error {
  opacity: 0;
}

.edlix-cover--hero {
  aspect-ratio: 16 / 9;
  border-radius: 0;
}

.edlix-cover--square {
  aspect-ratio: 1 / 1;
}

.edlix-cover--thumb {
  aspect-ratio: 397 / 222;
}

/* Respect existing card dimensions that already use fixed heights */
.course_card,
.course_card-preview {
  overflow: hidden;
}

.hero__img .edlix-cover--hero,
.hero__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Slick clones with data-lazy should not force eager load */
.slick-cloned img[data-lazy] {
  content-visibility: auto;
}

/* Явная локальная stack-иерархия: текст карточек всегда выше обложки.
   .course_card--inner в app.css уже z-index:100; для статичных заголовков
   статей и слайдера разделов задаём позиционирование здесь. */
.article-main-card .slider-text,
.course_card-preview > p {
  position: relative;
  z-index: 2;
}