/**
 * 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 campaign hero banner */
    position: relative;
    z-index: 5;
}

/* Desktop (≥992px) where the hero overlay is absolutely positioned: pull the
   cubes higher up the banner. Paired with the hero-info-overlay's 6rem bottom
   padding so the progress card stays fully visible above the cubes.
   Kept at the base -72px below 992px, where the overlay is a normal block. */
@media (min-width: 992px) {
    .dcr-section {
        margin-top: -88px;
    }
}

/* Per-team page (/c/{slug}/g/{teamId}) reuses this partial but DOES NOT have
   a tall hero banner above the cubes — the team-hero card sits above and the
   negative margin-top causes the cubes grid to overlap the share row + CTA.
   Reset spacing when nested inside .team-page__cubes. */
.team-page__cubes .dcr-section {
    margin-top: 0;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}
.team-page__cubes .dcr-section > .container {
    padding-inline: 0;        /* don't double-pad inside the main container */
}

/* ─── 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;
    /* Trimmed top/bottom padding to lift the cube band closer to the hero
       (the safe "raise a little"). This does NOT touch the negative margin
       that protects the progress card from occlusion. */
    padding: 0.25rem 0.25rem 0.5rem;
    align-items: stretch;
}

@media (min-width: 768px) {
    /* Desktop/tablet: a centered grid whose column count is driven by --dcr-cols
       (set in _DonationCubesRow.cshtml from the card count). The count keeps the
       cards on one row while they fit (≤6) and otherwise splits them into two
       EVEN rows (e.g. 7 cards → 4 + 3) instead of leaving the last card
       stranded alone below a full row. Columns cap at 160px but may shrink
       (minmax min of 0) so the grid never overflows a narrow container, and
       justify-content:center keeps every row centered. */
    .dcr-track {
        display: grid;
        grid-template-columns: repeat(var(--dcr-cols, 6), minmax(0, 160px));
        justify-content: center;
        gap: 0.6rem;
    }

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

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