/*
 * 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;
    bottom: var(--mo-scale-200);
    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;
}

/*
 * Grouped order — the `tick` of the card (4257:956 / 5155:21917), a 24px disc 12px from the corner of
 * the visual: white with a light grey rim, then the action pink with a white rim once ticked. Built
 * on a real checkbox (keyboard, screen reader), restyled like `.mo-checkbox`.
 */
.mo-card-covering__select {
    position: absolute;
    top: var(--mo-scale-150);
    left: var(--mo-scale-150);
    z-index: 1;
    width: var(--mo-scale-300);
    height: var(--mo-scale-300);
    box-sizing: border-box;
    margin: 0;
    appearance: none;
    border: 1.5px solid var(--mo-neutral-100);
    border-radius: var(--mo-radius-round);
    background-color: var(--mo-white);
    cursor: pointer;
    transition: background-color 120ms ease, border-color 120ms ease;
}

.mo-card-covering__select:checked {
    border-color: var(--mo-white);
    background-color: var(--mo-surface-action-dark);
}

.mo-card-covering__select:focus-visible {
    outline: var(--mo-border-width-xs) solid var(--mo-border-action);
    outline-offset: 2px;
}

.mo-card-covering__select[hidden] {
    display: none;
}

/* A ticked card orders through the grouped bar: its own button steps aside. */
.mo-card-covering:has(.mo-card-covering__select:checked) .mo-card-covering__order {
    display: none;
}

/* While something is ticked, the cards that are not fade back (50%, as on the maquette) — they stay
 * fully interactive. */
.mo-covering-selecting .mo-card-covering:not(:has(.mo-card-covering__select:checked)) {
    opacity: 0.5;
}