/* ==========================================
   SPEAKER CARD — SAFARI SHAKE FIX
   Reserves vertical space for the speaker image so the card height does
   not change when the image finishes decoding. Without this, each image
   load resizes the grid, which re-fires the column-count ResizeObserver
   in scripts/pages/speakers.js — on Safari that observer's sub-pixel
   readings can flip between two column counts during the settle, causing
   filterByYear() to fully re-render the grid every frame ("violent
   shaking") until images stop loading.
   ========================================== */

/* Portrait aspect ratio matches the documented speaker-card target (~0.8:1).
   Loaded after speaker-card-bem.css in pages/speakers/index.html so this
   wins the cascade against the duplicated bundle rules. */
.speaker-card-bem__image-container {
  aspect-ratio: 4 / 5;
  width: 100%;
  height: auto;
  min-height: 0;
  overflow: hidden;
  position: relative;
}

/* Image must fill the reserved box exactly. object-fit:cover is already
   the default in the bundle; restated here so this file stands alone. */
.speaker-card-bem__image-container > img,
.speaker-card-bem__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Skeleton image-container shares the same aspect ratio so the skeleton
   crossfade lands on identical dimensions and the real grid does not
   shift relative to the skeleton at swap time. */
.speaker-card-bem--skeleton .speaker-card-bem__image-container {
  aspect-ratio: 4 / 5;
  width: 100%;
}