/* Блок «Китайский язык» на главной (index.php, секция .cn-promo).
   Палитра le30: #d32226, #122c94, #242424, #a19fa2, #fbf9fa
   плюс тёплый акцент под тему — #c8102e / #e8b046. */

.cn-promo {
    position: relative;
    overflow: hidden;
    background: linear-gradient(170deg, #fff 0%, #fdf6f4 48%, #fff 100%);
}

/* Мягкие световые пятна вместо тяжёлой картинки-фона */
.cn-promo__glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
    opacity: .5;
    pointer-events: none;
}

.cn-promo__glow--a {
    top: -140px;
    right: -80px;
    width: 420px;
    height: 420px;
    background: radial-gradient(circle, rgba(200, 16, 46, .28), transparent 70%);
}

.cn-promo__glow--b {
    bottom: -180px;
    left: -120px;
    width: 460px;
    height: 460px;
    background: radial-gradient(circle, rgba(232, 176, 70, .3), transparent 70%);
}

.cn-promo .container {
    position: relative;
    z-index: 1;
}

.cn-promo__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    margin-bottom: .9rem;
    padding: .4rem 1rem;
    border-radius: 999px;
    background: rgba(200, 16, 46, .09);
    color: #c8102e;
    font-size: .85rem;
    font-weight: 700;
    letter-spacing: .02em;
}

.cn-promo__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    gap: 1.75rem;
    align-items: start;
    margin-top: 2.5rem;
}

/* ── Программы: табы ─────────────────────────────────────────────────── */

.cn-tabs {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .65rem;
    margin-bottom: 1.25rem;
}

.cn-tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .25rem;
    padding: 1rem .6rem;
    border: 1px solid #ececf4;
    border-radius: 16px;
    background: #fff;
    font-family: inherit;
    text-align: center;
    cursor: pointer;
    transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}

.cn-tab:hover {
    border-color: #c8102e;
    transform: translateY(-2px);
}

.cn-tab:focus-visible {
    outline: 2px solid #122c94;
    outline-offset: 2px;
}

.cn-tab.is-active {
    border-color: #c8102e;
    background: linear-gradient(160deg, #c8102e 0%, #a30c24 100%);
    box-shadow: 0 14px 28px -18px rgba(200, 16, 46, .9);
}

.cn-tab__icon {
    font-size: 1.7rem;
    line-height: 1;
    transition: transform .25s ease;
}

.cn-tab.is-active .cn-tab__icon {
    transform: scale(1.12);
}

.cn-tab__name {
    color: #242424;
    font-size: .95rem;
    font-weight: 800;
}

.cn-tab__age {
    color: #a19fa2;
    font-size: .8rem;
}

.cn-tab.is-active .cn-tab__name,
.cn-tab.is-active .cn-tab__age {
    color: #fff;
}

.cn-tab.is-active .cn-tab__age {
    opacity: .85;
}

/* ── Программы: панели ───────────────────────────────────────────────── */

.cn-panels {
    position: relative;
}

.cn-panel {
    padding: 1.75rem;
    border: 1px solid #ececf4;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .04);
}

.cn-panel.is-active {
    animation: cn-fade .28s ease both;
}

@keyframes cn-fade {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
}

.cn-panel__title {
    margin: 0 0 .75rem;
    font-size: 1.2rem;
    font-weight: 800;
    color: #242424;
}

.cn-panel__text {
    margin: 0 0 1.25rem;
    color: #454952;
    font-size: 1rem;
    line-height: 1.65;
}

.cn-panel__chips {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.cn-chip {
    padding: .4rem .85rem;
    border-radius: 999px;
    background: #fbf3f4;
    color: #a30c24;
    font-size: .85rem;
    font-weight: 600;
}

/* ── Карточки-иероглифы ──────────────────────────────────────────────── */

.cn-promo__play {
    padding: 1.75rem;
    border: 1px solid #ececf4;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .04);
}

.cn-play__title {
    margin: 0 0 .35rem;
    font-size: 1.1rem;
    font-weight: 800;
    color: #242424;
}

.cn-play__hint {
    margin: 0 0 1.25rem;
    color: #a19fa2;
    font-size: .88rem;
}

.cn-chars {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .75rem;
}

.cn-char {
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    perspective: 900px;
    aspect-ratio: 1 / 1;
}

.cn-char:focus-visible {
    outline: 2px solid #122c94;
    outline-offset: 3px;
    border-radius: 16px;
}

.cn-char__inner {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: transform .55s cubic-bezier(.3, .8, .3, 1);
}

.cn-char.is-flipped .cn-char__inner {
    transform: rotateY(180deg);
}

.cn-char__face {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .25rem;
    border-radius: 16px;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.cn-char__face--front {
    background: linear-gradient(155deg, #c8102e 0%, #8e0a1f 100%);
    color: #fff;
    font-size: clamp(1.9rem, 4vw, 2.5rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: .04em;
}

.cn-char__face--back {
    background: #fbf9fa;
    border: 1px solid #ececf4;
    transform: rotateY(180deg);
    padding: .5rem;
}

.cn-char__pinyin {
    color: #c8102e;
    font-size: 1.05rem;
    font-weight: 800;
}

.cn-char__ru {
    color: #454952;
    font-size: .92rem;
}

.cn-char:hover .cn-char__face--front {
    filter: brightness(1.08);
}

.cn-play__score {
    margin: 1.1rem 0 0;
    color: #a19fa2;
    font-size: .88rem;
    text-align: center;
}

.cn-play__score b {
    color: #c8102e;
}

.cn-promo__play.is-complete {
    border-color: #c8102e;
}

/* ── Факты ───────────────────────────────────────────────────────────── */

.cn-facts {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
    margin: 1.75rem 0 0;
    padding: 1.5rem;
    border-radius: 20px;
    background: #fff;
    border: 1px solid #ececf4;
    list-style: none;
}

.cn-fact {
    display: flex;
    flex-direction: column;
    gap: .2rem;
    text-align: center;
}

.cn-fact b {
    color: #c8102e;
    font-size: 1.5rem;
    font-weight: 800;
    line-height: 1.1;
}

.cn-fact span {
    color: #a19fa2;
    font-size: .88rem;
}

/* ── Кнопки ──────────────────────────────────────────────────────────── */

.cn-promo__cta {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
    margin-top: 1.75rem;
}

.cn-promo__cta .button--primary {
    background: #c8102e;
    border-color: #c8102e;
}

.cn-promo__cta .button--primary:hover {
    background: #a30c24;
    border-color: #a30c24;
}

/* Подсветка призыва, когда открыты все карточки */
.cn-promo__cta.is-highlighted .button--primary {
    animation: cn-pulse 1.5s ease 2;
}

@keyframes cn-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(200, 16, 46, .45); }
    50%      { box-shadow: 0 0 0 14px rgba(200, 16, 46, 0); }
}

/* ── Появление при скролле ───────────────────────────────────────────── */

.cn-promo .cn-tab,
.cn-promo .cn-char,
.cn-promo .cn-fact {
    opacity: 1;
}

.cn-promo.cn-animate .cn-tab,
.cn-promo.cn-animate .cn-char,
.cn-promo.cn-animate .cn-fact {
    opacity: 0;
    transform: translateY(14px);
}

.cn-promo.cn-animate.is-inview .cn-tab,
.cn-promo.cn-animate.is-inview .cn-char,
.cn-promo.cn-animate.is-inview .cn-fact {
    opacity: 1;
    transform: none;
    transition: opacity .5s ease, transform .5s ease;
    transition-delay: calc(var(--cn-i, 0) * 70ms);
}

/* ── Адаптив ─────────────────────────────────────────────────────────── */

@media (max-width: 1199px) {
    .cn-promo__grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .cn-chars {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    .cn-tabs {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .cn-panel,
    .cn-promo__play {
        padding: 1.25rem;
        border-radius: 16px;
    }

    .cn-chars {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .cn-facts {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1.25rem;
        padding: 1.25rem;
    }

    .cn-promo__cta .button {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .cn-char__inner,
    .cn-tab,
    .cn-tab__icon {
        transition: none;
    }

    .cn-panel.is-active {
        animation: none;
    }

    .cn-promo__cta.is-highlighted .button--primary {
        animation: none;
    }

    .cn-promo.cn-animate .cn-tab,
    .cn-promo.cn-animate .cn-char,
    .cn-promo.cn-animate .cn-fact {
        opacity: 1;
        transform: none;
    }
}