/*
 * Tutorial card — Figma "card-tutoriel" (4488:6896).
 */

/*
 * The card carries no action of its own — "Regarder"/"Télécharger" is the only one, a `Button` child
 * — so unlike the other content cards it does not fade under the pointer: only that button takes a
 * hover state, its own.
 */
.mo-card-tutorial {
    display: flex;
    height: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--mo-spacing-xxs);
    padding: var(--mo-spacing-xs);
    border-radius: var(--mo-radius-md);
    background-color: var(--mo-surface-default-white);
}

.mo-card-tutorial__visual {
    position: relative;
    width: 100%;
    aspect-ratio: 213 / 120;
    overflow: hidden;
    border-radius: var(--mo-radius-sm);
    background-color: var(--mo-surface-default);
}

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

/*
 * Video variant: the still is darkened and a play badge is laid over it, which is how the maquette
 * tells a video apart from a downloadable file.
 */
.mo-card-tutorial__visual--video::after {
    position: absolute;
    background-color: rgb(0 0 0 / 60%);
    border-radius: inherit;
    content: '';
    inset: 0;
}

.mo-card-tutorial__play {
    position: absolute;
    z-index: 1;
    top: 50%;
    left: 50%;
    width: var(--mo-scale-500);
    height: var(--mo-scale-500);
    color: var(--mo-icon-default-light);
    transform: translate(-50%, -50%);
}

.mo-card-tutorial__kind {
    position: absolute;
    top: 50%;
    left: 50%;
    width: var(--mo-scale-800);
    height: var(--mo-scale-800);
    color: var(--mo-text-placeholder);
    transform: translate(-50%, -50%);
}

.mo-card-tutorial__head {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    margin-top: var(--mo-spacing-sm);
    opacity: 0.8;
}

.mo-card-tutorial__date,
.mo-card-tutorial__duration {
    display: flex;
    align-items: center;
    gap: var(--mo-spacing-xxs);
    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-tutorial__clock {
    width: var(--mo-scale-200);
    height: var(--mo-scale-200);
}

.mo-card-tutorial__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-tutorial__description {
    margin: 0 0 var(--mo-spacing-sm);
    color: var(--mo-text-body);
    font-size: var(--mo-font-size-body-sm);
    line-height: var(--mo-line-height-body-sm);
}

/* Pins the action to the bottom so a row of cards aligns its buttons. */
.mo-card-tutorial > .mo-button,
.mo-card-tutorial > [data-controller~='ping'] {
    margin-top: auto;
}