/**
 * Banner block, "Dark" style (ACF field banner_style = dark).
 *
 * Copy sits on a charcoal-green field on the left, the photo stays vivid on
 * the right, and a thin green frame runs round the hero, after the XPT
 * Specialty site's hero. Markup: views/blocks/banner.twig.
 *
 * Plain CSS outside the Sass build (see homepage-fixes.css for why), loaded
 * on the front end and in the block editor by AssetsServiceProvider.
 * Selectors start with .banner-xpt.banner-xpt--dark so they outrank the
 * Customizer's ".home .hero-content h1, .home .hero-content p" !important
 * colour rule, which prints after theme styles.
 */

.banner-xpt--dark {
  --banner-ink: #16201d;   /* charcoal green, a shade under XPT Specialty's #1f2926 */
  --banner-green: #00ce7c; /* --global--color-green */
  --banner-mist: #cfe3da;  /* body text on the dark field */
  background-color: var(--banner-ink);
  overflow: hidden;
}

/* Dark field. ::before paints before the arrows SVG inside the holder, so
   the arrows stay on top of it. */
.banner-xpt--dark #banner-hero-holder::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg,
      rgba(22, 32, 29, 0.95) 0%,
      rgba(22, 32, 29, 0.9) 30%,
      rgba(22, 32, 29, 0.55) 48%,
      rgba(22, 32, 29, 0) 66%),
    linear-gradient(180deg, rgba(22, 32, 29, 0.55) 0%, rgba(22, 32, 29, 0) 22%);
}

/* Thin green frame, clear of the 94px header. */
.banner-xpt--dark::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 102px 24px 24px 24px;
  border: 1px solid rgba(0, 206, 124, 0.45);
  pointer-events: none;
}

.banner-xpt.banner-xpt--dark .hero-container > .hero-content {
  flex-basis: 62%;
  max-width: 860px;
  /* Keep the copy at least 32px inside the frame (frame sits 24px from the
     viewport edge) when the 1460px container reaches the viewport edge. */
  padding-left: max(var(--global--container-horizontal-padding, 20px), calc(56px - (100vw - 1460px) / 2));
}

.banner-xpt.banner-xpt--dark .hero-content h1 {
  margin: 0 !important;
  color: #fff !important;
  letter-spacing: 0;
  font-weight: 400;
}

.banner-xpt--dark .banner-xpt__lead {
  display: block;
  margin-bottom: 0.35em;
  font-family: "TradeGothicLT-Light", "TradeGothicLT", sans-serif;
  font-size: clamp(22px, 2.1vw, 30px);
  line-height: 1.2;
  color: var(--banner-mist);
}

.banner-xpt--dark .banner-xpt__title {
  display: block;
  font-family: "TradeGothicLT-BoldCondTwenty", "TradeGothicLT-Bold", "Arial Narrow", sans-serif;
  font-size: clamp(44px, 5.4vw, 84px);
  line-height: 0.96;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

/* No lead-in: the heading field alone gets the condensed title face. */
.banner-xpt.banner-xpt--dark .hero-content h1:not(:has(.banner-xpt__title)) {
  font-family: "TradeGothicLT-BoldCondTwenty", "TradeGothicLT-Bold", "Arial Narrow", sans-serif;
  font-size: clamp(44px, 5.4vw, 84px);
  line-height: 0.96;
}

.banner-xpt.banner-xpt--dark .hero-content hr {
  width: 72px;
  height: 4px;
  margin: clamp(24px, 3vw, 36px) 0 !important;
  border: 0;
  background: var(--banner-green);
}

.banner-xpt.banner-xpt--dark .hero-content p {
  max-width: 34em;
  margin: 0;
  font-size: clamp(17px, 1.25vw, 19px);
  line-height: 1.6;
  color: var(--banner-mist) !important;
}

/* Buttons: first one solid green, a second one outlined. !important beats
   the theme's .btn:not(:hover):not(:active)... chains and the
   .btn.primary:hover !important rule. */
.banner-xpt.banner-xpt--dark .hero-content .btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: clamp(28px, 3.4vw, 44px);
  padding: 17px 26px 15px;
  border: 2px solid var(--banner-green) !important;
  border-radius: 2px;
  background: var(--banner-green) !important;
  color: var(--banner-ink) !important;
  font-size: 18px;
  line-height: 1;
  letter-spacing: 0.02em;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.banner-xpt.banner-xpt--dark .hero-content .btn:hover {
  border-color: #33e39a !important;
  background: #33e39a !important;
}

.banner-xpt.banner-xpt--dark .hero-content .btn + .btn {
  background: transparent !important;
  color: #fff !important;
}

.banner-xpt.banner-xpt--dark .hero-content .btn + .btn:hover {
  background: rgba(0, 206, 124, 0.16) !important;
}

.banner-xpt.banner-xpt--dark .hero-content .btn:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
}

.banner-xpt--dark .banner-xpt__icon {
  width: 15px;
  height: 15px;
  flex: none;
  transition: transform 0.2s ease;
}

.banner-xpt--dark .btn:hover .banner-xpt__icon {
  transform: translate(2px, -2px);
}

@media only screen and (max-width: 767px) {
  .banner-xpt--dark #banner-hero-holder::before {
    background: linear-gradient(180deg,
      rgba(22, 32, 29, 0.8) 0%,
      rgba(22, 32, 29, 0.88) 45%,
      rgba(22, 32, 29, 0.96) 100%);
  }

  .banner-xpt--dark::after {
    display: none;
  }

  /* On phones the arrows run behind the copy; quieten them so text reads. */
  .banner-xpt--dark .hero-arrows {
    opacity: 0.4;
  }

  .banner-xpt.banner-xpt--dark .hero-container > .hero-content {
    flex-basis: 100%;
    padding-left: var(--global--container-horizontal-padding, 20px);
  }

  .banner-xpt.banner-xpt--dark .hero-content .btn {
    width: 100%;
    justify-content: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .banner-xpt.banner-xpt--dark .hero-content .btn,
  .banner-xpt--dark .banner-xpt__icon {
    transition: none;
  }
}