/* ==========================================================================
   Core Web Vitals - Cumulative Layout Shift (CLS) fix
   Added 2026-11-10. Reserves vertical space for banner sliders that render
   with zero height until their JS (owl-carousel / Revolution Slider) builds
   them, which causes the page below to jump (the measured CLS).

   Strategy mirrors the homepage pattern already in style.css:
       .slider-section:has(#banner-slider){min-height:685px}
   These are min-height floors only: once the slider sets its real height the
   banner fills exactly, so there is no clipping, distortion or over-reserve.
   ========================================================================== */

/* Inner-page owl banner (engineering-plastics, tafe-career, corporate, etc.)
   Reserve the banner height (kills the 0 -> banner CLS jump).
   height = 450/1366 = 32.9% of width, capped 450px on wide screens. */
.innerpage-banner-wrapper.banner-slider-wrapper {
  min-height: min(450px, 33vw);
}
/* NOTE: uniform slide height is handled at the asset level (all banner images
   exported to the same 1366x450 ratio), NOT by CSS cropping. We deliberately
   do NOT force a fixed height + object-fit:cover here, because that would crop
   any image whose ratio differs. The min-height above reserves space without
   ever cutting the image. */

/* Revolution Slider banner (tmtl, contact-tafe, amalgamations-group, etc.)
   Configured startheight 450-600, fullWidth on -> ~40% of width, capped 450px.
   IMPORTANT: the .fullwidthbanner-container class is ALSO reused on static
   single-<img> banners (e.g. news-room/detail.php, which uses a dynamic,
   variable-height banner and does NOT run .revolution()). Reserving height
   on those would create an ugly empty gap. So this is scoped with :has() to
   ONLY the containers that hold a real Revolution slider (.fullwidthbanner).
   All real sliders are >=450px tall, so a 450px floor never over-reserves. */
.fullwidthbanner-container:has(.fullwidthbanner) {
  min-height: min(450px, 40vw);
}

/* ==========================================================================
   Static single-image hero — replaces 1-slide Revolution sliders
   (contact-tafe, amalgamations-group). A plain <img> with width/height
   reserves its own space (zero CLS) and paints without waiting for the
   slider JS (faster LCP). Added 2026-11-10.
   ========================================================================== */
/* The container carries an explicit aspect-ratio (set inline per page to match
   the image), so the exact banner height is reserved immediately — before any
   image or later stylesheet loads. This eliminates the CLS that a width/height
   on the <img> alone did not (global img{width:auto} vs our width:100% raced). */
.static-hero { position: relative; width: 100%; line-height: 0; overflow: hidden; }
.static-hero img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.static-hero-title {
  position: absolute; left: 4.4%; bottom: 12%; margin: 0;
  color: #fff; font-weight: 900; line-height: 1; text-transform: uppercase;
  text-shadow: 2px 2px 8px rgba(0,0,0,.45);
  font-size: clamp(20px, 4.4vw, 60px);
}