/**
 * Featured Products Section Styles
 * Modern BEM structure with React-inspired design
 * Uses existing product card styles
 *
 * @package Flavor_Starter
 * @version 1.0.0
 */

/* ========================================
   Featured Products - Base
   ======================================== */
.ta_featured-products {
  position: relative;
  padding: 80px 0;
  background: #ffffff;
}

/* Section Header styles moved to shared component: section-heading.css */

/* ========================================
   Products Grid
   ======================================== */
.ta_featured-products__grid {
  display: grid;
  gap: var(--space-6, 30px);
  margin-bottom: var(--space-8, 48px);
}

/* Grid Columns */
.ta_featured-products__grid--col-2 {
  grid-template-columns: repeat(2, 1fr);
}

.ta_featured-products__grid--col-3 {
  grid-template-columns: repeat(3, 1fr);
}

.ta_featured-products__grid--col-4 {
  grid-template-columns: repeat(4, 1fr);
}

.ta_featured-products__grid--col-5 {
  grid-template-columns: repeat(5, 1fr);
}

.ta_featured-products__grid--col-6 {
  grid-template-columns: repeat(6, 1fr);
}

/* ========================================
   Empty State
   ======================================== */
.ta_featured-products__empty {
  text-align: center;
  padding: var(--space-10, 60px) var(--space-4, 20px);
  color: var(--text-muted, #9ca3af);
  font-size: var(--text-lg, 1.125rem);
}

/* ========================================
   Footer (Button)
   ======================================== */
.ta_featured-products__footer {
  text-align: center;
  margin-top: var(--space-8, 48px);
}

.ta_featured-products__button {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2, 8px);
  padding: 14px 32px;
  font-size: var(--text-base, 1rem);
  font-weight: var(--font-semibold, 600);
  color: #ffffff;
  background: var(--primary-color, var(--primary, #3b82f6));
  border: none;
  border-radius: var(--radius-lg, 8px);
  text-decoration: none;
  cursor: pointer;
  transition: all var(--transition-fast, 150ms)
    var(--ease-in-out, cubic-bezier(0.4, 0, 0.2, 1));
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.ta_featured-products__button:hover {
  background: var(--primary-color, var(--primary-dark, #2563eb));
  transform: translateY(-2px);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
    0 4px 6px -2px rgba(0, 0, 0, 0.05);
  color: #ffffff;
}

.ta_featured-products__button:focus-visible {
  outline: 2px solid var(--primary-color, var(--primary, #3b82f6));
  outline-offset: 2px;
}

.ta_featured-products__button-icon {
  flex-shrink: 0;
  transition: transform var(--transition-fast, 150ms)
    var(--ease-in-out, cubic-bezier(0.4, 0, 0.2, 1));
}

.ta_featured-products__button:hover .ta_featured-products__button-icon {
  transform: translateX(4px);
}

/* ========================================
   Animations
   ======================================== */
@keyframes ta-featured-fade-in-up {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.ta_featured-products__header {
  animation: ta-featured-fade-in-up 0.6s
    var(--ease-out, cubic-bezier(0, 0, 0.2, 1)) 0.1s backwards;
}

.ta_featured-products__grid {
  animation: ta-featured-fade-in-up 0.6s
    var(--ease-out, cubic-bezier(0, 0, 0.2, 1)) 0.2s backwards;
}

.ta_featured-products__footer {
  animation: ta-featured-fade-in-up 0.6s
    var(--ease-out, cubic-bezier(0, 0, 0.2, 1)) 0.3s backwards;
}

/* ========================================
   Divider with Star Icon
   ======================================== */
.ta_intro-section__divider.white {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4, 16px);
  margin-bottom: var(--space-8, 48px);
}

.white .ta_intro-section__divider-line {
  flex: 1;
  height: 2px;
  max-width: 150px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--intro-text-color, rgba(255, 255, 255, 0.6)) 50%,
    transparent 100%
  );
  position: relative;
}

.white .ta_intro-section__divider-line--left {
  background: linear-gradient(90deg, transparent 0%, #111827 100%);
}

.white .ta_intro-section__divider-line--right {
  background: linear-gradient(90deg, #111827 0%, transparent 100%);
}

.white .ta_intro-section__divider-icon {
  flex-shrink: 0;
  color: #111827;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
  animation: ta-intro-star-pulse 3s ease-in-out infinite;
}

/* ========================================
   Responsive
   ======================================== */

/* Tablet */
@media (max-width: 991px) {
  .ta_featured-products {
    padding: 60px 0;
  }

  .ta_featured-products__header {
    margin-bottom: var(--space-8, 48px);
  }

  .ta_featured-products__grid {
    gap: var(--space-5, 24px);
  }

  /* Adjust grid columns for tablet */
  .ta_featured-products__grid--col-4,
  .ta_featured-products__grid--col-5,
  .ta_featured-products__grid--col-6 {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Mobile Large */
@media (max-width: 767px) {
  .ta_featured-products {
    padding: 50px 0;
  }

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

  .ta_featured-products__grid {
    gap: var(--space-4, 20px);
  }

  /* Adjust grid columns for mobile */
  .ta_featured-products__grid--col-3,
  .ta_featured-products__grid--col-4,
  .ta_featured-products__grid--col-5,
  .ta_featured-products__grid--col-6 {
    grid-template-columns: repeat(2, 1fr);
  }

  .ta_featured-products__button {
    padding: 12px 28px;
    font-size: var(--text-sm, 0.875rem);
  }
}

/* Mobile Small */
@media (max-width: 549px) {
  .ta_featured-products__grid {
    gap: var(--space-3, 16px);
  }

  /* Single column on very small screens */
  .ta_featured-products__grid--col-4,
  .ta_featured-products__grid--col-5,
  .ta_featured-products__grid--col-6 {
    grid-template-columns: 1fr 1fr;
  }

  .ta_featured-products__button {
    width: 100%;
    justify-content: center;
  }
}

/* ========================================
   Print Styles
   ======================================== */
@media print {
  .ta_featured-products {
    padding: 20px 0;
  }

  .ta_featured-products__button {
    display: none;
  }

  .ta_featured-products__grid {
    gap: 15px;
  }
}