/* ============================================
   CTA MODULES STYLES
   ============================================ */

/* Base CTA Module Styles */
.cta-module {
    box-sizing: border-box;
    width: 100%;
  }
  
  .cta-container {
    width: 100%;
    max-width: 144rem;
    margin: 0 auto;
    padding: 0;
  }
  
  .cta-content {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 4.8rem;
    gap: 2.4rem;
    width: 100%;
    border-radius: 0.8rem;
  }
  
  .cta-text-wrapper {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0;
    gap: 0.8rem;
    flex: 1;
  }
  
  .cta-title {
    font-family: var(--font-family-gibson);
    font-style: normal;
    font-weight: 400;
    font-size: 4.4rem;
    line-height: 108%;
    letter-spacing: -0.01em;
    font-feature-settings: 'kern' off;
    margin: 0;
  }
  
  .cta-text {
    font-family: var(--font-family-gibson);
    font-style: normal;
    font-weight: 400;
    font-size: 2.3rem;
    line-height: 140%;
    font-feature-settings: 'kern' off;
    margin: 0;
  }
  
  .cta-buttons {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    padding: 0;
    gap: 1.6rem;
  }
  
  .cta-images {
    position: relative;
    width: 100%;
    height: 100%;
    flex: none;
    min-height: 30rem;
  }
  
  .cta-image {
    position: absolute;
    object-fit: cover;
    display: block;
  }
  
  /* ============================================
     CTA WERSJA 1 - Default (Gray Background)
     ============================================ */
  
  .cta-wersja-1 .cta-content {
    background: var(--neutral-150);
    border: 1px solid var(--neutral-200);
  }
  
  .cta-wersja-1 .cta-title {
    color: var(--neutral-800);
  }
  
  .cta-wersja-1 .cta-text {
    color: var(--neutral-700);
  }
  
  /* ============================================
     CTA WERSJA 2 - Default with Images
     ============================================ */
  
  .cta-wersja-2 .cta-content {
    background: var(--neutral-150);
    border: 1px solid var(--neutral-200);
    gap: 8rem;
    isolation: isolate;
    position: relative;
  }
  
  .cta-wersja-2 .cta-title {
    color: var(--neutral-800);
  }
  
  .cta-wersja-2 .cta-text {
    color: var(--neutral-700);
    width: 60%;
  }
  
  .cta-wersja-2 .cta-text-wrapper {
    gap: 2.4rem;
    width: 50%;
    z-index: 100;
  }
  
  .cta-wersja-2 .cta-images {
    position: absolute;
    width: 60.064rem;
    height: 44.8rem;
    right: 0;
    bottom: 0;
    z-index: 1;
    overflow: hidden;
  }
  
  .cta-wersja-2 .cta-image-1 {
    width: 25.364rem;
    height: 38.042rem;
    right: 0.36rem;
    bottom: 0;
  }
  
  .cta-wersja-2 .cta-image-2 {
    width: 26.7rem;
    height: 40.1rem;
    right: 33.4rem;
    bottom: 0;
  }
  
  .cta-wersja-2 .cta-image-3 {
    width: 27.8rem;
    height: 42.8rem;
    right: 15.6rem;
    top: 24px;
    overflow: visible;
  }
  
  /* ============================================
     CTA WERSJA 3 - Default Small (No Title)
     ============================================ */
  
  .cta-wersja-3 .cta-content {
    background: var(--neutral-150);
    border: 1px solid var(--neutral-200);
    padding: 3.2rem;
    gap: 2.4rem;
  }
  
  .cta-wersja-3 .cta-text-wrapper {
    height: auto;
    min-height: 6.4rem;
  }
  
  .cta-wersja-3 .cta-text {
    color: var(--neutral-700);
    width: 100%;
  }
  
  /* ============================================
     CTA WERSJA 4 - Main (Pink Background)
     ============================================ */
  
  .cta-wersja-4 .cta-content {
    background: var(--main-500);
    border-radius: 0.8rem;
    gap: 8rem;
  }
  
  .cta-wersja-4 .cta-title {
    color: var(--main-100);
  }
  
  .cta-wersja-4 .cta-text {
    color: var(--main-200);
  }
  
  .cta-wersja-4 .cta-buttons {
    gap: 0.8rem;
  }
  
  /* ============================================
     CTA WERSJA 5 - Main Center (Pink, Centered)
     ============================================ */
  
  .cta-wersja-5 .cta-content {
    background: var(--main-500);
    border-radius: 0.8rem;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 2.4rem;
    padding: 4.8rem;
  }
  
  .cta-wersja-5 .cta-text-wrapper {
    align-items: center;
    justify-content: flex-end;
    gap: 1.2rem;
    width: 134.4rem;
    height: 4.8rem;
  }
  
  .cta-wersja-5 .cta-title {
    color: var(--main-100);
    text-align: center;
    width: 100%;
  }
  
  .cta-wersja-5 .cta-buttons {
    gap: 0.8rem;
  }
  
  /* ============================================
     CTA WERSJA 6 - Main with Images
     ============================================ */
  
  .cta-wersja-6 .cta-content {
    background: var(--main-500);
    border-radius: 0.8rem;
    gap: 8rem;
    isolation: isolate;
    position: relative;
    min-height: 30.2rem;
    overflow: visible;
  }
  
  .cta-wersja-6 .cta-title {
    color: var(--main-100);
  }
  
  .cta-wersja-6 .cta-text {
    color: var(--main-200);
    width: 50%;
  }
  
  .cta-wersja-6 .cta-text-wrapper {
    gap: 2.4rem;
    z-index: 100;
  }
  
  .cta-wersja-6 .cta-buttons {
    gap: 1.6rem;
    width: auto;
    flex-wrap: nowrap;
  }

  .cta-wersja-6 .cta-button-secondary {
    border: 1.5px solid var(--neutral-100);
    color: var(--main-100);
  }

  .cta-wersja-6 .cta-button-secondary:hover {
    color: var(--main-100);
  }
  
  .cta-wersja-6 .cta-images {
    position: absolute;
    width: 73.5rem;
    height: 41.3rem;
    right: 0;
    bottom: 0;
    z-index: 1;
    max-width: 100%;
  }
  
  .cta-wersja-6 .cta-image-1 {
    width: 31.8rem;
    height: 40.7rem;
    right: 0;
    bottom: 0;
  }
  
  .cta-wersja-6 .cta-image-2 {
    width: 31rem;
    height: 39.2rem;
    right: 36.9rem;
    bottom: 0;
  }
  
  .cta-wersja-6 .cta-image-3 {
    width: 46.3rem;
    height: 41.3rem;
    left: 18rem;
    bottom: 0;
  }
  
  /* ============================================
     CTA WERSJA 7 - Main with Images (Alternative)
     ============================================ */
  
  .cta-wersja-7 .cta-content {
    background: var(--main-500);
    border-radius: 0.8rem;
    gap: 8rem;
    isolation: isolate;
    position: relative;
    min-height: 30.2rem;
  }
  
  .cta-wersja-7 .cta-title {
    color: var(--main-100);
    width: 100%;
  }
  
  .cta-wersja-7 .cta-text {
    color: var(--main-200);
    width: 50%;
  }
  
  .cta-wersja-7 .cta-text-wrapper {
    gap: 2.4rem;
    /* width: 71.2rem; */
    z-index: 100;
  }
  
  .cta-wersja-7 .cta-buttons {
    gap: 1.6rem;
    width: 100%;
  }
  
  .cta-wersja-7 .cta-images {
    position: absolute;
    width: 73.5rem;
    height: 41.3rem;
    right: 0;
    bottom: 0;
    z-index: 1;
    max-width: 100%;
  }
  
  .cta-wersja-7 .cta-image-1 {
    width: 31.8rem;
    height: 40.7rem;
    right: 0;
    bottom: 0;
  }
  
  .cta-wersja-7 .cta-image-2 {
    width: 31rem;
    height: 39.2rem;
    right: 36.9rem;
    bottom: 0;
  }
  
  .cta-wersja-7 .cta-image-3 {
    width: 46.3rem;
    height: 41.3rem;
    left: 18rem;
    bottom: 0;
  }
  
  /* ============================================
     CTA WERSJA 2, 5, 6 & 7 - TABLET (767px–1024px)
     ============================================ */
  
  @media (min-width: 767px) and (max-width: 1024px) {
    .cta-wersja-7 .cta-content {
      background: var(--main-500);
      border-radius: 0.8rem;
      gap: 8rem;
      isolation: isolate;
      position: relative;
      min-height: 30.2rem;
      overflow: hidden;
    }
  
    .cta-wersja-7 .cta-image-1 {
      width: 31.8rem;
      height: 30.7rem;
      right: -7rem;
      bottom: 0;
    }
  
    .cta-wersja-7 .cta-image-2 {
      width: 31rem;
      height: 31.2rem;
      right: 21.9rem;
      bottom: 0;
    }
  
    .cta-wersja-7 .cta-image-3 {
      width: 46.3rem;
      height: 34.3rem;
      left: 28rem;
      bottom: 0;
    }
  
    .cta-wersja-5 .cta-text-wrapper {
      align-items: center;
      justify-content: flex-end;
      gap: 1.2rem;
      width: auto;
      height: auto;
    }
  
    .cta-wersja-2 .cta-content {
      background: var(--neutral-150);
      border: 1px solid var(--neutral-200);
      gap: 8rem;
      isolation: isolate;
      position: relative;
      overflow: visible;
    }
  
    .cta-wersja-2 .cta-image-1 {
      width: 25.364rem;
      height: 30.042rem;
      right: -5rem;
      bottom: 0;
    }
  
    .cta-wersja-2 .cta-image-2 {
      width: 26.7rem;
      height: 30.1rem;
      right: 21.4rem;
      bottom: 0;
    }
  
    .cta-wersja-2 .cta-image-3 {
      width: 29.8rem;
      height: 36.8rem;
      right: 7.6rem;
      top: 25%;
    }
  
    .cta-wersja-2 .cta-text-wrapper {
      gap: 2.4rem;
      width: 50%;
      max-width: 60%;
    }
  
    .cta-wersja-2 .cta-text {
      color: var(--neutral-700);
      width: 100%;
    }
  
    .cta-wersja-6 .cta-content {
      background: var(--main-500);
      border-radius: 0.8rem;
      gap: 8rem;
      isolation: isolate;
      position: relative;
      min-height: 30.2rem;
      overflow: hidden;
    }
  
    .cta-wersja-6 .cta-image-1 {
      width: 31.8rem;
      height: 30.7rem;
      right: -7rem;
      bottom: 0;
    }
  
    .cta-wersja-6 .cta-image-2 {
      width: 31rem;
      height: 30.2rem;
      right: 22.9rem;
      bottom: 0;
    }
  
    .cta-wersja-6 .cta-image-3 {
      width: 46.3rem;
      height: 40.3rem;
      left: 28rem;
      bottom: 0;
    }
  
    .cta-wersja-6 .cta-text-wrapper {
      gap: 2.4rem;
      z-index: 100;
      max-width: 60%;
    }
  
    .cta-wersja-6 .cta-text {
      color: var(--main-200);
      width: 80%;
    }
  }
  
  /* ============================================
     CTA MODULES - MOBILE STYLES (≤766px)
     Tablet (767px–1024px) keeps desktop layout
     ============================================ */
  
  @media (max-width: 766px) {
    .cta-container {
      padding: 0;
    }
  
    .cta-content {
      flex-direction: column;
      padding: 2.4rem 1.6rem;
      gap: 2.4rem;
      align-items: center;
      position: relative;
    }
  
    /* Add min-height for versions with images to accommodate them */
    .cta-wersja-2 .cta-content,
    .cta-wersja-6 .cta-content,
    .cta-wersja-7 .cta-content {
      min-height: 54.8rem;
      padding-bottom: 24rem;
    }
  
    .cta-text-wrapper {
      width: 100%;
      gap: 0.8rem;
      align-items: center;
      padding: 0;
    }

    .cta-wersja-2 .cta-text-wrapper {
      gap: 2.4rem;
      width: 100%;
      margin-bottom: 8rem;
    }
  
    .cta-title {
      font-size: 2.8rem;
      line-height: 110%;
      letter-spacing: -0.0175em;
      text-align: center;
      width: 100%;
    }
  
    .cta-text {
      font-size: 2rem;
      line-height: 135%;
      text-align: center;
      width: 100%;
    }
  
    .cta-buttons {
      flex-direction: column;
      width: 100%;
      gap: 0.8rem;
    }
  
    .cta-buttons .btn {
      width: 100%;
    }
  
    /* Show images on mobile for versions with images - keep absolute positioning */
    .cta-wersja-2 .cta-images,
    .cta-wersja-6 .cta-images,
    .cta-wersja-7 .cta-images {
      display: block;
      position: absolute;
      width: 100%;
      left: 0;
      bottom: 0;
      z-index: 1;
    }
  
    /* Hide images for versions without images on mobile */
    .cta-wersja-1 .cta-images,
    .cta-wersja-3 .cta-images,
    .cta-wersja-4 .cta-images,
    .cta-wersja-5 .cta-images {
      display: none;
    }
  
    /* Keep images positioned absolutely on mobile - adjust sizes */
    .cta-wersja-2 .cta-image-1 {
      width: 16rem;
      height: 27.5rem;
      right: 2rem;
      bottom: 0;
    }
  
    .cta-wersja-2 .cta-image-2 {
      width: 15.1rem;
      height: 29rem;
      left: 7rem;
      bottom: 0;
  }
  
    .cta-wersja-2 .cta-image-3 {
      width: 20.3rem;
      height: 29.48rem;
      left: 33%;
      top: 35%;
      overflow: visible;
  }
  
    .cta-wersja-6 .cta-image-1 {
      width: 16rem;
      height: 24.5rem;
      right: 2rem;
      bottom: 0;
    }
  
    .cta-wersja-6 .cta-image-2 {
      width: 15.1rem;
      height: 24rem;
      left: 5rem;
      bottom: 0;
      transform: matrix(-1, 0, 0, 1, 0, 0);
    }
  
    .cta-wersja-6 .cta-image-3 {
      width: 26.3rem;
      height: 26.48rem;
      left: 29%;
      bottom: 0;
    }
  
    .cta-wersja-7 .cta-image-1 {
      width: 16rem;
      height: 28.5rem;
      right: 1rem;
      bottom: 0;
    }
  
    .cta-wersja-7 .cta-image-2 {
      width: 15.1rem;
      height: 27rem;
      left: 3rem;
      bottom: 0;
    }
  
    .cta-wersja-7 .cta-image-3 {
      width: 26.3rem;
      height: 31.48rem;
      left: 28%;
      bottom: 0;
    }
  
    .cta-wersja-5 .cta-content {
      padding: 1.6rem;
    }
  
    .cta-wersja-5 .cta-text-wrapper {
      width: 100%;
      height: auto;
    }

    .cta-wersja-3 .cta-content {
      background: var(--neutral-150);
      border: 1px solid var(--neutral-200);
      padding: 1.6rem;
      gap: 2.4rem;
    }
  
    /* Reset text width for mobile - all should be 100% */
    .cta-wersja-2 .cta-text,
    .cta-wersja-6 .cta-text,
    .cta-wersja-7 .cta-text {
      width: 100%;
    }
  }

  /* Mobile (≤765px): overflow hidden; tablet/desktop: visible */
  @media (max-width: 765px) {
    .cta-wersja-6 .cta-content {
      overflow: hidden;
    }
  }