/* =========================================
   OFERTA HERO – PREMIUM OVERLAP VERSION
========================================= */

.oferta-hero{
  position: relative;
  padding: clamp(32px, 4vw, 64px) 0;
    background: linear-gradient(
    90deg,
    #fff 40%,
    #eee 100%
  );
}

/* -----------------------------------------
   KARTA GŁÓWNA
------------------------------------------ */

.oferta-hero__inner{
  position: relative;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  align-items: center;

  min-height: 420px;

  background: linear-gradient(
    180deg,
    #ffffff 40%,
    #fafafa 100%
  );

  border-radius: 24px;
  overflow: hidden;
}

/* -----------------------------------------
   LEWA STRONA – TREŚĆ (NA WARSTWIE)
------------------------------------------ */

.oferta-hero__content{
  position: relative;
  z-index: 3;

  padding: 20px 0;
}

/* subtelny panel pod tekst */
.oferta-hero__content::before{
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(2px);
  border-radius: 20px;
  z-index: -1;
}

/* -----------------------------------------
   TYPOGRAFIA
------------------------------------------ */

.oferta-hero__title{
  margin: 0 0 14px;
  font-size:44px;
  line-height: 1.2;
}

.oferta-hero__lead{
	font-size:18px;
}

.oferta-hero__lead p{
  margin: 0;
  padding:0;
}

/* -----------------------------------------
   BULLETS – DELIKATNE, NIE LISTA
------------------------------------------ */

.oferta-hero__bullets{
  margin: 22px 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
}

.oferta-hero__bullets li{
  position: relative;
  padding-left: 28px;
  font-size: 18px;
  list-style: none;
}

.oferta-hero__bullets li::before{
  content: "";
  position: absolute;
  left: 0;
  top: .45em;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #eef2ff;
  border: 1px solid #c7d2fe;
}

.oferta-hero__bullets li::after{
  content: "";
  position: absolute;
  left: 4px;
  top: .65em;
  width: 7px;
  height: 4px;
  border-left: 2px solid #1e3a8a;
  border-bottom: 2px solid #1e3a8a;
  transform: rotate(-45deg);
}

/* -----------------------------------------
   CTA
------------------------------------------ */

.oferta-hero__cta {
background-color: #173b5b;
text-align:center;
}

.oferta-hero__cta:hover{
opacity: 0.87;
}

/* -----------------------------------------
   PRAWA STRONA – OBRAZ (TŁO / OVERLAP)
------------------------------------------ */

.oferta-hero__image{
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 48%;
  z-index: 1;
}

.oferta-hero__image img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* gradient maska dla czytelności */
.oferta-hero__image::after{
  content: "";
  position: absolute;
  inset: 0;
background: linear-gradient( 90deg, rgb(255, 255, 255) 10%, rgba(255,255,255,.65) 40%, rgba(255,255,255,0) 70% );
}

/* -----------------------------------------
   TABLET
------------------------------------------ */

@media (max-width: 1024px){
.oferta-hero{
    background: linear-gradient(
    360deg,
    #fff 40%,
    #eee 100%
  );
}	
  .oferta-hero__inner{
    grid-template-columns: 1fr;
  }

  .oferta-hero__image{
    position: relative;
    width: 100%;
   
  }

  .oferta-hero__image::after{
    background: linear-gradient(
      180deg,
	  rgb(255, 255, 255,.99) 10%,
      rgba(255,255,255,.65) 40%,
      rgba(255,255,255,0) 70%
    );
  }
}

/* -----------------------------------------
   MOBILE
------------------------------------------ */

@media (max-width: 640px){
  .oferta-hero{
    padding: 20px 0;
  }

  .oferta-hero__content{
    padding: 20px;
  }

  .oferta-hero__title{
    font-size: 28px;
  }

  .oferta-hero__cta{
    width: 100%;
  }

  .oferta-hero__image{
    height: 260px;
  }
}

/* -----------------------------------------
   ANIMACJA (SUBTELNA)
------------------------------------------ */

@media (prefers-reduced-motion: no-preference){
  .oferta-hero__content{
    animation: heroFadeUp .4s ease-out both;
  }

  @keyframes heroFadeUp{
    from{
      opacity: 0;
      transform: translateY(10px);
    }
    to{
      opacity: 1;
      transform: translateY(0);
    }
  }
}