/* ==========================================================================
   2026 - CTA
   ========================================================================== */

.cta-2026 {
 
  --cta26-white: var(--wp--preset--color--white, #ffffff);
  --cta26-gray: var(--wp--preset--color--tertiary, #f6f6f6);
  --cta26-midnight: var(--wp--preset--color--primary, #252a37);
  --cta26-yellow: var(--wp--preset--color--secondary, #fdd106);
  --cta26-card-gray: #f4f4f4;

  --cta26-gutter: 28px;
  --cta26-pad: 40px;
  --cta26-card-max: 640px;
  --cta26-content-pt: 40px;

  position: relative;
  container-type: inline-size;
  width: 100%;
  z-index: 1; 
  overflow-x: clip;
}

.cta-2026 *,
.cta-2026 *::before,
.cta-2026 *::after {
  box-sizing: border-box;
}

.cta-2026__wrap {
  padding: var(--cta26-pad) var(--cta26-gutter);
}

/* Card ------------------------------------------------------------------ */
.cta-2026__card {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: var(--cta26-card-max);
  margin: 0 auto;
}

.cta-2026__media {
  position: relative;
  aspect-ratio: 3 / 2;
  margin: 0;
  overflow: hidden;
}

.cta-2026 .cta-2026__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center;
}

.cta-2026__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--cta26-content-pt) 40px 40px;
  text-align: center;
}

/* Typography ------------------------------------------------------------ */
.cta-2026 .cta-2026__heading {
  margin: 0;
  padding: 0;
  font-size: 24px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0;
  color: inherit;
  text-transform: none;
  overflow-wrap: break-word;
}

.cta-2026 .cta-2026__heading::after {
  content: "";
  display: block;
  width: 48px;
  height: 2px;
  margin: 14px auto 0;
  background-color: var(--cta26-yellow);
}

.cta-2026 .cta-2026__text {
  margin: 16px 0 0;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.4375;
  color: inherit;
  overflow-wrap: break-word;
  text-wrap: pretty; 
}

.cta-2026 .cta-2026__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 44px;
  margin-top: 24px;
  padding: calc(10px + 0.18em) 20px 10px;
  border: 0;
  border-radius: 0;
  background-color: var(--cta26-yellow);
  color: var(--cta26-midnight);
  font-size: 16.63px;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: 0.1em;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  white-space: normal;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.cta-2026 .cta-2026__btn:hover,
.cta-2026 .cta-2026__btn:focus-visible {
  background-color: var(--cta26-midnight);
  color: var(--cta26-white);
  text-decoration: none;
}

.cta-2026 .cta-2026__btn:focus-visible {
  outline: 2px solid var(--cta26-yellow);
  outline-offset: 2px;
}

/* Texture style --------------------------------------------------------- */
.cta-2026--texture {
  color: var(--cta26-white);
  background-color: #f2a516;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.cta-2026--texture-1 {
  background-image:
    url("../images/cta-2026/texture-1.jpg"),
    repeating-linear-gradient(90deg, #f7b52a 0, #fcc84a 9px, #d98a0f 16px, #f7b52a 22px);
}

.cta-2026--texture-2 {
  background-color: #fbb800;
  background-image:
    url("../images/cta-2026/texture-2-mobile.jpg"),
    linear-gradient(120deg, #fdc000 0%, #fbb100 55%, #e48f00 100%);
}

.cta-2026--texture .cta-2026__card {
  background-color: rgba(37, 42, 55, 0.6);
  -webkit-backdrop-filter: blur(12.5px);
  backdrop-filter: blur(12.5px);
  box-shadow: 0 8px 50px rgba(0, 0, 0, 0.25);
}

/* Overlap style --------------------------------------------------------- */
.cta-2026--overlap {
  --cta26-upper: var(--cta26-white);
  --cta26-lower: var(--cta26-midnight);
  --cta26-pad: 0px;
}

.cta-2026--upper-white    { --cta26-upper: var(--cta26-white); }
.cta-2026--upper-gray     { --cta26-upper: var(--cta26-gray); }
.cta-2026--upper-yellow   { --cta26-upper: var(--cta26-yellow); }
.cta-2026--upper-midnight { --cta26-upper: var(--cta26-midnight); }
.cta-2026--lower-white    { --cta26-lower: var(--cta26-white); }
.cta-2026--lower-gray     { --cta26-lower: var(--cta26-gray); }
.cta-2026--lower-midnight { --cta26-lower: var(--cta26-midnight); }


.cta-2026--overlap .cta-2026__wrap {
  --cta26-card-w: min(100cqw - (2 * var(--cta26-gutter)), var(--cta26-card-max));
  --cta26-split: calc(var(--cta26-pad) + (var(--cta26-card-w) * 2 / 3) + var(--cta26-content-pt) + 19px);
  background: linear-gradient(
    to bottom,
    var(--cta26-upper) 0,
    var(--cta26-upper) var(--cta26-split),
    var(--cta26-lower) var(--cta26-split),
    var(--cta26-lower) 100%
  );
}

.cta-2026--overlap .cta-2026__card {
  box-shadow: 0 32px 25px rgba(0, 0, 0, 0.25);
}

.cta-2026--card-white .cta-2026__card {
  background-color: var(--cta26-white, #ffffff);
  color: var(--cta26-midnight);
}

.cta-2026--card-gray .cta-2026__card {
  background-color: var(--cta26-card-gray, #f4f4f4);
  color: var(--cta26-midnight);
}

.cta-2026--card-midnight .cta-2026__card {
  background-color: var(--cta26-midnight, #252a37);
  color: var(--cta26-white);
}

.cta-2026--card-midnight .cta-2026__btn:hover,
.cta-2026--card-midnight .cta-2026__btn:focus-visible {
  background-color: var(--cta26-white);
  color: var(--cta26-midnight);
}

/* Tablet stacked -------------------------------------------------------- */
@media (min-width: 768px) {
  .cta-2026 {
    --cta26-gutter: 48px;
    --cta26-pad: 56px;
  }

  .cta-2026--overlap {
    --cta26-pad: 0px;
  }

  .cta-2026 .cta-2026__heading {
    font-size: 28px;
  }

  .cta-2026 .cta-2026__btn {
    display: inline-flex;
    width: auto;
    padding: 0.18em 37px 0;
    white-space: nowrap;
  }

  .cta-2026--overlap .cta-2026__wrap {
    --cta26-split: calc(var(--cta26-pad) + (var(--cta26-card-w) * 2 / 3) + var(--cta26-content-pt) + 22px);
  }
}

@media (min-width: 1024px) {
  .cta-2026 {
    --cta26-gutter: 0px;
    --cta26-pad: clamp(48px, 5.72vw, 80px);
  }

  .cta-2026--overlap {
    --cta26-pad: 0px;
  }

  .cta-2026--texture-2 {
    background-image:
      url("../images/cta-2026/texture-2.jpg"),
      linear-gradient(120deg, #fdc000 0%, #fbb100 55%, #e48f00 100%);
  }
  .cta-2026--overlap .cta-2026__wrap {
    background: linear-gradient(
      to bottom,
      var(--cta26-upper) 0,
      var(--cta26-upper) 50%,
      var(--cta26-lower) 50%,
      var(--cta26-lower) 100%
    );
  }

  .cta-2026__card {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 90%;
    max-width: 1120px;
    container-type: inline-size;
  }

  .cta-2026__media {
    grid-column: 2;
    grid-row: 1;
    align-self: stretch;
  }

  .cta-2026__content {
    grid-column: 1;
    grid-row: 1;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 7.143cqw;
    text-align: left;
  }

  .cta-2026 .cta-2026__heading {
    font-size: 3.75cqw;
    line-height: 1.2;
    letter-spacing: 0;
  }

  .cta-2026 .cta-2026__heading::after {
    width: 4.286cqw;
    margin: 1.25cqw 0 0;
  }

  .cta-2026 .cta-2026__text {
    margin: 1.429cqw 0 2.143cqw;
    font-size: 1.786cqw;
    line-height: 1.4;
    text-wrap: wrap; 
  }

  .cta-2026 .cta-2026__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 3.929cqw;
    min-height: 0;
    margin-top: auto;
    font-size: 1.485cqw;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.1em;
    padding: 0.18em 3.3cqw 0;
  }
}

@media (min-width: 1280px) {
  .cta-2026__card {
    width: 80%;
  }
}