/* assets/css/circle.css */
.circle-layout-wrapper { grid-column: 2 / 4; display: flex; flex-direction: column; }
.circle-header-wrapper { background: #fff; border-bottom: 1px solid var(--border-color); }
.circle-banner { width: 100%; height: 160px; object-fit: cover; display: block; background-color: #e5e7eb; }
.circle-header-content { padding: 0 40px; display: flex; justify-content: space-between; align-items: flex-start; }
.circle-info-group { display: flex; align-items: flex-start; gap: 20px; }
.circle-avatar { width: 96px; height: 96px; border: 4px solid #fff; border-radius: 0; /* Square Avatar */ background-color: #1a1a1a; object-fit: cover; margin-top: -48px; }
.circle-title-wrapper { margin-top: 12px; }
.circle-title-wrapper h1 { font-size: 28px; font-weight: 800; text-transform: uppercase; letter-spacing: -1px; margin-bottom: 4px; line-height: 1; color: var(--text-main); }
.circle-meta { font-size: 13px; color: var(--text-muted); font-weight: 500; }
.circle-actions { display: flex; gap: 12px; margin-top: 12px; }
.circle-tabs { padding: 0 40px; margin-top: 24px; display: flex; gap: 24px; }
.circle-content-grid { display: grid; grid-template-columns: 1fr 300px; min-height: calc(100vh - 300px); }
.circle-main-feed { padding: 40px; border-right: 1px solid var(--border-color); background-color: #fff; }
.circle-sidebar { padding: 40px 24px; }

/* --- CIRCLE MOBILE OVERRIDES --- */
@media (max-width: 768px) {
    .circle-layout-wrapper { width: 100% !important; padding: 0 !important; }
    .circle-content-grid { display: flex !important; flex-direction: column !important; }
    
    .circle-banner { height: 120px !important; }
    .circle-header-content { flex-direction: column; align-items: flex-start !important; gap: 16px; padding: 16px !important; }
    .circle-info-group { flex-direction: column; align-items: flex-start !important; }
    .circle-avatar { width: 72px !important; height: 72px !important; margin-top: -40px !important; }
    
    .circle-actions { width: 100%; justify-content: space-between; flex-wrap: wrap; gap: 8px;}
    .circle-actions button { flex: 1; text-align: center; }
    .circle-tabs { overflow-x: auto; white-space: nowrap; }
    
    .circle-sidebar { width: 100% !important; margin-top: 24px; padding: 16px !important; }
}