/**
 * Page banners ([ux_banner class="gdaas30|40|50|60"])
 *
 * Desktop/tablet: the photo fills the banner and a Navy gradient runs from the left.
 * How far the gradient reaches is chosen per banner in UX Builder with its class
 * (as before): gdaas30 shortest -> gdaas60 longest. Each class sets three stops:
 *   --g-solid  solid Navy up to here (always past the dark block baked into the
 *              912x400 banner images, which ends at about 33% of the banner)
 *   --g-mid    70% Navy here
 *   --g-end    fully transparent from here
 */
@media (min-width: 550px) {
  :is(.gdaas30, .gdaas40, .gdaas50, .gdaas60).banner {
    --g-solid: 38%;
    --g-mid: 58%;
    --g-end: 76%;
  }

  .gdaas40.banner { --g-solid: 40%; --g-mid: 62%; --g-end: 80%; }
  .gdaas50.banner { --g-solid: 42%; --g-mid: 66%; --g-end: 84%; }
  .gdaas60.banner { --g-solid: 44%; --g-mid: 70%; --g-end: 88%; }

  :is(.gdaas30, .gdaas40, .gdaas50, .gdaas60) .banner-layers.container {
    top: 0;
    height: 100%;
    background: linear-gradient(
      to right,
      #003150 0,
      #003150 var(--g-solid),
      rgba(0, 49, 80, 0.7) var(--g-mid),
      rgba(0, 49, 80, 0) var(--g-end)
    );
  }

  /* Text block: as wide as its text (up to a limit), vertically centred */
  :is(.gdaas30, .gdaas40, .gdaas50, .gdaas60) .text-box {
    width: auto !important;
    max-width: min(34%, 480px);
    top: 50% !important;
    bottom: auto !important;
    transform: translateY(-50%) !important;
  }
}

/* Tablet: give long titles a bit more room */
@media (min-width: 550px) and (max-width: 1099px) {
  :is(.gdaas30, .gdaas40, .gdaas50, .gdaas60) .text-box {
    max-width: 50%;
  }
}

/* Mobile: photo on top, text on a navy block below (no overlay on the photo) */
@media (max-width: 549px) {
  :is(.gdaas30, .gdaas40, .gdaas50, .gdaas60).banner {
    padding-top: 0 !important;
    height: auto !important;
    background-color: #003150;
  }

  :is(.gdaas30, .gdaas40, .gdaas50, .gdaas60) .banner-inner {
    position: relative;
  }

  :is(.gdaas30, .gdaas40, .gdaas50, .gdaas60) .banner-bg {
    position: relative;
    /* 610px of photo per 400px of height: >= 66vw keeps the baked navy block out of view */
    height: max(220px, 66vw);
  }

  /* Baked-in navy block sits on the left, so anchor the crop to the right */
  :is(.gdaas30, .gdaas40, .gdaas50, .gdaas60) .banner-bg img.bg {
    object-position: right center !important;
  }

  :is(.gdaas30, .gdaas40, .gdaas50, .gdaas60) .banner-layers.container {
    position: relative;
    height: auto;
    padding: 24px 20px 28px;
    background: linear-gradient(to bottom, #003a5e 0%, #003150 60%, #00263f 100%);
  }

  /* Flatsome forces .banner-layers > * to position:absolute !important */
  :is(.gdaas30, .gdaas40, .gdaas50, .gdaas60) .text-box {
    position: static !important;
    width: 100% !important;
    max-width: none;
    max-height: none;
    margin: 0;
    transform: none !important;
  }
}

/* Clip the gradient layer to the banner */
:is(.gdaas30, .gdaas40, .gdaas50, .gdaas60).banner {
  overflow: hidden;
}

/* ---------- Buttons inside page banners ---------- */
/* A navy "primary" button disappears on the navy background: use a white pill instead.
   Flatsome .expand forces width/max-width/padding with !important. */
:is(.gdaas30, .gdaas40, .gdaas50, .gdaas60) .text-box .button {
  display: inline-flex !important;
  align-items: center;
  gap: 12px;
  width: auto !important;
  max-width: 100% !important;
  min-height: 0;
  margin: 20px 0 0;
  padding: 10px 10px 10px 22px !important;
  color: #003150 !important;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0;
  text-align: left;
  text-transform: none;
  background: #fff !important;
  border: 0 !important;
  border-radius: 999px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.28);
  transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

:is(.gdaas30, .gdaas40, .gdaas50, .gdaas60) .text-box .button > i {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin: 0 !important;
  color: #fff;
  font-size: 16px;
  background: #003150;
  border-radius: 50%;
  transition: background-color 0.2s ease, transform 0.2s ease;
}

/* Buttons without an icon get symmetric padding */
:is(.gdaas30, .gdaas40, .gdaas50, .gdaas60) .text-box .button:not(:has(> i)) {
  padding: 12px 24px !important;
}

:is(.gdaas30, .gdaas40, .gdaas50, .gdaas60) .text-box .button:hover,
:is(.gdaas30, .gdaas40, .gdaas50, .gdaas60) .text-box .button:focus-visible {
  background: #e6f8ff !important;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.32);
  transform: translateY(-2px);
}

:is(.gdaas30, .gdaas40, .gdaas50, .gdaas60) .text-box .button:hover > i,
:is(.gdaas30, .gdaas40, .gdaas50, .gdaas60) .text-box .button:focus-visible > i {
  background: #19b2d6;
  transform: translateX(3px);
}

:is(.gdaas30, .gdaas40, .gdaas50, .gdaas60) .text-box .button:focus-visible {
  outline: 3px solid #19b2d6;
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  :is(.gdaas30, .gdaas40, .gdaas50, .gdaas60) .text-box .button,
  :is(.gdaas30, .gdaas40, .gdaas50, .gdaas60) .text-box .button > i {
    transition: none;
    transform: none;
  }
}

/* Banner title: line height relative to the font size (the Customizer fixes it in px,
   so wrapped lines overlapped on mobile) */
:is(.gdaas30, .gdaas40, .gdaas50, .gdaas60) .tieude32 {
  line-height: 1.25 !important;
  margin-bottom: 8px;
}

@media (max-width: 549px) {
  :is(.gdaas30, .gdaas40, .gdaas50, .gdaas60) .tieude32 {
    font-size: 28px !important;
  }
}

/* Banner title: back to the original 32px / 600 (as an <h1> it picked up the theme's 56px / 400) */
:is(.gdaas30, .gdaas40, .gdaas50, .gdaas60) h1.tieude32 {
  font-size: 32px;
  font-weight: 600;
}

/* Height follows the width: the original 1170px container showed about 78% of the image
   height; a fixed 400px on the 1340px banner cropped it to 68%. Keeps the same framing. */
@media (min-width: 550px) {
  :is(.gdaas30, .gdaas40, .gdaas50, .gdaas60).banner {
    padding-top: max(400px, 34.2%) !important;
  }
}

@media (max-width: 549px) {
  :is(.gdaas30, .gdaas40, .gdaas50, .gdaas60) h1.tieude32 {
    font-size: 26px !important;
  }
}