/* ------------------------------------------------------------------
   Section: home / strategy
   Future block: vibo/home-strategy
   ------------------------------------------------------------------ */

:is(.vibo-main, .acf-block-preview) .strategy-section {
  background-image: var(--section-bg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}

:is(.vibo-main, .acf-block-preview) .strategy-card {
  position: relative;
  background: white;
  max-width: 635px;
  padding: 40px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);

  left: 330px;
}

/* The card is centred and then pushed 330px to the right. Between 992px and
   ~1370px that fixed offset pushed it past the viewport and the text was cut
   off, so the offset now stops at the space actually left on the right (half
   the section width minus half the card). Identical at 1366px and above, and
   below 992px the card stays centred exactly as before. */
@media (min-width: 992px) {
  :is(.vibo-main, .acf-block-preview) .strategy-section .strategy-card {
    left: min(330px, calc(50% - 317.5px));
  }
}

:is(.vibo-main, .acf-block-preview) .strategy-card h2 {
  color: rgb(2, 1, 8);
  font-family: Actay Wide;
  font-size: 36px;
  line-height: 120%;
  text-align: left;
}

:is(.vibo-main, .acf-block-preview) .strategy-card hr {
  margin: 1rem 0 1.5rem;
  border-top: 2px solid #000;
  width: 100%;
}

:is(.vibo-main, .acf-block-preview) .strategy-card p {
  color: rgb(2, 1, 8);
  font-family: Pais;
  font-size: 18px;
  line-height: 120%;
  text-align: left;
}

@media (max-width: 768px) {
  :is(.vibo-main, .acf-block-preview) .strategy-card {
    padding: 20px;
  }

  :is(.vibo-main, .acf-block-preview) .strategy-card h2 {
    font-size: 1.4rem;
  }
}