/**
 * Introduction Section Styles
 * Modern BEM structure with React-inspired design
 * Based on reference HTML design
 *
 * @package Flavor_Starter
 * @version 1.0.0
 */

/* ========================================
   Introduction Section - Base
   ======================================== */
.ta_intro-section {
  position: relative;
  padding: 50px 0;
  background: linear-gradient(
    135deg,
    var(--intro-bg-color, var(--primary-color, #3b82f6)) 0%,
    var(--intro-bg-color, var(--primary-color, #2563eb)) 100%
  );
  overflow: hidden;
  isolation: isolate;
}

/* ========================================
   Background Pattern
   ======================================== */
.ta_intro-section__pattern {
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 0.4;
}

.ta_intro-section__pattern-svg {
  width: 100%;
  height: 100%;
  color: #ffffff;
}

/* ========================================
   Inner Container
   ======================================== */
.ta_intro-section__inner {
  position: relative;
  z-index: 2;
  margin: 0 auto;
  text-align: center;
}

/* Title and Divider styles moved to shared component: section-heading.css */

/* ========================================
   Content
   ======================================== */
.ta_intro-section__content {
  font-size: clamp(1rem, 2vw, 1.125rem);
  line-height: var(--leading-relaxed, 1.75);
  color: var(--intro-text-color, rgba(255, 255, 255, 0.95));
}

.ta_intro-section__content p:last-child {
  margin-bottom: 0;
}

.ta_intro-section__content strong {
  font-weight: var(--font-semibold, 600);
  color: var(--intro-text-color, #ffffff);
}

/* Divider and Star styles moved to shared component: section-heading.css */

@keyframes ta-intro-fade-in-up {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.ta_intro-section__inner {
  animation: ta-intro-fade-in-up 0.8s
    var(--ease-out, cubic-bezier(0, 0, 0.2, 1)) 0.2s backwards;
}

/* ========================================
   Responsive
   ======================================== */
@media (max-width: 991px) {
  .ta_intro-section__title {
    margin-bottom: var(--space-5, 24px);
  }

  .ta_intro-section__divider {
    margin-bottom: var(--space-6, 32px);
  }
}

@media (max-width: 767px) {
  .ta_intro-section__title {
    margin-bottom: var(--space-4, 20px);
    font-size: var(--text-xl);
  }
  .ta_intro-section__divider {
    margin-bottom: var(--space-5, 24px);
    gap: var(--space-3, 12px);
  }

  .ta_intro-section__divider-line {
    max-width: 80px;
  }

  .ta_intro-section__divider-icon {
    width: 20px;
    height: 20px;
  }
  .ta_intro-section__content p {
    text-align: justify;
  }
}