/* =========================================================
   ДОКУМЕНТЫ: чек-лист в карточках.
   Раскладка (flex, отступы, радиусы, разделители) собрана
   утилитами Bootstrap в parts/block_documents.php.
   Здесь — оформление карточек, контейнеров под картинки
   и ховер-эффекты.
   ========================================================= */

.doc-card {
    padding: 1.75rem;
}

.doc-card-header {
    border-bottom: 2px solid #f1f3f5;
}

/* ---------- Контейнеры под картинки ----------
   Раньше здесь были FA-иконки, теперь — <img>.
   Контейнер выступает мягкой «подложкой» вокруг картинки,
   поэтому цвет текста больше не нужен. */
.doc-icon-circle,
.doc-bullet {
    background: var(--camp-blue-soft);
    overflow: hidden;                 /* на случай, если картинка чуть вылезет */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.doc-icon-circle img,
.doc-bullet img {
    display: block;
    width: 90%;
    height: 90%;
    object-fit: contain;              /* сохраняем пропорции картинки */
}

/* Тематический акцент заголовка карточки (медицинский блок) */
.doc-theme-warning .doc-icon-circle {
    background: #fff3cd;
}

.doc-card-title {
    font-size: 1.35rem;
    letter-spacing: .01em;
    line-height: 1.2;
    color: var(--camp-heading);
}

.doc-row-title {
    font-size: 1.05rem;
    line-height: 1.3;
    color: var(--camp-heading);
}

/* Не даёт длинному тексту распирать flex-строку */
.doc-row-content {
    min-width: 0;
}

.doc-row-desc {
    font-size: .9rem;
    line-height: 1.4;
    color: var(--camp-muted);
}

/* ---------- Ховер строки ----------
   Раньше мы меняли color иконки на белый.
   Теперь меняем фон контейнера и слегка «приподнимаем» картинку. */
.doc-bullet {
    transition: background .25s ease, transform .25s ease, box-shadow .25s ease;
}

.doc-row:hover .doc-bullet {
    background: var(--camp-blue);
    transform: scale(1.08);
    box-shadow: 0 6px 14px -6px rgba(var(--camp-blue-rgb, 37, 99, 235), .45);
}

/* При желании можно добавить лёгкий зум самой картинки при ховере */
.doc-row:hover .doc-bullet img {
    transform: scale(1.05);
    transition: transform .25s ease;
}

/* =========================================================
   АДАПТИВ
   ========================================================= */
@media (max-width: 767.98px) {
    .doc-card {
        padding: 1.25rem;
    }

    .doc-card-title {
        font-size: 1.15rem;
    }

    .doc-row-title {
        font-size: .95rem;
    }

    .doc-row-desc {
        font-size: .85rem;
    }
}