/*
 * Shared card skin for partials/feature-card.php - used by
 * sections/home-advantages.php (in a slider), sections/home-audience.php
 * (in a plain grid). Numbered like a reusable component skin (see
 * 00-slider.css, 04-img-placeholder.css) rather than a single section,
 * loaded before the sections that place it in a grid/slide.
 *
 * Both themes now carry a real photo (`--light` and `--photo` alternate for
 * rhythm, not for "has image vs no image" anymore): `--photo` darkens the
 * bottom of its photo for white text, `--light` lightens it instead for the
 * normal dark text colors - same photo-card construction as
 * partials/teacher-card.php (11-team-grid.css), just with badge + title +
 * text instead of name + bio.
 */

.feature-card {
    min-height: 22vw;
    background: var(--color-surface);
    border-radius: var(--radius);
    box-shadow: var(--shadow-panel);
}

.feature-card__bg {
    object-fit: cover;
}

/*
 * --graphic: flat SVG illustration (partials/card-graphic.php) in normal
 * flow above the body, not an absolutely-positioned backdrop - there is no
 * scrim to fight with, the card's own background (declared above) is the
 * surface. `object-fit: contain`-equivalent framing keeps the illustration
 * from being cropped like a photo would be.
 */
.feature-card__graphic {
    aspect-ratio: 8 / 5;
    background: var(--color-surface-muted);
}

.feature-card--light .feature-card__scrim {
    background: linear-gradient(0deg, rgba(244, 247, 251, 0.99) 0%, rgba(244, 247, 251, 0.96) 46%, rgba(244, 247, 251, 0.62) 72%, rgba(244, 247, 251, 0.08) 100%);
}

.feature-card--photo .feature-card__scrim {
    background: linear-gradient(0deg, rgba(15, 34, 66, 0.92) 0%, rgba(15, 34, 66, 0.72) 34%, rgba(15, 34, 66, 0.16) 68%, rgba(15, 34, 66, 0) 100%);
}

.feature-card__body {
    z-index: 1;
    padding: 1.88vw 1.67vw 2.19vw;
}

.feature-card__badge {
    margin: 0 0 1.46vw;
    padding: 0.42vw 1.04vw;
    border-radius: 999px;
    background: #fff;
    font-weight: 700;
    font-size: 0.78vw;
    color: var(--color-cta);
}

.feature-card__icon {
    margin: 0 0 1.46vw;
    padding: 0.73vw;
    border-radius: 50%;
    background: rgba(47, 111, 237, 0.1);
    color: var(--color-accent);
    box-sizing: content-box;
}

.feature-card--photo .feature-card__icon {
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
}

.feature-card__title {
    font-size: 1.25vw;
    font-weight: 700;
    color: var(--color-primary);
    margin: 0 0 0.83vw;
}

.feature-card__text {
    color: var(--color-text-muted);
    margin: 0;
}

.feature-card--photo .feature-card__title {
    color: #fff;
}

.feature-card--photo .feature-card__text {
    color: rgba(255, 255, 255, 0.85);
}

@media only screen and (max-width: 767.98px) {
    .feature-card {
        min-height: 90vw;
    }

    .feature-card__body {
        padding: 6.4vw 6.4vw 7.47vw;
    }

    .feature-card__badge {
        margin: 0 0 4vw;
        padding: 1.6vw 4vw;
        font-size: 3.2vw;
    }

    .feature-card__icon {
        margin: 0 0 4vw;
        padding: 2.8vw;
    }

    .feature-card__title {
        font-size: 5.33vw;
        margin: 0 0 3.2vw;
    }
}