/* Text Image - tekst po lewej, obraz po prawej */
.text-image-block {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 0.8fr;
  gap: var(--spacing-horizontal);
  align-items: start;
  padding: var(--spacing-vertical-small) var(--spacing-horizontal);
}

.text-image-block .text-content {
  order: 1;
}

.text-image-block .image-content {
  order: 2;
}

.text-image-block img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

/* Image Text - obraz po lewej, tekst po prawej */
.image-text {
  width: 100%;
  display: grid;
  grid-template-columns: 0.8fr 1fr;
  gap: 60px;
  align-items: start;

  padding: var(--spacing-vertical-small) var(--spacing-horizontal);
}

.image-text .image-content {
  order: 1;
}

.image-text .text-content {
  order: 2;
}

.image-text img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

/* Text or Image - pełna szerokość, edytor WYSIWYG */
.text-or-image {
  padding: var(--spacing-vertical-small) var(--spacing-horizontal);
}

.text-or-image img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

/* Responsywność */
@media (max-width: 768px) {
  .text-image-block,
  .image-text {
    grid-template-columns: 1fr;
  }

  .text-image-block .text-content,
  .text-image-block .image-content,
  .image-text .image-content,
  .image-text .text-content {
    order: unset;
  }
}

/* Animacje */
.text-image-block,
.image-text,
.text-or-image {
  opacity: 0;
  transform: translateY(20px);
  animation: fadeInUp 0.6s ease forwards;
}

@keyframes fadeInUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}