/* Модуль 2 — страница комьюнити (single-community.php).
   Reveal-on-mount (JS-состояние + CSS-transition), карусель площадок (Swiper), мобильный reflow.
   Инлайн-значения (цвета/отступы/тени) заданы в шаблоне; тут — поведение, скролл, брейкпоинты. */

/* Плагинный .ibd-container держит 1280+24px, но .commpage сам рисует full-bleed hero
   и собственные 1280-бэнды (.cm-stats/.cmpx). Сбрасываем внешний контейнер, чтобы не было
   двойного паддинга и чтобы hero был на всю ширину (как на странице события). */
.ibd-community-wrapper .ibd-container { padding: 0; max-width: none; }

/* container-type на корне -> мобильный @container-брейкпоинт из макета */
.commpage { container-type: inline-size; }

/* ── Reveal-on-mount: секции появляются снизу вверх ── */
.commpage .cm-reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .6s ease, transform .6s ease;
    will-change: opacity, transform;
}
.commpage.cm-revealed .cm-reveal,
.commpage .cm-reveal.is-revealed {
    opacity: 1;
    transform: none;
}
/* лёгкий стаггер по секциям main */
.commpage main > .cm-reveal:nth-of-type(2) { transition-delay: .04s; }
.commpage main > .cm-reveal:nth-of-type(3) { transition-delay: .06s; }

/* ── Hover: система макетов (qa/restyle/SPEC.md) - без подпрыгивания и фильтров,
   основная темнеет до #DC7000 (правило в sunday-unify.css), вторичная - тёплый фон. ── */
.commpage .tk-cta { transition: background .16s ease, color .16s ease; }
.commpage .tk-cta:hover, .commpage .tk-cta:active { transform: none; filter: none; }

/* Текст на оранжевом. Белый на #F5820A - 2.6:1, цвет фирменный и не меняется. Стили
   кнопок inline (single-community.php), поэтому перебиваем только !important.
   Размеры как в макетах (решение владельца 20.10, прежние 19px сняты): «Пригласить друга»
   в колонке - кнопка 48 / 16px; та же кнопка в шапке клуба белая - условие по inline-фону.
   «Связаться» и активный таб «Будущие/Прошедшие» - вес 800 и тень. */
.commpage [data-cm-invite][style*="background:#F5820A" i] { font-size: 16px !important; text-shadow: 0 1px 1px rgba(120, 50, 0, .35); }
.commpage [data-cm-contact-open][style*="background:#F5820A" i],
.commpage [data-cm-tab][aria-selected="true"] { font-weight: 800 !important; text-shadow: 0 1px 1px rgba(120, 50, 0, .35); }
/* Неактивный таб: JS (module2-community.js) пишет inline color #6b7280 - тянем к токену. */
.commpage [data-cm-tab][aria-selected="false"] { color: #39505E !important; }
.commpage .tk-ghost { transition: background .16s ease, border-color .16s ease, color .16s ease; }
.commpage .tk-ghost:hover { background: #FFF7EC; border-color: #F5820A; }
/* Текстовая ссылка-действие: цвет ссылок, подчёркивание на hover (inline text-decoration:none). */
.commpage a.cm-textlink:hover { color: #1F6FA6 !important; text-decoration: underline !important; }

.commpage .tk-cta:focus-visible,
.commpage .tk-ghost:focus-visible,
.commpage [data-cm-tab]:focus-visible,
.commpage [data-cm-search]:focus-visible {
    outline: 2px solid #2E86C1;
    outline-offset: 2px;
}
/* Поиск встреч: кольцо фокуса на всём поле (обёртка с рамкой). */
.commpage [data-cm-search-wrap]:focus-within { border-color: #1F6FA6 !important; box-shadow: 0 0 0 3px #D9EBF9; }
.commpage [data-cm-search]:focus-visible { outline: none; }

/* ── Карусель площадок (Swiper, slidesPerView:auto) ── */
.commpage .comm-carousel {
    overflow: hidden;
    padding: 4px 2px 12px;
}
.commpage .comm-carousel .swiper-wrapper {
    align-items: stretch;
}
.commpage .cm-venue-slide {   /* ширину задаёт Swiper (slidesPerView:2) */
    height: auto;
    display: flex;
}
.commpage .cm-venue-slide > .ibd-business-card {
    width: 100%;
}

/* ── Мобильный reflow (из макета: @container max-width:480px) ── */
@container (max-width: 480px) {
    .commpage .cmpx { padding-left: 14px; padding-right: 14px; }
    .commpage main { gap: 16px; }
    .commpage main > section { padding: 16px; }
    .commpage main > section[data-cm-events],
    .commpage main > section[aria-label="Площадки клуба"] { padding: 0; }
    .commpage .cm-hero-c { padding: 0 14px 56px; }
    .commpage .cm-cta { flex-wrap: nowrap; justify-content: center; gap: 10px; }
    .commpage .cm-cta a,
    .commpage .cm-cta button,
    .commpage .cm-cta span { padding: 0 14px !important; font-size: 15px !important; min-height: 48px !important; }
    .commpage .cm-cta svg { width: 17px; height: 17px; flex: none; }
    .commpage .cm-carousel-wrap { margin-left: -14px; margin-right: -14px; }
    .commpage .comm-carousel { padding-left: 14px; padding-right: 14px; }
    .commpage .cm-stats { margin-top: -24px; }
    .commpage .cm-stats-grid { grid-template-columns: 1fr 1fr; }
}

/* Фолбэк для браузеров без container queries — те же правила по ширине вьюпорта */
@supports not (container-type: inline-size) {
    @media (max-width: 520px) {
        .commpage .cmpx { padding-left: 14px; padding-right: 14px; }
        .commpage main { gap: 16px; }
        .commpage main > section:not([data-cm-events]):not([aria-label="Площадки клуба"]) { padding: 16px; }
        .commpage .cm-hero-c { padding: 0 14px 56px; }
        .commpage .cm-cta { flex-wrap: nowrap; justify-content: center; gap: 10px; }
        .commpage .cm-carousel-wrap { margin-left: -14px; margin-right: -14px; }
        .commpage .comm-carousel { padding-left: 14px; padding-right: 14px; }
        .commpage .cm-stats { margin-top: -24px; }
        .commpage .cm-stats-grid { grid-template-columns: 1fr 1fr; }
    }
}

/* ── prefers-reduced-motion: без анимаций, всё видно сразу ── */
@media (prefers-reduced-motion: reduce) {
    .commpage .cm-reveal {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
    .commpage .tk-cta,
    .commpage .tk-ghost { transition: none !important; }
    .commpage [data-cm-rules-chevron] { transition: none !important; }
}

/* ── MembersGrid: аватар = ссылка на профиль + тултип с именем при наведении
   (тот же приём, что у списка идущих на странице встречи, .evpage a.ev-av) ── */
.commpage .cm-mem-av { position: relative; display: block; text-decoration: none; transition: transform .15s ease; }
.commpage a.cm-mem-av:hover { transform: translateY(-3px); z-index: 2; }
.commpage .cm-mem-av[data-name]::after {
    content: attr(data-name);
    position: absolute; bottom: calc(100% + 8px); left: 50%;
    transform: translateX(-50%) translateY(4px);
    background: #1e2a32; color: #fff; font-size: 11.5px; font-weight: 700; line-height: 1;
    padding: 5px 9px; border-radius: 7px; white-space: nowrap; pointer-events: none;
    opacity: 0; transition: opacity .14s ease, transform .14s ease; z-index: 5;
}
.commpage .cm-mem-av[data-name]:hover::after,
.commpage .cm-mem-av[data-name]:focus-visible::after { opacity: 1; transform: translateX(-50%) translateY(0); }
.commpage a.cm-mem-av:focus-visible { outline: 2px solid #2E86C1; outline-offset: 3px; border-radius: 50%; }
/* Зона касания (норма 44px, mobile.css): аватар - ячейка сетки в 6 колонок, на телефоне
   ~41px. Невидимый ::before (::after занят подсказкой) выходит на 5px во все стороны -
   ровно в половину зазора сетки (10px), поэтому зоны соседей смыкаются, а не налезают
   друг на друга; вёрстка не сдвигается (absolute). Цель = ячейка + 10px. */
.commpage a.cm-mem-av::before { content: ''; position: absolute; inset: -5px; }

.commpage .cm-mem-more {
    display: block; width: 100%; min-height: 44px; margin-top: 14px; border: 1px solid #F5820A; background: #fff;
    color: #1E2A32; font-family: inherit; font-weight: 700; font-size: 15px; padding: 0 14px;
    border-radius: 12px; cursor: pointer; transition: background .16s ease;
}
.commpage .cm-mem-more:hover { background: #FFF7EC; color: #1E2A32; }
.commpage .cm-mem-more:focus-visible { outline: 2px solid #2E86C1; outline-offset: 2px; }

/* ── Модалка «Все участники» ── */
.cm-mem-modal-ov {
    position: fixed; inset: 0; background: rgba(17, 24, 39, .6); z-index: 100050;
    display: flex; align-items: center; justify-content: center; padding: 20px;
}
/* Обязательно: display у класса перебивает display:none браузерного [hidden],
   и модалка висела бы открытой с самой загрузки страницы. */
.cm-mem-modal-ov[hidden] { display: none; }
.cm-mem-modal-card {
    position: relative; width: 100%; max-width: 400px; background: #fff; border-radius: 16px;
    box-shadow: 0 18px 50px rgba(24, 60, 90, .18); display: flex; flex-direction: column; max-height: 78vh;
}
.cm-mem-modal-head {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 16px 18px; border-bottom: 1px solid #E3ECF2; flex: none;
}
.cm-mem-modal-head b { font-size: 18px; font-weight: 700; color: #1E2A32; }
.cm-mem-modal-x {
    border: 0; background: #F3F8FC; width: 40px; height: 40px; border-radius: 50%;
    cursor: pointer; font-size: 20px; line-height: 1; color: #1E2A32; flex: none;
}
.cm-mem-modal-x:hover { background: #E3ECF2; }
.cm-mem-modal-x:focus-visible { outline: 2px solid #2E86C1; outline-offset: 2px; }
.cm-mem-modal-list { overflow-y: auto; padding: 8px 10px; scrollbar-width: thin; }
.cm-mem-modal-row { padding: 8px; border-radius: 12px; }
.cm-mem-modal-row:hover { background: #F3F8FC; }

@media (prefers-reduced-motion: reduce) {
    .commpage .cm-mem-av,
    .commpage a.cm-mem-av:hover { transition: none !important; transform: none !important; }
}

/* ── intl-tel-input: адаптация под палитру + z-index над модалкой «Связаться» ── */
[data-cm-contact-form] .iti { width: 100%; display: block; }
[data-cm-contact-form] .iti input[type="tel"] { width: 100%; box-sizing: border-box; }
/* Поля модалок «Связаться»/«Запросить вступление» (стили полей inline - перебиваем !important):
   фокус системы - рамка #1F6FA6 + кольцо #D9EBF9. */
[data-cm-contact-form] input:focus,
[data-cm-contact-form] textarea:focus,
[data-cm-join-form] textarea:focus,
[data-cm-contact-form] .iti input[type="tel"]:focus {
    border-color: #1F6FA6 !important;
    outline: none;
    box-shadow: 0 0 0 3px #D9EBF9;
}
[data-cm-contact-modal] button:focus-visible,
[data-cm-join-modal] button:focus-visible,
[data-cm-contact-modal] a:focus-visible { outline: 2px solid #2E86C1; outline-offset: 2px; }
[data-cm-contact-submit]:hover, [data-cm-join-submit]:hover { background: #DC7000 !important; }
/* dropdown iti рендерится в body (dropdownContainer) - поднимаем над оверлеем модалки (100050) */
.iti__dropdown-content,
.iti__country-list { z-index: 100060 !important; }
.iti__country-list { border-radius: 12px; box-shadow: 0 18px 50px rgba(24, 60, 90, .18); }
.iti__country.iti__highlight { background-color: rgba(245, 130, 10, .12); }