/* =========================================================================
   Community Hub — dual-pillar landing for Tribes + Forum
   Matches the plugin's flat/Noir system: 1px #eee borders, 12px radius,
   border-color hover transitions, no decorative shadows, #d00 red accent.
   Inherits .pt-forum-wrapper (#f0f2f5 bg) + .pt-container (max 1250px).
   ========================================================================= */

.pt-community-wrapper {
    /* inherits .pt-forum-wrapper background + vertical padding */
}

/* ── Hub intro band ───────────────────────────────────────────────────── */
.pt-community-hero {
    text-align: center;
    max-width: 760px;
    margin: 0 auto 44px;
    padding: 8px 0 0;
}
.pt-community-hero__eyebrow {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #d00;
    margin-bottom: 14px;
}
.pt-community-hero__title {
    margin: 0 0 14px;
    font-size: 2.4rem;
    font-weight: 900;
    line-height: 1.12;
    color: #111;
    letter-spacing: -0.02em;
}
.pt-community-hero__sub {
    margin: 0;
    font-size: 1.02rem;
    line-height: 1.6;
    color: #555;
}
.pt-community-hero__sub strong { color: #111; font-weight: 700; }

/* ── Pillars grid ─────────────────────────────────────────────────────── */
.pt-community-pillars {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 28px;
    align-items: stretch;
    margin-bottom: 60px;
}

.pt-community-pillar {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 12px;
    padding: 30px;
    transition: border-color 0.15s;
}
.pt-community-pillar:hover { border-color: #ccc; }

/* A hairline accent strip at the top differentiates the two engines
   without resorting to shadows or fills. */
.pt-community-pillar--tribes { border-top: 3px solid #d00; }
.pt-community-pillar--forum  { border-top: 3px solid #111; }

/* ── Pillar head ──────────────────────────────────────────────────────── */
.pt-community-pillar__head {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 16px;
}
.pt-community-pillar__icon {
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    background: #f7f8f9;
    border: 1px solid #eee;
    border-radius: 12px;
}
.pt-community-pillar__kicker {
    display: block;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #9ca3af;
    margin-bottom: 3px;
}

/* ── Title bar (title + inline pill on one row) ───────────────────────────
   Keeps the icon, title and live-data pill on the same line. Wraps the pill
   below the title only when the column is too narrow to fit both. */
.pt-community-pillar__titlebar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

/* ── Proof badge (monospaced data pill) ───────────────────────────────────
   Sits beside the title to back the copy with a live number. */
.pt-community-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 5px 12px;
    border-radius: 50px;
    border: 1px solid transparent;
}
.pt-community-pill--tribes { background: #fff7ed; color: #b45309; border-color: #fed7aa; }
.pt-community-pill--forum  { background: #ecfdf5; color: #047857; border-color: #a7f3d0; }

.pt-community-pillar__title {
    margin: 0;
    font-size: 1.45rem;
    font-weight: 800;
    color: #111;
    line-height: 1.15;
    text-transform: uppercase;
    letter-spacing: -0.005em;
}
.pt-community-pillar__subtitle {
    display: block;
    margin-top: 5px;
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.35;
    color: #64748b; /* muted slate (Forum / default) */
}
/* Social pillar leans warm — muted amber subtitle */
.pt-community-pillar--tribes .pt-community-pillar__subtitle { color: #b45309; }

.pt-community-pillar__pitch {
    margin: 0 0 20px;
    font-size: 0.92rem;
    line-height: 1.55;
    color: #555;
}
/* The Tribe pitch is now a stack of <p> elements (multi-paragraph copy). */
.pt-community-pillar__pitch p { margin: 0 0 10px; }
.pt-community-pillar__pitch p:last-child { margin-bottom: 0; }
.pt-community-pillar__pitch a {
    color: #d00;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-thickness: 1px;
}
.pt-community-pillar__pitch a:hover { color: #b00; }

/* Small subtext footnote inside the pitch (e.g. escrow guarantee note). */
.pt-community-pillar__pitch-note {
    margin-top: 10px !important;
    font-size: 0.78rem;
    font-style: italic;
    color: #94a3b8;
}

/* ── Stat strip ───────────────────────────────────────────────────────── */
.pt-community-pillar__stats {
    display: flex;
    gap: 28px;
    padding: 16px 0;
    margin-bottom: 18px;
    border-top: 1px solid #f0f0f0;
    border-bottom: 1px solid #f0f0f0;
}
.pt-community-stat { display: flex; flex-direction: column; }
.pt-community-stat__num {
    font-size: 1.5rem;
    font-weight: 800;
    color: #111;
    line-height: 1;
    letter-spacing: -0.01em;
}
.pt-community-stat__label {
    margin-top: 4px;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #9ca3af;
}

/* ── Live preview list ────────────────────────────────────────────────── */
.pt-community-preview { margin-bottom: 22px; }
.pt-community-preview__label {
    display: block;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #9ca3af;
    margin-bottom: 10px;
}
.pt-community-preview__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
/* Scrollable variant — caps the list to exactly 3 visible rows at a time
   so the pillar stays compact; anything beyond that scrolls in place.
   Row height = avatar 38px + link padding 9px × 2 = 56px, gap 2px. */
.pt-community-preview__list--scroll {
    max-height: calc(56px * 3 + 2px * 2);   /* 3 rows + 2 gaps = 172px */
    overflow-y: auto;
    padding-right: 4px;
    scrollbar-width: thin;
}
.pt-community-preview__item { margin: 0; }
.pt-community-preview__link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 10px;
    border-radius: 8px;
    text-decoration: none;
    transition: background 0.12s;
}
.pt-community-preview__link:hover { background: #f7f8f9; }

.pt-community-preview__avatar {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    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-community-preview__avatar--cat {
    background: #f7f8f9;
    color: #d00;
    font-weight: 800;
    font-size: 1.1rem;
}
.pt-community-preview__text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.pt-community-preview__name {
    font-size: 0.9rem;
    font-weight: 700;
    color: #111;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pt-community-preview__meta {
    font-size: 0.76rem;
    color: #9ca3af;
    line-height: 1.3;
}

/* ── CTA + footnote ───────────────────────────────────────────────────── */
.pt-community-pillar__cta {
    /* .pt-button base is inherited; this pins it to the card bottom and
       makes it full-width. margin-top:auto pushes it down so both
       pillars' CTAs align even when preview lists differ in length. */
    margin-top: auto;
    width: 100%;
    text-align: center;
    box-sizing: border-box;
}
/* Forum pillar CTA is the dark (Noir) variant — .pt-button defaults to
   the theme's black button, so we only need to guarantee it stays dark
   on hover rather than picking up the red treatment. */
.pt-community-pillar__cta--dark,
.pt-community-pillar__cta--dark:hover,
.pt-community-pillar__cta--dark:focus {
    background: #111;
    color: #fff;
    border: 1px solid #111;
}
.pt-community-pillar__cta--dark:hover { background: #333; }

.pt-community-pillar__foot {
    margin: 12px 0 0;
    font-size: 0.78rem;
    line-height: 1.45;
    color: #9ca3af;
    text-align: center;
}

/* ── Responsive ───────────────────────────────────────────────────────── */
@media (max-width: 860px) {
    .pt-community-pillars { grid-template-columns: 1fr; gap: 20px; }
    .pt-community-hero__title { font-size: 1.9rem; }
    .pt-community-pillar { padding: 24px; }
}

/* Mobile: drop the live-data pill BELOW the subtitle in both pillars.
   `display: contents` on the titlebar dissolves its wrapper so the title
   and pill become direct flex children of the text column alongside the
   subtitle, then `order` puts them in: title → subtitle → pill. */
@media (max-width: 768px) {
    .pt-community-pillar__head > div {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }
    .pt-community-pillar__titlebar { display: contents; }
    .pt-community-pillar__title    { order: 1; }
    .pt-community-pillar__subtitle { order: 2; }
    .pt-community-pillar__head .pt-community-pill {
        order: 3;
        margin-top: 10px;
    }
}