/* ═══════════════════════════════════════════════════════════════════════ 🛡️ PB-COMPAT CSS — purane phone bhi theek dikhein · v297 ─────────────────────────────────────────────────────────────────────── Raj: "sab device mein support hona chahiye with working condition mein" Audit me do badi cheezein mili jo NAYE browser me hain par PURANE me nahi. Purane phone me inke bina screen sach me TOOT jaati thi: 1) `aspect-ratio` (Chrome 88 se, iPhone iOS 15 se) Iske bina har video ka dabba, Watch ke thumbnail, Reels ka chaukhat — sabki OONCHAI 0 ho jaati thi. Matlab video dikhta hi nahi tha. Purana tareeka `padding-top` wala hai, wahi laga diya. 2) flex ka `gap` (iPhone iOS 14.1 se) Iske bina button aur chip ek doosre se chipak jaate the. JS (pb-compat.js) naapta hai; na chale to par `pb-nogap` lagta hai aur neeche wala hissa jagah bana deta hai. 🔴 SABSE ZARURI: ye poori file `@supports not (...)` ke andar hai. Matlab NAYE phone me browser ise padhta hi nahi — jo abhi theek chal raha hai us par is file ka koi asar nahi. Sirf purane phone me chalti hai. Isi liye ise style.css se ALAG rakha hai — purani file ko haath nahi lagaya. ═══════════════════════════════════════════════════════════════════════ */ @supports not (aspect-ratio: 16 / 9) { /* ── 16:9 wale dabbe (video, thumbnail, player) ───────────────────── Andar ka video/iframe pehle se `position:absolute; top:0…left:0` hai, isliye padding se bani jagah ko wo poora bhar dete hain. */ .vid-embed, .mvp, .pbp-slot, .pbp-screen, .yt-thumb, .ytw-vidbox .vid-embed { height: 0 !important; padding-top: 56.25%; } /* jinka apna naap hota hai — unka padding wapas hata do */ .vid-embed.has-cover, .pbp-slot.playing { height: auto !important; padding-top: 0; } .reel-video .vid-embed, .pbp-frame .vid-embed, .pbp-frame .mvp { height: 100% !important; padding-top: 0; } /* cover wali video khud apni oonchai leti hai */ .vid-embed.has-cover video { position: relative; height: auto; } /* ── Live shuru karne wala preview (16:10, phone par 4:5) ── */ .live-setup-prev { height: 0; padding-top: 62.5%; } .live-setup-prev video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } /* ── Reels ka 9:16 chaukhat ── */ .pg-reel-item { height: 0; padding-top: 177.78%; position: relative; } .pg-reel-item > * { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; } /* ── Chaukor (1:1) photo grid ───────────────────────────────────── Yahan hai, uspar padding wala tareeka nahi chalta (photo gayab ho jaati). Teen khaano wali grid hai, isliye screen ki chaudai ka teesra hissa hi oonchai bana dete hain — dekhne me chaukor hi lagta hai. */ .grp-media img, .pg-photo-mini img, .pg-grid-photos img, .ml-grid img, .ml-cell { height: 31vw; max-height: 240px; object-fit: cover; } } /* ── iPhone iOS 14 aur usse purane: flex ka `gap` nahi chalta ────────── Sirf wahan chalta hai jahan pb-compat.js ne `pb-nogap` lagaya ho. Naye phone me ye class kabhi lagti hi nahi. */ .pb-nogap .nav-tabs > *, .pb-nogap .sh-acts > *, .pb-nogap .sh-stat > *, .pb-nogap .sh-langs > *, .pb-nogap .sh-grid > *, .pb-nogap .an-chips > *, .pb-nogap .an-acts > *, .pb-nogap .ko-chips > *, .pb-nogap .sp-chips > *, .pb-nogap .sp-acts > *, .pb-nogap .sp-chk > *, .pb-nogap .sp-opts > *, .pb-nogap .yt-chips > *, .pb-nogap .post-actions > *, .pb-nogap .composer-tools > *, .pb-nogap .chip-row > * { margin: 3px 6px 3px 0; } .pb-nogap .sp-inrow > * { margin-right: 8px; } .pb-nogap .modal-head > * { margin-right: 8px; }