/**
 * donation-cubes-row.css
 * Section wrapper and scrollable track for the DonationCubesRow component.
 * BEM prefix: .dcr-*
 * Individual cube cards use .cube-card from cube-selector.css.
 * RTL (dir="rtl") is set on the <section> element in the partial.
 */

/* ─── Section wrapper ─────────────────────────────────────────── */
.dcr-section {
    padding: 0.5rem 0 0.25rem;
    margin-top: -72px;      /* overlap onto the bottom of the hero banner */
    position: relative;
    z-index: 5;
}

/* ─── Track: 2-per-row mobile, more columns on larger screens ─ */
.dcr-track {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
    padding: 0.75rem 0.25rem 1rem;
    align-items: stretch;
}

@media (min-width: 768px) {
    .dcr-track {
        grid-template-columns: repeat(4, 200px);
        justify-content: center;
    }

    /* 4 cubes → 2 per row */
    .dcr-track[data-count="4"] {
        grid-template-columns: repeat(2, 200px);
    }

    .dcr-track .cube-card {
        width: 100%;
        max-width: none;
    }

    .dcr-track .cube-card--link.cube-card--other {
        height: 100%;
    }
}