/* SEO ROUND 2 -- the listing card's photograph as a real <img>.
   Switch: card_img_live (app/imgcards.py). Linked only by the markup that
   needs it, so a page without a converted card never fetches this file.

   THIS IS THE WHOLE STYLESHEET, AND THAT IS THE POINT.

   The card's photograph box and the element inside it are already fully
   described by two stylesheets the site serves today:

     bundle    article.cpt-kitchen_guide .image      { padding:56.25% 0 0 0;
                                                       position:relative;
                                                       display:block;
                                                       overflow:hidden }
     bundle    article.cpt-kitchen_guide .image .img { position:absolute;
                                                       left:0; top:0;
                                                       width:100%; height:100%;
                                                       display:block;
                                                       overflow:hidden;
                                                       background-size:cover;
                                                       background-position:center center;
                                                       transition:all .3s ease }
     cards-v2  article.card-v2 .image                { aspect-ratio:395/370 }
     cards-v2  article.card-v2 .image .img           { display:block;
                                                       width:100%; height:100% }

   The round keeps `class="img"` on the element it puts in that box -- it is a
   <picture> instead of a <span> -- so the picture inherits every one of those
   declarations: the same absolute fill, the same reserved box, the same
   overflow clip, the same hover transition. Nothing about the geometry is
   re-stated here, because nothing about the geometry changes, and re-stating
   it is how two stylesheets come to disagree.

   WHAT IS LEFT IS THE ONE THING `background-size: cover` DID THAT AN <img>
   DOES NOT DO BY ITSELF. A background crops to fill its box; a replaced
   element letterboxes. `object-fit: cover` with `object-position: center
   center` is the exact equivalent of the two background declarations above,
   so the same part of the same photograph is visible, at the same size, in
   the same box.

   AND THERE IS NO LAYOUT SHIFT TO PREVENT. The box is reserved by the
   PARENT -- `aspect-ratio: 395/370` with the switch on, `padding-top:56.25%`
   underneath it -- and was before this round. The width/height attributes on
   the <img> are there for the browsers and tools that read them, not because
   the box needs them: measured before and after, the box is 303.48 x 284.27
   at 1440 and 350 x 327.84 at 390 in both states. */

.image > picture.img > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  /* A background image has no border and cannot be dragged out of the page.
     Both are stated so the <img> behaves as the span did rather than as the
     browser's default replaced element. */
  border: 0;
  -webkit-user-drag: none;
}