/* Resource Grid widget — sage variant.
   The prototype applies inline styles on .resource-card to give it a sage
   treatment on the home "Resources" section. Moving them here to a variant
   class keeps the markup clean and the values within design-system tokens. */

.resource-card.resource-card--sage {
    background: var(--color-sage-surface);
    border-color: var(--color-border);
}

.resource-card.resource-card--sage .resource-icon {
    background: var(--color-sage-light);
    color: var(--color-sage-dark);
}

/* ── Feature layout — .card background variants ─────────────
   Exposes the widget's "Card background" control. Default uses the
   base .card styling (color-surface-raised); modifiers override the
   background while keeping border + radius + motion from theme.css. */
.card.card--sage {
    background: var(--color-sage-surface);
}

.card.card--alt {
    background: var(--color-accent-light, var(--color-surface-raised));
}

.card.card--white {
    background: #fff;
}

/* ── Method layout — column modifiers ─────────────────────────
   .donation-methods is auto-fit by default (theme.css, minmax 220px).
   These modifiers align its min track-width with the shared .grid-N
   utility classes so the widget's Columns control behaves the same
   way across Resource / Feature / Method layouts. */
.donation-methods.donation-methods--cols-2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.donation-methods.donation-methods--cols-3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.donation-methods.donation-methods--cols-4 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }