/*
 * Event card — Figma "card-event" (4249:626).
 *
 * A row of the "Prochains événements" list: the visual on the left, then the date line, the title
 * and the optional registration link.
 */

/*
 * The registration link cannot be nested inside the card link, so the two are siblings of a
 * wrapper. They still need to lay out together — the register link directly under the title —
 * which a flex row containing the visual can't give them: the visual (a fixed 200x113 box) is
 * usually taller than a short, one-line title, and the register link, sitting after that whole
 * row, would then land under the *visual* instead of under the title.
 *
 * The wrapper is a grid instead, with the visual spanning both rows: the title's row is then sized
 * by its own content, not by the visual, so the register link always sits right under it. Getting
 * the visual and the body into that grid takes `display: contents` on the card link — it drops the
 * link's own box and promotes its children to direct grid items, the same technique the header
 * uses to collapse its bands (see `header.css`) — so the link itself is no longer a rendered box:
 * its hover/focus states below target the visual and the body directly, and the focus ring moves
 * to the wrapper.
 */
.mo-card-event-wrapper {
    display: grid;
    grid-template-columns: 200px 1fr;
    grid-template-areas:
        "visual body"
        "visual register";
    column-gap: var(--mo-spacing-xs);
    row-gap: var(--mo-spacing-xxs);
    padding: var(--mo-spacing-xxs);
    border-radius: var(--mo-radius-md);
}

.mo-card-event-wrapper:has(.mo-card-event:focus-visible) {
    outline: var(--mo-focus-ring-width) solid var(--mo-focus-ring-color);
    outline-offset: var(--mo-focus-ring-offset);
}

.mo-card-event {
    display: contents;
    color: inherit;
    text-decoration: none;
}

/* `Property 1=Hover` (4249:625) fades the card to 0.60, like `card-article`. */
.mo-card-event:hover .mo-card-event__visual,
.mo-card-event:hover .mo-card-event__body,
.mo-card-event:focus-visible .mo-card-event__visual,
.mo-card-event:focus-visible .mo-card-event__body {
    opacity: 0.6;
}

.mo-card-event__visual {
    grid-area: visual;
    width: 200px;
    overflow: hidden;
    border-radius: var(--mo-radius-sm);
    aspect-ratio: 200 / 113;
}

.mo-card-event__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mo-card-event__body {
    grid-area: body;
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: var(--mo-spacing-xxs);
}

.mo-card-event__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--mo-spacing-xs);
    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-event__title {
    margin: 0;
    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-h3);
}

.mo-card-event__register {
    grid-area: register;
    align-self: start;
    padding: var(--mo-spacing-xxs);
    color: var(--mo-text-action);
    font-size: var(--mo-font-size-btn);
    font-weight: var(--mo-font-weight-bold);
    line-height: var(--mo-line-height-btn);
    text-decoration: underline;
}

@media (max-width: 767.98px) {
    .mo-card-event-wrapper {
        grid-template-columns: 1fr;
        grid-template-areas:
            "visual"
            "body"
            "register";
    }

    .mo-card-event__visual {
        width: 100%;
    }
}