/* ============================================================================
   kindr - EXPLORE COMMUNITIES (templates/communities.php, /communities): the
   portal's own communities as cards in the tool cards' family (css/tools.css
   .kd2-tool: white to lavender, 22px corners, the spectrum line on hover);
   the communities below a card listed inside it, theirs indented under them.
   The hero is the inner pages' (pages.css .kd2-phero). Palette: the --kd2-*
   tokens (chrome.css). 14px is the smallest text.
   ============================================================================ */
body.kd-social .kd2-page .kd2-cm { padding: 64px 0 96px; background: var(--kd2-lav5); }
body.kd-social .kd2-page .kd2-cm__count { margin: 0 0 22px; font-family: var(--kd2-mono); font-size: 14px; letter-spacing: .14em; text-transform: uppercase; color: var(--kd2-violet); }
body.kd-social .kd2-page .kd2-cm__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; align-items: start; }

/* the card */
body.kd-social .kd2-page .kd2-cm__card { position: relative; overflow: hidden; display: flex; flex-direction: column; min-width: 0; border-radius: 22px; background: linear-gradient(180deg, var(--kd2-white), var(--kd2-lav4)); border: 1px solid var(--kd2-line); color: var(--kd2-ink); transition: transform .45s cubic-bezier(.2, .8, .2, 1), box-shadow .45s, border-color .3s; }
body.kd-social .kd2-page .kd2-cm__card::after { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; z-index: 2; background: linear-gradient(90deg, var(--kd2-magenta), var(--kd2-lilac), var(--kd2-sky), var(--kd2-mint), var(--kd2-sun)); transform: scaleX(0); transform-origin: left; transition: transform .5s; }
body.kd-social .kd2-page .kd2-cm__card:hover { transform: translateY(-6px); border-color: var(--kd2-line5); box-shadow: 0 2px 4px rgba(var(--kd2-ink-rgb), .04), 0 26px 56px rgba(var(--kd2-violet-rgb), .18); }
body.kd-social .kd2-page .kd2-cm__card:hover::after { transform: scaleX(1); }
body.kd-social .kd2-page .kd2-cm__media { position: relative; display: grid; place-items: center; aspect-ratio: 16 / 9; overflow: hidden; background: linear-gradient(135deg, rgba(var(--kd2-violet-rgb), .9), rgba(var(--kd2-magenta-rgb), .75)); text-decoration: none; }
body.kd-social .kd2-page .kd2-cm__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
body.kd-social .kd2-page .kd2-cm__card:hover .kd2-cm__media img { transform: scale(1.04); }
body.kd-social .kd2-page .kd2-cm__ini { font-family: var(--kd2-display); font-size: 52px; font-weight: 700; letter-spacing: -.03em; color: var(--kd2-white); }
body.kd-social .kd2-page .kd2-cm__body { display: flex; flex-direction: column; gap: 10px; padding: 22px 24px 24px; }
body.kd-social .kd2-page .kd2-cm__name { margin: 0; font-family: var(--kd2-display); font-size: 22px; font-weight: 700; line-height: 1.15; letter-spacing: -.02em; }
body.kd-social .kd2-page .kd2-cm__name a { color: var(--kd2-ink); text-decoration: none; overflow-wrap: anywhere; }
body.kd-social .kd2-page .kd2-cm__name a:hover { color: var(--kd2-violet); }
body.kd-social .kd2-page .kd2-cm__place { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 14px; color: var(--kd2-violet); }
body.kd-social .kd2-page .kd2-cm__text { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; margin: 0; font-size: 15px; line-height: 1.6; color: var(--kd2-text); }

/* the communities inside it */
body.kd-social .kd2-page .kd2-cm__subs { margin-top: 4px; padding-top: 14px; border-top: 1px solid var(--kd2-line); }
body.kd-social .kd2-page .kd2-cm__subs-t { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 8px; font-family: var(--kd2-mono); font-size: 14px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--kd2-text); }
body.kd-social .kd2-page .kd2-cm__subs-t span { min-width: 28px; padding: 2px 8px; border-radius: 999px; background: rgba(var(--kd2-violet-rgb), .1); color: var(--kd2-violet); text-align: center; letter-spacing: 0; }
body.kd-social .kd2-page .kd2-cm__list { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
body.kd-social .kd2-page .kd2-cm__list--l3 { margin: 2px 0 4px 14px; padding-left: 12px; border-left: 2px solid var(--kd2-line5); }
body.kd-social .kd2-page .kd2-cm__sub { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 10px; padding: 8px 10px; border-radius: 12px; font-size: 15px; color: var(--kd2-ink); text-decoration: none; }
body.kd-social .kd2-page .kd2-cm__sub:hover { background: rgba(var(--kd2-violet-rgb), .07); color: var(--kd2-violet); }
body.kd-social .kd2-page .kd2-cm__sub b { font-weight: 600; overflow-wrap: anywhere; }
body.kd-social .kd2-page .kd2-cm__sub span { font-size: 14px; color: var(--kd2-text); }
body.kd-social .kd2-page .kd2-cm__go { align-self: flex-start; margin-top: 6px; min-height: 46px; }

/* nothing below this portal yet */
body.kd-social .kd2-page .kd2-cm__empty { max-width: 620px; margin: 0 auto; padding: 48px 28px; border-radius: 22px; background: var(--kd2-white); border: 1px solid var(--kd2-line); text-align: center; }
body.kd-social .kd2-page .kd2-cm__empty-ic { display: inline-grid; place-items: center; width: 64px; height: 64px; border-radius: 18px; background: rgba(var(--kd2-violet-rgb), .1); color: var(--kd2-violet); }
body.kd-social .kd2-page .kd2-cm__empty-t { margin: 18px 0 8px; font-family: var(--kd2-display); font-size: 28px; font-weight: 700; letter-spacing: -.02em; color: var(--kd2-ink); }
body.kd-social .kd2-page .kd2-cm__empty-p { margin: 0; font-size: 16px; line-height: 1.6; color: var(--kd2-text); }

@media (max-width: 1100px) {
    body.kd-social .kd2-page .kd2-cm__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 699px) {
    body.kd-social .kd2-page .kd2-cm { padding: 40px 0 64px; }
    body.kd-social .kd2-page .kd2-cm__grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
    body.kd-social .kd2-page .kd2-cm__body { padding: 18px; }
}
@media (prefers-reduced-motion: reduce) {
    body.kd-social .kd2-page .kd2-cm__card, body.kd-social .kd2-page .kd2-cm__media img { transition: none; }
    body.kd-social .kd2-page .kd2-cm__card:hover { transform: none; }
}