/* Homepage hero — tablet only (768px to 1024px).
 *
 * The hero is a flex row that did not adapt at tablet: the navy text panel stayed
 * 202px wide and 922px tall, which forced the 1760x683 panoramic photograph to fill
 * a 768x922 portrait frame. Cover-sizing then enlarged it to 2376px wide - a 1.35x
 * upscale past its native size, with 68% of the frame discarded.
 *
 * Here the hero stacks: the photograph becomes a full-width band above the panel.
 * At 768 the band is 768x392, so the image is drawn at 1010x392 - no upscaling, and
 * only about a quarter cropped.
 *
 * The band takes its picture from the hero's own background with `inherit`, so if the
 * hero image is changed in Elementor this follows it automatically. That also means
 * the hero container must keep its background-image declaration - do not set it to
 * none here, or the band inherits nothing.
 *
 * Desktop (>1024px) and mobile (<768px) are deliberately untouched.
 */
@media (min-width: 768px) and (max-width: 1024px) {

  .elementor-element-658816e {
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    min-height: 0 !important;
    height: auto !important;
    align-items: stretch !important;
    gap: 0 !important;        /* a row gap here would show a strip of the hero
                                 background between the band and the panel */
  }

  /* the photograph, as a band above the text */
  .elementor-element-658816e > .elementor-element-c703d36 {
    order: -1;
    width: 100% !important;
    max-width: none !important;
    flex: 0 0 auto !important;
    height: 392px !important;
    min-height: 392px !important;
    background-image: inherit;
    background-size: cover;
    background-position: 50% 48%;
    background-repeat: no-repeat;
  }

  /* the navy panel, now full width beneath it */
  .elementor-element-658816e > .elementor-element-0c03ce4 {
    width: 100% !important;
    max-width: none !important;
    flex: 0 0 auto !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 40px 44px 46px !important;
  }

  /* The eyebrow carries a hard-coded 300px top padding, which positioned the text
     down the old 922px-tall column. Stacked, that is simply dead space. */
  .elementor-element-658816e > .elementor-element-0c03ce4 > .elementor-element-43ca5ca {
    padding-top: 0 !important;
  }

  /* The three text blocks keep a 442px cap and 30px side padding from the desktop
     panel, which left them centred and indented once the panel went full width.
     Align them to the panel's own padding instead. */
  .elementor-element-658816e > .elementor-element-0c03ce4 > .elementor-element-43ca5ca,
  .elementor-element-658816e > .elementor-element-0c03ce4 > .elementor-element-e383862,
  .elementor-element-658816e > .elementor-element-0c03ce4 > .elementor-element-d45936b {
    width: 100% !important;
    max-width: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* the rule between eyebrow and heading is centre-aligned by the widget; the
     stacked panel reads left-aligned, so line it up with the text */
  .elementor-element-658816e .elementor-element-e383862 .elementor-divider {
    text-align: left !important;
    justify-content: flex-start !important;
  }
}

/* A little less height on the shorter tablet-landscape viewport. */
@media (min-width: 900px) and (max-width: 1024px) {
  .elementor-element-658816e > .elementor-element-c703d36 {
    height: 420px !important;
    min-height: 420px !important;
  }
}