/*
  Xenosity overrides for the Invena Business template pack.

  The vendor template intentionally overlaps the Projects section using:
    .gallery-bg { margin-top: -23%; }

  That effect assumes a specific block order (typically Business Goal -> Stats -> Projects).
  When the Stats block is removed, Projects overlaps Business Goal.

  We keep a smaller overlap (-10%) on desktop, and match the vendor behavior on mobile.
*/

html[data-template-pack='invena-business']
  [data-block-type='invenaBusinessGoal']
  + [data-block-type='invenaProjects']
  > .rts-gallery-area.gallery-bg {
  margin-top: -10% !important;
}

html[data-template-pack='invena-business']
  [data-block-type='invenaBusinessGoal']
  + [data-block-type='invenaSolutions']
  > .rts-gallery-area.gallery-bg {
  margin-top: -10% !important;
}

@media only screen and (max-width: 991px) {
  html[data-template-pack='invena-business']
    [data-block-type='invenaBusinessGoal']
    + [data-block-type='invenaProjects']
    > .rts-gallery-area.gallery-bg {
    margin-top: 0 !important;
  }

  html[data-template-pack='invena-business']
    [data-block-type='invenaBusinessGoal']
    + [data-block-type='invenaSolutions']
    > .rts-gallery-area.gallery-bg {
    margin-top: 0 !important;
  }
}

/*
  Invena CTA spacing + wrapping

  Goals:
  - Keep the CTA background full-bleed
  - Increase left/right padding to better match site gutters
  - Allow long titles to wrap without pushing the button off
  - Keep the button right-aligned on desktop, but stack cleanly when needed
*/

html[data-template-pack='invena-business']
  [data-block-type='invenaCTA']
  .rts-call-to-action-area-two
  .container {
  /*
    Bootstrap’s `.container` sets breakpoint-based max-widths (often ~960px at `lg`).
    For our CTA, we want full-bleed background AND a wide content area with gutters,
    so remove the max-width constraint here.
  */
  max-width: none !important;
  width: 100%;
  /* Vendor uses 15px; this feels tight on desktop. */
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

html[data-template-pack='invena-business']
  [data-block-type='invenaCTA']
  .rts-call-to-action-area-two {
  /*
    The vendor CTA uses `display: flex` and a fixed `height: 280px`.
    In our block we nest a full-width content wrapper; flex can cause the
    wrapper to shrink-to-fit on wide screens, throwing off left/right gutters.
    Use block layout and keep a minimum height instead.
  */
  display: flex !important;
  align-items: center;
  height: auto !important;
  min-height: 280px;
  /* We render the background image via Next <Image>. */
  background-image: none !important;
}

html[data-template-pack='invena-business']
  [data-block-type='invenaCTA']
  .rts-call-to-action-area-two
  .cta-content-layer {
  /* Prevent shrink-to-fit inside the flex parent on wide screens */
  width: 100%;
}

@media only screen and (min-width: 768px) {
  html[data-template-pack='invena-business']
    [data-block-type='invenaCTA']
    .rts-call-to-action-area-two
    .container {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}

@media only screen and (min-width: 1200px) {
  html[data-template-pack='invena-business']
    [data-block-type='invenaCTA']
    .rts-call-to-action-area-two
    .container {
    padding-left: 3rem;
    padding-right: 3rem;
  }
}

@media only screen and (min-width: 1400px) {
  html[data-template-pack='invena-business']
    [data-block-type='invenaCTA']
    .rts-call-to-action-area-two
    .container {
    /* Wider gutters on ultra-wide screens, but clamped for 4K+ */
    padding-left: clamp(3rem, 10vw, 120px) !important;
    padding-right: clamp(3rem, 10vw, 120px) !important;
    box-sizing: border-box;
  }
}

html[data-template-pack='invena-business'] [data-block-type='invenaCTA'] .cta-style-two-area {
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 24px;
}

html[data-template-pack='invena-business'] [data-block-type='invenaCTA'] .cta-style-two-area .title {
  min-width: 0;
  flex: 1 1 520px;
  white-space: normal;
}

html[data-template-pack='invena-business'] [data-block-type='invenaCTA'] .cta-style-two-area .rts-btn {
  flex: 0 0 auto;
  margin-left: auto;
}

@media only screen and (max-width: 767px) {
  html[data-template-pack='invena-business'] [data-block-type='invenaCTA'] .cta-style-two-area {
    gap: 16px;
  }
}