/* ═════════════════════════════════════════════════════════════════
   Downloads page — download cards and buttons

   Lives inside the green super-category section (shared card
   patterns come from css/docs/cards.css); this file only styles
   the download-specific pieces.
   ═════════════════════════════════════════════════════════════════ */

/* ── Intro paragraph ──────────────────────────────── */
.downloads-lead {
    font-size: clamp(14px, 1.2vw, 18px);
    line-height: 1.5;
    color: var(--blue-dark);
    margin: 0 0 1.5rem;
    max-width: 50rem;
}

/* ── Download card ──────────────────────────────────
   Theme colours come from local vars so each card can
   recolour itself (--blue / --purple modifiers).       */
.download-card {
    --card-dark:  var(--green-dark);
    --card-mid:   var(--green-mid);
    --card-light: var(--green-light);
    --card-white: var(--green-white);

    background: #fff;
    border: 1px solid var(--card-light);
    border-radius: 10px;
    padding: 1.25rem 1.5rem;
    margin-bottom: 1.25rem;
}

.download-card--blue {
    --card-dark:  var(--blue-dark);
    --card-mid:   var(--blue-mid);
    --card-light: var(--blue-light);
    --card-white: var(--blue-white);
}

.download-card:last-child {
    margin-bottom: 0;
}

.download-card__heading {
    font-size: clamp(16px, 1.4vw, 22px);
    font-weight: 800;
    color: var(--card-dark);
    margin: 0 0 0.35rem;
}

/* Filename chip — mono file name on a tinted pill */
.download-card__file {
    display: inline-block;
    font-size: clamp(11px, 1vw, 14px);
    color: var(--card-dark);
    background: var(--card-white);
    padding: 0.15em 0.6em;
    border-radius: 4px;
    margin-bottom: 0.75rem;
}

.download-card p {
    font-size: clamp(13px, 1.1vw, 17px);
    line-height: 1.5;
    color: var(--card-dark);
    margin: 0 0 0.75rem;
}

.download-card p:last-of-type {
    margin-bottom: 1rem;
}

.download-card a {
    color: var(--card-dark);
    font-weight: 700;
}

/* ── Button row ───────────────────────────────────── */
.download-card__actions {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

/* Stronger selector than the generic .download-card a rule,
   which would otherwise force the text to the card colour. */
.download-card .download-button {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    background: linear-gradient(135deg, var(--card-mid), var(--card-dark));
    color: #fff;
    font-family: var(--font-nav);
    font-weight: 700;
    font-size: clamp(13px, 1.1vw, 16px);
    text-decoration: none;
    padding: 0.7em 1.5em;
    border-radius: 8px;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.download-button__icon {
    fill: #fff;
    height: 1.1em;
    width: auto;
    flex-shrink: 0;
}

.download-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

.download-card__alt {
    font-size: clamp(11px, 1vw, 14px);
    color: var(--card-mid);
}

.download-card__alt a {
    color: var(--card-dark);
}

/* ── Mobile ───────────────────────────────────────── */
@media (max-width: 480px) {
    .download-card {
        padding: 1rem;
    }

    .download-button {
        width: 100%;
        text-align: center;
    }
}