/* Promotional Section Specific Styles */

.promotional {
  position: relative;
}

.promotional-image {
  width: 100%;
  max-width: 428px;
}

.promotional-image img,
.promotional-image .img-placeholder {
  border-radius: 0;
}

.promotional-content {
  max-width: 100%;
}

/* CTA link with border and animation */
.promotional-cta a {
  border: 2px solid #000000;
  border-radius: 30px;
  padding: 15px 30px;
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
}

.promotional-cta a:hover {
  background-color: rgba(0, 0, 0, 0.05);
  transform: translateX(5px);
  border-color: var(--brand-accent);
}

/* Arrow animation on hover */
.promotional-cta a span {
  display: inline-block;
  transition: transform 0.3s ease;
}

.promotional-cta a:hover span {
  transform: translateX(5px);
}

/* Responsive adjustments */
@media (max-width: 991px) {
  /* Text first, image second on mobile */
  .promotional .row {
    flex-direction: column-reverse;
  }

  .promotional-content {
    padding-left: 0 !important;
    margin-bottom: 30px;
  }

  .promotional-image {
    max-width: 100%;
  }
}

@media (max-width: 768px) {
  .promotional-image .img-placeholder {
    width: 100%;
    max-width: 350px;
    height: auto;
    aspect-ratio: 1 / 1;
  }
}

@media (max-width: 576px) {
  .promotional-image .img-placeholder {
    max-width: 280px;
  }

  /* Кнопка на всю ширину на мобильных */
  .promotional .btn-primary-custom {
    width: 100%;
    max-width: 100%;
  }
}