/* ══ ТЕСТЫ И УПРАЖНЕНИЯ ══ */
.tests-ex { padding: var(--space-20) var(--space-6) var(--space-32); max-width: 1200px; margin: 0 auto; width: 100%; }
.tests-ex__label { font-size: var(--text-label); font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--color-clay); margin-bottom: var(--space-3); }
.tests-ex__heading { font-family: var(--font-display); font-size: var(--text-h2); font-weight: 700; line-height: 0.95; color: var(--color-ink); margin-bottom: var(--space-4); }
.tests-ex__sub { font-size: var(--text-lead); color: var(--color-ink-60); max-width: 54ch; line-height: 1.6; margin-bottom: var(--space-12); }

/* Masonry */
.mason { position: relative; }
.mason__item { position: absolute; z-index: 1; }
.mason__item:has(.illus) { z-index: 0; }
.mason__item:has(.card:hover),
.mason__item:has(.card:focus-visible) { z-index: 2; }

/* Карточки скрыты до reveal — JS снимает opacity после layout */
.mason__item {
  opacity: 0;
  transition: opacity 1.6s cubic-bezier(0.4,0,0.2,1);
}
.mason__item.is-visible {
  opacity: 1;
}

/* Карточки тестов */
.card { padding: 28px 24px 22px; border: 1px solid var(--color-ink-08); border-radius: var(--radius-card); display: flex; flex-direction: column; cursor: pointer; width: 100%; transition: border-color .25s, box-shadow .25s; text-align: left; background: var(--color-paper); }
.card:hover { border-color: oklch(from var(--color-clay) l c h / .4); box-shadow: 0 6px 24px oklch(14% .025 240 / .08); }
.card__tag { display: block; font-size: var(--text-label); font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--color-clay); margin-bottom: var(--space-2); }
.card__title { display: block; font-family: var(--font-display); font-size: var(--text-h3); font-weight: 700; color: var(--color-ink); line-height: 0.95; margin-bottom: var(--space-3); }
.card__desc { font-size: var(--text-body); color: var(--color-ink-60); line-height: 1.65; flex: 1; }
.card__footer { display: flex; align-items: center; justify-content: space-between; margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--color-ink-08); }
.card__meta { font-size: var(--text-small); color: var(--color-ink-40); }
.card__arrow { color: var(--color-clay); font-size: 15px; transition: transform .2s; }
.card:hover .card__arrow { transform: translateX(4px); }

/* Тёмные — упражнения */
.card--dark { background: oklch(88% 0.025 55); border-color: oklch(75% 0.04 55); }
.card--dark .card__tag { color: oklch(40% 0.12 35); }
.card--dark .card__title { color: oklch(18% 0.02 40); }
.card--dark .card__desc { color: oklch(35% 0.02 40); }
.card--dark .card__meta { color: oklch(50% 0.02 40); }
.card--dark .card__footer { border-color: oklch(70% 0.04 55); }
.card--dark .card__arrow { color: oklch(40% 0.12 35); }
.card--dark:hover { box-shadow: 0 6px 24px oklch(48% 0.14 35 / .15); background: oklch(85% 0.03 55); }

/* Иллюстрации */
.illus { border-radius: var(--radius-card); overflow: hidden; display: block; width: 100%; }
.illus img { width: 100%; display: block; object-fit: cover; }

/* Цитаты */
.quote { border-radius: var(--radius-card); background: var(--color-ink); padding: var(--space-6); display: flex; align-items: center; }
.quote__text { font-family: var(--font-display); font-style: italic; font-size: clamp(17px,1.7vw,22px); font-weight: 400; color: oklch(94% 0.008 85); line-height: 0.95; }



/* Попапы тестов и упражнений */
.tex-overlay { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; background: oklch(14% .025 240 / .55); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); opacity: 0; pointer-events: none; transition: opacity .3s cubic-bezier(0.16,1,0.3,1); }
.tex-overlay.is-open { opacity: 1; pointer-events: all; }
.tex-box { position: relative; width: min(720px,95vw); min-height: 520px; max-height: 92vh; background: var(--color-paper); border-radius: var(--radius-modal); padding: 64px 52px 44px; overflow-y: auto; display: flex; flex-direction: column; transform: translateY(20px) scale(.97); transition: transform .35s cubic-bezier(0.16,1,0.3,1); }
.tex-overlay.is-open .tex-box { transform: translateY(0) scale(1); }
.quiz-result { display: none; flex: 1; flex-direction: column; }
.quiz-result.is-active { display: flex; }
.tex-close { position: absolute; top: 20px; right: 20px; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--color-ink-40); font-size: 18px; transition: background .15s, color .15s; }
.tex-close:hover { background: var(--color-ink-08); color: var(--color-ink); }
@media(max-width:600px) { .tex-box { padding: 56px 24px 32px; min-height: 480px; } }

/* ════════════════════════════════
   CHAT WIDGET
════════════════════════════════ */