/*
 * perf-polish.css — Core Web Vitals safety net.
 *
 * Goal: prevent layout shift (CLS) from images and reserve space for
 * known above-the-fold media even before the full stylesheet swaps in.
 * Loaded async on marketing pages alongside styles.css.
 *
 * Keep this file SMALL (< 1 KB gzipped) and free of layout-affecting
 * properties that the main stylesheet would have to override.
 */

/* 1. Hero slideshow — used on about.html and programs.html.
 *    The main styles.css gives the container `aspect-ratio: 4 / 3`
 *    plus an organic-blob border-radius, but those rules live in the
 *    async-loaded stylesheet. Reserving the aspect here protects the
 *    pre-stylesheet paint from a CLS spike caused by the intrinsic
 *    1400x929 size attrs on the slide <img>.
 */
.hero-slideshow {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}
.hero-slideshow .slide {
  position: absolute;
  inset: 0;
}
.hero-slideshow .slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 2. Brand logo in header — fixed 44x44 (38x38 on small viewports).
 *    The <picture> wrapper has no intrinsic size, so we pin it here
 *    too, otherwise it can briefly collapse before styles.css loads.
 */
.brand picture {
  display: inline-flex;
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
}
@media (max-width: 880px) {
  .brand picture {
    width: 38px;
    height: 38px;
  }
}

/* 3. Responsible-AI hero visual (single <img> in a flex slot) — the
 *    `aspect-ratio: 4 / 3` inline style on the <img> already covers
 *    most browsers; this is just a hard safety net for older ones.
 */
.hero-visual-classic > picture,
.hero-visual-classic > img {
  display: block;
  width: 100%;
  height: auto;
}