/*
 * Article cards — Figma "card-article" (4249:542) and "lg-card-article" (4249:519).
 *
 * Both are one link wrapping the whole card, as the specifications ask ("il est possible de cliquer
 * sur la totalité de l'article"). The large one is the highlighted article of a listing; the small
 * one is a row of the grid that follows.
 */

.mo-card-article {
    /*
     * A CSS Grid item stretches to its row's height by default, but a plain flex child only ever
     * sizes to its own content, so the anchor needs telling to fill the `<li>`. It matters most for
     * the highlighted card of a listing (below): its row is 365px because the plain cards beside it
     * are, not because of anything of its own — on the home page, where it stands alone, the row
     * simply is its own content height, and this resolves to `auto`.
     */
    display: flex;
    height: 100%;
    flex-direction: column;
    gap: var(--mo-spacing-sm);
    padding: var(--mo-spacing-xs);
    border-radius: var(--mo-radius-md);
    background-color: var(--mo-surface-default-white);
    color: inherit;
    text-decoration: none;
}

/*
 * `State=Hover` (4631:39023) fades the whole card rather than tinting it: sampling the two variants
 * against their sheet gives 0.60 on every channel. It is the convention of the content cards, and
 * the opposite of `card-home`, which turns pink.
 */
.mo-card-article:hover,
.mo-card-article:focus-visible {
    opacity: 0.6;
}

.mo-card-article__image {
    display: block;
    width: 100%;
    aspect-ratio: 200 / 113;
    border-radius: var(--mo-radius-sm);
    object-fit: cover;
}

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

.mo-card-article .mo-tag {
    /* The body is a flex column, which would otherwise stretch the pill to the full card width. */
    align-self: flex-start;
}

.mo-card-article__date {
    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-article__title {
    margin: 0;
    color: var(--mo-text-heading);
    font-size: var(--mo-font-size-h5);
    font-weight: var(--mo-font-weight-bold);
    line-height: var(--mo-line-height-h5);
}

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

/* --------------------------------------------------------------- highlighted variant */

/*
 * `lg-card-article` (4402:1338) carries the brand gradient on its 2px stroke, not a flat colour;
 * see the recipe in tokens/gradient.css. Its fill is `Surface/action-light`, and it has to be
 * painted as the first background layer — a `background-color` would cover the sweep.
 *
 * It draws the photo at 368 x 208 against a 324px text column — roughly half the card. A flex row
 * can't give the photo that proportion *and* cap its height to the text column's own height at
 * once: with `width: auto` and no explicit height, the image has nothing to stretch against (the
 * row's height is itself derived from its tallest child, so the two are circular) and falls back to
 * its full intrinsic size, crowding out the text. A grid with fixed `fr` tracks sidesteps the
 * circularity — the column widths are set up front, `align-items: stretch` (grid's own default)
 * then gives the image cell the text column's height, and `object-fit: cover` crops the photo to
 * fit rather than leaving `aspect-ratio` to fight the stretch.
 */
.mo-card-article--large {
    display: grid;
    grid-template-columns: 368fr 324fr;
    align-items: stretch;
    gap: var(--mo-spacing-sm);
    border: var(--mo-border-width-xs) solid transparent;
    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-article--large .mo-card-article__image {
    height: 100%;
}

.mo-card-article--large .mo-card-article__body {
    padding-block: var(--mo-spacing-xxs);
}

.mo-card-article--large .mo-card-article__title {
    font-size: var(--mo-font-size-h4);
    line-height: var(--mo-line-height-h4);
}

.mo-card-article--large .mo-card-article__excerpt {
    font-size: var(--mo-font-size-body-md);
    line-height: var(--mo-line-height-body-md);
}

.mo-card-article--large .mo-card-article .mo-tag {
    /* The body is a flex column, which would otherwise stretch the pill to the full card width. */
    align-self: flex-start;
}

/*
 * `State=Hover` (4249:575) does not fade this card like the others: the flat `Surface/action-light`
 * fill turns into the same brand gradient as the highlighted event of the home page, corner to
 * corner rather than confined to the stroke. `background-clip`/`background-origin` are restated
 * because `background-image` here has one layer where the resting state has two — left unset, the
 * clip would keep its resting `padding-box, border-box` pair and truncate to just `padding-box`,
 * leaving the 2px stroke unpainted.
 */
.mo-card-article--large:hover,
.mo-card-article--large:focus-visible {
    opacity: 1;
    background-image: var(--mo-gradient-brand-block);
    background-clip: border-box;
    background-origin: border-box;
}

.mo-card-article__date {
    color: var(--mo-text-placeholder);
}

@media (max-width: 767.98px) {
    .mo-card-article--large {
        grid-template-columns: 1fr;
    }

    .mo-card-article--large .mo-card-article__image {
        height: auto;
    }
}