/*
 * Features List
 * Layout: template-parts/flex/features_list.php
 * Auto-enqueued by functions.php after css/theme.css.
 */


.features-list__card {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-radius: 1.5rem;
    overflow: hidden;
    color: var(--color-background);
    background-color: var(--color-primary);
}

.features-list__content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-lg);
    padding: var(--space-xl);
}

.features-list__heading {
    margin: 0;
    color: inherit;
}

/* Checklist: two columns of pills. */
.features-list__list {
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-sm);
}

.features-list__item {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-xs) var(--space-sm);
    border-radius: .5rem;
    background-color: var(--color-secondary);
}

/* Tick mark: white circle with a green tick. */
.features-list__item::before {
    content: "";
    flex-shrink: 0;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    background-color: var(--color-background);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 12.5l3.2 3.2L17 9' fill='none' stroke='%2318814C' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 70%;
}

/* Image fills the panel; highlight card sits over its bottom-right corner. */
.features-list__media {
    position: relative;
}

.features-list__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.features-list__highlight {
    position: absolute;
    right: var(--space-md);
    bottom: var(--space-md);
    max-width: 18rem;
    padding: var(--space-md);
    border-radius: 1rem;
    color: var(--color-text);
    background-color: var(--color-background);
}

.features-list__stat {
    margin: 0 0 var(--space-2xs);
    font-family: var(--font-body);
    font-weight: var(--font-heavy);
    font-size: var(--text-4);
    line-height: 1;
    color: var(--color-secondary);
}

.features-list__stat-description {
    margin: 0;
}

@media screen and (max-width: 768px) {

    .features-list__card,
    .features-list__list {
        grid-template-columns: 1fr;
    }

    .features-list__content {
        padding: var(--space-lg);
    }

    .features-list__media {
        aspect-ratio: 4 / 3;
    }

}