/* ==========================================================
   performance.css — DDU-GU CDOE Core Web Vitals Optimizations
   Created: 2026-04-10 | Updated: 2026-06-17
   DO NOT REMOVE — Critical for CLS/LCP/INP
   ========================================================== */

/* ----------------------------------------------------------
   CLS PREVENTION: Reserve carousel space matching actual image ratios
   Desktop hero: 800×400 → aspect-ratio 2 / 1
   Mobile hero:  480×480 → aspect-ratio 1 / 1
   ---------------------------------------------------------- */
.carousel-inner {
  aspect-ratio: 800 / 400;
  overflow: hidden;
}
.carousel-item {
  min-height: 350px;
}
@media (max-width: 767px) {
  .carousel-inner {
    aspect-ratio: 480 / 480;
  }
  .carousel-item {
    min-height: 180px;
  }
}

/* ----------------------------------------------------------
   CLS PREVENTION: Program card images (WLP + Online sections)
   Lock to 4:3 ratio so space is reserved before images load
   ---------------------------------------------------------- */
.news-card-items .news-image {
  aspect-ratio: 370 / 240;
  overflow: hidden;
}
.news-card-items .news-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ----------------------------------------------------------
   CLS PREVENTION: Counter / stats section height reservation
   Prevents reflow from 0→12,000 count-up animation
   ---------------------------------------------------------- */
.counter-items .content h2 {
  min-height: 1.5em;
}
.counter-items .content p {
  min-height: 1.2em;
}



/* ----------------------------------------------------------
   CLS PREVENTION: Decorative shape images
   ---------------------------------------------------------- */
.plane-shape img {
  width: 120px;
  height: auto;
  aspect-ratio: 12 / 5;
}
.shape1 {
  width: 100%;
}
.shape1 img {
  max-width: 100%;
  width: 100%;
  height: auto;
  aspect-ratio: 1919 / 843;
}

/* ----------------------------------------------------------
   CLS PREVENTION: Form container minimum height
   Prevents content shift when "Request a Call Back" form loads
   ---------------------------------------------------------- */
.form-ban {
  min-height: 380px;
}

/* ----------------------------------------------------------
   CLS PREVENTION: FAQ Accordion minimum height
   Prevents layout shift during accordion open/close
   ---------------------------------------------------------- */
.accordion-item {
  min-height: 56px;
}

/* ----------------------------------------------------------
   CLS PREVENTION: Breadcrumb wrapper on inner pages
   Reserve height so background-image load doesn't shift content
   ---------------------------------------------------------- */
.breadcrumb-wrapper {
  min-height: 300px;
}
@media (max-width: 767px) {
  .breadcrumb-wrapper {
    min-height: 200px;
  }
}

/* ----------------------------------------------------------
   LAZY IMAGE PLACEHOLDER — shows background while image loads
   ---------------------------------------------------------- */
img[loading="lazy"] {
  background-color: #f0f4f8;
}

/* ----------------------------------------------------------
   LCP: CSS-level safety net — preloader hides after max 3s
   (JS hard cap at 1.5s is the primary method)
   ---------------------------------------------------------- */
.preloader {
  animation: preloader-fadeout 0s 3s forwards;
}
@keyframes preloader-fadeout {
  to {
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
  }
}

/* ----------------------------------------------------------
   INP: will-change only on actively animating elements
   ---------------------------------------------------------- */
.carousel-item.active {
  will-change: transform;
}

/* ----------------------------------------------------------
   PERFORMANCE: contain fixed floating elements to reduce paint area
   ---------------------------------------------------------- */
.float-btn-rght {
  contain: layout style;
}

/* ----------------------------------------------------------
   FONT LOADING STABILITY: prevents browser-synthesized italic/bold
   which can cause subtle layout shift during font swap
   ---------------------------------------------------------- */
body {
  font-synthesis: none;
}

/* ----------------------------------------------------------
   CLS PREVENTION: Google Translate container height reservation
   ---------------------------------------------------------- */
#google_translate_element {
  min-height: 38px;
}