/* ============================================================
   MUNHU — Feed, content cards, watch grid, gallery, follow strip
   ============================================================ */

/* ---------- Filter tabs ---------- */
.filters { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-bottom: var(--sp-6); }
.filter-tab {
  background: rgba(255,255,255,.04); border: 1px solid var(--border); color: var(--text-soft);
  padding: var(--sp-2) var(--sp-4); border-radius: var(--r-pill); font-size: var(--fs-sm); font-weight: 600;
  transition: all var(--dur) var(--ease);
}
.filter-tab:hover { color: var(--text); border-color: var(--accent); }
.filter-tab.active { background: var(--grad-brand); color: #fff; border-color: transparent; }
.filter-tab .cat-count { font-family: var(--font-mono); font-size: var(--fs-xs); opacity: .7; margin-left: 4px; }
#library-embed { margin-top: 0; }
#library-embed .yt-embed { width: 100%; max-width: 100%; aspect-ratio: 16/9; border: 0; border-radius: var(--r-md); }

/* ---------- Horizontal video carousel (just after hero) ---------- */
.carousel { position: relative; }
.carousel-track {
  display: flex; gap: var(--sp-4);
  overflow-x: auto; scroll-snap-type: x mandatory;
  scroll-behavior: smooth; -webkit-overflow-scrolling: touch;
  padding: var(--sp-2) var(--sp-1) var(--sp-5);
  scrollbar-width: thin; scrollbar-color: var(--border) transparent;
}
.carousel-track::-webkit-scrollbar { height: 8px; }
.carousel-track::-webkit-scrollbar-thumb { background: var(--border); border-radius: var(--r-pill); }
.carousel-track::-webkit-scrollbar-track { background: transparent; }

.skel-slide { flex: 0 0 300px; max-width: 300px; height: 240px; }
.yt-slide {
  flex: 0 0 300px; max-width: 300px;
  scroll-snap-align: start;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-md);
  overflow: hidden; text-align: left; padding: 0; color: inherit;
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.yt-slide:hover { transform: translateY(-4px); border-color: var(--youtube); box-shadow: var(--shadow-md); }
.yt-thumb { position: relative; aspect-ratio: 16/9; background: var(--night-800); overflow: hidden; }
.yt-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.yt-slide:hover .yt-thumb img { transform: scale(1.07); }
.yt-thumb .yt-play {
  position: absolute; inset: 0; margin: auto; width: 54px; height: 54px; border-radius: 50%;
  background: rgba(255,0,0,.92); display: grid; place-items: center;
  opacity: .92; transition: transform var(--dur) var(--ease);
}
.yt-slide:hover .yt-thumb .yt-play { transform: scale(1.12); }
.yt-thumb .yt-play::after { content: ""; border-left: 16px solid #fff; border-top: 10px solid transparent; border-bottom: 10px solid transparent; margin-left: 4px; }
.yt-cap { padding: var(--sp-3) var(--sp-4) var(--sp-4); display: flex; flex-direction: column; gap: 4px; }
.yt-cap .yt-title { font-weight: 700; font-size: var(--fs-sm); line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.yt-cap .yt-when { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--text-soft); }

.carousel-arrow {
  position: absolute; top: calc(50% - var(--sp-5)); transform: translateY(-50%); z-index: 5;
  width: 44px; height: 44px; border-radius: 50%;
  background: color-mix(in srgb, var(--bg-elev) 88%, transparent); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border: 1px solid var(--border); color: var(--text); font-size: 1.4rem; line-height: 1;
  display: grid; place-items: center; box-shadow: var(--shadow-sm);
  transition: background var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.carousel-arrow:hover { background: var(--youtube); border-color: transparent; color: #fff; }
.carousel-arrow.prev { left: -8px; } .carousel-arrow.next { right: -8px; }
.carousel-arrow[hidden] { display: none; }

@media (max-width: 600px) {
  .yt-slide { flex-basis: 78vw; max-width: 78vw; }
  .carousel-arrow { display: none; }
}

/* ---------- Masonry-ish content grid ---------- */
.content-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--sp-5);
}

.content-card {
  position: relative;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.content-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); border-color: var(--accent); }

.content-card .media { position: relative; aspect-ratio: 16/10; overflow: hidden; background: var(--night-800); }
.content-card .media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.content-card:hover .media img { transform: scale(1.06); }

.content-card .type-badge {
  position: absolute; top: var(--sp-3); left: var(--sp-3);
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(0,0,0,.65); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  color: #fff; font-size: var(--fs-xs); font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  padding: 4px 10px; border-radius: var(--r-pill);
}
.type-badge.watch  { color: #ff6b6b; }
.type-badge.listen { color: var(--gold); }
.type-badge.read   { color: var(--indigo-bright); }
.type-badge.see    { color: #4fd1c5; }

.content-card .play-overlay {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: radial-gradient(circle, rgba(0,0,0,.25), rgba(0,0,0,.55));
  opacity: 0; transition: opacity var(--dur) var(--ease);
}
.content-card:hover .play-overlay { opacity: 1; }
.play-overlay .play-btn { width: 64px; height: 64px; border-radius: 50%; background: var(--grad-brand); display: grid; place-items: center; box-shadow: var(--shadow-glow); }
.play-overlay .play-btn::after { content: ""; border-left: 18px solid #fff; border-top: 11px solid transparent; border-bottom: 11px solid transparent; margin-left: 4px; }

.content-card .body { padding: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-2); flex: 1; }
.content-card .body h3 { font-size: var(--fs-md); margin: 0; }
.content-card .body p { color: var(--text-soft); font-size: var(--fs-sm); margin: 0; flex: 1; }

.content-card .meta { display: flex; align-items: center; gap: var(--sp-4); margin-top: var(--sp-2); color: var(--text-soft); font-family: var(--font-mono); font-size: var(--fs-xs); }
.content-card .meta .engage { display: inline-flex; align-items: center; gap: 5px; }
.content-card .like-btn { background: none; border: 0; color: var(--text-soft); display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-mono); font-size: var(--fs-xs); transition: color var(--dur) var(--ease), transform var(--dur) var(--ease); }
.content-card .like-btn:hover { color: var(--ember); transform: scale(1.05); }
.content-card .like-btn.liked { color: var(--ember); }
.content-card .like-btn.liked .heart { fill: var(--ember); }
.heart { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; }

.trending-flag { position: absolute; top: var(--sp-3); right: var(--sp-3); background: var(--grad-gold); color:#1a1505; font-size: var(--fs-xs); font-weight: 800; padding: 3px 9px; border-radius: var(--r-pill); }

/* loading skeleton */
.skeleton { background: linear-gradient(100deg, var(--night-700) 30%, var(--night-500) 50%, var(--night-700) 70%); background-size: 200% 100%; animation: shimmer 1.4s infinite; }
@keyframes shimmer { to { background-position: -200% 0; } }
.skel-card { height: 320px; border-radius: var(--r-lg); }

/* empty state */
.empty-state { text-align: center; color: var(--text-soft); padding: var(--sp-8) var(--sp-4); border: 1px dashed var(--border); border-radius: var(--r-lg); }

/* ---------- Gallery masonry ---------- */
.gallery-masonry { columns: 4 240px; column-gap: var(--sp-4); }
.gallery-masonry figure { break-inside: avoid; margin: 0 0 var(--sp-4); border-radius: var(--r-md); overflow: hidden; cursor: zoom-in; position: relative; }
.gallery-masonry img { width: 100%; transition: transform .5s var(--ease), filter .5s var(--ease); }
.gallery-masonry figure:hover img { transform: scale(1.05); filter: brightness(1.08); }

/* ---------- Human rights advocacy grid ---------- */
.rights-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: var(--sp-3);
}
.right-card {
  position: relative; aspect-ratio: 1 / 1; overflow: hidden;
  border-radius: var(--r-md); border: 1px solid var(--border);
  background: var(--night-700); padding: 0; cursor: zoom-in;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.right-card:hover { transform: translateY(-4px); border-color: var(--accent); box-shadow: var(--shadow-md); z-index: 2; }
.right-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.right-card .right-num {
  position: absolute; top: 8px; left: 8px;
  font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 700;
  background: var(--grad-brand); color: #fff; border-radius: var(--r-pill);
  padding: 2px 9px; box-shadow: var(--shadow-sm); pointer-events: none;
}
.rights-foot { margin-top: var(--sp-5); display: flex; gap: var(--sp-3); align-items: center; flex-wrap: wrap; color: var(--text-soft); font-size: var(--fs-sm); }
.rights-foot .src { font-family: var(--font-mono); font-size: var(--fs-xs); }

@media (max-width: 480px) { .rights-grid { grid-template-columns: repeat(2, 1fr); gap: var(--sp-2); } }

/* ---------- Follow-everywhere strip ---------- */
.follow-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--sp-3); }
.follow-chip {
  display: flex; align-items: center; gap: var(--sp-3);
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-md);
  padding: var(--sp-3) var(--sp-4); transition: all var(--dur) var(--ease);
}
.follow-chip:hover { border-color: var(--chip-color, var(--accent)); transform: translateY(-3px); }
.follow-chip svg { width: 24px; height: 24px; flex-shrink: 0; fill: var(--chip-color, var(--text)); }
.follow-chip .fc-meta { display: flex; flex-direction: column; line-height: 1.2; }
.follow-chip .fc-count { font-family: var(--font-mono); font-weight: 800; font-size: var(--fs-md); }
.follow-chip .fc-name { font-size: var(--fs-xs); color: var(--text-soft); }

/* ---------- Contact: DM any inbox ---------- */
.contact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--sp-3); }
.contact-card {
  display: flex; align-items: center; gap: var(--sp-3);
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-md);
  padding: var(--sp-3) var(--sp-4); transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.contact-card:hover { border-color: var(--chip-color, var(--accent)); transform: translateY(-3px); box-shadow: var(--shadow-md); }
.contact-card svg { width: 26px; height: 26px; flex-shrink: 0; fill: var(--chip-color, var(--text)); }
.contact-card .cc-body { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; flex: 1; }
.contact-card .cc-title { font-weight: 700; font-size: var(--fs-sm); }
.contact-card .cc-handle { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--text-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.contact-card .cc-go { font-size: var(--fs-xs); font-weight: 700; color: var(--chip-color, var(--accent)); white-space: nowrap; }

.contact-coffee {
  margin-top: var(--sp-5); display: flex; align-items: center; gap: var(--sp-5); flex-wrap: wrap; justify-content: space-between;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--sp-5) var(--sp-6);
}
.contact-coffee .cf-text { flex: 1; min-width: 240px; }
.contact-coffee h3 { font-size: var(--fs-lg); margin: 0 0 var(--sp-2); }
.contact-coffee p { color: var(--text-soft); font-size: var(--fs-sm); max-width: 60ch; margin: 0; }

/* ---------- Lightbox (video + image) ---------- */
.lightbox { position: fixed; inset: 0; z-index: 300; background: rgba(0,0,0,.92); display: none; place-items: center; padding: var(--sp-5); }
.lightbox.open { display: grid; }
.lightbox-inner { width: min(1100px, 100%); }
.lightbox .frame { position: relative; width: 100%; aspect-ratio: 16/9; border-radius: var(--r-md); overflow: hidden; background: #000; }
.lightbox .frame iframe { width: 100%; height: 100%; border: 0; }
.lightbox img.lb-image { width: auto; max-width: 100%; max-height: 86vh; margin: 0 auto; border-radius: var(--r-md); aspect-ratio: auto; }
.lightbox-close { position: fixed; top: var(--sp-4); right: var(--sp-4); width: 44px; height: 44px; border-radius: 50%; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); color:#fff; font-size: 1.4rem; display:grid; place-items:center; }
.lightbox-nav { position: fixed; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; border-radius: 50%; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); color:#fff; font-size: 1.5rem; display:grid; place-items:center; }
.lightbox-nav.prev { left: var(--sp-4); } .lightbox-nav.next { right: var(--sp-4); }
.lightbox-cap { color: var(--paper); text-align: center; margin-top: var(--sp-3); font-size: var(--fs-sm); }
.lb-actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); justify-content: center; margin-top: var(--sp-3); }
.lb-btn { display: inline-flex; align-items: center; gap: .35em; padding: .55em 1em; border-radius: 999px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.22); color: #fff; font-size: var(--fs-sm); font-weight: 600; cursor: pointer; text-decoration: none; transition: background .15s ease; }
.lb-btn:hover { background: rgba(255,255,255,.2); }

@media (max-width: 600px) {
  .gallery-masonry { columns: 2 140px; }
  .lightbox-nav { width: 40px; height: 40px; }
}