/* =============================================================
   Benefits Section Styles — 3 Columns, 2 Rows
   Depends on variables.css being loaded first.
   ============================================================= */

.benefits-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto auto;
    gap: var(--grid-gap-lg);
    max-width: var(--max-width-wide);
    margin: 0 auto;
    list-style: none;
    padding: 0;
}

.benefits-item {
    background-color: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--spacing-6);
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--transition-fast);
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: subgrid;
    grid-row: span 2;
    justify-items: stretch;
}

.benefits-item:hover {
    box-shadow: var(--shadow-lg);
}

.benefits-item h3 {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    margin-bottom: var(--spacing-3);
    line-height: var(--line-height-tight);
}

.benefits-item p {
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-normal);
    margin: 0;
}

/* Responsive design */
@media (max-width: 1024px) {
    .benefits-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--grid-gap-md);
    }

    .benefits-item {
        padding: var(--spacing-4);
    }

    .benefits-item h3 {
        font-size: var(--font-size-base);
        margin-bottom: var(--spacing-2);
    }

    .benefits-item p {
        font-size: var(--font-size-xs);
    }
}

@media (max-width: 768px) {
    .benefits-grid {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto;
        gap: var(--grid-gap-sm);
    }

    .benefits-item {
        padding: var(--spacing-4);
        grid-row: span 2;
    }

    .benefits-item h3 {
        font-size: var(--font-size-sm);
        margin-bottom: var(--spacing-1);
    }

    .benefits-item p {
        font-size: var(--font-size-xs);
        line-height: var(--line-height-normal);
    }
}