/* post01 custom CSS - White background variant */
/* Overrides defaults from /assets/post.css for white bg */

/* Post section on white background */
[data-post-section] {
  --post-card-bg: #ffffff;
  --post-card-border: 1px solid #e5e7eb;
  --post-card-shadow: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04);
  --post-card-hover-shadow: 0 10px 25px rgba(0,0,0,0.1);
  --post-text-primary: #111827;
  --post-text-secondary: #6b7280;
  --post-text-muted: #9ca3af;
}

/* Style the article cards injected by SSR */
[data-post-section] [class*="post-item"],
[data-post-section] [class*="article-card"],
[data-post-section] [class*="post-card"],
[data-post-section] article {
  background: var(--post-card-bg);
  border: var(--post-card-border);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--post-card-shadow);
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}

[data-post-section] [class*="post-item"]:hover,
[data-post-section] [class*="article-card"]:hover,
[data-post-section] [class*="post-card"]:hover,
[data-post-section] article:hover {
  box-shadow: var(--post-card-hover-shadow);
  transform: translateY(-2px);
}

/* Article card titles */
[data-post-section] h3,
[data-post-section] [class*="post-title"],
[data-post-section] [class*="article-title"] {
  color: var(--post-text-primary);
}

/* Article card summaries/descriptions */
[data-post-section] p,
[data-post-section] [class*="post-summary"],
[data-post-section] [class*="article-excerpt"] {
  color: var(--post-text-secondary);
}

/* Article card meta (date, author) */
[data-post-section] [class*="post-meta"],
[data-post-section] [class*="article-meta"],
[data-post-section] time,
[data-post-section] [class*="date"] {
  color: var(--post-text-muted);
}

/* Category/Label badges inside cards */
[data-post-section] [class*="post-category"],
[data-post-section] [class*="article-tag"],
[data-post-section] [class*="badge"]:not(.badge-green-v2):not(.bg-primary-500\/10) {
  background: #f3f4f6;
  color: #374151;
}

/* Pagination dots - make them visible on white bg */
[data-post-section] .post07-groups-pagination .swiper-pagination-bullet,
[data-post-section] .post-groups-pagination .swiper-pagination-bullet {
  background: rgba(0, 0, 0, 0.2);
  opacity: 1;
}

[data-post-section] .post07-groups-pagination .swiper-pagination-bullet-active,
[data-post-section] .post-groups-pagination .swiper-pagination-bullet-active {
  background: var(--color-primary-500, #6366f1);
  opacity: 1;
  width: 24px;
  border-radius: 12px;
}

/* Navigation arrows - subtle on white bg */
[data-post-section] .post07-groups-nav,
[data-post-section] .post-groups-nav {
  background: #ffffff;
  color: #374151;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  border: 1px solid #e5e7eb;
}

[data-post-section] .post07-groups-nav:hover,
[data-post-section] .post-groups-nav:hover {
  background: #f9fafb;
  box-shadow: 0 4px 12px rgba(0,0,0,0.12);
}

/* Make sure tabs look right on white bg */
[data-post-section] [data-post-tab] {
  color: var(--post-text-secondary);
  border-bottom: 2px solid transparent;
}

[data-post-section] [data-post-tab][data-active],
[data-post-section] [data-post-tab][aria-selected='true'] {
  border-color: var(--color-primary-500, #6366f1);
  background: color-mix(in srgb, var(--color-primary-500, #6366f1) 10%, transparent);
  color: var(--color-primary-500, #6366f1);
  font-weight: 600;
}

/* Post group label */
[data-post-section] [data-post07-group-label] {
  color: var(--post-text-primary);
  font-weight: 600;
}