/* /css/group.css */

/* ===== Group header ===== */
.g-group-header { border-radius: 16px; overflow: hidden; margin-bottom: 16px; }
.g-cover { background: #f1f3f5; height: 260px; display:flex; align-items:center; justify-content:center; }
.g-cover img { width:100%; height:100%; object-fit: contain; background:#0b1220; }
.g-cover-ph { width:100%; height:100%; background: radial-gradient(1200px 400px at 20% 20%, rgba(77,141,255,.35), transparent 60%),
                               radial-gradient(900px 350px at 80% 10%, rgba(255,99,132,.25), transparent 60%),
                               linear-gradient(135deg, #0b1220, #121a2b); }

.g-head-card { position: relative; background:#fff; padding: 16px 16px 16px 16px; display:flex; gap:16px; align-items:flex-start; }
.g-avatar-wrap { position: relative; margin-top: -64px; flex: 0 0 auto; }
.g-avatar { width: 128px; height: 128px; border-radius: 14px; border: 4px solid #fff; background:#e9ecef; object-fit: cover; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:38px; color:#495057; }

.g-head-main { flex: 1 1 auto; min-width: 0; }
.g-head-title { font-size: 22px; font-weight: 800; line-height: 1.15; }
.g-head-meta { color:#6c757d; margin-top: 4px; font-size: 13px; }
.g-head-about { margin-top: 10px; color:#212529; font-size: 14px; }
.g-head-actions { flex: 0 0 auto; display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; }

/* ===== Posts ===== */
.g-post-userava { width: 40px; height: 40px; border-radius: 12px; object-fit: cover; background:#e9ecef; display:flex; align-items:center; justify-content:center; font-weight:700; }
.g-post-att { display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:8px; margin-top:10px; }
@media (max-width: 768px) { .g-post-att { grid-template-columns: repeat(2, minmax(0,1fr)); } }
.g-att-img { display:block; border-radius: 12px; overflow:hidden; background:#f1f3f5; }
.g-att-img img { width:100%; height: 140px; object-fit: cover; display:block; }
.g-att-video { width:100%; border-radius: 12px; background:#000; }

/* ===== Lists ===== */
.g-group-list { display:flex; flex-direction:column; gap:10px; }
.g-group-row { display:flex; gap:12px; padding:10px; border-radius: 12px; text-decoration:none; border:1px solid rgba(0,0,0,.06); }
.g-group-row:hover { background: rgba(0,0,0,.02); }
.g-row-avatar { width:48px; height:48px; border-radius: 14px; overflow:hidden; background:#e9ecef; display:flex; align-items:center; justify-content:center; flex:0 0 auto; }
.g-row-avatar img { width:100%; height:100%; object-fit: cover; }
.g-avatar-ph { width:100%; height:100%; display:flex; align-items:center; justify-content:center; font-weight:800; color:#495057; }
.g-row-title { font-weight: 700; color:#111; }
.g-row-meta { color:#6c757d; font-size: 13px; }

.g-group-grid { display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:10px; }
@media (max-width: 768px) { .g-group-grid { grid-template-columns: 1fr; } }
.g-group-tile { display:flex; gap:10px; padding:10px; border-radius: 12px; border:1px solid rgba(0,0,0,.06); text-decoration:none; }
.g-group-tile:hover { background: rgba(0,0,0,.02); }
.g-tile-avatar { width:44px; height:44px; border-radius: 14px; overflow:hidden; background:#e9ecef; display:flex; align-items:center; justify-content:center; flex:0 0 auto; }
.g-tile-avatar img { width:100%; height:100%; object-fit: cover; }
.g-tile-name { font-weight: 700; color:#111; }
.g-tile-meta { color:#6c757d; font-size: 12px; }

/* ===== Side block ===== */
.g-side-list { display:flex; flex-direction:column; gap:8px; }
.g-side-row { display:flex; gap:10px; align-items:center; text-decoration:none; padding:6px 0; }
.g-side-ava { width:36px; height:36px; border-radius: 12px; overflow:hidden; background:#e9ecef; display:flex; align-items:center; justify-content:center; flex:0 0 auto; }
.g-side-ava img { width:100%; height:100%; object-fit: cover; }
.g-side-name { font-weight: 700; color:#111; font-size: 13px; line-height: 1.2; }
.g-side-meta { color:#6c757d; font-size: 12px; line-height: 1.2; }