/* assets/css/explore-groups.css
   Purpose: Event group card styles for explore-one.php
   Created: 2026-04-14 */

/* ── FEATURED EVENTS SECTION ── */
.featured-events-section {
    margin-bottom: 28px;
}
.fe-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 14px;
}
.fe-label {
    font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase;
    color: var(--gold); display: flex; align-items: center; gap: 7px;
}
.fe-label i { font-size: 14px; }
.fe-see-all { font-size: 12px; color: var(--text3); text-decoration: none; transition: color .2s; }
.fe-see-all:hover { color: var(--text); }

/* ── GROUP CARD (used via components/group-card.php) ── */
.group-card {
    background: var(--card);
    border: 1px solid rgba(240,180,41,0.18);
    border-radius: 14px;
    padding: 20px;
    display: flex; flex-direction: column; gap: 14px;
    transition: border-color .2s, transform .2s;
    height: 100%;
}
.group-card:hover { border-color: rgba(240,180,41,0.35); transform: translateY(-2px); }

.gc-top { display: flex; align-items: center; justify-content: space-between; }
.gc-cat { font-size: 12px; font-weight: 700; letter-spacing: .5px; }

.gc-status-badge {
    font-size: 10px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase;
    padding: 3px 10px; border-radius: 100px;
    border: 1px solid var(--border2); color: var(--text3);
}
.gc-status-badge.active   { color: var(--green); border-color: rgba(14,203,129,.3); background: rgba(14,203,129,.07); }
.gc-status-badge.closed   { color: var(--red);   border-color: rgba(246,70,93,.3); }
.gc-status-badge.resolved { color: var(--gold);  border-color: rgba(240,180,41,.3); }

.gc-title {
    font-family: var(--font-display); font-size: 17px; font-weight: 800;
    color: var(--text); line-height: 1.25;
}

/* ── OPTION ROWS ── */
.gc-options { display: flex; flex-direction: column; gap: 8px; }
.gc-opt-row { display: flex; align-items: center; gap: 10px; }
.gc-opt-label { font-size: 12px; color: var(--text2); min-width: 80px; max-width: 100px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gc-opt-bar-wrap { flex: 1; height: 4px; background: rgba(255,255,255,0.07); border-radius: 2px; overflow: hidden; }
.gc-opt-bar { height: 100%; border-radius: 2px; transition: width .5s ease; }
.gc-opt-pct { font-family: var(--font-mono); font-size: 11px; font-weight: 700; min-width: 30px; text-align: right; }

/* ── VIEW LINK ── */
.gc-view-link {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 12px; font-weight: 700; color: var(--gold);
    text-decoration: none; margin-top: auto;
    transition: gap .2s;
}
.gc-view-link:hover { gap: 10px; color: var(--gold2); text-decoration: none; }
.gc-view-link i { font-size: 14px; }

/* ── DIVIDER LABEL ── */
.markets-section-label {
    font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase;
    color: var(--text3); margin: 24px 0 14px; display: flex; align-items: center; gap: 8px;
}
.markets-section-label::after {
    content: ''; flex: 1; height: 1px; background: var(--border);
}