/*
  patches.css — TEMPORARY fixes to Chris's static CSS. Every block here is debt:
  it should be fixed upstream in mountaire-static and then deleted from this file.
  Loaded last, after assets/css/main.css and integration.css.

  Every block carries a header scripts/static-port-diff.sh reads:
    @patch   <id>
    @watch   <static source file> <token>   (repeatable) — flag this patch when upstream changes it
    @why     what breaks with real content
    @upstream the fix Chris should make; delete this patch once it lands
*/

/* @patch   article-card-image-crop
   @watch   src/assets/css/global/_common.scss article-card__head
   @watch   src/components/cards/article_card.scss __head
   @why     _common.scss sizes article images width:auto/height:100% with no frame ratio; the
            290x217 placeholders hid it, real photos render at their natural shape.
   @upstream give .article-card__head .img-frame aspect-ratio: 290/217 and the img
            width/height 100% + object-fit: cover. */
.article-card__head .img-frame img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 290 / 217;
  object-fit: cover;
}

/* @patch   cares-image-frame
   @watch   src/assets/css/global/_common.scss grid--cares
   @watch   src/assets/css/global/_layout.scss cares
   @why     .grid--cares img is width:auto/height:100% inside a frame with no size of its own, so a
            landscape photo expands the frame under the copy (home "People who care").
   @upstream give .grid--cares .grid__col--image .img-frame max-width 25rem + aspect-ratio 2/3
            and the img width/height 100% + object-fit: cover (>= 48rem). Same pattern likely
            needed for .grid--open-positions, --meals-for-thousands, --good-company. */
@container cares (width >= 48rem) {
  .grid--cares .grid__col--image .img-frame {
    width: 100%;
    max-width: 25rem;
    aspect-ratio: 2 / 3;
  }

  .grid--cares .grid__col--image .img-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}