/*
 * Phase 1 Eleventy addition — not part of the vendored Grav theme CSS.
 *
 * Grav's zoomCrop image reprocessing is deferred for Phase 1 (see
 * claude-plan.md), so migrated thumbnails keep their original source
 * dimensions. Most care-sheet species have a purpose-cropped 710x240 "block"
 * thumbnail (a wide, short banner) already baked in from the original site;
 * a couple of species (ball-python, rainbow-boa) have no such asset and fall
 * back to a full hero/square image instead, which threw off that row's card
 * height. Enforce the same 710:240 ratio + cover-crop on every care-sheet
 * listing thumbnail so rows stay consistent regardless of source image size.
 *
 * Scoped to .wide-thumbs (care-sheet family/species listings only) — the
 * general-care listing's own thumbnails are already natively consistent at a
 * different (taller) ratio and shouldn't be force-cropped to this one.
 */
.wide-thumbs .hovereffect img {
    aspect-ratio: 710 / 240;
    height: auto;
    object-fit: cover;
}

/*
 * jumbotron.njk renders the hero image as a real <img> (not a CSS
 * background-image) so Eleventy's html-relative passthrough copy can detect
 * and co-locate it (see .eleventy.js). The vendored .jumbotron-image rule in
 * site.css already positions this element absolute/inset:0 for the old
 * background-image div; these two properties are its <img>-only equivalent
 * of that div's background-size:cover/background-position:center.
 */
.jumbotron .jumbotron-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}