/**
 * Wiki-specific Styles
 *
 * @package SeriesWiki
 */

/* Breadcrumb */
.wiki-breadcrumb {
    margin-bottom: var(--space-6);
}

.wiki-breadcrumb__list {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2);
    font-size: var(--text-sm);
}

.wiki-breadcrumb__item {
    color: var(--text-secondary);
}

.wiki-breadcrumb__link {
    color: var(--text-secondary);
    transition: color var(--transition-fast);
}

.wiki-breadcrumb__link:hover {
    color: var(--text-primary);
}

.wiki-breadcrumb__separator {
    color: var(--text-tertiary);
}

.wiki-breadcrumb__current {
    color: var(--text-primary);
    font-weight: var(--font-weight-medium);
}

/* Article Header */
.wiki-article__header {
    margin-bottom: var(--space-6);
    padding-bottom: var(--space-6);
    border-bottom: 1px solid var(--border);
}

.wiki-article__title {
    font-size: var(--text-3xl);
    font-weight: var(--font-weight-bold);
    margin-bottom: var(--space-3);
    line-height: var(--line-height-tight);
}

.wiki-article__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

/* Wiki Sections */
.wiki-section {
    margin-bottom: var(--space-8);
}

.wiki-section__title {
    font-size: var(--text-xl);
    font-weight: var(--font-weight-semibold);
    margin-bottom: var(--space-4);
    padding-bottom: var(--space-2);
    border-bottom: 1px solid var(--border);
}

.wiki-description,
.wiki-text {
    font-size: var(--text-base);
    line-height: var(--line-height-relaxed);
    color: var(--text-primary);
}

.wiki-description p,
.wiki-text p {
    margin-bottom: var(--space-4);
}

/* Wiki Image */
.wiki-image {
    margin-bottom: var(--space-4);
    border-radius: var(--radius-lg);
    overflow: hidden;
    background-color: var(--bg-secondary);
}

.wiki-image img {
    width: 100%;
    height: auto;
}

/* Info Box */
.wiki-infobox {
    background-color: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.wiki-infobox__image {
    width: 100%;
    aspect-ratio: 1;
    background-color: var(--bg-tertiary);
    overflow: hidden;
}

.wiki-infobox__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.wiki-infobox__properties {
    padding: var(--space-4);
}

/* Relation Cards */
.wiki-relations {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    margin-top: var(--space-8);
}

.wiki-relation-card {
    background-color: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
}

.wiki-relation-card__title {
    font-size: var(--text-base);
    font-weight: var(--font-weight-semibold);
    margin-bottom: var(--space-3);
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.wiki-relation-card__count {
    font-size: var(--text-sm);
    color: var(--text-tertiary);
    font-weight: var(--font-weight-normal);
}

.wiki-relation-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    margin-bottom: var(--space-3);
}

.wiki-relation-item {
    border-radius: var(--radius-md);
    transition: background-color var(--transition-fast);
}

.wiki-relation-item:hover {
    background-color: var(--bg-hover);
}

.wiki-relation-link {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    color: var(--text-primary);
}

.wiki-relation-thumb {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md);
    object-fit: cover;
    flex-shrink: 0;
    background-color: var(--bg-tertiary);
}

.wiki-relation-content {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    min-width: 0;
}

.wiki-relation-name {
    font-size: var(--text-sm);
    font-weight: var(--font-weight-medium);
    color: var(--text-primary);
}

.wiki-relation-meta {
    font-size: var(--text-xs);
    color: var(--text-secondary);
}

.wiki-relation-expand {
    width: 100%;
    padding: var(--space-2);
    font-size: var(--text-sm);
    color: var(--accent);
    background-color: var(--bg-primary);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.wiki-relation-expand:hover {
    background-color: var(--bg-hover);
    border-color: var(--border-hover);
}

/* Archive/List View */
.wiki-archive__header {
    margin-bottom: var(--space-6);
    padding-bottom: var(--space-4);
    border-bottom: 1px solid var(--border);
}

.wiki-archive__title {
    font-size: var(--text-3xl);
    font-weight: var(--font-weight-bold);
    margin-bottom: var(--space-2);
}

.wiki-archive__count {
    font-size: var(--text-base);
    color: var(--text-secondary);
}

.wiki-archive__filters {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    margin-bottom: var(--space-6);
    padding: var(--space-4);
    background-color: var(--bg-secondary);
    border-radius: var(--radius-lg);
}

.wiki-archive__no-results {
    text-align: center;
    padding: var(--space-12);
    color: var(--text-secondary);
}

/* Home Page */
.wiki-home {
    max-width: 1200px;
}

.wiki-home__header {
    text-align: center;
    margin-bottom: var(--space-12);
    padding: var(--space-8) 0;
}

.wiki-home__title {
    font-size: var(--text-3xl);
    font-weight: var(--font-weight-bold);
    margin-bottom: var(--space-3);
}

.wiki-home__description {
    font-size: var(--text-lg);
    color: var(--text-secondary);
    max-width: 600px;
    margin: 0 auto;
}

.wiki-home__section {
    margin-bottom: var(--space-12);
}

.wiki-home__section-title {
    font-size: var(--text-2xl);
    font-weight: var(--font-weight-semibold);
    margin-bottom: var(--space-6);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--border);
}

/* No Results */
.wiki-archive__empty {
    text-align: center;
    padding: var(--space-16) var(--space-4);
}

.wiki-archive__empty p {
    font-size: var(--text-lg);
    color: var(--text-secondary);
}

/* Loading States */
.wiki-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-12);
    color: var(--text-secondary);
}

/* Hidden */
[hidden] {
    display: none !important;
}

/* Utility Classes */
.text-center {
    text-align: center;
}

.text-right {
    text-align: right;
}

.text-muted {
    color: var(--text-secondary);
}

.text-small {
    font-size: var(--text-sm);
}

.mb-0 { margin-bottom: 0; }
.mb-2 { margin-bottom: var(--space-2); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-6 { margin-bottom: var(--space-6); }
.mb-8 { margin-bottom: var(--space-8); }

.mt-0 { margin-top: 0; }
.mt-2 { margin-top: var(--space-2); }
.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }
.mt-8 { margin-top: var(--space-8); }