/* ---------------------------------------------------------------------------
   Photograph framing, pinned per page.

   Two sets, because a phone shows a banner at the photograph's own 3:2 shape and
   therefore crops it differently from a desktop band: the desktop set positions a
   cropped banner with object-position, while the phone set zooms and nudges a
   photograph that would otherwise fill its frame exactly. Both are baked from the
   positioner's own export.

   Rules for images that are no longer on a page were dropped on the way in.

   Loaded after style.css, so these win over the class rules there.
   --------------------------------------------------------------------------- */

/* ── desktop ─────────────────────────────────────────────────────────────── */
body[data-page="diagnosis"] img[src$="banner-bengal.jpg"]{object-position:50.0% 53.6%}
body[data-page="for-catteries"] img[src$="banner-british-shorthair.jpg"]{object-position:50.0% 81.9%}
body[data-page="for-rescues"] img[src$="banner-tabby.jpg"]{object-position:50.0% 90.0%}
body[data-page="for-vets"] img[src$="banner-vet-clinic.jpg"]{object-position:50.0% 49.9%}
body[data-page="owners"] img[src$="banner-indoor-cat.jpg"]{object-position:50.0% 72.2%}
body[data-page="treatment"] img[src$="banner-maine-coon.jpg"]{object-position:50.0% 92.4%}
body[data-page="what-is-this"] img[src$="banner-oriental-shorthair.jpg"]{object-position:50.0% 23.8%}

/* the three never adjusted in the tool, carried over unchanged */
body[data-page="index"] .hero-banner img{object-position:center 9%}
body[data-page="research"] .pagehead-banner img{object-position:center 7%}
body[data-page="welfare"] .pagehead-banner img{object-position:center 34%}

/* ── phone ───────────────────────────────────────────────────────────────── */
@media (max-width:820px){
  body[data-page="diagnosis"] img[src$="banner-bengal.jpg"]{transform:translate(0.15%, -3.19%) scale(1.064)}
  body[data-page="for-catteries"] img[src$="banner-british-shorthair.jpg"]{transform:translate(-0.83%, -6.18%) scale(1.124)}
  body[data-page="for-rescues"] img[src$="banner-tabby.jpg"]{transform:translate(-2.50%, -6.18%) scale(1.124)}
  body[data-page="owners"] img[src$="banner-indoor-cat.jpg"]{transform:translate(1.01%, -6.18%) scale(1.124)}
  body[data-page="research"] img[src$="banner-devon-rex.jpg"]{transform:translate(1.57%, 6.18%) scale(1.124)}
  body[data-page="treatment"] img[src$="banner-maine-coon.jpg"]{transform:translate(0.81%, -6.18%) scale(1.124)}
}