/* =========================================================
   БЛОК «ПОЧЕМУ СТОИТ УЧАСТВОВАТЬ» — css/marathon-about.css

   Адаптация css/camp-sport.css со страницы лагеря: стеклянные карточки
   с иконкой-боксом и тематическим градиентом. Раскладка карточек —
   утилитами Bootstrap в parts/block_about.php.
   ========================================================= */

.mrv-feature-card {
    /* лёгкое «стекло» поверх белого camp-card */
    background: rgba(255, 255, 255, .85);
    border: 1px solid rgba(255, 255, 255, .60);
}

.mrv-feature-card:hover {
    background: #fff;
}

/* ---- Иконка-бокс: тематические градиенты ---- */
/* Объёмная 3D-иконка лежит прямо на белой карточке: у картинки свой
   белый фон и контактная тень, цветная подложка не нужна. */
.mrv-feature-icon {
    width: 88px;
    height: 88px;
    background: transparent;
    border-radius: 20px;
    transition: transform .4s var(--camp-ease);
}

.mrv-feature-icon img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.mrv-feature--blue .mrv-feature-icon {
    background: linear-gradient(135deg, var(--camp-cyan) 0%, var(--camp-blue-dark) 100%);
    box-shadow: 0 12px 24px rgba(47, 106, 158, .25);
}

.mrv-feature--orange .mrv-feature-icon {
    background: linear-gradient(135deg, var(--camp-orange-light) 0%, var(--camp-orange-dark) 100%);
    box-shadow: 0 12px 24px rgba(230, 115, 38, .25);
}

.mrv-feature--green .mrv-feature-icon {
    background: linear-gradient(135deg, var(--camp-green) 0%, var(--camp-green-dark) 100%);
    box-shadow: 0 12px 24px rgba(31, 138, 91, .25);
}

.mrv-feature-card:hover .mrv-feature-icon {
    transform: scale(1.1) rotate(-6deg);
}

/* ---- Типографика карточки ---- */
.mrv-feature-title {
    font-size: 1.15rem;
    letter-spacing: -.01em;
    line-height: 1.25;
    color: var(--camp-heading);
}

.mrv-feature-text {
    font-size: .95rem;
    line-height: 1.55;
}

/* =========================================================
   АДАПТИВ
   ========================================================= */
@media (max-width: 767.98px) {
    .mrv-feature-title { font-size: 1.05rem; }
    .mrv-feature-text  { font-size: .9rem; }
}