/* widgets/communities/community_card/community_card.css
 * Канонічна картка. Токени --n-* (авто light/dark). Один surface, без card-in-card.
 * <article> relative + stretched-link overlay (__hit, z-index:1); інтерактив (__actions) над ним (z-index:2). */

.w-community-card {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-areas: "avatar body actions";
    align-items: center;
    gap: var(--n-s-3);
    padding: var(--n-s-4);
    border: 1px solid var(--n-line);
    border-radius: var(--n-r-md);
    background: var(--n-surface, var(--n-bg-soft));
    color: var(--n-text);
    transition: border-color var(--n-dur-base) var(--n-ease), background var(--n-dur-base) var(--n-ease);
}
.w-community-card:hover { border-color: var(--n-accent-border); background: var(--n-bg-hover); }

/* Stretched link — вся картка клікабельна; :focus-visible через overlay */
.w-community-card__hit {
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: var(--n-r-md);
    text-decoration: none;
}
.w-community-card__hit:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--n-accent-ring);
}

/* Avatar */
.w-community-card__avatar {
    grid-area: avatar;
    width: 52px; height: 52px;
    border-radius: var(--n-r-sm);
    overflow: hidden;
    display: grid; place-items: center;
    background: var(--n-accent-soft);
    flex: none;
}
.w-community-card__avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.w-community-card__init {
    font-family: var(--n-font-display, var(--n-font));
    font-weight: var(--n-w-bold); font-size: 20px; color: var(--n-accent); line-height: 1;
}

/* Body */
.w-community-card__body { grid-area: body; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.w-community-card__head { display: flex; align-items: center; gap: var(--n-s-1); min-width: 0; }
.w-community-card__title {
    font-weight: var(--n-w-sem); font-size: 16px; color: var(--n-text-strong, var(--n-text));
    line-height: var(--n-lh-tight); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.w-community-card__verified { display: inline-flex; color: var(--n-accent); flex: none; }
.w-community-card__verified svg { display: block; }
.w-community-card__meta {
    font-size: var(--n-fs-sm); color: var(--n-text-mute); line-height: var(--n-lh-snug);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.w-community-card__dot { opacity: .5; margin: 0 1px; }
.w-community-card__desc {
    font-size: var(--n-fs-sm); color: var(--n-text-soft); line-height: var(--n-lh-snug); margin-top: 2px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.w-community-card__stats {
    display: flex; flex-wrap: wrap; align-items: center; gap: var(--n-s-3); margin-top: 4px;
    font-size: var(--n-fs-sm); color: var(--n-text-mute);
}
.w-community-card__stat { display: inline-flex; align-items: center; gap: 4px; font-variant-numeric: tabular-nums; }
.w-community-card__stat svg { display: block; opacity: .7; }
.w-community-card__stat-lbl { color: var(--n-text-dim); }
.w-community-card__stat--mutual { color: var(--n-accent); }
.w-community-card__stat--mutual .w-community-card__stat-lbl { color: var(--n-accent); opacity: .8; }

/* Actions container — над overlay */
.w-community-card__actions {
    grid-area: actions;
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: var(--n-s-2);
    flex: none;
}

/* Дія (span або button) */
.w-community-card__action {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 34px; padding: 0 var(--n-s-4);
    border-radius: var(--n-r-sm);
    font-weight: var(--n-w-sem); font-size: var(--n-fs-sm);
    white-space: nowrap; border: 1px solid transparent;
    transition: background var(--n-dur-fast) var(--n-ease), border-color var(--n-dur-fast) var(--n-ease);
}
.w-community-card__join { font-family: inherit; cursor: pointer; }
.w-community-card__join[disabled] { cursor: default; }
.w-community-card__action.is-join,
.w-community-card__action.is-open { background: var(--n-accent); color: var(--n-text-on-accent); }
.w-community-card:hover .w-community-card__action.is-join,
.w-community-card:hover .w-community-card__action.is-open { background: var(--n-accent-hover); }
.w-community-card__action.is-requested,
.w-community-card__action.is-pending { background: transparent; border-color: var(--n-line-strong); color: var(--n-text-mute); }
.w-community-card__action.is-joined { background: var(--n-accent-soft); color: var(--n-accent); }

/* Sponsored */
.w-community-card__sponsor {
    position: absolute; top: var(--n-s-2); right: var(--n-s-2); z-index: 2;
    font-size: 10px; font-weight: var(--n-w-sem); letter-spacing: .06em; text-transform: uppercase;
    color: var(--n-text-dim); background: var(--n-bg-sunk); border-radius: var(--n-r-xs); padding: 2px 6px;
    pointer-events: none;
}
.w-community-card.is-promoted { border-color: var(--n-accent-border); }

/* Catalog ⋯ menu button (menu dropdown стилізує наявний kp-cc CSS) */
.w-community-card__menubtn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; border-radius: var(--n-r-sm);
    border: 1px solid var(--n-line-strong); background: transparent; color: var(--n-text-mute);
    cursor: pointer;
}
.w-community-card__menubtn:hover { background: var(--n-bg-hover); color: var(--n-text); }
.w-community-card__menubtn svg { display: block; }
.w-community-card__menuwrap { position: relative; }

/* Compact */
.w-community-card--compact { padding: var(--n-s-3); gap: var(--n-s-3); }
.w-community-card--compact .w-community-card__avatar { width: 40px; height: 40px; }
.w-community-card--compact .w-community-card__init { font-size: 16px; }
.w-community-card--compact .w-community-card__title { font-size: var(--n-fs); }
.w-community-card--compact .w-community-card__stats { margin-top: 2px; gap: var(--n-s-2); }
.w-community-card--compact .w-community-card__action { min-height: 30px; padding: 0 var(--n-s-3); }

@media (max-width: 560px) {
    .w-community-card__stat-lbl { display: none; }
    .w-community-card__action { padding: 0 var(--n-s-3); }
}
@media (prefers-reduced-motion: reduce) {
    .w-community-card, .w-community-card__action { transition: none; }
}

/* v1.1.5.283 (re-audit §7) — мінімальний серверний fallback-фрагмент (аварійний, рідкісний):
   явний placeholder-лінк замість клієнтського legacy-рендерера. */
.kp-community-card--min { padding: var(--n-s-3, 12px) var(--n-s-4, 16px); border-bottom: 1px solid var(--n-line); }
.kp-community-card--min .kp-cc-link { position: static; opacity: 1; color: var(--n-text); font-weight: var(--n-w-sem, 600); text-decoration: none; }
.kp-community-card--min .kp-cc-link:hover { color: var(--n-accent); }