/*
 * Trade file card — Figma "card-trad" (4418:3991), with its "Main" type and its "Past" state.
 */

.mo-card-trade {
    display: flex;
    height: 100%;
    flex-direction: column;
    align-items: center;
    overflow: hidden;
    border: var(--mo-border-width-xs) solid transparent;
    border-radius: var(--mo-radius-md);
    background-color: var(--mo-surface-default-white);
    color: inherit;
    text-decoration: none;
    transition: background-color 120ms ease, border-color 120ms ease;
}

/* Hover (4418:3995): the outline, and every line of the card turns pink. */
.mo-card-trade:hover,
.mo-card-trade:focus-visible {
    border-color: var(--mo-border-action);
}

.mo-card-trade:hover .mo-card-trade__icon,
.mo-card-trade:focus-visible .mo-card-trade__icon,
.mo-card-trade:hover .mo-card-trade__title,
.mo-card-trade:focus-visible .mo-card-trade__title,
.mo-card-trade:hover .mo-card-trade__description,
.mo-card-trade:focus-visible .mo-card-trade__description,
.mo-card-trade:hover .mo-card-trade__meta,
.mo-card-trade:focus-visible .mo-card-trade__meta,
.mo-card-trade:hover .mo-card-trade__download,
.mo-card-trade:focus-visible .mo-card-trade__download {
    color: var(--mo-text-action);
}

.mo-card-trade__banner {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    padding-block: var(--mo-spacing-sm);
    /*
     * Measured on the Default and Past states alike (4418:3992, 4487:5242): a hairline of
     * `Border/default-medium`, not the near-invisible white it reads as at a glance on a white card.
     */
    border-bottom: 1px solid var(--mo-border-default-medium);
    background-color: var(--mo-surface-default-white);
}

.mo-card-trade__icon {
    width: var(--mo-scale-600);
    height: var(--mo-scale-600);
    color: var(--mo-text-heading);
}

.mo-card-trade__body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    align-items: center;
    gap: var(--mo-spacing-xxs);
    padding: var(--mo-spacing-sm) var(--mo-spacing-xs);
    text-align: center;
}

.mo-card-trade__title {
    color: var(--mo-text-heading);
    font-size: var(--mo-font-size-h4);
    font-weight: var(--mo-font-weight-bold);
    line-height: var(--mo-line-height-h4);
    text-wrap: balance;
}

.mo-card-trade__description {
    color: var(--mo-text-default-dark);
    font-size: var(--mo-font-size-body-sm);
    font-weight: var(--mo-font-weight-semibold);
    line-height: var(--mo-line-height-body-sm);
}

.mo-card-trade__meta {
    display: flex;
    align-items: center;
    gap: var(--mo-spacing-xs);
    margin-top: auto;
    padding-top: var(--mo-spacing-xxs);
    color: var(--mo-text-body);
    font-size: var(--mo-font-size-caption);
    line-height: var(--mo-line-height-caption);
}

.mo-card-trade__download {
    width: var(--mo-scale-300);
    height: var(--mo-scale-250);
    color: var(--mo-icon-default-dark);
}

/*
 * Main — the first file of the listing, highlighted automatically (§ 7).
 *
 * Measured on `Type=Main, State=Default` (4519:5489): the stroke is the brand gradient itself, left
 * to right — not a flat sample of its warm end — over a flat `Surface/action-light`, with the banner
 * in `Primary/100`. A gradient cannot be a `border-color`, hence the two-layer recipe of
 * tokens/gradient.css: the base rule's transparent border stays, and the fill and the sweep are
 * painted as background layers instead.
 */
.mo-card-trade--main {
    background-image:
        linear-gradient(var(--mo-surface-action-light) 0 0),
        var(--mo-gradient-brand-stroke);
    background-clip: padding-box, border-box;
    background-origin: border-box;
}

.mo-card-trade--main .mo-card-trade__banner {
    background-color: var(--mo-primary-100);
}

/*
 * Hover (4519:5494) fills the whole card with the brand gradient, left to right — measured off the
 * same run as the resting stroke, not the corner-to-corner sweep of the highlighted trade tile —
 * banner included, the two areas become one, and the wording stays black. It is the only card of the
 * portal that does this. `background-clip`/`background-origin` are restated because this layer set
 * is one image where the resting state's is two: left alone, the clip would keep the resting
 * `padding-box, border-box` pair and truncate to just `padding-box`, leaving a ring unpainted.
 */
.mo-card-trade--main:hover,
.mo-card-trade--main:focus-visible {
    border-color: transparent;
    background-image: var(--mo-gradient-brand-sweep);
    background-clip: border-box;
    background-origin: border-box;
}

.mo-card-trade--main:hover .mo-card-trade__banner,
.mo-card-trade--main:focus-visible .mo-card-trade__banner {
    background-color: transparent;
}

.mo-card-trade--main:hover .mo-card-trade__icon,
.mo-card-trade--main:focus-visible .mo-card-trade__icon,
.mo-card-trade--main:hover .mo-card-trade__title,
.mo-card-trade--main:focus-visible .mo-card-trade__title,
.mo-card-trade--main:hover .mo-card-trade__description,
.mo-card-trade--main:focus-visible .mo-card-trade__description,
.mo-card-trade--main:hover .mo-card-trade__meta,
.mo-card-trade--main:focus-visible .mo-card-trade__meta,
.mo-card-trade--main:hover .mo-card-trade__download,
.mo-card-trade--main:focus-visible .mo-card-trade__download {
    color: var(--mo-text-default-dark);
}

/* Past (4487:5242) — the end date has gone by: the whole tile sits on the neutral surface (§ 7). */
.mo-card-trade--past {
    background-color: var(--mo-surface-default);
}

.mo-card-trade--past .mo-card-trade__banner {
    background-color: var(--mo-surface-default);
}

.mo-card-trade--past .mo-card-trade__icon,
.mo-card-trade--past .mo-card-trade__title,
.mo-card-trade--past .mo-card-trade__description,
.mo-card-trade--past .mo-card-trade__meta,
.mo-card-trade--past .mo-card-trade__download {
    color: var(--mo-text-disabled);
}