/*!
 * NYN — CLS (Cumulative Layout Shift) Fix v1.0
 * =====================================================================
 * Reserves space for images, ad slots, and lazy-loaded content so the
 * page does NOT jump while the user is reading.
 *
 * Google Search Console flagged 490 mobile URLs with CLS > 0.25.
 * Target: bring every URL below CLS 0.1.
 *
 * Loaded LAST so it overrides any earlier rule that caused the shift.
 * =====================================================================
 */

/* ─── 1. Universal image dimensions — no more invisible collapse ───── */
img{max-width:100%;height:auto;background:#1a2236 no-repeat center/cover}

/* Browser hint: reserve an area for below-the-fold content until it's
   scrolled into view. Eager (above-fold) images stay visible. */
img[loading="lazy"]{content-visibility:auto;contain-intrinsic-size:1px 420px}
img[loading="eager"]{content-visibility:visible}

/* Kill the slow fade-in that caused the "jump" pattern on mobile */
img[loading="lazy"]{opacity:1 !important;transition:none !important}

/* ─── 2. Hero slider — fixed aspect ratio so it never resizes ──────── */
.hero-grid{min-height:220px}
.hero-main{aspect-ratio:4/3;min-height:300px;background:#0a0e1a}
@media (min-width:640px){.hero-main{aspect-ratio:16/11}}
@media (min-width:900px){.hero-main{aspect-ratio:16/10}}
.hero-slide{position:absolute;inset:0}
.hero-slide img{width:100%;height:100%;object-fit:cover;display:block}

/* ─── 3. Article featured image — fixed ratio up to a max height ───── */
.art-hero,.art-hero-img,.article-featured,.article-hero{
    aspect-ratio:16/9;max-height:520px;width:100%;
    background:#1a2236;overflow:hidden;display:block
}
.art-hero img,.art-hero-img img,.article-featured img,.article-hero img,
.art-body > img:first-of-type{
    width:100%;height:100%;object-fit:cover;display:block
}

/* Inline article body images — keep them predictable */
.art-content img,.article-body img,.post-content img{
    aspect-ratio:16/9;max-height:520px;width:100%;height:auto;
    object-fit:cover;background:#1a2236;
    margin:18px auto;display:block;border-radius:10px
}

/* ─── 4. Card thumbnails (news / main / sidebar / category) ────────── */
.nc-i,.mc-i,.sbi-i,.sc-i,.wc-i,.cc-i,.cat-i,.tr-i,.trend-item-img{
    position:relative;overflow:hidden;background:#1a2236;display:block
}
.nc-i{min-height:120px;aspect-ratio:3/2}
.mc-i{min-height:125px;aspect-ratio:16/10}
.sbi-i{min-height:55px;aspect-ratio:4/3}
.sc-i{min-height:90px;aspect-ratio:16/9}
.cat-i,.cc-i{min-height:180px;aspect-ratio:16/10}
.tr-i,.trend-item-img{min-height:70px;aspect-ratio:1/1}

.nc-i img,.mc-i img,.sbi-i img,.sc-i img,.wc-i img,
.cc-i img,.cat-i img,.tr-i img,.trend-item-img img{
    width:100%;height:100%;object-fit:cover;display:block
}

/* ─── 5. Ad slots — reserve space so the ad never pushes content ──── */
.ad-slot,.ad-container,.ad-wrap,.ad-inline,
.ad-between,.ad-in-article,.ad-below-article,.ad-top,.ad-sidebar,
[class*="adsbygoogle"]{
    display:block;width:100%;overflow:hidden;
    background:transparent;text-align:center
}
/* Sizes match common AdSense slot dimensions */
.ad-slot.leaderboard,.ad-top{min-height:90px}
.ad-slot.mrec,.ad-between,.ad-in-article{min-height:280px;margin:18px auto}
.ad-slot.mobile,.ad-below-article{min-height:120px}
.ad-slot.sidebar,.ad-sidebar{min-height:600px}
.adsbygoogle{min-height:120px;display:block}
@media (max-width:640px){
    .ad-slot.leaderboard,.ad-top{min-height:100px}
    .ad-slot.sidebar,.ad-sidebar{min-height:250px}
}

/* ─── 6. Logos and icons — fixed dimensions (header/footer) ────────── */
.site-logo,.logo-link img,.header-logo,.footer-logo{
    display:inline-block;vertical-align:middle
}
.logo-link img{max-height:104px;width:auto}
.mini-logo,.site-header-mini img{max-height:34px;width:auto}

/* ─── 7. Web font FOUT/FOIT — prevent layout shift when Cairo loads ── */
@font-face{font-display:swap}
html{font-size:16px}

/* ─── 8. Breaking bar / ticker — fixed height ─────────────────────── */
.breaking-bar,.ticker,.topbar{min-height:44px}

/* ─── 9. Video / iframe embeds ────────────────────────────────────── */
iframe,video{max-width:100%;aspect-ratio:16/9;background:#000;display:block}
iframe[src*="youtube"],iframe[src*="vimeo"]{width:100%}

/* ─── 10. Push-notification bell / install-app banner ─────────────── */
.push-bell,.install-banner,.pwa-banner{min-height:48px}

/* ─── 11. Newsletter / subscribe widgets ──────────────────────────── */
.newsletter-widget,.newsletter-box,.subscribe-form{min-height:120px}

/* ─── 12. Reduce motion for users who ask for it ──────────────────── */
@media (prefers-reduced-motion:reduce){
    *,*::before,*::after{
        animation-duration:0.01ms !important;
        animation-iteration-count:1 !important;
        transition-duration:0.01ms !important
    }
}