/**
 * 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;
}

/* ─── Scrollable track ───────────────────────────────────────── */
.dcr-track {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.75rem;
    overflow-x: auto;
    padding: 0.75rem 0.25rem 1rem;      /* extra bottom so shadows aren't clipped */
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: #b0a090 transparent;
    scroll-snap-type: x mandatory;
    -webkit-scroll-snap-type: x mandatory;
    align-items: center;
}

.dcr-track::-webkit-scrollbar      { height: 4px; }
.dcr-track::-webkit-scrollbar-track { background: transparent; }
.dcr-track::-webkit-scrollbar-thumb { background: #b0a090; border-radius: 99px; }

@media (min-width: 768px) {
    .dcr-track {
        display: grid;
        grid-template-columns: repeat(4, 200px);
        gap: 0.75rem;
        overflow-x: visible;
        scroll-snap-type: none;
        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%;
        }
}