/* ============================================================
   Кнопка-призыв с бейджем — ЕДИНЫЙ стиль для всего сайта.

   Раньше одна и та же кнопка была описана в трёх местах: home.css
   (главная), section.css (Арканы и Learning) и инлайном в
   destiny-matrix.php (четыре калькулятора). Параметры расходились —
   бейдж был то 11px, то 12px, отступы то 86px, то 40px. Теперь
   геометрия и бейдж живут ТОЛЬКО здесь, а в тех файлах остались
   лишь свои цвета и hover-эффекты.

   Правки размеров кнопки и бейджа делать в этом файле — они разойдутся
   по всему сайту разом.
   ============================================================ */

/* --- Геометрия кнопки -------------------------------------- */
.arcana-cta {
    /* Отступы: по бокам 80px, по высоте 30px. Симметричные — надпись
       стоит ровно по центру и по высоте, и по ширине.
       Именно ФИКСИРОВАННЫЕ, не в долях ширины окна: кнопка стоит в своей
       колонке и на большинстве экранов никуда не упирается — сужать её
       вслед за окном незачем. Отступы ужимаются только там, где кнопка
       реально растянута во всю ширину экрана (медиа-запрос ниже). */
    min-height: 0;
    padding: 30px 30px;
    border-radius: 18px;
    /* Надпись: 17px. На телефоне 16px — в медиа-запросе ниже.
       Тоже не в долях окна: иначе кегль полз бы уже на 900px, где
       кнопке ничего не мешает. */
    font-size: 17px;
    font-weight: 800;
    line-height: 1.3;
    text-align: center;
}
/* Боковой отступ = 30px (жёсткий, у кнопки) + до 50px «воздуха» с каждой
   стороны надписи. Воздух — это две пустые распорки, которые СЖИМАЮТСЯ,
   когда длинному названию не хватает места: сначала отступы уезжают с 80px
   до минимальных 30px, и только когда и этого мало — текст переносится
   на вторую строку. Обе строки по центру, отступы сверху и снизу
   остаются по 30px — они считаются от всего блока надписи. */
.arcana-cta .cta-label {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}
.arcana-cta .cta-label::before,
.arcana-cta .cta-label::after {
    content: '';
    /* width, а не только flex-basis: иначе браузер считает вклад распорки
       в собственную ширину кнопки нулевым, и она схлопывается сразу. */
    width: 50px;
    /* Сжимаются в 200 раз охотнее надписи: при нехватке места сначала
       схлопывается воздух по краям и только потом переносится текст. */
    flex: 0 100000 auto;
    min-width: 0;
}
/* Кнопка бывает ссылкой (<a>) внутри текста статьи, а там действуют правила
   для ссылок — например .arc-lead a { font-weight: inherit }, из-за которого
   надпись становилась тонкой. Дублируем селектором той же силы, чтобы
   начертание кнопки не зависело от того, в каком блоке она стоит. */
a.arcana-cta, button.arcana-cta { font-weight: 800; }

/* --- Бейдж --------------------------------------------------- */
/* Размер постоянный на всех экранах и языках: 11px, отступы 6px/12px.
   Прижат к правому верхнему углу на 8px, из потока вынесен —
   на ширину кнопки не влияет. */
.arcana-cta .cta-label:has(.cta-free-badge) { position: static; }
.arcana-cta .cta-free-badge {
    position: absolute; top: 8px; right: 8px; left: auto; bottom: auto;
    font-size: 11px;
    padding: 6px 12px;
    line-height: 1;
    letter-spacing: 0.02em;
    border-radius: 999px;
    white-space: nowrap;
    pointer-events: none;
    /* Тёмная пилюля с градиентной надписью — один вид на всём сайте.
       Раньше фон задавался отдельно в home.css и section.css. */
    background: #051210;
    color: #000;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
}
.arcana-cta .cta-free-badge-text {
    background: linear-gradient(to right, #FF6291, #FF755E);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
}

/* Узкий экран: кнопка занимает всю ширину колонки, и 80px по бокам уже
   выталкивают надпись на вторую строку — здесь отступы ужимаются до 30px. */
@media (max-width: 640px) {
    /* На телефоне кнопка занимает всю ширину колонки — так у всех кнопок
       этого образца, а не только у главной. */
    .arcana-cta { font-size: 16px; width: 100%; }
}