/* Hero Section - Tailwind Responsive Styles */

.main-hero {
  @apply bg-white pt-8 pb-8 overflow-hidden;
}

/* Mobile hero padding adjustments */
@media (max-width: 768px) {
  .main-hero {
    @apply pt-0 pb-8 overflow-x-hidden max-w-full w-full;
  }
}

.hero-container {
  @apply max-w-screen-xl mx-auto px-6 flex flex-col lg:flex-row lg:items-center lg:justify-between gap-12;
}

/* Mobile container adjustments */
@media (max-width: 768px) {
  .hero-container {
    @apply px-4 overflow-x-hidden max-w-full w-full;
  }
}

.hero-left-content {
  @apply flex flex-col gap-8 flex-1 lg:pr-8;
}

/* Mobile left content */
@media (max-width: 768px) {
  .hero-left-content {
    @apply gap-8 pt-10 pb-0 items-start text-left overflow-x-hidden max-w-full w-full;
  }
}

.hero-badge {
  @apply inline-flex items-center gap-3 bg-white rounded-full px-6 py-3 shadow-rafinera max-w-fit;
}

/* Mobile badge */
@media (max-width: 768px) {
  .hero-badge {
    @apply justify-center self-start w-auto;
  }
}

.badge-icon {
  @apply w-6 h-6 flex-shrink-0;
}

.badge-text {
  @apply font-fira font-medium text-xl leading-tight text-rafinera-dark whitespace-nowrap;
}

/* Mobile badge text */
@media (max-width: 768px) {
  .badge-text {
    @apply text-lg;
  }
}

.hero-heading {
  @apply font-fira font-semibold text-5xl lg:text-6xl leading-tight text-rafinera-dark;
  letter-spacing: -0.01em;
}

/* Mobile heading */
@media (max-width: 768px) {
  .hero-heading {
    @apply text-[40px] text-left;
    letter-spacing: -0.01em;
  }
}

.hero-subheading {
  @apply font-fira font-normal text-xl leading-relaxed text-rafinera-gray max-w-lg;
}

/* Mobile subheading */
@media (max-width: 768px) {
  .hero-subheading {
    @apply text-[15px] text-left;
  }
}

.hero-userlist {
  @apply flex flex-col sm:flex-row sm:items-center gap-4;
}

/* Mobile userlist */
@media (max-width: 768px) {
  .hero-userlist {
    @apply items-center text-left;
  }
}

.userlist-avatars {
  @apply flex -space-x-2;
}

.avatar {
  @apply w-12 h-12 rounded-full border-2 border-white object-cover;
}

.userlist-text {
  @apply font-fira font-medium text-base text-rafinera-gray;
}

/* Mobile userlist text */
@media (max-width: 768px) {
  .userlist-text {
    @apply text-sm;
  }
}

.hero-cta {
  @apply flex flex-col sm:flex-row items-start sm:items-center gap-4;
}

/* Mobile CTA */
@media (max-width: 768px) {
  .hero-cta {
    @apply items-center text-left;
  }
}

.hero-cta-button {
  @apply inline-flex items-center gap-3 bg-rafinera-dark text-white px-8 py-4 rounded-xl font-fira font-medium text-lg transition-all duration-300 ease-in-out hover:bg-rafinera-green hover:transform hover:-translate-y-0.5;
}

.hero-cta-icon {
  @apply w-5 h-5;
}

.hero-right-content {
  @apply flex-1 lg:pl-8;
}

.hero-image {
  @apply w-full h-[400px] lg:h-[500px] rounded-[40px] overflow-hidden;
  border-radius: 40px 0 0 40px;
}

/* Mobile image */
@media (max-width: 768px) {
  .hero-image {
    @apply h-[262px] rounded-2xl overflow-x-hidden max-w-full w-full;
  }
}

.hero-main-image {
  @apply w-full h-full object-cover;
  border-radius: 40px 0 0 40px;
}

/* Mobile main image */
@media (max-width: 768px) {
  .hero-main-image {
    @apply rounded-2xl max-w-full w-full;
  }
}

/* Large screens - ensure border radius works */
@media (min-width: 993px) {
  .hero-image {
    border-radius: 40px 0 0 40px !important;
    @apply overflow-hidden;
  }
  
  .hero-main-image {
    border-radius: 40px 0 0 40px !important;
  }
}

/* Responsive layout adjustments */
@media (max-width: 992px) {
  .hero-image {
    order: initial;
  }
}

/* Additional mobile-specific styles */
@media (max-width: 480px) {
  .hero-container {
    @apply px-4;
  }
  
  .hero-heading {
    @apply text-4xl;
  }
  
  .hero-subheading {
    @apply text-sm;
  }
  
  .hero-cta-button {
    @apply px-6 py-3 text-base;
  }
  
  .badge-text {
    @apply text-base;
  }
}

/* Utility classes for hero animations */
.hero-fade-in {
  @apply animate-fade-in;
}

.hero-slide-up {
  @apply animate-slide-up;
}

.hero-bounce-light {
  @apply animate-bounce-light;
}