/* Членская карта участника - единый двусторонний компонент.
 *
 * Размеры в cqw от ширины САМОЙ карты (container-type: inline-size), а не в px.
 * Карта рисуется 428px в кабинете, уже на мобильном и произвольной ширины в
 * превью редактора дизайна - и во всех случаях обязана выглядеть одинаково.
 * Базис пересчёта: 1cqw = 4.28px при ширине 428, отсюда все дробные значения.
 *
 * ВЫСОТА КАРТЫ ЖЁСТКО ЗАЛОЧЕНА aspect-ratio, поэтому line-height здесь задан
 * явно и НЕ наследуется. Раньше он приходил от body (1.6) - это добавляло
 * раскладке ~25px и переводило её из «влезает с запасом» в переполнение:
 * space-between с отрицательным свободным местом схлопывает все зазоры в ноль,
 * из-за чего QR упирался в код, а бейдж статуса вставал на строку с датой.
 *
 * Цвета приходят CSS-переменными из PHP (--mc-*), выведенными из дизайна клуба.
 */

.ibd-mcard {
    container-type: inline-size;
    position: relative;
    /* Ширина НЕ в процентах: карта лежит flex-элементом в горизонтальном
       скролл-гриде кабинета, а он меряется по содержимому. Процент от родителя,
       который сам ждёт размер содержимого, - цикл, и браузер разрешает его в
       ноль: карта переставала быть видна на мобильном вовсе. */
    width: min(428px, 82vw);
    aspect-ratio: 1.586;
    isolation: isolate;
    color: var(--mc-ink, #fff);
    line-height: 1.25;
    /* Ни радиуса, ни тени на самом корне: он ОБЪЯВЛЯЕТ контейнер, а элемент не
       может запрашивать собственный контейнер - cqw здесь посчитался бы от
       чужой ширины. Именно поэтому углы выглядели заметно круглее нормы.
       Скругление и тень живут на слоях ВНУТРИ, где cqw честно считается от
       ширины карты. */
    /* Перспектива для оборота. Это СВОЙСТВО, а не transform: тему-tilt, которая
       переписывает inline transform корня на каждом движении мыши, оно переживает. */
    perspective: 1400px;
}

/* ── Механика двух сторон ──────────────────────────────────────────────────
   Переворот держит внутренний узел: на корне уже пишут tilt темы (инлайн) и
   reveal шага активации (.actpage .tk-mcard). Ещё один писатель transform на
   том же узле молча отменил бы одного из них. */
/* Слой тени. Отдельным узлом, потому что тень не должна переворачиваться
   вместе с картой: она лежит под ней и при перевороте стоит на месте.
   Радиус - настоящий: вырубка CR80 даёт 3,18 мм при ширине 85,6 мм, то есть
   ровно 3,71% ширины карты, что здесь и означает 3.71cqw. */
.ibd-mcard-shadow {
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: 3.71cqw;
    box-shadow: var(--mc-shadow, 0 24px 50px -20px rgba(220, 112, 0, .6));
    pointer-events: none;
}

.ibd-mcard-flip {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: transform .62s cubic-bezier(.2, .7, .2, 1);
}
.ibd-mcard.is-flipped .ibd-mcard-flip { transform: rotateY(180deg); }

.ibd-mcard-face {
    position: absolute;
    inset: 0;
    /* Не inherit: корень радиуса больше не несёт (см. комментарий у .ibd-mcard). */
    border-radius: 3.71cqw;
    overflow: hidden;
    background: var(--mc-bg, linear-gradient(135deg, #dc7000 0%, #c2502f 46%, #e8785b 100%));
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    /* Скрытая сторона убирается из фокуса и из чтения скринридером. Задержка
       равна половине переворота - иначе сторона исчезала бы до того, как
       отвернётся. */
    transition: visibility 0s linear .31s;
}
.ibd-mcard-face--back { transform: rotateY(180deg); visibility: hidden; }
.ibd-mcard.is-flipped .ibd-mcard-face--front { visibility: hidden; }
.ibd-mcard.is-flipped .ibd-mcard-face--back { visibility: visible; }

/* Фон-картинка.
 *
 * Блок картинки равен КАРТЕ, а не картинке. Это принципиально: раньше блоку
 * задавалась пропорция самой картинки, и тогда object-fit:cover нечего было
 * обрезать, а блок к тому же всегда центрировался - точка фокуса не двигала
 * ничего, кадрирование было мёртвым. Теперь cover обрезает несовпадение
 * пропорций, object-position выбирает видимую часть, а зум - scale вокруг той
 * же точки фокуса, поэтому при увеличении кадр не уезжает.
 *
 * object-position задаётся в ФИЗИЧЕСКИХ процентах и на RTL не зеркалится:
 * фотография не должна переворачиваться на иврите.
 */
.ibd-mcard-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    pointer-events: none;
}

.ibd-mcard-scrim,
.ibd-mcard-gloss {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}
.ibd-mcard-gloss {
    opacity: .5;
    background:
        radial-gradient(circle at 84% 14%, rgba(255, 255, 255, .26), transparent 42%),
        radial-gradient(circle at 6% 96%, rgba(255, 255, 255, .14), transparent 46%);
}

.ibd-mcard-in {
    position: relative;
    z-index: 2;
    height: 100%;
    padding: 4.67cqw 5.14cqw;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 2.34cqw;
    box-sizing: border-box;
}
/* Ряды обязаны уметь сжиматься: при min-height:auto (по умолчанию) flex-shrink
   не срабатывает, и переполнение не поджимается, а выдавливается за карту. */
.ibd-mcard-in > * { min-height: 0; }

/* ── Шапка ── */
.ibd-mcard-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 3.27cqw;
}
.ibd-mcard-brand { display: inline-flex; align-items: center; gap: 1.87cqw; }
/* Солнце - фирменный знак. Без плашки-подложки: в хедере её тоже нет, там
   солнце стоит прямо рядом со словом. Скорость вращения общая для всего сайта
   (--tus-sun-spin), иначе логотип на карте жил бы в своём ритме. */
.ibd-mcard-logo {
    width: 6.5cqw;
    height: 6.5cqw;
    display: block;
    flex: none;
    transform-origin: 50% 50%;
    animation: ibdMcardSun var(--tus-sun-spin, 9s) linear infinite;
}
.ibd-mcard-logo--sm { width: 5.14cqw; height: 5.14cqw; }
.ibd-mcard-logo svg { width: 100%; height: 100%; display: block; }
@keyframes ibdMcardSun { to { transform: rotate(360deg); } }
.ibd-mcard-wordmark { font-weight: 800; font-size: 3.97cqw; letter-spacing: .01em; }
.ibd-mcard-wordmark--sm { font-size: 3.27cqw; color: var(--mc-muted, rgba(255, 255, 255, .72)); }
.ibd-mcard-cat {
    display: inline-flex;
    align-items: center;
    gap: 1.4cqw;
    background: var(--mc-chip, rgba(255, 255, 255, .16));
    padding: 1.17cqw 2.57cqw;
    border-radius: 999px;
    font-size: 2.69cqw;
    font-weight: 700;
    flex: none;
    max-width: 42%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.ibd-mcard-cat svg { width: 3.04cqw; height: 3.04cqw; flex: none; }

/* ── Середина: аватар (опционально) + имя + кнопка на оборот ── */
.ibd-mcard-mid { display: flex; align-items: center; gap: 3.74cqw; }
.ibd-mcard-ava {
    width: 15.4cqw;
    height: 15.4cqw;
    border-radius: 3.5cqw;
    object-fit: cover;
    flex: none;
    border: .58cqw solid var(--mc-ring, rgba(255, 255, 255, .7));
    box-shadow: 0 1.87cqw 4.2cqw rgba(0, 0, 0, .25);
}
.ibd-mcard-who { flex: 1; min-width: 0; }
.ibd-mcard-label {
    font-size: 2.45cqw;
    text-transform: uppercase;
    letter-spacing: .14em;
    line-height: 1.2;
    color: var(--mc-muted, rgba(255, 255, 255, .72));
}
.ibd-mcard-name {
    font-size: 4.91cqw;
    font-weight: 800;
    letter-spacing: -.01em;
    line-height: 1.18;
    margin-top: .7cqw;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* ── Кнопка «на оборот» ──
   На лицевой стороне это плитка, а не пилюля: она стоит ровно там, где раньше
   был сам QR, и своей формой продолжает его - человек тянется в то же место. */
.ibd-mcard-turn {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .93cqw;
    flex: none;
    width: 14.5cqw;
    height: 14.5cqw;
    border: 0;
    cursor: pointer;
    font-family: inherit;
    font-weight: 700;
    font-size: 2.34cqw;
    line-height: 1.15;
    color: var(--mc-ink, #fff);
    background: var(--mc-chip, rgba(255, 255, 255, .16));
    box-shadow: inset 0 0 0 1px var(--mc-hairline, rgba(255, 255, 255, .24));
    border-radius: 3.5cqw;
    transition: background .16s ease;
}
.ibd-mcard-turn:hover { background: var(--mc-brand, rgba(255, 255, 255, .26)); color: var(--mc-ink, #fff); }
.ibd-mcard-turn:focus-visible { outline: .47cqw solid var(--mc-ink, #fff); outline-offset: .47cqw; }
.ibd-mcard-turn-ico { display: block; width: 5.6cqw; height: 5.6cqw; }
.ibd-mcard-turn-ico svg { width: 100%; height: 100%; display: block; }

/* ── Низ лицевой стороны: код, клуб, статус ── */
.ibd-mcard-code {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 5.14cqw;
    font-weight: 800;
    letter-spacing: .14em;
    line-height: 1.2;
    margin-top: .47cqw;
}
.ibd-mcard-foot {
    display: flex;
    /* По центру, а не по нижнему краю: при flex-end бейдж статуса вставал
       на уровень второй строки соседа, то есть ровно на строку с датой. */
    align-items: center;
    justify-content: space-between;
    gap: 2.8cqw;
    margin-top: 2.57cqw;
    padding-top: 2.57cqw;
    border-top: 1px solid var(--mc-hairline, rgba(255, 255, 255, .24));
}
.ibd-mcard-clubwrap { min-width: 0; flex: 1; }
.ibd-mcard-club {
    display: inline-flex;
    align-items: center;
    gap: 1.64cqw;
    max-width: 100%;
    background: var(--mc-chip, rgba(255, 255, 255, .16));
    padding: .93cqw 2.34cqw .93cqw 1.87cqw;
    border-radius: 999px;
    text-decoration: none;
    color: var(--mc-ink, #fff);
    font-weight: 700;
    font-size: 3.04cqw;
    line-height: 1.25;
    transition: background .16s ease;
}
/* Глобальный a:hover темы (специфичность 0,1,1) перекрасил бы текст в оранжевый
   на цветном фоне - цвет обязан быть задан и в :hover. */
.ibd-mcard-club:hover,
.ibd-mcard-club:focus { color: var(--mc-ink, #fff); background: var(--mc-brand, rgba(255, 255, 255, .24)); }
.ibd-mcard-club svg { width: 3.27cqw; height: 3.27cqw; flex: none; }
.ibd-mcard-club span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ibd-mcard-since {
    font-size: 2.8cqw;
    line-height: 1.2;
    color: var(--mc-muted, rgba(255, 255, 255, .82));
    margin-top: 1.17cqw;
    /* Без обрезки длинный месяц или ивритская локаль уводят строку на второй
       ряд и снова ломают вертикальный бюджет. */
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
/* Зелёный тёмный, а не #10b981: со светлым текстом тот давал ~2.1:1 и подпись
   «Активна» плохо читалась на любой теме, включая светлые. */
.ibd-mcard-active {
    display: inline-flex;
    align-items: center;
    gap: 1.4cqw;
    background: rgba(4, 120, 87, .96);
    color: #fff;
    font-weight: 800;
    font-size: 2.8cqw;
    line-height: 1.2;
    padding: 1.17cqw 2.57cqw;
    border-radius: 999px;
    flex: none;
}
.ibd-mcard-active svg { width: 2.8cqw; height: 2.8cqw; }

/* ── Оборот ── */
/* Три ряда распределяются по высоте: иначе QR и подписи жмутся к верху, а внизу
   остаётся пустая полоса - ровно та несобранность, ради которой всё затевалось. */
.ibd-mcard-in--back {
    justify-content: space-between;
    align-items: center;
    gap: 1.87cqw;
}
.ibd-mcard-backtop {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2.34cqw;
    width: 100%;
}
/* На обороте это обычная горизонтальная пилюля - плитка там не нужна, место
   у QR, а не у кнопки. */
.ibd-mcard-turn--back {
    flex-direction: row;
    gap: 1.17cqw;
    width: auto;
    height: auto;
    padding: 1.17cqw 2.57cqw 1.17cqw 2.1cqw;
    border-radius: 999px;
    font-size: 2.57cqw;
}
.ibd-mcard-turn--back .ibd-mcard-turn-ico { width: 3.27cqw; height: 3.27cqw; }

/* Подложка QR ВСЕГДА белая и непрозрачная: код обязан сканироваться, это не
   предмет вкуса. Вуаль лежит ниже контента и её не накрывает. */
.ibd-mcard-qr {
    /* Чуть крупнее (34 вместо 30.6cqw): SVG теперь несёт встроенную тихую зону 4
       модуля, поэтому сами модули без компенсации стали бы мельче. Тёмную inset-обводку
       убрали - она стояла вплотную за белым полем и визуально съедала тихую зону. */
    width: 34cqw;
    height: 34cqw;
    border-radius: 3.5cqw;
    background: #fff;
    padding: 1.6cqw;
    flex: none;
    box-sizing: border-box;
    box-shadow: 0 1.87cqw 4.2cqw rgba(0, 0, 0, .24);
}
.ibd-mcard-qr-in {
    width: 100%;
    height: 100%;
    border-radius: 1.17cqw;
    /* Нейтральный плейсхолдер до рендера настоящего QR (qr-render.js). Раньше здесь
       была полосатая заглушка, ПОХОЖАЯ на QR: если библиотека не загрузилась, полоски
       принимали за настоящий код. Пусть заглушка не притворяется кодом. */
    background: #f1f3f8;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ibd-mcard-qr-in[data-qr-done] { background: transparent; }
.ibd-mcard-qr-in canvas,
.ibd-mcard-qr-in img,
.ibd-mcard-qr-in svg { width: 100% !important; height: 100% !important; display: block; }

.ibd-mcard-backbot { text-align: center; width: 100%; }
.ibd-mcard-backcode {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 4.44cqw;
    font-weight: 800;
    letter-spacing: .14em;
    line-height: 1.2;
}
.ibd-mcard-hint {
    font-size: 2.57cqw;
    line-height: 1.3;
    color: var(--mc-muted, rgba(255, 255, 255, .78));
    margin-top: .93cqw;
}

/* На шаге активации карта растягивается по колонке (там у родителя ширина
   определена), в кабинете держит свои 428px. */
.ibd-mcard--activation { width: 100%; max-width: none; margin-top: 20px; }

/* Без анимации переворота: стороны просто подменяются. 3D-трансформ убран
   целиком - «застрять в промежуточном повороте» здесь нечему. */
@media (prefers-reduced-motion: reduce) {
    .ibd-mcard-logo { animation: none; }
    .ibd-mcard-flip { transition: none; }
    .ibd-mcard.is-flipped .ibd-mcard-flip { transform: none; }
    .ibd-mcard-face { transition: none; }
    .ibd-mcard-face--back { transform: none; }
    .ibd-mcard-turn { transition: none; }
}