/* ============================================================
   PERFORMANCE — Cumulative Layout Shift (CLS) fixes
   Loaded on every page. Pure space-reservation; no visual change
   to the finished layout.
   ============================================================ */

/* 1. JARALLAX HERO / SUBHEADER IMAGES  ── the biggest CLS source.
   Before the jarallax script runs, the raw <img class="jarallax-img">
   renders IN FLOW at its full natural height, then the script yanks it
   out of flow — jerking all the hero content upward.
   Positioning it absolutely up-front removes that in-flow phase.

   This selector matches ONLY the pre-init image: jarallax re-parents
   the <img> into its own container on init, so `.jarallax > .jarallax-img`
   stops matching afterwards — the finished parallax is untouched.
   z-index:-2 keeps the image behind the .section-darken overlay (z-index:-1)
   and all page content (z-index:1000), so darkening/readability is preserved. */
.jarallax > .jarallax-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -2;
}

/* 2. RESERVE SPACE FOR JS-INJECTED CONTENT
   These containers are empty on load and filled by JavaScript (rankings
   table, blog cards, reworked-skills cards). Reserving a min-height stops
   the sections/footer below from lurching down when the content appears. */
#hrTable   { min-height: 460px; }   /* home rankings table (fetched) */
#blogGrid  { min-height: 420px; }   /* blog listing cards (fetched)   */
#rsInfoRow { min-height: 200px; }   /* reworked-skills info cards      */

/* 3. LANGUAGE SWITCHER LABEL
   The current-language label is empty in the HTML and filled by JS after
   load; reserving width keeps it from nudging the header nav. */
#lang-menu > .lang-current {
    display: inline-flex;
    align-items: center;
    min-width: 92px;
}

@media (max-width: 991px) {
    #hrTable  { min-height: 380px; }
    #blogGrid { min-height: 320px; }
}