@import "../../../../themes/recast2025/style.css";

/* Container */
.priority-callout {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-self: center;
  align-self: stretch;
  padding: var(--margins-base-vert, 100px) var(--margins-base-hori, 100px);
  background: var(--neutrals-white, #ffffff);
}

.e-con-inner .priority-callout {
  padding: 0;
}

.priority-callout__wrapper {
  display: flex;
  flex-direction: row;
  align-self: center;
  gap: var(--gap-m, 32px);
  max-width: var(--global-maxwidth-maxwidth-m, 1200px);
  width: 100%;
}

.priority-callout__content {
  display: flex;
  justify-content: stretch;
  align-items: stretch;
  align-self: stretch;
  gap: -80px;
}

/* Image Section */
.priority-callout__image {
  position: relative;
  max-width: 100%;
  width: 50%;
  max-width: 100%;
  max-height: none;
  height: fit-content;
  flex-shrink: 0;
  overflow: hidden;
  z-index: 1;
}

@media (min-width: 1025px) and (max-width: 1370px) {
  .priority-callout__image  {
    height: 40vw;
    max-height: 480px;
  }
  .priority-callout__image img {
    max-height: 480px;
  }
}

.priority-callout__image img {
  width: 100%;
  max-width: 100%;
  height: 100%;  
  object-fit: cover;
  display: block;
  aspect-ratio: 4/3;
}

/* Text Block */
.priority-callout__text-block {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--gap-m, 32px);
  background: var(--neutrals-white, #ffffff);
  border: var(--stroke-width, 2px) solid var(--neutrals-grey-1, #e1e9f9);
  box-shadow: 0px 24px 24px 0px rgba(22, 31, 91, 0.1);
  width: 53%;
  max-width: 100%;
  z-index: 2;
  margin-left: -7%;
  align-self: center;
}

.priority-callout__copy {
  display: flex;
  flex-direction: column;
  align-self: stretch;
  gap: var(--spacing-gap-xs, 16px);
  max-width: 100%;
  width: 100%;
}

.priority-callout__title {
  font-family: var(--font-family-headings, "Host Grotesk");
  color: var(--neutrals-black, #161f5b);
  margin: 0;
  line-height: 100%;
  letter-spacing: 1.2px;
}

.priority-callout__bar {
  width: 64px;
  height: 4px;
  margin: 0;
  background: var(--secondary-orange, #f05928);
  flex-shrink: 0;
}

.priority-callout__description {
  color: var(--neutrals-black, #161f5b);
  margin: 0;
  /* line-height: 100%; */
  font-family: var(--font-family-body, "Host Grotesk");
}

.priority-callout__description a {
  color: var(--primary-recast-blue, #0372ff);
  font-weight: 700;
  text-decoration: none;
}


@media (min-width: 1025px) and (max-width: 1200px) {
    .e-con-inner .priority-callout {
        padding: var(--margins-base-vert, 100px) var(--margins-base-hori, 100px);
    }
}

/* Tablet Responsiveness */
@media (min-width: 601px) and (max-width: 1024px) {
  .priority-callout {
    padding: var(--margins-base-vert, 56px) var(--margins-base-hori, 40px);
  }

  .e-con-inner .priority-callout {
    padding: var(--margins-base-vert, 56px) var(--margins-base-hori, 40px);
  }

  .priority-callout__content {
    flex-direction: column;
    gap: var(--gap-m, 18px);
    height: auto;
    margin: 0 auto;
  }

  .priority-callout__image {
    width: 100%;
    height: fit-content;
    order: 1;
  }

  .priority-callout__text-block {
    width: 90%;
    margin-left: 0;
    margin-top: -34px;
    order: 2;
    padding: var(--gap-l, 26px);
  }

  .priority-callout__copy {
    gap: var(--gap-s, 12px);
  }

  .priority-callout__title {
    font-size: var(--size-heading-m, 36px);
  }

  .priority-callout__description {
    font-size: var(--size-body-xs, 16px);
  }
}

/* Mobile Responsiveness */
@media (max-width: 600px) {
  .priority-callout {
    padding: var(--margins-base-vert, 40px) var(--margins-base-hori, 20px);
  }

  .e-con-inner .priority-callout {
    padding: var(--margins-base-vert, 40px) var(--margins-base-hori, 20px);
  }


  .priority-callout__content {
    flex-direction: column;
    gap: var(--gap-m, 16px);
    height: auto;
  }

  .priority-callout__image {
    width: 100%;
    height: fit-content;
    order: 1;
  }

  .priority-callout__text-block {
    width: 90%;
    margin-left: 0;
    margin-top: -34px;
    order: 2;
    padding: var(--gap-l, 20px);
  }

  .priority-callout__copy {
    gap: var(--gap-s, 12px);
  }

  .priority-callout__title {
    font-size: var(--size-heading-m, 34px);
    letter-spacing: 1px;
  }

  .priority-callout__description {
    font-size: var(--size-body-xs, 16px);
  }

  .priority-callout__bar {
    width: 48px;
    height: 3px;
  }
}

/* Elementor editor preview adjustments */
.elementor-editor-active .priority-callout__content {
  min-height: 400px;
}

/* =========================
   Reverse layout modifier
   ========================= */

/* Desktop: flip columns and move overlap to the right */
.priority-callout--reverse .priority-callout__content {
  flex-direction: row-reverse;
}

.priority-callout--reverse .priority-callout__text-block {
  margin-left: 0; /* remove default overlap */
  margin-right: -7%; /* overlap toward the image on the left */
  z-index: 2; /* stay above the image */
}

/* Keep stacking behavior on tablet, but clear the negative right margin */
@media (min-width: 601px) and (max-width: 820px) {
  .priority-callout--reverse .priority-callout__content {
    flex-direction: column;
  }
  .priority-callout--reverse .priority-callout__text-block {
    margin-right: 0;
    margin-top: -34px; /* match your existing stacked overlap */
  }
}

/* Mobile: same as your original mobile stacking — clear the negative margin */
@media (max-width: 600px) {
  .priority-callout--reverse .priority-callout__content {
    flex-direction: column;
  }
  .priority-callout--reverse .priority-callout__text-block {
    margin-right: 0;
    margin-top: -34px;
  }
}