/*==================================================
    IndiaRadio 2026 - Archive Styles (Optimized)
    Only duplicates removed, all classes kept
==================================================*/

/*========== ARCHIVE PAGE ==========*/
.archive-page {
    display: flex;
    flex-direction: column;
    gap: 30px;
    animation: archiveFade 0.25s ease;
}

@keyframes archiveFade {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: none; }
}

/*========== ARCHIVE HEADER ==========*/
.archive-header {
    text-align: center;
    margin-bottom: 12px;
}

@media (min-width: 768px) {
    .archive-header {
        margin-bottom: 20px;
    }
}

.archive-title {
    font-size: clamp(28px, 4vw, 42px);
    font-weight: 700;
    line-height: 1.25;
    margin-bottom: 12px;
}

.archive-description {
    max-width: 760px;
    margin: auto;
    color: var(--text-soft);
    line-height: 1.7;
}

/*========== ARCHIVE INFO ==========*/
.archive-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 22px;
    color: var(--text-muted);
}

.archive-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 0 16px;
    border-radius: 999px;
    background: var(--surface);
    border: 1px solid var(--border);
    font-weight: 600;
}

/*========== ARCHIVE TOOLBAR ==========*/
.archive-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 24px;
}

@media (min-width: 1200px) {
    .archive-toolbar {
        justify-content: space-between;
        align-items: center;
    }
}

/*========== ARCHIVE SEARCH ==========*/
.archive-search {
    width: 100%;
    max-width: 460px;
}

.archive-search input {
    width: 100%;
}

/*========== EMPTY STATE ==========*/
.archive-empty {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    min-height: 240px;
    padding: 40px;
    border: 2px dashed var(--border);
    border-radius: 20px;
    background: var(--surface);
    color: var(--text-muted);
}

/*========== CONTENT BOX ==========*/
.archive-box {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 24px;
    box-shadow: var(--shadow-sm);
}

/*========== GRID (Category, State, Language) ==========*/
.category-grid,
.state-grid,
.language-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
}

@media (min-width: 768px) {
    .category-grid,
    .state-grid,
    .language-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1200px) {
    .category-grid,
    .state-grid,
    .language-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/*========== GRID CARDS ==========*/
.category-card,
.state-card,
.language-card {
    display: block;
    background: linear-gradient(180deg, var(--surface), var(--surface-2));
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 20px;
    transition: transform 0.25s, border-color 0.25s, box-shadow 0.25s;
}

.category-card:hover,
.state-card:hover,
.language-card:hover {
    transform: translateY(-4px);
    border-color: var(--primary);
    box-shadow: var(--shadow);
}

/*========== CARD TITLES ==========*/
.category-name,
.state-name,
.language-name {
    display: flex;
    flex-direction: column;
    gap: 10px;
    color: var(--text);
    font-size: 18px;
    font-weight: 600;
    line-height: 1.5;
}

/*========== STATION COUNT ==========*/
.station-count {
    display: inline-flex;
    align-items: center;
    width: max-content;
    padding: 6px 14px;
    border-radius: 999px;
    background: rgba(124, 58, 237, 0.14);
    color: var(--primary-light);
    font-size: 13px;
    font-weight: 700;
}

/*========== PAGINATION ==========*/
.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 36px;
}

.pagination .page-item {
    list-style: none;
}

.pagination .page-link {
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 35px;
    height: 35px;
    padding: 0 10px;
    border-radius: 10px;
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text-soft);
    transition: 0.25s;
}

.pagination .page-link:hover {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}

.pagination .active .page-link {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
}

.pagination .disabled .page-link {
    opacity: 0.45;
    pointer-events: none;
}

/*========== ARCHIVE HERO ==========*/
.archive-hero {
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.20), rgba(124, 58, 237, 0.05));
    border: 1px solid rgba(124, 58, 237, 0.25);
    border-radius: 22px;
    padding: 28px;
}

/*========== ARCHIVE BREADCRUMB ==========*/
.archive-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 18px;
    color: var(--text-muted);
}

.archive-breadcrumb a {
    color: var(--primary-light);
}

.archive-breadcrumb a:hover {
    color: #fff;
}

/*========== REDUCED MOTION ==========*/
@media (prefers-reduced-motion: reduce) {
    .archive-page {
        animation: none;
    }
}