/* Profile Media Tab */

:root {
  --pm-card-bg: #fff;
  --pm-card-border: #e5e7eb;
  --pm-muted: #6b7280;
  --pm-accent: #2563eb;
}

@media (prefers-color-scheme: dark) {
  :root {
    --pm-card-bg: #0f172a;
    --pm-card-border: #1f2937;
    --pm-muted: #9ca3af;
    --pm-accent: #60a5fa;
  }
}

#media .media-toolbar { display:flex; align-items:center; gap:8px; margin-bottom:12px; flex-wrap:wrap; }
#media .media-filter {
  background: transparent; border:1px solid var(--pm-card-border); color: inherit;
  padding: 6px 10px; border-radius: 9999px; cursor: pointer; font-weight: 600;
}
#media .media-filter:hover { background: rgba(37, 99, 235, 0.06); border-color: rgba(37, 99, 235, 0.25); }
#media .media-filter.active { background: var(--pm-accent); color: #fff; border-color: var(--pm-accent); }

#media .media-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(180px,1fr)); gap:12px; }

/* Override generic profile tab flex so Media tab flows normally */
#media.profile-content.active { display:block !important; }
#media .media-toolbar, #media .media-grid, #media #media-loadmore { width:100%; }

/* Neutralize other .media-grid styles used for post content */
#media .media-grid { background: transparent; border: 0; padding: 0; grid-auto-rows: auto; }

/* Ensure grid takes full row as a flex child if any flex rules apply */
#media .media-grid { flex: 1 1 100%; }

.media-card { display:block; background: var(--pm-card-bg); border:1px solid var(--pm-card-border); border-radius:12px; overflow:hidden; text-decoration:none; color: inherit; }
.media-card .thumb { position: relative; width:100%; background: #fafafa; }
.media-card.square .thumb::before { content:""; display:block; padding-top:100%; }
.media-card.wide   .thumb::before { content:""; display:block; padding-top:56.25%; }
.media-card .thumb img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.media-card .badge { position:absolute; top:8px; left:8px; background: rgba(15,23,42,0.8); color:#fff; padding:2px 8px; border-radius:9999px; font-size:12px; }
.media-card .meta { padding:8px 10px; font-size:12px; color: var(--pm-muted); display:flex; align-items:center; gap:8px; }

.media-loadmore { margin:16px auto; display:block; padding:8px 12px; border:1px solid var(--pm-card-border); border-radius:8px; background: transparent; cursor:pointer; }
.media-loadmore:hover { background: rgba(37, 99, 235, 0.06); }

/* Simple lightbox for Media images */
#media-lightbox { position: fixed; inset: 0; display:none; z-index: 1000; }
#media-lightbox.open { display:block; }
#media-lightbox .mlb-backdrop { position:absolute; inset:0; background: rgba(0,0,0,0.6); }
#media-lightbox .mlb-box { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); max-width: 90vw; max-height: 90vh; box-shadow: 0 10px 30px rgba(0,0,0,0.3); }
#media-lightbox .mlb-img { display:block; max-width: 90vw; max-height: 90vh; border-radius: 8px; }
#media-lightbox .mlb-close { position:absolute; top: -32px; right: 0; background: transparent; border: 0; color: #fff; font-size: 24px; cursor: pointer; }