/*
 * Covering card — Figma "card-event" (4455:4540), the covering kit of § 12.2.
 */

.mo-card-covering {
    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);
}

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

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

/* Countdown, shown only during the last 48 hours before the order deadline. */
.mo-card-covering__countdown {
    position: absolute;
    top: var(--mo-spacing-sm);
    left: 50%;
    display: flex;
    margin: 0;
    gap: 12px;
    transform: translateX(-50%);
}

.mo-card-covering__unit {
    display: flex;
    width: var(--mo-scale-600);
    height: var(--mo-scale-600);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: var(--mo-border-width-xs) solid var(--mo-border-action);
    border-radius: var(--mo-radius-sm);
    background-color: var(--mo-surface-action-light);
    color: var(--mo-text-action);
}

/*
 * The `countdown` controller toggles the native `hidden` attribute to drop leading zero units
 * ("0 jour") and to remove the whole countdown once the deadline passes. Author rules above beat
 * the UA `[hidden]` rule at equal specificity, so it must be restated here.
 */
.mo-card-covering__countdown[hidden],
.mo-card-covering__unit[hidden] {
    display: none;
}

.mo-card-covering__number {
    font-size: var(--mo-font-size-body-md);
    font-weight: var(--mo-font-weight-bold);
    line-height: var(--mo-line-height-body-md);
}

.mo-card-covering__label {
    font-size: var(--mo-font-size-caption);
    line-height: var(--mo-line-height-caption);
}

.mo-card-covering__body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: var(--mo-spacing-xxs);
}

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

.mo-card-covering__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-h4);
}

.mo-card-covering__description {
    margin: 0;
    color: var(--mo-text-heading);
    font-size: var(--mo-font-size-h5);
    line-height: var(--mo-line-height-h5);
}

.mo-card-covering__actions {
    display: flex;
    align-items: stretch;
    gap: var(--mo-spacing-xs);
}

.mo-card-covering__order {
    display: flex;
    flex: 1 1 auto;
}

.mo-card-covering__order-button {
    flex: 1 1 auto;
}