/*
 * Partner tool card — Figma "card-link", instances 4402:1325 to 4402:1329 of the home page. (The
 * master component used to be recorded here as "card-home" 4104:395; that node no longer resolves.)
 *
 * The five cards of the home page linking to the partner platforms. The fifth is the "À venir"
 * placeholder: it renders as a `<div>` rather than a link, so it cannot be focused or clicked, and
 * the maquette greys it whole instead of outlining it in the secondary colour.
 */

.mo-card-home {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--mo-spacing-xs);
    /* Figma draws the stroke inside its 40px padding; CSS adds it outside, so it is given back. */
    padding: calc(var(--mo-spacing-md) - var(--mo-border-width-xs));
    /* The maquette binds the primitive `Secondary/500` here, not a `Border/*` rôle. */
    border: var(--mo-border-width-xs) solid var(--mo-secondary-500);
    border-radius: var(--mo-radius-md);
    background-color: var(--mo-surface-default-white);
    color: inherit;
    text-decoration: none;
}

/*
 * `Type=Secondary, State=Hover` (4104:477) turns the whole card pink — the fill to
 * `Surface/action-light`, the trait, the two lines and both icons to `action`. Only the trait was
 * implemented.
 */
a.mo-card-home:hover,
a.mo-card-home:focus-visible {
    border-color: var(--mo-border-action);
    background-color: var(--mo-surface-action-light);
    color: var(--mo-text-action);
}

a.mo-card-home:hover .mo-card-home__title,
a.mo-card-home:focus-visible .mo-card-home__title,
a.mo-card-home:hover .mo-card-home__description,
a.mo-card-home:focus-visible .mo-card-home__description,
a.mo-card-home:hover .mo-card-home__external,
a.mo-card-home:focus-visible .mo-card-home__external {
    color: var(--mo-text-action);
}

/*
 * `Border/default-medium` is the variable the maquette binds on the fifth card, where the other
 * four bind `Secondary/500`. Its fill and its greys are unbound one-offs rendering a touch lighter
 * than the neutral scale gives — the systemic values are used here and the exact shades are a
 * question for the designer.
 */
.mo-card-home--disabled {
    border-color: var(--mo-border-default-medium);
    background-color: var(--mo-surface-default);
    color: var(--mo-text-disabled);
}

.mo-card-home__icon {
    width: var(--mo-scale-400);
    height: var(--mo-scale-400);
}

.mo-card-home__text {
    display: flex;
    flex-direction: column;
    gap: var(--mo-spacing-xxxs);
}

.mo-card-home__title {
    margin: 0;
    color: var(--mo-text-heading);
    font-size: var(--mo-font-size-h3);
    font-weight: var(--mo-font-weight-semibold);
    line-height: var(--mo-line-height-h3);
}

.mo-card-home__description {
    margin: 0;
    color: var(--mo-text-body);
    font-size: var(--mo-font-size-body-md);
    line-height: var(--mo-line-height-body-md);
}

.mo-card-home--disabled .mo-card-home__title,
.mo-card-home--disabled .mo-card-home__description,
.mo-card-home--disabled .mo-card-home__icon {
    color: var(--mo-text-disabled);
}

.mo-card-home__external {
    position: absolute;
    top: var(--mo-spacing-sm);
    right: var(--mo-spacing-sm);
    width: var(--mo-scale-300);
    height: var(--mo-scale-300);
    color: var(--mo-icon-default-dark);
}