/**
 * Recent Updates Section Background Fix
 * Ensures the entire section has one consistent background
 */

/* Light mode - entire section gets one background */
.aiab-updates-section {
  background: #f8f9fa;
  padding: 48px 0;
  margin: 48px 0;
}

.aiab-updates-section .aiab-container {
  background: transparent;
}

/* Remove individual backgrounds from slat items in light mode */
.aiab-slats--with-image li {
  background: transparent;
  border: none;
  padding: 24px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.aiab-slats--with-image li:last-child {
  border-bottom: none;
}

.aiab-slats--with-image a {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  text-decoration: none;
  color: inherit;
  transition: transform 0.2s ease;
}

.aiab-slats--with-image a:hover {
  transform: translateX(4px);
  background: transparent;
}

/* Dark mode - section gets dark background */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .aiab-updates-section {
    background: var(--color-surface, #1c1c1e);
    border-top: 1px solid var(--color-border, #3a3a3c);
    border-bottom: 1px solid var(--color-border, #3a3a3c);
  }

  :root:not([data-theme="light"]) .aiab-slats--with-image li {
    background: transparent;
    border-bottom: 1px solid var(--color-border, #3a3a3c);
  }

  :root:not([data-theme="light"]) .aiab-slats--with-image h3 {
    color: var(--color-text, #ffffff);
  }

  :root:not([data-theme="light"]) .aiab-slats--with-image p {
    color: var(--color-text-secondary, #aeaeb2);
  }

  :root:not([data-theme="light"]) .aiab-slats--with-image .aiab-meta {
    color: var(--color-text-tertiary, #8e8e93);
  }
}

[data-theme="dark"] .aiab-updates-section {
  background: var(--color-surface, #1c1c1e);
  border-top: 1px solid var(--color-border, #3a3a3c);
  border-bottom: 1px solid var(--color-border, #3a3a3c);
}

[data-theme="dark"] .aiab-slats--with-image li {
  background: transparent;
  border-bottom: 1px solid var(--color-border, #3a3a3c);
}

[data-theme="dark"] .aiab-slats--with-image h3 {
  color: var(--color-text, #ffffff);
}

[data-theme="dark"] .aiab-slats--with-image p {
  color: var(--color-text-secondary, #aeaeb2);
}

[data-theme="dark"] .aiab-slats--with-image .aiab-meta {
  color: var(--color-text-tertiary, #8e8e93);
}

/* Fix the colored boxes with icons */
.aiab-slats--with-image figure {
  flex-shrink: 0;
  width: 80px;
  height: 80px;
  margin: 0;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  font-weight: bold;
  color: white;
}

/* Version box */
.aiab-slats--with-image li:nth-child(1) figure {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

/* Icons box */
.aiab-slats--with-image li:nth-child(2) figure {
  background: linear-gradient(135deg, #764ba2 0%, #f093fb 100%);
}

/* E-commerce box */
.aiab-slats--with-image li:nth-child(3) figure {
  background: linear-gradient(135deg, #ffa751 0%, #ff6922 100%);
}

/* Ensure text contrast in the colored boxes */
.aiab-slats--with-image figure img {
  display: none; /* Hide placeholder images */
}

.aiab-slats--with-image figure::before {
  color: white;
  font-weight: 600;
}

.aiab-slats--with-image li:nth-child(1) figure::before {
  content: "2.0";
}

.aiab-slats--with-image li:nth-child(2) figure::before {
  content: "Icons";
}

.aiab-slats--with-image li:nth-child(3) figure::before {
  content: "Shop";
}