src/theme/BlogArchivePage/styles.module.css

/**
 * BlogArchivePage Styles
 * Chronological archive of all blog posts.
 */

.header {
  padding-top: var(--section-spacing-md);
  padding-bottom: var(--section-spacing-xs);
}

.backLink {
  display: inline-flex;
  align-items: center;
  gap: var(--ai-spacing-xs);
  font-size: 1.4rem;
  font-weight: 500;
  color: var(--ai-blue);
  text-decoration: none;
  margin-bottom: var(--ai-spacing-lg);
}

.backLink::before {
  content: '\2190';
}

.backLink:hover {
  text-decoration: underline;
}

.title {
  font-size: clamp(3.2rem, 2.5rem + 2vw, 4.8rem);
  font-weight: 700;
  line-height: 1.2;
  color: var(--ai-text-primary);
  margin: 0 0 var(--ai-spacing-md) 0;
}

.description {
  font-size: clamp(1.6rem, 1.4rem + 0.5vw, 2rem);
  line-height: 1.6;
  color: var(--ai-text-secondary);
  margin: 0;
}

/* Tag Filter Section */
.tagFilter {
  padding: var(--ai-spacing-xl) 0;
  margin-bottom: var(--ai-spacing-lg);
  border-bottom: 1px solid var(--ai-border-light);
}

.tagFilterHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--ai-spacing-md);
}

.tagFilterLabel {
  font-size: 1.6rem;
  font-weight: 600;
  color: var(--ai-text-primary);
}

.clearFilter {
  font-size: 1.4rem;
  font-weight: 500;
  color: var(--ai-blue);
  background: none;
  border: none;
  padding: var(--ai-spacing-xs) var(--ai-spacing-sm);
  cursor: pointer;
  transition: color var(--ai-transition-normal);
}

.clearFilter:hover {
  color: var(--ai-blue-dark);
  text-decoration: underline;
}

.tagFilterList {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ai-spacing-xs);
}

.filterTag {
  font-size: 1.3rem;
  color: var(--ai-text-secondary);
  background: var(--ai-gray-100);
  padding: 6px 14px;
  border-radius: var(--ai-radius-full);
  border: 2px solid transparent;
  cursor: pointer;
  transition: all var(--ai-transition-normal);
  font-family: inherit;
}

.filterTag:hover {
  background: var(--ai-gray-200);
  border-color: var(--ai-border-medium);
}

.filterTagActive {
  color: var(--ai-blue);
  background: var(--ai-blue-lighter);
  border-color: var(--ai-blue);
  font-weight: 600;
}

.filterTagCount {
  color: var(--ai-text-tertiary);
  font-size: 1.2rem;
}

.filterTagActive .filterTagCount {
  color: var(--ai-blue);
}

/* Archive Content */
.archiveContent {
  padding-bottom: var(--section-spacing-md);
}

/* Empty State */
.emptyState {
  text-align: center;
  padding: var(--ai-spacing-2xl);
  color: var(--ai-text-secondary);
}

.emptyState p {
  font-size: 1.6rem;
  margin-bottom: var(--ai-spacing-lg);
}

.clearFilterButton {
  font-size: 1.5rem;
  font-weight: 500;
  color: white;
  background: var(--ai-blue);
  padding: var(--ai-spacing-sm) var(--ai-spacing-lg);
  border: none;
  border-radius: var(--ai-radius-md);
  cursor: pointer;
  transition: background var(--ai-transition-normal);
}

.clearFilterButton:hover {
  background: var(--ai-blue-dark);
}

.yearSection {
  margin-bottom: var(--ai-spacing-2xl);
}

.yearTitle {
  font-size: 2.4rem;
  font-weight: 700;
  color: var(--ai-text-primary);
  margin: 0 0 var(--ai-spacing-lg) 0;
  padding-bottom: var(--ai-spacing-sm);
  border-bottom: 2px solid var(--ai-blue);
  display: inline-block;
}

.postList {
  list-style: none;
  padding: 0;
  margin: 0;
}

.postItem {
  border-bottom: 1px solid var(--ai-border-light);
}

.postItem:last-child {
  border-bottom: none;
}

.postContent {
  padding: var(--ai-spacing-md) 0;
}

.postLink {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--ai-spacing-lg);
  text-decoration: none;
  transition: background var(--ai-transition-normal);
}

.postLink:hover {
  text-decoration: none;
}

.postTitle {
  font-size: 1.7rem;
  font-weight: 500;
  color: var(--ai-text-primary);
  line-height: 1.4;
  transition: color var(--ai-transition-normal);
}

.postLink:hover .postTitle {
  color: var(--ai-blue);
}

.postDate {
  font-size: 1.4rem;
  color: var(--ai-text-secondary);
  white-space: nowrap;
  flex-shrink: 0;
}

.postTags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ai-spacing-xs);
  margin-top: var(--ai-spacing-sm);
}

.postTag {
  font-size: 1.3rem;
  color: var(--ai-blue);
  background: var(--ai-blue-lighter);
  padding: 4px 12px;
  border-radius: var(--ai-radius-full);
  border: 1px solid transparent;
  cursor: pointer;
  transition: all var(--ai-transition-normal);
  font-family: inherit;
}

.postTag:hover {
  background: var(--ai-blue-light);
  border-color: var(--ai-blue);
}

.postTagActive {
  background: var(--ai-blue);
  color: white;
  font-weight: 600;
  border-color: var(--ai-blue-dark);
}

@media (max-width: 768px) {
  .header {
    padding-top: var(--section-spacing-sm);
  }

  .tagFilter {
    padding: var(--ai-spacing-lg) 0;
  }

  .tagFilterHeader {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--ai-spacing-sm);
  }

  .tagFilterLabel {
    font-size: 1.5rem;
  }

  .filterTag {
    font-size: 1.2rem;
    padding: 5px 12px;
  }

  .postLink {
    flex-direction: column;
    gap: var(--ai-spacing-xs);
  }

  .postTitle {
    font-size: 1.6rem;
  }

  .postDate {
    font-size: 1.3rem;
  }

  .postTag {
    font-size: 1.2rem;
    padding: 3px 10px;
  }

  .emptyState {
    padding: var(--ai-spacing-xl);
  }

  .emptyState p {
    font-size: 1.5rem;
  }
}