/* ============================================================================
   Woode Comunidade 3.0 — CSS do hub social moderno.
   Hero, cards, polls, posts, comunidades, sidebar e responsividade.
============================================================================ */

/* ── Hero ── */
.community-hero {
    background: linear-gradient(135deg, #0F7A55 0%, #064E3B 100%);
    color: #fff;
    padding: 32px 0 24px;
    margin-bottom: 20px;
}
.community-hero-inner {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}
.community-title {
    font-size: clamp(1.5rem, 4vw, 2.2rem);
    font-weight: 800;
    margin: 0 0 6px;
    color: #fff;
    letter-spacing: -.02em;
}
.community-subtitle {
    font-size: .92rem;
    margin: 0;
    color: rgba(255,255,255,.8);
    max-width: 480px;
}
.community-hero-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.community-hero-actions .btn {
    --btn-fg: #fff;
    --btn-bd: rgba(255,255,255,.3);
}

/* Stats do hero */
.community-stats {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
}
.community-stat {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.community-stat strong {
    font-size: 1.4rem;
    font-weight: 800;
    color: #fff;
}
.community-stat span {
    font-size: .72rem;
    color: rgba(255,255,255,.6);
    text-transform: uppercase;
    letter-spacing: .05em;
}

/* ── Layout ── */
.community-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    align-items: start;
}
@media (min-width: 900px) {
    .community-layout {
        grid-template-columns: minmax(0, 1fr) 280px;
    }
    .community-main { grid-column: 1; }
    .community-aside { grid-column: 2; position: sticky; top: 80px; }
}

/* ── Cards ── */
.community-card {
    background: var(--bg, #fff);
    border: 1px solid var(--line, #e5e7eb);
    border-radius: 14px;
    padding: 18px;
    margin-bottom: 14px;
}
.community-card-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}
.community-card-head h2 {
    font-size: 1rem;
    font-weight: 700;
    margin: 0;
    color: var(--ink-900, #111);
}
.community-more {
    font-size: .8rem;
    color: #0F7A55;
    font-weight: 600;
    text-decoration: none;
}
.community-more:hover { text-decoration: underline; }

.community-badge {
    display: inline-block;
    background: rgba(15,122,85,.1);
    color: #0F7A55;
    font-size: .72rem;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 12px;
    text-transform: uppercase;
    letter-spacing: .03em;
}

/* ── Pergunta do Dia ── */
.community-qotd {
    border-left: 4px solid #0F7A55;
}
.community-qotd-question {
    font-size: 1.15rem;
    font-weight: 700;
    margin: 0 0 12px;
    color: var(--ink-900, #111);
    line-height: 1.4;
}

/* ── Polls ── */
.community-poll-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 9px 14px;
    border: 1px solid var(--line, #e5e7eb);
    border-radius: 8px;
    margin-bottom: 6px;
    font-size: .88rem;
    position: relative;
    overflow: hidden;
    color: var(--ink-700, #374151);
    min-height: 40px;
}
.community-poll-option .community-poll-bar {
    position: absolute;
    inset: 0;
    background: rgba(15,122,85,.08);
    z-index: 0;
    transition: width .3s ease;
}
.community-poll-option > span,
.community-poll-option > strong {
    position: relative;
    z-index: 1;
}
.community-poll-option.mine {
    border-color: #0F7A55;
    background: rgba(15,122,85,.04);
}
.community-poll-option.mine .community-poll-bar {
    background: rgba(15,122,85,.14);
}

.community-radio {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border: 1px solid var(--line, #e5e7eb);
    border-radius: 8px;
    margin-bottom: 6px;
    cursor: pointer;
    font-size: .88rem;
    color: var(--ink-700, #374151);
    transition: border-color .15s, background .15s;
    min-height: 44px;
}
.community-radio:hover {
    border-color: #0F7A55;
    background: rgba(15,122,85,.04);
}
.community-radio input { accent-color: #0F7A55; }

/* ── Posts recentes ── */
.community-posts {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.community-post {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 12px 14px;
    border: 1px solid var(--line, #e5e7eb);
    border-radius: 10px;
    transition: border-color .15s;
}
.community-post:hover { border-color: rgba(15,122,85,.3); }
.community-post-author {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: inherit;
}
.community-post-author strong { color: var(--ink-900, #111); font-size: .88rem; }
.community-post-content {
    margin: 0;
    font-size: .88rem;
    color: var(--ink-700, #374151);
    line-height: 1.5;
}
.community-post-meta {
    display: flex;
    gap: 14px;
    font-size: .75rem;
    color: var(--ink-400, #9ca3af);
}

.community-tag {
    display: inline-block;
    background: rgba(15,122,85,.08);
    color: #0F7A55;
    font-size: .68rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 10px;
}
.community-tag-event {
    background: rgba(245,158,11,.1);
    color: #B45309;
    text-decoration: none;
}

/* ── Grid de comunidades ── */
.community-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 10px;
}
.community-item {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 12px 14px;
    border: 1px solid var(--line, #e5e7eb);
    border-radius: 10px;
    text-decoration: none;
    color: inherit;
    transition: border-color .15s, background .15s;
}
.community-item:hover {
    border-color: #0F7A55;
    background: rgba(15,122,85,.03);
}
.community-item strong {
    font-size: .85rem;
    color: var(--ink-900, #111);
}

/* ── Chips (meus grupos) ── */
.community-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.community-chip {
    display: inline-flex;
    flex-direction: column;
    gap: 1px;
    padding: 8px 14px;
    background: rgba(15,122,85,.05);
    border: 1px solid rgba(15,122,85,.15);
    border-radius: 20px;
    text-decoration: none;
    color: inherit;
    transition: background .15s;
}
.community-chip:hover { background: rgba(15,122,85,.1); }
.community-chip strong { font-size: .82rem; color: #0F7A55; }

/* ── Sidebar ── */
.community-aside-card h2 {
    font-size: .88rem;
    font-weight: 700;
    margin: 0 0 10px;
    color: var(--ink-900, #111);
}

.community-event {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 8px 0;
    border-bottom: 1px solid var(--line, #f3f4f6);
    text-decoration: none;
    color: inherit;
}
.community-event:last-child { border-bottom: none; padding-bottom: 0; }
.community-event img {
    width: 100%;
    height: 72px;
    object-fit: cover;
    border-radius: 8px;
    margin-bottom: 4px;
}
.community-event strong {
    font-size: .82rem;
    color: var(--ink-800, #1f2937);
    line-height: 1.3;
}

.community-producer {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 0;
    text-decoration: none;
    color: inherit;
}
.community-producer strong { font-size: .82rem; display: block; }
.community-producer .muted { font-size: .7rem; }

.community-shortcuts {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.community-shortcuts a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 8px;
    text-decoration: none;
    color: var(--ink-700, #374151);
    font-size: .85rem;
    font-weight: 500;
    transition: background .15s;
}
.community-shortcuts a:hover { background: rgba(15,122,85,.05); color: #0F7A55; }

/* ── Responsividade ── */
@media (max-width: 640px) {
    .community-hero { padding: 24px 0 18px; }
    .community-hero-inner { flex-direction: column; }
    .community-stats { gap: 16px; }
    .community-stat strong { font-size: 1.2rem; }
    .community-card { padding: 14px; border-radius: 12px; }
    .community-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
    .community-qotd-question { font-size: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
    .community-poll-option .community-poll-bar { transition: none; }
    .community-post, .community-item, .community-shortcuts a { transition: none; }
}