/* =========================================================================
   Cross-pollination sidebar widgets
   • .pt-cp-box--threads → "Related Technical Threads" (inside a Tribe)
   • .pt-cp-box--tribe   → "Active Tribe" (inside a Forum category)
   Container (.pt-sidebar-box) is already styled per-context; this only
   styles the inner elements. Flat/Noir: 1px borders, no shadows, #d00.
   ========================================================================= */

.pt-cp-box { /* inherits .pt-sidebar-box box treatment */ }

.pt-cp-box__title {
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;   /* keep icon + label on one line */
    /* Largest size at which the longest uppercase label
       ("RELATED FORUM POSTS") still fits the 300px sidebar (~236px of text
       room after padding + icon). Both headers share this class, so they
       stay uniform. */
    font-size: 1.1rem;
    min-width: 0;
    /* .pt-sidebar-title defaults to white for dark sidebar boxes; the
       cross-pollination card is light, so force black. !important guards
       against the theme's generic heading-colour rules. */
    color: #111 !important;
}
.pt-cp-box__icon { font-size: 1rem; line-height: 1; }

.pt-cp-box__more {
    display: inline-block;
    margin-top: 12px;
    font-size: 0.8rem;
    font-weight: 700;
    color: #d00;
    text-decoration: none;
}
.pt-cp-box__more:hover { color: #b00; }

/* ── Related threads list ─────────────────────────────────────────────── */
.pt-cp-list {
    list-style: none;
    margin: 12px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}
.pt-cp-list__item {
    margin: 0;
    border-top: 1px solid #f0f0f0;
}
.pt-cp-list__item:first-child { border-top: none; }

.pt-cp-list__link {
    display: block;
    padding: 10px 0;
    text-decoration: none;
}
.pt-cp-list__title {
    display: block;
    font-size: 0.88rem;
    font-weight: 600;
    color: #111;
    line-height: 1.35;
    transition: color 0.12s;
}
.pt-cp-list__link:hover .pt-cp-list__title { color: #d00; }
.pt-cp-list__meta {
    display: block;
    margin-top: 3px;
    font-size: 0.74rem;
    color: #9ca3af;
}

/* ── Shared list text column (threads + tribes) ──────────────────────────
   Both list variants put the title/meta in a flex column next to an
   optional avatar. */
.pt-cp-list__text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* ── Related-tribes list (avatar rows) ───────────────────────────────────
   Used in the forum category sidebar + single-topic sidebar. Each row is
   a small tribe avatar + name + member count. */
.pt-cp-list--tribes .pt-cp-list__link {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 10px 0;
}
.pt-cp-tribe-row__avatar {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background-color: #111;
    background-size: cover;
    background-position: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    color: #fff;
    border: 1px solid #eee;
}

/* ── .pt-swb threads variant (tribe Discussion sidebar) ──────────────────
   The threads widget renders inside the Discussion sidebar's .pt-swb
   pattern (dark head + white body). The list lives in .pt-swb-body, so
   it just needs the "more" link spaced from the list. */
.pt-cp-swb .pt-cp-list { margin-top: 0; }
.pt-cp-swb .pt-cp-box__more { margin-top: 10px; }

/* ── Single forum topic: two-column layout ───────────────────────────────
   The topic header stays full-width; the discussion content + a right
   sidebar (Related Tribes) sit below in a grid. Mirrors the category
   archive's 3fr/1fr split. Stacks on narrow screens. */
.pt-topic-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 36px;
    align-items: start;
}
.pt-topic-main { min-width: 0; }   /* let long content + code blocks shrink */
.pt-topic-sidebar { min-width: 0; }
/* On the single-topic page the sidebar widgets need their own box framing
   (the surrounding layout doesn't supply .pt-sidebar-box here). Two cards
   stack here (Related Discussions + Related Tribes), so no sticky — sticky
   on both would overlap. Space siblings instead. */
.pt-topic-sidebar .pt-cp-box {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 12px;
    padding: 20px;
}
.pt-topic-sidebar .pt-cp-box + .pt-cp-box { margin-top: 20px; }
/* Force left-aligned text inside the topic sidebar cards — the theme's
   sidebar/widget rules can centre headings + links otherwise. */
.pt-topic-sidebar .pt-cp-box,
.pt-topic-sidebar .pt-cp-box * { text-align: left; }
@media (max-width: 900px) {
    .pt-topic-layout { grid-template-columns: 1fr; gap: 24px; }
}