/**
 * "Explore XPT's Portfolio" section: a core Cover block with the class
 * explore-portfolio (homepage). Echoes the dark hero banner: thin green
 * frame, short green rule above the heading, condensed title face.
 *
 * The background image, text and button stay editable in the Cover block.
 * :not(#xpt-cta) outranks the Customizer CSS and the block's inline styles.
 *
 * Plain CSS outside the Sass build; loaded by AssetsServiceProvider.
 */

.wp-block-cover.explore-portfolio:not(#xpt-cta) {
  --cta-deep: 4, 38, 44;
  --cta-green: #00ce7c;
  min-height: clamp(520px, 42vw, 680px);
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding: clamp(72px, 8vw, 120px) var(--global--container-horizontal-padding, 20px);
  overflow: hidden;
  isolation: isolate;
}

/* The logo pattern sits top right in the image; keep it in view. */
.wp-block-cover.explore-portfolio:not(#xpt-cta) .wp-block-cover__image-background {
  object-position: 70% 30%;
}

/* Deep teal from the left so white text stays readable on the light image. */
.wp-block-cover.explore-portfolio:not(#xpt-cta) .wp-block-cover__background {
  z-index: 1;
  opacity: 1;
  background:
    linear-gradient(90deg,
      rgba(var(--cta-deep), 0.86) 0%,
      rgba(var(--cta-deep), 0.62) 38%,
      rgba(var(--cta-deep), 0.12) 72%,
      rgba(var(--cta-deep), 0) 100%),
    linear-gradient(0deg, rgba(var(--cta-deep), 0.35) 0%, rgba(var(--cta-deep), 0) 45%) !important;
}

/* Thin inset frame, as on the hero. */
.wp-block-cover.explore-portfolio:not(#xpt-cta)::after {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 24px;
  border: 1px solid rgba(0, 206, 124, 0.45);
  pointer-events: none;
}

.wp-block-cover.explore-portfolio:not(#xpt-cta) .wp-block-cover__inner-container {
  z-index: 3;
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  /* Keep the copy clear of the frame on wide screens, as on the hero. */
  padding-left: max(0px, min(40px, calc(56px - (100vw - 1440px) / 2)));
}

.wp-block-cover.explore-portfolio:not(#xpt-cta) .wp-block-cover__inner-container > * {
  max-width: 640px;
  margin-left: 0 !important;
  margin-right: auto !important;
}

.wp-block-cover.explore-portfolio:not(#xpt-cta) h2 {
  margin: 0 0 24px;
  font-family: "TradeGothicLT-BoldCondTwenty", "TradeGothicLT-Bold", "Arial Narrow", sans-serif;
  font-weight: normal;
  font-size: clamp(40px, 4.4vw, 68px) !important;
  line-height: 1;
  letter-spacing: 0;
}

/* Short green rule above the heading. */
.wp-block-cover.explore-portfolio:not(#xpt-cta) h2::before {
  content: "";
  display: block;
  width: 72px;
  height: 4px;
  margin-bottom: clamp(20px, 2.4vw, 32px);
  background: var(--cta-green);
}

.wp-block-cover.explore-portfolio:not(#xpt-cta) p {
  margin: 0 0 16px;
  font-size: clamp(17px, 1.25vw, 19px) !important;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.92) !important;
}

.wp-block-cover.explore-portfolio:not(#xpt-cta) .wp-block-buttons { margin-top: 32px; }

@media (max-width: 781px) {
  .wp-block-cover.explore-portfolio:not(#xpt-cta) {
    min-height: 0;
    padding-top: 64px;
    padding-bottom: 64px;
  }
  .wp-block-cover.explore-portfolio:not(#xpt-cta) .wp-block-cover__background {
    background: rgba(var(--cta-deep), 0.72) !important;
  }
  .wp-block-cover.explore-portfolio:not(#xpt-cta)::after { inset: 12px; }
  .wp-block-cover.explore-portfolio:not(#xpt-cta) .wp-block-cover__inner-container { padding-left: 12px; }
}