/* ============================================================
   Page hero image — used at the top of L2 section landing pages
   (/fruit, /meat, /vegetables, etc.), the /foods hub, and the
   home page section banners. Drop the image into
   content/media/images/ and reference it from body_html as:

     <figure class="page-hero">
        <img class="page-hero-img" src="/media/images/<file>" alt="...">
     </figure>

   Loaded automatically by lib/CustomAssets.php.
   ============================================================ */
.page-hero {
    margin: 0 auto 1.5rem;
    max-width: 960px;
    padding: 0;
}
.page-hero-img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 360px;
    object-fit: cover;
    border-radius: 0.6rem;
}
@media (max-width: 600px) {
    .page-hero-img { max-height: 220px; border-radius: 0.4rem; }
}

/* Inline mid-page banner — same shape but with margin top/bottom
   so it sits cleanly between two body sections. */
.page-banner {
    margin: 2rem auto;
    max-width: 960px;
}
.page-banner-img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 280px;
    object-fit: cover;
    border-radius: 0.6rem;
}
@media (max-width: 600px) {
    .page-banner-img { max-height: 200px; border-radius: 0.4rem; }
}