/* ===== HERO – obrazek na środku z białymi bokami ===== */

.hero-ai {
  width: 100%;
  background: #ffffff;          /* białe tło po bokach */
  padding: 0rem 0;              /* trochę oddechu góra/dół */
  display: flex;
  justify-content: center;
}

.hero-ai-wrapper {
  max-width: 900px;            /* środkowy obszar strony */
  width: 100%;
  display: flex;
  justify-content: center;      /* centrowanie poziome */
}

.hero-ai-img {
  display: block;
  max-width: 1000px;            /* szerokość obrazka – możesz zmienić */
  width: 100%;
  height: auto;
  margin: 0 auto;
  object-fit: contain;          /* żeby nic się nie rozciągało */
}
/* TABLETY – obrazek prawie na całą szerokość */
@media (max-width: 1024px) {
  .hero-ai-wrapper {
    max-width: 95%;
  }
}

/* TELEFONY – obrazek na pełną szerokość ekranu */
@media (max-width: 600px) {
  .hero-ai-wrapper {
    max-width: 100%;
  }
  .hero-ai-img {
    width: 100%;
    max-width: 100%;
  }
}


/* === DIVING INTO AI – sekcja bez numerków === */

.section-ai-details .reason .number {
  display: none;           /* numerki znikają tylko w tej sekcji */
}

.section-ai-details h3 {
  margin-bottom: 2rem;
}
/* odstęp między nagłówkiem karty a tekstem */
.section-ai-details .reason-heading {
  margin-bottom: 1rem; /* bardziej eleganckie niż 0.3–0.5rem */
}
.section-ai-details .reason {
  margin-bottom: 2.5rem; /* TU ZWIĘKSZASZ ODSTĘP */
}

/* nagłówek po prawej niech zaczyna się tam, gdzie tekst (po przesunięciu 6rem) */
.section-ai-details .reasons-right h3 {
  margin-left: 6rem;
  margin-top: -5rem;
}

/* na mniejszych ekranach nie potrzebujemy przesunięcia, bo karty już nie nachodzą */
@media (max-width: 1024px) {
  .section-ai-details .reasons-right h3 {
    margin-left: 0;
  }
}

/* ---- CTA ERASMUS (uniwersalne, bardziej ogólne) ---- */

.erasmus-cta {
  padding: 4rem 1rem;
  text-align: center;
  background: var(--accent-bg, #f5f4ff); /* możesz zmienić lub usunąć */
}

.erasmus-cta h2 {
  font-size: 2.2rem;
  margin-bottom: 1.2rem;
  color: var(--text-dark);
}

.erasmus-cta-text {
  max-width: 700px;          /* duży margines poziomy tylko na desktopie */
  margin: 0 auto 2rem auto;
  line-height: 1.8;
  font-size: 1.15rem;
  color: var(--text-dark);
}

/* Przyciski zostają takie jak masz w .cta-buttons */

/* --- RWD: na mobile mniejsza szerokość tekstu --- */
@media (max-width: 768px) {
  .erasmus-cta-text {
    max-width: 100%;
    font-size: 1rem;
    line-height: 1.6;
    padding: 0 0.5rem;
  }
}