/* ============================================
   FEATURES BAR — PREMIUM STYLES
   ============================================ */

.features-bar-section {
  padding: var(--spacing-4xl) 0;
  overflow: hidden;
}

.features-bar-container {
  display: grid;
  gap: var(--spacing-2xl);
  grid-template-columns: repeat(var(--desktop-cols, 4), 1fr);
  width: 100%;
}

/* Grid Columns Logic */
.features-bar-container.columns-1 {
  --desktop-cols: 1;
}
.features-bar-container.columns-2 {
  --desktop-cols: 2;
}
.features-bar-container.columns-3 {
  --desktop-cols: 3;
}
.features-bar-container.columns-4 {
  --desktop-cols: 4;
}
.features-bar-container.columns-5 {
  --desktop-cols: 5;
}
.features-bar-container.columns-6 {
  --desktop-cols: 6;
}

/* Tablet Columns */
.features-bar-container.columns-tablet-1 {
  --tablet-cols: 1;
}
.features-bar-container.columns-tablet-2 {
  --tablet-cols: 2;
}
.features-bar-container.columns-tablet-3 {
  --tablet-cols: 3;
}
.features-bar-container.columns-tablet-4 {
  --tablet-cols: 4;
}

/* Mobile Columns */
.features-bar-container.columns-mobile-1 {
  --mobile-cols: 1;
}
.features-bar-container.columns-mobile-2 {
  --mobile-cols: 2;
}

/* Dividers Logic */
.features-bar-container.has-dividers {
  gap: 0;
}

.has-dividers .feature-item {
  border-inline-end: 1px solid var(--color-border-light);
  border-bottom: 1px solid var(--color-border-light);
  padding: var(--spacing-xl);
}

/* Desktop: Remove end borders */
@media (min-width: 1025px) {
  .has-dividers.columns-1 .feature-item {
    border-inline-end: none;
  }
  .has-dividers.columns-2 .feature-item:nth-child(2n),
  .has-dividers.columns-3 .feature-item:nth-child(3n),
  .has-dividers.columns-4 .feature-item:nth-child(4n),
  .has-dividers.columns-5 .feature-item:nth-child(5n),
  .has-dividers.columns-6 .feature-item:nth-child(6n) {
    border-inline-end: none;
  }
}

/* Tablet: Remove end borders */
@media (max-width: 1024px) and (min-width: 641px) {
  .has-dividers.columns-tablet-1 .feature-item {
    border-inline-end: none;
  }
  .has-dividers.columns-tablet-2 .feature-item:nth-child(2n) {
    border-inline-end: none;
  }
  .has-dividers.columns-tablet-3 .feature-item:nth-child(3n) {
    border-inline-end: none;
  }
  .has-dividers.columns-tablet-4 .feature-item:nth-child(4n) {
    border-inline-end: none;
  }
}

/* Mobile: Remove end borders */
@media (max-width: 640px) {
  .has-dividers.columns-mobile-1 .feature-item {
    border-inline-end: none;
  }
  .has-dividers.columns-mobile-2 .feature-item:nth-child(2n) {
    border-inline-end: none;
  }
}

.feature-item {
  position: relative;
  display: flex;
  flex-direction: column;
  transition: all 0.6s cubic-bezier(0.19, 1, 0.22, 1);
  height: 100%;
}

.feature-icon {
  width: 64px;
  height: 64px;
  margin-bottom: var(--spacing-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1);
  background: var(--color-border-light);
  color: var(--color-accent);
  flex-shrink: 0;
}

.feature-icon img,
.feature-icon svg {
  width: 32px;
  height: 32px;
  object-fit: contain;
}

.feature-title {
  font-family: var(--font-heading);
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: var(--spacing-sm);
  color: var(--color-text);
}

.feature-subtitle {
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--color-text-muted);
  margin: 0;
}

/* --- Style 1: Minimalist Vertical --- */
.section-style_1 .feature-item {
  align-items: center;
  text-align: center;
}
.section-style_1 .feature-icon {
  border-radius: 50%;
  background: transparent;
  border: 1px solid var(--color-border);
}
.section-style_1 .feature-item:hover .feature-icon {
  background: var(--color-surface);
  border-color: var(--color-accent);
  color: var(--color-accent);
  transform: translateY(-5px);
}

/* --- Style 2: Refined Side-by-Side --- */
.section-style_2 .feature-item {
  flex-direction: row;
  align-items: flex-start;
  text-align: left;
  gap: var(--spacing-lg);
}
[dir="rtl"] .section-style_2 .feature-item {
  text-align: right;
}
.section-style_2 .feature-icon {
  width: 48px;
  height: 48px;
  margin-bottom: 0;
  background: transparent;
}
.section-style_2 .feature-item:hover .feature-icon {
  transform: translateX(5px);
}
[dir="rtl"] .section-style_2 .feature-item:hover .feature-icon {
  transform: translateX(-5px);
}

/* --- Style 3: Floating Modern Cards --- */
.section-style_3 .feature-item {
  background: var(--color-card-bg);
  padding: var(--spacing-xl);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-lg);
  /* box-shadow: var(--shadow-sm); */
  align-items: center;
  text-align: center;
}

/* Unified Card Grid Enhancement (Style 3 + Dividers) */
.section-style_3.has-dividers {
  background: var(--color-card-bg);
  border-radius: var(--radius-lg);
  /* box-shadow: var(--shadow-sm); */
  overflow: hidden;
  border: 1px solid var(--color-border-light);
}

.section-style_3.has-dividers .feature-item {
  border-radius: 0;
  box-shadow: none;
  border: none;
  border-inline-end: 1px solid var(--color-border-light);
  border-bottom: 1px solid var(--color-border-light);
}

.section-style_3 .feature-icon {
  background: var(--color-surface);
  border-radius: var(--radius-md);
}

.section-style_3 .feature-item:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-md);
  border-color: rgba(0, 0, 0, 0.05);
  z-index: 2; /* Lift item above dividers on hover */
}

.section-style_3.has-dividers .feature-item:hover {
  background: var(--color-surface);
  box-shadow: none;
  transform: none; /* Keep grid stable */
}

.section-style_3.has-dividers .feature-item:hover .feature-icon {
  transform: translateY(-5px);
}

/* Icon Shapes Global Override */
.feature-icon.shape-circle {
  border-radius: 50% !important;
}
.feature-icon.shape-square {
  border-radius: 0 !important;
}
.feature-icon.shape-squircle {
  border-radius: 35% 65% 65% 35% / 35% 35% 65% 65% !important;
}
.feature-icon.shape-none {
  background: transparent !important;
  padding: 0;
  width: auto;
  height: auto;
}

/* Responsive */
@media (max-width: 1024px) {
  .features-bar-container {
    grid-template-columns: repeat(var(--tablet-cols, 2), 1fr);
    gap: var(--spacing-xl);
  }
}

@media (max-width: 640px) {
  .features-bar-section {
    padding-top: var(--spacing-md) !important;
    padding-bottom: var(--spacing-md) !important;
  }
  .features-bar-container {
    grid-template-columns: repeat(var(--mobile-cols, 1), 1fr);
    gap: var(--spacing-lg);
  }
  .section-style_2 .feature-item {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .section-style_2 .feature-icon {
    margin-bottom: var(--spacing-md);
  }
}

/* ============================================
   DARK MODE REFINEMENTS
   ============================================ */

[data-theme="dark"] .feature-icon {
  background: var(--color-surface);
  border: 1px solid var(--color-border-light);
  color: var(--color-accent);
}

[data-theme="dark"] .feature-icon img {
  filter: brightness(0) invert(1);
  opacity: 0.9;
}

[data-theme="dark"] .feature-icon svg {
  color: var(--color-accent);
}

[data-theme="dark"] .has-dividers .feature-item {
  border-color: var(--color-border-light);
}

[data-theme="dark"] .feature-item:hover .feature-icon {
  background: var(--color-surface-hover);
  border-color: var(--color-border);
  transform: translateY(-4px);
}

[data-theme="dark"] .feature-title {
  color: var(--color-white-static);
  transition: all 0.3s ease;
}

[data-theme="dark"] .feature-item:hover .feature-title {
  color: var(--color-accent);
}

[data-theme="dark"] .feature-subtitle {
  color: var(--color-text-muted);
}

/* Specific Style Overrides for Dark Mode */
[data-theme="dark"] .section-style_1 .feature-icon {
  background: transparent;
  border-color: var(--color-border);
}

[data-theme="dark"] .section-style_3 .feature-item {
  background: var(--color-card-bg);
  border-color: var(--color-border-light);
}

[data-theme="dark"] .section-style_3 .feature-item:hover {
  background: var(--color-surface-hover);
  border-color: var(--color-border);
}

[data-theme="dark"] .section-style_3.has-dividers .feature-item:hover {
  background: var(--color-surface);
}