/* How the four Trade Show Guides section cards show their picture.
 *
 * The page's own rule is `.overview-card img{object-fit:cover}`. `cover` fills the box and throws
 * away whatever does not fit, so an uploaded photo whose shape differs from the card's - which is
 * almost any photo off a phone or a camera - appeared cropped through the middle. That is the
 * "只显示一半" the owner reported, and it is not something a different upload can fix: the crop is
 * decided at display time, not at upload time.
 *
 * `contain` shows the whole picture. It leaves space at the sides or above and below when the
 * shapes differ, so the space is given the card's own panel colour and the image is centred in it;
 * the result reads as a framed picture rather than as a mistake.
 *
 * A separate file, not an edit to the page. trade-show-guides.html keeps its CSS in an inline
 * <style> whose SHA-256 is pinned in the page's Content-Security-Policy - style-src is 'self' plus
 * hashes with no 'unsafe-inline' - so changing one character there drops the entire block and the
 * page loses its whole design system with nothing logged.
 */

.overview-card img {
  object-fit: contain;
  object-position: center;
  background: var(--panel, #11171f);
}

/* The grid column the picture sits in has a min-height for the row; with `contain` the image now
   sizes to the box rather than filling it, so the box needs a shape of its own or a tall image
   would stretch the whole card. 4:3 fits both landscape and portrait uploads without either
   dominating, and matches the height the cards already had at this width. */
@media (min-width: 621px) {
  .overview-card img {
    aspect-ratio: 4 / 3;
    height: 100%;
    max-height: 320px;
  }
}

/* Below the grid breakpoint the card stacks and the page already gives the image 16/9; keeping
   that ratio means the mobile layout does not change height, only what is visible inside it. */
@media (max-width: 620px) {
  .overview-card img {
    aspect-ratio: 16 / 9;
    max-height: none;
  }
}

/* The story cards further down the page crop deliberately - they are thumbnails in a fixed grid
   and are authored at the right shape - so they keep `cover`. Only the four section cards, whose
   picture the owner replaces from Admin, are changed here. */