/* ==========================================================================
   COMPONENT: Download cards (clean, robust, responsive)
   ========================================================================== */

/* tokens: override in :root if you need a different theme for this component */
:root {
    --download-card-min: 250px;
    --download-card-max: 300px;
}

/* grid: center tracks, keep columns reasonably sized */
.download-grid {
    display: grid;
    gap: var(--gap-md);
    grid-template-columns: repeat(auto-fit, minmax(var(--download-card-min), var(--download-card-max)));
    justify-content: center;
    justify-items: center;
    align-content: start;
    margin-top: var(--margin-md);
    padding: 0;
    list-style: none;
}

/* base card: no internal padding here, content wrapper gets padding */
.download-card {
    width: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    max-width: var(--download-card-max);
    min-width: var(--download-card-min);
    background: var(--color-primary-600);
    color: var(--color-text-primary);
    border-radius: var(--radius-md);
    transition: transform 160ms ease, box-shadow 160ms ease;
    padding: 0;
}

/* content wrapper: holds media + title + description, gets padding */
.download-card__content {
    padding: clamp(var(--padding-md), 2.5vw, var(--padding-lg));
    display: flex;
    flex-direction: column;
    gap: var(--gap-lg);
    align-items: center;
    text-align: center;
    flex: 1 1 auto;
    box-sizing: border-box;
}

/* header area: icon + title grouped together */
.download-card__media {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--gap-sm);
    width: 100%;
}

/* put the title under the icon inside media */
.download-card__title {
    margin: 0;
    font-size: clamp(var(--font-size-md), 1.6vw, var(--font-size-lg));
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
}

/* description (supporting text) — readable width, left aligned inside a centered column */
.download-card__body {
    width: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

.download-card__desc {
    margin: 0;
    font-size: clamp(var(--font-size-sm), 1.8vw, var(--font-size-md));
    line-height: var(--line-height-md);
    text-align: left;
    width: 100%;
    max-width: 14.5rem;
    color: inherit;
}

/* action area outside the content wrapper so it can span full width */
.download-card__action {
    width: 100%;
    margin-top: 0;
    display: flex;
    align-items: stretch;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    background: transparent;
    flex: 0 0 auto;
}

/* CTA fills the full width and has a generous height for touch ergonomics */
.download-card__action .btn {
    width: 100%;
    min-height: var(--button-height-md);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--padding-md);
    background: var(--color-primary-500);
    color: var(--color-text-primary);
    border: none;
    border-radius: 0 0 var(--radius-md) var(--radius-md);
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-md);
    text-decoration: none;
}

/* Hover / focus */
.download-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg);
}


.download-card__action .btn:hover {
    background: var(--color-primary-300);
}

/* When the grid naturally forms two columns (card min/max + gap), center a lone last card */
@media (min-width: 520px) and (max-width: 1055px) {
    .download-grid > :nth-last-child(1):nth-child(odd) {
        grid-column: 1 / -1;
        justify-self: center;
        gap: var(--gap-lg);
    }
}

@media (min-width: 768px) {
    .download-grid {
        grid-template-columns: repeat(auto-fit, minmax(var(--download-card-min), var(--download-card-max)));
    }
}

@media (min-width: 1200px) {
    .download-grid {
        grid-template-columns: repeat(auto-fit, minmax(var(--download-card-min), var(--download-card-max)));
    }
}