/* Village Trimlight - site-wide hero image behaviour.
   Enqueued on every page from functions.php (vtl_hero_assets).

   1. Flush under the header.
      Any page whose FIRST section is a full-width section holding a Full Width
      Image module sits flush under the header. Desktop (981px+): Divi's fixed
      header is 20px taller than the space Divi reserves, so the section needs
      20px of top padding. Below 981px the header is not fixed and Divi reserves
      the right height, so 1px is enough. The child theme's generic 30px section
      padding is what used to leave a gap.

   2. Fixed 2.4:1 frame, on pages flagged with body class vtl-hero-frame.
      Prepare hero images at 2.4:1 (2048x853 or 2400x1000) and what you see in
      the file is what shows. Capped so the page heading stays visible above the
      fold on shorter laptop screens; the crop always comes off the bottom. */

@media (min-width:981px) {
  body #page-container .et_pb_section_0.et_pb_fullwidth_section:has(> .et_pb_fullwidth_image) {
    padding-top:20px !important;
  }
}
@media (max-width:980px) {
  body #page-container .et_pb_section_0.et_pb_fullwidth_section:has(> .et_pb_fullwidth_image) {
    padding-top:1px !important;
  }
}

@media (min-width:981px) {
  body.vtl-hero-frame #page-container .et_pb_section_0.et_pb_fullwidth_section {
    padding-bottom:0 !important;
  }
  body.vtl-hero-frame .et_pb_section_0 .et_pb_fullwidth_image img {
    width:100%; height:auto; aspect-ratio:2.4 / 1; max-height:calc(100vh - 290px);
    object-fit:cover; object-position:50% 0%;
  }
  body.vtl-hero-frame #page-container .et_pb_section_0.et_pb_fullwidth_section + .et_pb_section {
    padding-top:28px !important;
  }
}

/* Mobile side gutter.
   Below 981px the theme lets rows run the full screen width, so headings and
   opening paragraphs touch the screen edge. Restore a gutter on the pages built
   with this system (hero-frame pages and The Villages page). */
@media (max-width:980px) {
  body.vtl-hero-frame #page-container .et_pb_row,
  body.page-id-3501 #page-container .et_pb_row {
    width:90% !important; max-width:90% !important;
  }
}