/*
 * CLS Fix Stylesheet
 * Prevents Cumulative Layout Shift by reserving space for all
 * images and dynamic blocks before they load.
 */

/* ── 1. Force all images to never cause layout shift ───────────── */
img {
    display: block;
    max-width: 100%;
    height: auto;
}

/* ── 2. Banner: reserve exact aspect ratio so no space jump ─────── */
/* Desktop: 1920x750 → 39.0625% padding-top trick */
.banner-section {
    overflow: hidden;
    position: relative;
}
.banner-section img.desktop {
    width: 100%;
    height: auto;
    aspect-ratio: 1920 / 750;
    display: block;
}
.banner-section img.mob {
    width: 100%;
    height: auto;
    aspect-ratio: 600 / 300;
    display: block;
}

/* ── 3. Logo: fixed dimensions, no reflow ───────────────────────── */
.main-header .header-upper .logo-box .logo img {
    width: 419px;
    height: 105px;
    max-width: 100%;
}

/* ── 4. Mobile nav toggler icon ─────────────────────────────────── */
.nav-outer .mobile-nav-toggler img,
.navbar-right-info .mobile-nav-toggler img {
    width: 38px;
    height: 21px;
}

/* ── 5. Social icons: fixed 24×24 ───────────────────────────────── */
.header-top .social-links img {
    width: 24px;
    height: 24px;
}

/* ── 6. Course / PDF / Book dynamic images ───────────────────────── */
/* Reserve space so the grid doesn't jump when images arrive */
.trap-tour-details .lft-img img {
    aspect-ratio: 1 / 1;
    width: 100%;
    height: auto;
}

.part-bus-package .div1 img {
    aspect-ratio: 4 / 3;
    width: 100%;
    height: auto;
}

/* ── 7. Header height: prevent header shift on font load ─────────── */
.main-header .header-top {
    min-height: 48px;
}
.main-header .header-upper {
    min-height: 90px;
}

/* ── 8. Font fallback metrics to minimise reflow on swap ─────────── */
@font-face {
  font-family: cerebri-regular-fallback;
  src: local('Arial');
  ascent-override: 95%;
  descent-override: 25%;
  line-gap-override: 0%;
  size-adjust: 100%;
}

/* ── 9. Top-banner-bottom: stable height ────────────────────────── */
.top-banner-bottom {
    min-height: 130px;
}

/* ── 10. Section blocks: prevent jump when PHP content loads ─────── */
.trap-tour {
    min-height: 200px;
}