/**
 * Countdown — финальная карточка: отсчёт, календарь, фото, прощание, копирайт.
 *
 * Значения из макета Figma (desktop 1440 / mobile 402).
 * Карточка занимает низ страницы: радиус только сверху (на мобильном — по макету 201).
 * Override-only относительно base.css.
 *
 * @package Wedding
 */

.countdown {
	position: relative;
    margin-top: calc(108 / var(--vw-base) * 100vw);
}

/* --- Карточка --- */
.countdown__card {
    position: relative;
    border: 0.5px solid var(--color-bg);
    border-radius: var(--radius-100) var(--radius-100) 0 0;
    background: var(--color-card-bg);
    box-shadow: 0 calc(-4 / var(--vw-base) * 100vw) calc(6.5 / var(--vw-base) * 100vw) rgba(242, 243, 245, 0.4);
    overflow: hidden;
}

/* Текстура карточки (в макете — картинка с opacity 0.20). */
.countdown__card::before {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    content: "";
    background: url("../../images/countdown-card-texture.webp") center / cover no-repeat;
    opacity: 0.2;
}

.countdown__inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: var(--space-20) var(--space-20) calc(21 / var(--vw-base) * 100vw);
    /* 54 и 58.6 из макета минус толщина рамок (1px inner + 0.5px карточки). */
    padding-top: calc(52.5 / var(--vw-base) * 100vw);
    padding-bottom: calc(57.1 / var(--vw-base) * 100vw);
    border: 1px solid var(--color-bg);
    border-radius: var(--radius-80) var(--radius-80) 0 0;
    box-shadow: 0 calc(-4 / var(--vw-base) * 100vw) calc(6.5 / var(--vw-base) * 100vw) rgba(242, 243, 245, 0.4);
}

.countdown__title {
    font-size: var(--fs-40);
    line-height: var(--lh-125);
    text-align: center;
}

/* --- Таймер --- */

/* Ряд центрируется, поэтому при включении секунд группы просто сдвигаются. */
.countdown__timer {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: calc(11.5 / var(--vw-base) * 100vw);
    margin-top: var(--space-20);
}

.countdown__unit {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: calc(58 / var(--vw-base) * 100vw);
}

.countdown__value {
    font-size: var(--fs-40);
    line-height: var(--lh-125);
}

.countdown__label {
    font-size: var(--fs-16);
    line-height: var(--lh-125);
}

/* Двоеточие: в макете картинка 4 × 12 — две точки ⌀4 с зазором 4. */
.countdown__colon {
    flex-shrink: 0;
    width: calc(4 / var(--vw-base) * 100vw);
    height: calc(12 / var(--vw-base) * 100vw);
    margin-top: calc(25 / var(--vw-base) * 100vw);
    background:
        radial-gradient(circle, var(--color-text) 50%, transparent 51%) top / 100% calc(4 / var(--vw-base) * 100vw) no-repeat,
        radial-gradient(circle, var(--color-text) 50%, transparent 51%) bottom / 100% calc(4 / var(--vw-base) * 100vw) no-repeat;
}

/* --- Календарь --- */
.countdown__calendar {
    width: calc(260 / var(--vw-base) * 100vw);
    margin-top: calc(36 / var(--vw-base) * 100vw);
}

.countdown__month {
    margin-bottom: 0;
    font-size: var(--fs-16);
    line-height: var(--lh-166);
    letter-spacing: calc(0.33 / var(--vw-base) * 100vw);
	text-align: center;
}

.countdown__grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    margin-top: calc(5.4 / var(--vw-base) * 100vw);
    font-size: var(--fs-16);
    line-height: var(--lh-166);
    letter-spacing: calc(0.33 / var(--vw-base) * 100vw);
    text-align: center;
}

.countdown__weekday {
    height: calc(28.77 / var(--vw-base) * 100vw);
}

/* Число прижато к верху ячейки — так же, как в макете. */
.countdown__day {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    height: calc(35.16 / var(--vw-base) * 100vw);
}

.countdown__day.-weekend {
    color: var(--color-text-muted);
}

.countdown__day-number {
    position: relative;
    z-index: 1;
}

/* День свадьбы: сплошное сердечко, число белым. */
.countdown__heart {
    position: absolute;
    top: calc(2.1 / var(--vw-base) * 100vw);
    left: 50%;
    width: calc(30.9 / var(--vw-base) * 100vw);
    height: calc(28.77 / var(--vw-base) * 100vw);
    color: var(--color-heart);
    transform: translateX(-50%);
}

.countdown__day.-marked .countdown__day-number {
    color: var(--color-bg);
}

/* --- Свадебные фото --- */
.countdown__photos-text {
    width: calc(338 / var(--vw-base) * 100vw);
    margin-top: calc(36.7 / var(--vw-base) * 100vw);
    font-size: var(--fs-16);
    line-height: var(--lh-150);
    text-align: center;
}

.countdown__photos-text p:last-child {
    margin-bottom: 0;
}

/* Светлая кнопка: hover — фон акцентный, текст светлый (rules-interactive §4). */
.countdown__photos-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: calc(338 / var(--vw-base) * 100vw);
    height: calc(55 / var(--vw-base) * 100vw);
    margin-top: var(--space-16);
    border: 1px solid var(--color-card-bg);
    border-radius: var(--radius-200);
    font-size: var(--fs-16);
    line-height: var(--lh-125);
    text-align: center;
    color: var(--color-text);
    background: var(--color-field-border);
    transition: color var(--transition-base), background-color var(--transition-base);
}

.countdown__photos-btn:hover,
.countdown__photos-btn:focus-visible {
    color: var(--color-bg);
    background: var(--color-accent);
}

/* --- Прощание, копирайт, вензель --- */
.countdown__farewell {
    margin-top: calc(28 / var(--vw-base) * 100vw);
    margin-bottom: 0;
    font-family: var(--font-display);
    font-size: var(--fs-32);
    line-height: var(--lh-125);
    text-align: center;
}

.countdown__copyright {
    margin-top: calc(7 / var(--vw-base) * 100vw);
    margin-bottom: 0;
    font-size: var(--fs-14);
    line-height: var(--lh-125);
    text-align: center;
    color: var(--color-text-muted);
}

.countdown__tracery-end {
    width: calc(168.9 / var(--vw-base) * 100vw);
    height: calc(123.4 / var(--vw-base) * 100vw);
    margin-top: calc(7 / var(--vw-base) * 100vw);
    color: var(--color-bg);
}

/* --- Жемчужины-декор --- */
.countdown__pearl {
    position: absolute;
	z-index: 2;
    object-fit: cover;
}

/* Большая: в макете повёрнута на 90° и размыта, без прозрачности (узел 316:420). */
.countdown__pearl.-large {
    top: calc(169 / var(--vw-base) * 100vw);
    left: calc(261 / var(--vw-base) * 100vw);
	z-index: 3;
    width: calc(154 / var(--vw-base) * 100vw);
    height: calc(154 / var(--vw-base) * 100vw);
    filter: blur(calc(1.5 / var(--vw-base) * 100vw));
    transform: rotate(90deg);
}

.countdown__pearl.-mid {
    top: calc(289 / var(--vw-base) * 100vw);
    left: calc(350 / var(--vw-base) * 100vw);
    width: calc(44 / var(--vw-base) * 100vw);
    height: calc(44 / var(--vw-base) * 100vw);
    opacity: 0.38;
}

.countdown__pearl.-small {
    top: calc(466 / var(--vw-base) * 100vw);
    left: calc(355 / var(--vw-base) * 100vw);
    width: calc(78 / var(--vw-base) * 100vw);
    height: calc(78 / var(--vw-base) * 100vw);
    opacity: 0.38;
}

/* --- Мобильная версия --- */
@media (max-width: 767px) {
    .countdown {
        margin-top: calc(66 / var(--vw-base) * 100vw);
    }

    /* Скругление только сверху: карточка уходит за нижний край страницы (как в макете,
       где её низ обрезан фреймом), иначе внизу вылезает белый овал. */
    .countdown__card {
        border-radius: var(--radius-201) var(--radius-201) 0 0;
    }

    .countdown__inner {
        margin: var(--space-20) var(--space-16) 0;
        padding-top: calc(68.5 / var(--vw-base) * 100vw);
        padding-bottom: calc(53.5 / var(--vw-base) * 100vw);
        border-radius: var(--radius-201) var(--radius-201) 0 0;
    }

    .countdown__title {
        font-size: var(--fs-32);
    }

    /* Двоеточие уже (3px), поэтому зазор 12 — ряд остаётся макетной ширины 228. */
    .countdown__timer {
        gap: calc(8 / var(--vw-base) * 100vw);
        margin-top: calc(21 / var(--vw-base) * 100vw);
    }

    .countdown__value {
        font-size: var(--fs-32);
    }

    .countdown__label {
        font-size: var(--fs-14);
    }

    .countdown__colon {
        width: calc(3 / var(--vw-base) * 100vw);
        height: calc(9 / var(--vw-base) * 100vw);
        margin-top: calc(18 / var(--vw-base) * 100vw);
        background-size: 100% calc(3 / var(--vw-base) * 100vw), 100% calc(3 / var(--vw-base) * 100vw);
    }

    .countdown__calendar {
        width: calc(244 / var(--vw-base) * 100vw);
        margin-top: calc(25 / var(--vw-base) * 100vw);
    }

    .countdown__grid {
        margin-top: calc(3.5 / var(--vw-base) * 100vw);
    }

    .countdown__day {
        height: calc(33 / var(--vw-base) * 100vw);
    }

    .countdown__heart {
        top: 0;
        width: calc(31 / var(--vw-base) * 100vw);
        height: calc(29 / var(--vw-base) * 100vw);
    }

    .countdown__photos-text {
        margin-top: calc(45 / var(--vw-base) * 100vw);
        font-size: var(--fs-14);
    }

    .countdown__photos-btn {
        margin-top: var(--space-16);
    }

    .countdown__farewell {
        margin-top: calc(35 / var(--vw-base) * 100vw);
    }

    /* На мобильном та же жемчужина без поворота (узел 59:229). */
    .countdown__pearl.-large {
        top: calc(-30 / var(--vw-base) * 100vw);
        left: calc(-64 / var(--vw-base) * 100vw);
		opacity: 0.68;
    }

    .countdown__pearl.-mid {
        top: calc(91 / var(--vw-base) * 100vw);
        left: calc(21 / var(--vw-base) * 100vw);
    }

    .countdown__pearl.-small {
        top: calc(199 / var(--vw-base) * 100vw);
        left: calc(-7 / var(--vw-base) * 100vw);
    }
}