/* Inner Circle Huniverse — organisms/social-hub.css
   YouTube/Facebook/TikTok hub szekció (l. .ai/md/knowledge_graph/F_social_media_hub_plan.md).
   Videókártya facade-minta a hero-videóval megegyező elven: előnézeti kép + play gomb,
   a tényleges beágyazás csak kattintásra épül be. */
.platform-tabs{display:flex;gap:var(--sp-sm);justify-content:center;margin-bottom:var(--sp-xl);flex-wrap:wrap}
.platform-tab{padding:10px 20px;border-radius:var(--r-full);border:1px solid var(--line);
  background:var(--glass-2);color:var(--muted);font-weight:700;cursor:pointer;font-size:var(--fs-sm)}
.platform-tab.active{background:var(--grad-brand);color:#1a1005;border-color:transparent}

.platform-panel{display:none}
.platform-panel.active{display:block}

/* Facebook sub-tabok: Reels / Videók */
.sub-tabs{display:flex;gap:var(--sp-sm);margin-bottom:var(--sp-lg);flex-wrap:wrap}
.sub-tab{padding:6px 16px;border-radius:var(--r-full);border:1px solid var(--line);
  background:var(--glass-2);color:var(--muted);font-weight:700;cursor:pointer;font-size:var(--fs-sm);
  transition:all .15s}
.sub-tab:hover{color:var(--text)}
.sub-tab.active{background:var(--grad-brand);color:#1a1005;border-color:transparent}
.sub-panel{display:none}
.sub-panel.active{display:block}

/* Valódi platform-csatorna fejléc-minta: avatar + név + kézikötő + feliratkozó/videó-szám sor +
   rövid leírás -- a valódi YouTube/Facebook/TikTok csatorna-fejlécek elrendezését követi, csak a
   creator-studio-only elemek (csatorna testreszabása, videó feltöltés stb.) nélkül, mert azok itt
   irrelevánsak egy publikus site-on. */
.platform-profile{display:flex;align-items:flex-start;gap:var(--sp-lg);margin-bottom:var(--sp-xl)}
.platform-profile img{width:88px;height:88px;border-radius:var(--r-full);border:2px solid var(--primary-2);flex-shrink:0}
/* min-width:0 kell, hogy egy hosszú leírás/URL NE tudja szélesebbre "feszíteni" ezt a blokkot a
   szülő flex-boxnál, ami a logót és a szöveget egy sorba, nem alá törte volna (l. YouTube panel
   korábbi hibája, ahol egy hosszú URL-link miatt a szöveg a logó ALÁ csúszott, nem mellé). */
.platform-profile > div{min-width:0;flex:1}
.platform-profile h3{margin-bottom:2px;font-size:1.4rem}
.platform-profile a.profile-handle{color:var(--primary-2);font-size:var(--fs-sm)}
.platform-stats{color:var(--muted);font-size:var(--fs-sm);margin:6px 0}
.platform-stats strong{color:var(--text)}
.platform-desc{color:var(--muted);font-size:var(--fs-sm);margin-top:6px;overflow-wrap:anywhere}

.playlist-row{margin-bottom:var(--sp-xl)}
.playlist-row-header{display:flex;align-items:baseline;gap:var(--sp-sm);margin-bottom:var(--sp-md)}
.playlist-row-header h4{margin:0}
.playlist-row-header .playlist-count{color:var(--muted);font-size:var(--fs-sm)}
.video-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:var(--sp-md)}

/* Facebook reels rács — fix oszlopméret, hogy minden reel konzisztens legyen */
.reels-grid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:var(--sp-md) var(--sp-sm)}
/* Facebook fekvő videók rács — asztali 3 oszlop, mobil 1 oszlop */
.videos-grid{grid-template-columns:repeat(3,1fr);gap:var(--sp-lg)}
@media(max-width:768px){.videos-grid{grid-template-columns:1fr}}

.video-card{border-radius:var(--r-md);overflow:hidden;cursor:default;background:var(--glass-2);
  border:1px solid var(--line);display:flex;flex-direction:column}
/* Videó előnézeti kép — 16:9 alapból, 9:16 reel-eknél */
.video-thumb{position:relative;aspect-ratio:16/9;overflow:hidden;background:#000;cursor:pointer}
.video-card.reel .video-thumb{aspect-ratio:9/16}
.video-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .3s,opacity .3s}
.video-thumb:hover img{transform:scale(1.05)}
.video-thumb iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.video-card .play-btn{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(180deg,rgba(0,0,0,.1),rgba(0,0,0,.45));pointer-events:none;transition:opacity .3s}
.video-card .play-btn span{width:48px;height:48px;border-radius:var(--r-full);background:var(--grad-brand);
  display:flex;align-items:center;justify-content:center;color:#1a1005;font-size:1.1rem}
/* Loading spinner — az előnézeti kép felett, amíg az iframe betölt */
.video-thumb.loading::after{content:'';position:absolute;inset:0;background:rgba(0,0,0,.4);
  display:flex;align-items:center;justify-content:center}
.video-thumb.loading::before{content:'';position:absolute;top:50%;left:50%;width:36px;height:36px;
  margin:-18px 0 0 -18px;border:3px solid rgba(255,255,255,.3);border-top-color:var(--primary-2);
  border-radius:50%;animation:video-spin .8s linear infinite;z-index:2}
@keyframes video-spin{to{transform:rotate(360deg)}}
/* Cím a kép ALATT, nem rajta — 2 soros line-clamp, kattintható */
.video-card-title{padding:8px 10px;font-size:var(--fs-xs);color:var(--text);
  display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  cursor:pointer;transition:color .12s;min-height:2.8em}
.video-card-title:hover{color:var(--primary-2)}
.video-popup-text{display:none}

/* Playlist-kártyarács -- a valódi YouTube csatorna "Több lejátszási lista" szekciójának mintájára:
   borítókép + videószám-jelvény + cím + "megtekintés" link, kattintásra a valódi YouTube playlist-
   oldalra visz (nincs hamis in-page beágyazás egy egész playlisthez). */
.playlist-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:var(--sp-lg)}
.playlist-card{display:block;color:var(--text)}
.playlist-card-cover{position:relative;aspect-ratio:16/9;border-radius:var(--r-md);overflow:hidden;
  background:#000;border:1px solid var(--line);margin-bottom:var(--sp-sm)}
.playlist-card-cover img{width:100%;height:100%;object-fit:cover;transition:transform .3s}
.playlist-card:hover .playlist-card-cover img{transform:scale(1.05)}
.playlist-card-count{position:absolute;right:6px;bottom:6px;background:rgba(0,0,0,.75);color:#fff;
  font-size:var(--fs-xs);padding:2px 8px;border-radius:var(--r-sm)}
.playlist-card-title{font-weight:700;font-size:var(--fs-sm);margin-bottom:2px;
  display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.playlist-card-meta{color:var(--muted);font-size:var(--fs-xs)}
.playlist-card:hover .playlist-card-title{color:var(--primary-2)}

/* Videó szöveg popup modal — solid háttér, olvasható */
.video-popup-overlay{position:fixed;inset:0;background:rgba(0,0,0,.7);z-index:9999;
  display:none;align-items:center;justify-content:center;padding:var(--sp-lg)}
.video-popup-overlay.active{display:flex}
.video-popup-modal{background:#1a1410;border:1px solid var(--primary-2);border-radius:var(--r-lg);
  max-width:600px;max-height:80vh;overflow-y:auto;position:relative;padding:var(--sp-xl);margin:0 auto;
  box-shadow:0 8px 32px rgba(0,0,0,.5)}
.video-popup-close{position:absolute;top:12px;right:12px;background:none;border:none;color:var(--muted);
  font-size:1.8rem;cursor:pointer;line-height:1;padding:4px 8px;transition:color .12s}
.video-popup-close:hover{color:var(--text)}
.video-popup-content{color:#f5f0e8;font-size:var(--fs-sm);line-height:1.6;white-space:pre-wrap;word-wrap:break-word}
.video-popup-content a{color:var(--primary-2);text-decoration:underline;word-break:break-all}
.video-popup-content a:hover{color:#fff}