/* Components - Reusable UI components */

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  font-weight: var(--font-weight-medium);
  border-radius: var(--radius-md);
  transition: all var(--transition-fast);
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}
.btn:hover { text-decoration: none; }
.btn-primary { background-color: var(--color-primary); color: white; }
.btn-primary:hover { background-color: var(--color-primary-hover); color: white; }
.btn-secondary { background-color: var(--color-bg-secondary); color: var(--color-text); border: 1px solid var(--color-border); }
.btn-secondary:hover { background-color: var(--color-bg-tertiary); color: var(--color-text); }

/* Tags */
.tag {
  display: inline-block;
  padding: var(--space-1) var(--space-3);
  background-color: var(--color-bg-secondary);
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  border-radius: var(--radius-full);
  transition: all var(--transition-fast);
  text-decoration: none;
}
.tag:hover { background-color: var(--color-primary-light); color: var(--color-primary); text-decoration: none; }
.tag-small { font-size: var(--font-size-xs); padding: 0.125rem var(--space-2); }
.tag-list, .tag-cloud { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.tag-cloud-large .tag { padding: var(--space-2) var(--space-4); }
.tag-count { font-size: var(--font-size-xs); opacity: 0.7; margin-left: var(--space-1); }

/* Cards */
.card {
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  transition: box-shadow var(--transition-fast);
}
.card:hover { box-shadow: var(--shadow-md); }

/* Post Cards */
.post-card {
  display: block;
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  transition: all var(--transition-fast);
  text-decoration: none;
}
.post-card:hover { border-color: var(--color-primary); box-shadow: var(--shadow-md); text-decoration: none; }
.post-card-title { font-size: var(--font-size-lg); font-weight: var(--font-weight-semibold); color: var(--color-text); margin-bottom: var(--space-2); line-height: var(--line-height-tight); }
.post-card-meta { display: flex; flex-wrap: wrap; gap: var(--space-3); font-size: var(--font-size-sm); color: var(--color-text-muted); margin-bottom: var(--space-3); }
.post-card-excerpt { font-size: var(--font-size-sm); color: var(--color-text-secondary); line-height: var(--line-height-relaxed); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.post-card-tags { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); }

/* Post Grid & List */
.post-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--space-6); }
.post-list { display: flex; flex-direction: column; gap: var(--space-4); }
.post-list-static { list-style: none; padding: 0; }
.post-list-static li { margin-bottom: var(--space-3); }

/* Post Item */
.post-item { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-4); border-bottom: 1px solid var(--color-border-light); transition: background-color var(--transition-fast); }
.post-item:hover { background-color: var(--color-bg-secondary); }
.post-item:last-child { border-bottom: none; }
.post-item-title { font-weight: var(--font-weight-medium); color: var(--color-text); }
.post-item-title:hover { color: var(--color-primary); }
.post-item-meta { font-size: var(--font-size-sm); color: var(--color-text-muted); }

/* Search Box */
.search-box { position: relative; max-width: 480px; margin: 0 auto; }
.search-input {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  font-size: var(--font-size-base);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background-color: var(--color-bg);
  color: var(--color-text);
  transition: all var(--transition-fast);
}
.search-input:focus { border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-light); outline: none; }
.search-input::placeholder { color: var(--color-text-muted); }
.search-results { position: absolute; top: 100%; left: 0; right: 0; background-color: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-lg); margin-top: var(--space-2); box-shadow: var(--shadow-lg); max-height: 400px; overflow-y: auto; z-index: var(--z-dropdown); display: none; }
.search-results.active { display: block; }
.search-result-item { display: block; padding: var(--space-3) var(--space-4); text-decoration: none; transition: background-color var(--transition-fast); }
.search-result-item:hover, .search-result-item.active { background-color: var(--color-bg-secondary); }
.search-result-title { font-weight: var(--font-weight-medium); color: var(--color-text); }
.search-result-excerpt { font-size: var(--font-size-sm); color: var(--color-text-muted); margin-top: var(--space-1); }
.search-no-results { padding: var(--space-4); text-align: center; color: var(--color-text-muted); }

/* Avatar */
.avatar-placeholder { width: 120px; height: 120px; border-radius: var(--radius-full); background-color: var(--color-primary); color: white; display: flex; align-items: center; justify-content: center; font-size: var(--font-size-3xl); font-weight: var(--font-weight-bold); }

/* Work Cards */
.works-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--space-5); }
.work-card { background-color: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-5); transition: all var(--transition-fast); }
.work-card:hover { border-color: var(--color-primary); box-shadow: var(--shadow-md); }
.work-title { font-size: var(--font-size-lg); font-weight: var(--font-weight-semibold); margin-bottom: var(--space-2); }
.work-desc { font-size: var(--font-size-sm); color: var(--color-text-secondary); margin-bottom: var(--space-3); }
.work-tags { display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* Skills */
.skills-list { display: flex; flex-direction: column; gap: var(--space-4); }
.skill-item { padding: var(--space-4); background-color: var(--color-bg-secondary); border-radius: var(--radius-md); }
.skill-name { font-size: var(--font-size-base); font-weight: var(--font-weight-semibold); margin-bottom: var(--space-1); }
.skill-detail { font-size: var(--font-size-sm); color: var(--color-text-secondary); margin: 0; }

/* External Links */
.external-links { list-style: none; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.external-link { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-4); background-color: var(--color-bg-secondary); border-radius: var(--radius-md); transition: all var(--transition-fast); }
.external-link:hover { background-color: var(--color-primary-light); text-decoration: none; }
.link-icon { display: flex; color: var(--color-text-secondary); }
.link-arrow::after { content: " →"; }

/* Error Page */
.error-page { text-align: center; padding: var(--space-16) 0; }
.error-code { font-size: 6rem; font-weight: var(--font-weight-bold); color: var(--color-text-muted); line-height: 1; margin-bottom: var(--space-4); }
.error-title { font-size: var(--font-size-2xl); margin-bottom: var(--space-4); }
.error-desc { color: var(--color-text-secondary); margin-bottom: var(--space-8); }
.error-actions { display: flex; gap: var(--space-4); justify-content: center; flex-wrap: wrap; }

/* TOC */
.toc { background-color: var(--color-bg-secondary); border-radius: var(--radius-lg); padding: var(--space-5); margin-bottom: var(--space-8); }
.toc-title { font-size: var(--font-size-base); font-weight: var(--font-weight-semibold); margin-bottom: var(--space-3); }
.toc-list { list-style-position: inside; padding-left: 0; margin: 0; }
.toc-list li { margin-bottom: var(--space-2); }
.toc-list a { color: var(--color-text-secondary); }
.toc-list a:hover { color: var(--color-primary); }

/* Reading Progress */
.reading-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; background-color: var(--color-bg-tertiary); z-index: var(--z-sticky); }
.reading-progress-bar { height: 100%; background-color: var(--color-primary); width: 0; transition: width 100ms ease-out; }

/* Post Share */
.post-share { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4) 0; border-top: 1px solid var(--color-border); margin-top: var(--space-8); }
.share-label { font-size: var(--font-size-sm); color: var(--color-text-muted); }
.share-link { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--radius-full); background-color: var(--color-bg-secondary); color: var(--color-text-secondary); transition: all var(--transition-fast); }
.share-link:hover { background-color: var(--color-primary); color: white; }

/* Post Navigation */
.post-nav { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); padding: var(--space-6) 0; border-top: 1px solid var(--color-border); margin-top: var(--space-4); }
.post-nav-item { display: flex; flex-direction: column; gap: var(--space-1); }
.post-nav-next { text-align: right; }
.post-nav-label { font-size: var(--font-size-sm); color: var(--color-text-muted); }
.post-nav-link { font-weight: var(--font-weight-medium); }
@media (max-width: 640px) { .post-nav { grid-template-columns: 1fr; } .post-nav-next { text-align: left; } }