/* 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)}
/* A logo.webp teljes vászna (1024x1019) NEM egyenlő a fő embléma-körrel -- a fő piros/arany
   gyűrű körül apró táncoló figurák vannak elszórva egészen a vászon széléig, jó sok fehér/
   átlátszó térrel közöttük. Egy futásidejű transform:scale()-es "kinagyítás" trükk (korábbi
   próbálkozás) megbízhatatlannak bizonyult -- ezért EGYSZER, build-időben (Docker/PHP GD-vel,
   pixel-pontosan bemért kivágási dobozzal: x=107 y=99 méret=810 az eredeti 1024x1019-ből) egy
   ÖNÁLLÓ, már eleve a tömör fő körre szorosan vágott asset készült (`assets/logo-circle.webp`,
   600x600) -- ez a .platform-profile avatar-oknál a sima logo.webp HELYETT használt kép, sima
   object-fit:cover-rel, transform-trükk nélkül (l. content.php három .platform-profile img
   előfordulása). A `logo.webp` maga változatlan marad a nav/footer/favicon céljaira, ahol a
   teljes (nem kör-vágott) vászon a helyes. Vizuálisan ellenőrizve 2026.07.30-án. */
.platform-profile img{width:88px;height:88px;border-radius:var(--r-full);border:2px solid var(--primary-2);
  flex-shrink:0;object-fit:cover;background:var(--bg-2)}
/* 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)}

/* Follow/Subscribe gomb a csatorna neve MELLETT (2026.08.02., felhasználó kérése). A natív
   platform-widgetek (g-ytsubscribe, fb-page) saját maguk döntik el a magasságukat -- a sor
   flex-wrap-pel véd, ha keskeny nézetben a név+gomb nem férne el egy sorban. */
.platform-name-row{display:flex;align-items:center;gap:var(--sp-md);flex-wrap:wrap;margin-bottom:2px}
.platform-name-row h3{margin-bottom:0}
.follow-btn-yt,.follow-btn-fb{display:inline-block;min-height:20px}
.follow-btn-yt-fallback,.follow-btn-tiktok{display:inline-flex;align-items:center;gap:6px;
  padding:6px 14px;border-radius:var(--r-full);background:var(--grad-brand);color:#1a1005;
  font-weight:700;font-size:var(--fs-xs);text-decoration:none;white-space:nowrap;transition:opacity .15s}
.follow-btn-yt-fallback:hover,.follow-btn-tiktok:hover{opacity:.85}
.follow-btn-icon{font-size:1em}

/* "Eredeti megtekintése" gomb (2026.08.03., korábban külön Like+Comment volt, összevonva mert
   pontosan ugyanoda mutattak) minden videókártya alján, a cím alatt -- a site SAJÁT `.btn`
   rendszerét használja (l. css/atoms/buttons.css .btn/.btn-ghost/.btn-sm/.btn-block). A CC
   (felirat) gomb (l. content.php ich_render_engagement_box(), social-hub.js renderVideoCard())
   ugyanebben a sorban jelenik meg mellette, csak YouTube-videókártyákon -- a "view-original" gomb
   nyúlik (flex:1), a CC gomb fix, tartalom-szélességű marad. */
.video-card-actions{display:flex;gap:6px;margin-top:8px;padding:0 10px 10px}
.video-card-actions .video-view-original{flex:1;margin-top:0}
.video-card-actions .cc-btn{flex-shrink:0;margin-top:0;font-weight:800;letter-spacing:.02em}
.video-view-original{margin-top:8px}

/* 2026.08.06.: mobilon (a 2 oszlopos reels-grid tartományban) az "Eredeti megtekintése" + "CC"
   gomb egymás mellett NEM fért ki -- felhasználó screenshottal jelezte, hogy egyes mobil
   készüléken az egyik gomb egyáltalán nem látszott (kilógott a kártyából). Csak MOBILON (asztali
   nézet változatlan marad): a gombsor egymás ALÁ kerül (flex-direction:column), teljes
   szélességben, kisebb betűmérettel/paddinggel, hogy kompaktabb maradjon. */
@media(max-width:600px){
  .video-card-actions{flex-direction:column}
  .video-card-actions .video-view-original,
  .video-card-actions .cc-btn{width:100%;justify-content:center}
  .video-card-actions .btn{padding:7px 10px;font-size:var(--fs-xs)}
}

.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;white-space:pre-line}
.platform-desc-expandable{cursor:pointer}
.platform-desc-expandable:hover .platform-desc-toggle{text-decoration-color:currentColor}
.platform-desc-toggle{display:inline-block;color:var(--primary-2);font-weight:700;white-space:nowrap;
  text-decoration:underline;text-decoration-color:transparent;transition:text-decoration-color .15s}

.empty-state{color:var(--muted);font-size:var(--fs-sm);text-align:center;padding:var(--sp-xl) 0}

/* Lejátszási lista részletező fejléc -- a borítókép NEM kör alakú avatar, hanem egy normál,
   téglalap alakú playlist-borítókép (a .platform-profile img alap-szabálya a kör alakú
   csatorna-avatarra van hangolva, itt felülírjuk). */
.playlist-detail-header img{width:120px;height:120px;border-radius:var(--r-md);
  transform:none;object-fit:cover}
@media(max-width:640px){.playlist-detail-header img{width:88px;height:88px}}

.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)}

/* Reel/Shorts rács (9:16, YouTube Shorts ÉS Facebook Reels egyaránt ezt az osztályt kapja) --
   2026.08.05.: felhasználó kérése, hogy asztali nézetben NE 5 (az `auto-fill minmax(200px,1fr)`
   ennyit adott ki egy tipikus széles nézeten), hanem 4 oszlopban jelenjenek meg -- a cél, hogy a
   kártya (és vele a képarányt megtartó, 9:16 magasabb videó-előnézet) szélesebb legyen, beférjen
   a "Eredeti megtekintése" + "CC" gomb egymás mellé egy sorban, tördelés nélkül. Explicit oszlop-
   szám (nem auto-fill) lépcsőzetesen: mobil 2, tablet 3, asztali 4. */
.reels-grid{grid-template-columns:repeat(2,1fr);gap:var(--sp-md) var(--sp-sm)}
@media(min-width:560px){.reels-grid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:900px){.reels-grid{grid-template-columns:repeat(4,1fr)}}
/* 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}
/* Saját fullscreen gomb a Shorts (9:16, "reel") kártyákon -- a YouTube beágyazott lejátszó
   Shorts-tartalomnál nem mutatja a saját fullscreen vezérlőjét (l. social-hub.js loadVideo()
   komment), ezért ez pótolja, ugyanoda pozicionálva, ahol a natív gomb lenne. */
.video-fullscreen-btn{position:absolute;right:8px;bottom:8px;z-index:3;width:32px;height:32px;
  border:0;border-radius:var(--r-sm);background:rgba(0,0,0,.55);color:#fff;font-size:1rem;
  line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;
  opacity:1;transition:background .2s,opacity .3s}
.video-fullscreen-btn:hover,.video-fullscreen-btn:focus-visible{background:rgba(0,0,0,.8)}
/* Inaktivitásnál (nincs mozgás/érintés a videón) a gombunk is elrejtőzik, UGYANÚGY, mint a
   YouTube saját natív vezérlői -- felhasználói kérés (2026.07.31.): "a fullscreen gomb meg nem
   tűnik el a vezérlőkkel, ha nincs egérmozgás". A JS (social-hub.js) egy inaktivitás-időzítővel
   teszi rá/veszi le a `.controls-idle` osztályt a `.video-thumb`-ra. */
.video-thumb.controls-idle .video-fullscreen-btn{opacity:0;pointer-events:none}
.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ó. FONTOS (2026.08.05.): `height`
   (NEM `min-height`) kell -- a `-webkit-line-clamp` + `display:-webkit-box` kombináció a dobozt
   TISZTÁN a tényleges tartalomhoz igazítja (shrink-to-fit), a `min-height` NEM kényszerítette ki
   megbízhatóan a 2 soros minimumot: 1 soros címeknél a doboz csak ~1 sornyi magas maradt, míg a
   2 soros címeknél ~2 sornyi -- emiatt egy sorban lévő kártyák "Eredeti megtekintése"/CC gombsora
   nem volt egy vonalban, ha a sor egyik kártyájának hosszabb (2 soros) volt a címe, a többié meg
   rövidebb (1 soros). Felhasználó screenshottal jelezte: "elcsúszik a kártyák alja". Fix `height`
   (nem min-height) MINDIG pontosan 2 sornyira kényszeríti a dobozt, függetlenül a tényleges
   sorszámtól -- ez garantálja, hogy egy grid-sorban minden kártya cím-doboza (és utána a
   gombsora) pontosan egy magasságban legyen. */
.video-card-title{padding:8px 10px;font-size:var(--fs-xs);color:var(--text);line-height:1.4;
  display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  cursor:pointer;transition:color .12s;height:calc(1.4em * 2 + 16px);box-sizing:border-box}
.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 (2026.08.04.: teljes szerkezeti átírás -- felhasználó jelezte, hogy
   "mindig bugos volt": nem volt fix fejléce (a bezáró gomb a tartalommal együtt elgörgetett),
   mögötte görgethető maradt az oldal, a betöltés-jelző alig látszott, és nyíláskor néha az oldal
   többi eleménél szélesebbre nyílt). ÚJ szerkezet: a `.video-popup-modal` egy `flex-direction:
   column` doboz, KÜLÖN, SOSEM görgő `.video-popup-header` sorral (cím + X gomb) és egy KÜLÖN,
   saját `overflow-y:auto`-val rendelkező `.video-popup-body`-val -- a fejléc szerkezetileg nem
   lehet a görgő résszel együtt elgörgetni. `width:min(600px,calc(100vw - 2*var(--sp-lg)))` +
   `box-sizing:border-box` garantálja, hogy a modal SOSEM lehet szélesebb a rendelkezésre álló
   viewport-nál (a korábbi puszta `max-width` mellett hiányzott az explicit `width`, ami hosszú,
   tördelés nélküli tartalom esetén engedte a dobozt a tényleges elérhető szélesség fölé nőni). */
.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);
  width:min(820px,calc(100vw - 2*var(--sp-lg)));max-height:min(80vh,720px);box-sizing:border-box;
  display:flex;flex-direction:column;overflow:hidden;box-shadow:0 8px 32px rgba(0,0,0,.5)}
.video-popup-header{flex:0 0 auto;display:flex;align-items:center;gap:var(--sp-sm);
  padding:var(--sp-md) var(--sp-lg);border-bottom:1px solid var(--line);background:#1a1410}
.video-popup-title{flex:1;min-width:0;margin:0;font-size:var(--fs-base);font-weight:700;
  color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.video-popup-close{flex:0 0 auto;background:none;border:none;color:var(--muted);
  font-size:1.6rem;cursor:pointer;line-height:1;padding:2px 6px;transition:color .12s}
.video-popup-close:hover{color:var(--text)}
.video-popup-body{flex:1 1 auto;overflow-y:auto;padding:var(--sp-lg)}
.video-popup-content{color:#f5f0e8;font-size:var(--fs-sm);line-height:1.6;white-space:pre-wrap;
  overflow-wrap:anywhere;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}
@media(max-width:480px){
  .video-popup-title{font-size:var(--fs-sm)}
  .video-popup-header{padding:var(--sp-sm) var(--sp-md)}
  .video-popup-body{padding:var(--sp-md)}
}

/* Betöltés-animáció (l. social-hub.js popupLoadingHtml()) -- valódi, forgó spinner, nem csak egy
   alig észrevehető szövegváltás, ahogy korábban volt. */
.cc-popup-loading{display:flex;flex-direction:column;align-items:center;gap:var(--sp-md);
  padding:var(--sp-lg) 0}
.cc-popup-spinner{width:36px;height:36px;border:3px solid rgba(255,255,255,.15);
  border-top-color:var(--primary-2);border-radius:50%;animation:cc-popup-spin .8s linear infinite}
@keyframes cc-popup-spin{to{transform:rotate(360deg)}}
.cc-popup-status{color:var(--muted);margin:0;text-align:center}
.cc-popup-text{margin:0}