/**
 * Archive Styles
 * Downloads archive and category pages
 *
 * @package CloveTheme
 * @since 1.0.0
 */

/* ==========================================================================
   ANIMATED ARCHIVE HEADER
   Structure: .archive-header > background effects + content
   ========================================================================== */

.archive-header {
    position: relative;
    padding-block: var(--space-20) var(--space-16);
    text-align: center;
    overflow: hidden;
}

/* Background gradient */
.archive-header__bg {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, var(--color-surface-secondary) 0%, var(--color-surface-primary) 100%);
    z-index: -3;
}

/* Grid pattern overlay */
.archive-header__grid-pattern {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(99, 102, 241, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(99, 102, 241, 0.03) 1px, transparent 1px);
    background-size: 60px 60px;
    mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);
    -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);
    z-index: -2;
}

/* Animated glow orbs */
.archive-header__glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.5;
    z-index: -1;
    animation: archive-glow-pulse 8s ease-in-out infinite;
}

.archive-header__glow--1 {
    top: -20%;
    right: 10%;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(99, 102, 241, 0.35) 0%, transparent 70%);
}

.archive-header__glow--2 {
    bottom: -30%;
    left: 5%;
    width: 350px;
    height: 350px;
    background: radial-gradient(circle, rgba(139, 92, 246, 0.3) 0%, transparent 70%);
    animation-delay: -4s;
    animation-direction: reverse;
}

@keyframes archive-glow-pulse {
    0%, 100% { transform: scale(1); opacity: 0.5; }
    50% { transform: scale(1.15); opacity: 0.35; }
}

@media (prefers-reduced-motion: reduce) {
    .archive-header__glow {
        animation: none;
    }
}

/* Content layer */
.archive-header .container {
    position: relative;
    z-index: 1;
}

.archive-header__label {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    margin-block-end: var(--space-4);
    padding: var(--space-2) var(--space-4);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--color-brand-primary);
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(8px);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-full);
    box-shadow: var(--shadow-sm);
}

.archive-header__label i {
    font-size: 1rem;
}

.archive-header__title {
    margin: 0 0 var(--space-4);
    font-family: var(--font-display);
    font-size: var(--text-4xl);
    font-weight: var(--weight-bold);
    line-height: var(--leading-tight);
}

/* Gradient animated title text */
.archive-header__title-text {
    background: linear-gradient(135deg, var(--color-text-primary) 0%, var(--color-brand-primary) 50%, var(--color-brand-secondary) 100%);
    background-size: 200% auto;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: archive-title-gradient 6s ease-in-out infinite;
}

@keyframes archive-title-gradient {
    0%, 100% { background-position: 0% center; }
    50% { background-position: 100% center; }
}

@media (prefers-reduced-motion: reduce) {
    .archive-header__title-text {
        animation: none;
        background: none;
        -webkit-text-fill-color: var(--color-text-primary);
    }
}

.archive-header__desc {
    margin: 0 0 var(--space-6);
    font-size: var(--text-lg);
    color: var(--color-text-secondary);
    max-width: 600px;
    margin-inline: auto;
}

.archive-header__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-3);
}

.archive-header__count {
    display: inline-block;
    padding: var(--space-1) var(--space-3);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--color-text-tertiary);
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(8px);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-full);
}

/* ==========================================================================
   STICKY FILTER BAR
   Structure: .archive-filter-bar > .archive-filter-bar__row
   ========================================================================== */

.archive-filter-bar {
    position: sticky;
    top: var(--header-height-scrolled, 4rem);
    z-index: var(--z-filter-bar);
    padding-block: var(--space-3);
    background: rgba(255, 255, 255, var(--opacity-glass-strong));
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-block-end: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05);
    transition: box-shadow var(--duration-200) var(--ease-out);
}

.archive-filter-bar.is-sticky {
    box-shadow: var(--shadow-glass);
}

.archive-filter-bar .container {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.archive-filter-bar__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-4);
}

.archive-help-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1-5);
    margin-inline-start: auto;
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--color-brand-primary);
    text-decoration: none;
}

.archive-help-link:hover {
    color: var(--color-brand-secondary);
}

@media (max-width: 767px) {
    .archive-help-link {
        width: 100%;
        justify-content: center;
        margin-inline-start: 0;
    }
}

/* ==========================================================================
   CATEGORY FILTER (inside sticky bar)
   Structure: .category-filter > .category-filter__list > .category-filter__item
   ========================================================================== */

.category-filter {
    flex: 1;
    min-width: 0;
}

.category-filter__list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.category-filter__link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--color-text-secondary);
    background: var(--color-surface-secondary);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-full);
    text-decoration: none;
    transition:
        color var(--duration-200) var(--ease-out),
        background var(--duration-200) var(--ease-out),
        border-color var(--duration-200) var(--ease-out),
        box-shadow var(--duration-200) var(--ease-out);
}

.category-filter__link:hover {
    color: var(--color-brand-primary);
    background: var(--color-surface-primary);
    border-color: var(--color-brand-primary);
}

.category-filter__link.is-active {
    color: var(--color-text-inverse);
    background: var(--gradient-brand);
    border-color: transparent;
    box-shadow: 0 4px 12px -2px rgba(99, 102, 241, 0.4);
}

.category-filter__count {
    padding: var(--space-0-5) var(--space-2);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    background: rgba(0, 0, 0, 0.08);
    border-radius: var(--radius-full);
}

.category-filter__link.is-active .category-filter__count {
    background: rgba(255, 255, 255, 0.2);
}

/* Mobile scrollable filter */
@media (max-width: 767px) {
    .category-filter__list {
        flex-wrap: nowrap;
        justify-content: flex-start;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-inline: var(--space-4);
        margin-inline: calc(-1 * var(--space-4));
    }

    .category-filter__list::-webkit-scrollbar {
        display: none;
    }

    .category-filter__item {
        scroll-snap-align: start;
        flex-shrink: 0;
    }
}

/* ==========================================================================
   ARCHIVE DROPDOWNS (Category & Sort)
   Structure: .archive-dropdown > .select-wrapper > icon + select
   ========================================================================== */

.archive-dropdown {
    display: flex;
    align-items: center;
}

.archive-dropdown__form {
    display: flex;
}

.archive-dropdown .select-wrapper {
    position: relative;
    display: inline-flex;
    align-items: center;
}

/* Icon inside select (left side) */
.archive-dropdown .select-icon {
    position: absolute;
    left: var(--space-3);
    font-size: 1rem;
    color: var(--color-brand-primary);
    pointer-events: none;
    z-index: 1;
}

.archive-dropdown__select {
    appearance: none;
    -webkit-appearance: none;
    height: 2.75rem;
    padding: 0 var(--space-8) 0 var(--space-10);
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--color-text-primary);
    background: var(--color-surface-primary);
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-lg);
    cursor: pointer;
    text-transform: capitalize;
    transition:
        border-color var(--duration-200) var(--ease-out),
        box-shadow var(--duration-200) var(--ease-out);
}

.archive-dropdown__select:hover,
.archive-dropdown__select:focus {
    border-color: var(--color-brand-primary);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.archive-dropdown__select:focus-visible {
    outline: none;
}

/* Caret icon (right side) */
.archive-dropdown .ph-caret-down {
    position: absolute;
    right: var(--space-3);
    font-size: 0.875rem;
    color: var(--color-text-tertiary);
    pointer-events: none;
}


/* ==========================================================================
   TAG PILLS
   Structure: .tag-pills > .tag-pill
   ========================================================================== */

.tag-pills {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.tag-pill {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1-5);
    padding: var(--space-2) var(--space-3);
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--color-text-secondary);
    background: var(--color-surface-secondary);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-full);
    cursor: pointer;
    transition:
        color var(--duration-200) var(--ease-out),
        background var(--duration-200) var(--ease-out),
        border-color var(--duration-200) var(--ease-out),
        box-shadow var(--duration-200) var(--ease-out);
}

.tag-pill i {
    font-size: 1rem;
}

.tag-pill:hover {
    color: var(--color-brand-primary);
    background: var(--color-surface-primary);
    border-color: var(--color-brand-primary);
}

.tag-pill.is-active {
    color: var(--color-text-inverse);
    background: var(--gradient-brand);
    border-color: transparent;
    box-shadow: 0 4px 12px -2px rgba(99, 102, 241, 0.4);
}

.tag-pill:focus-visible {
    outline: 2px solid var(--color-brand-primary);
    outline-offset: 2px;
}

/* Special tag pill colors */
.tag-pill[data-tag="new"] i {
    color: var(--color-success);
}

.tag-pill[data-tag="popular"] i {
    color: #f59e0b;
}

.tag-pill[data-tag="sale"] i {
    color: #ef4444;
}

.tag-pill.is-active i {
    color: currentColor;
}

/* ==========================================================================
   ARCHIVE PRODUCTS
   ========================================================================== */

.archive-products {
    padding-block: var(--space-12);
}

/* ==========================================================================
   PAGINATION
   Structure: .pagination > .pagination__list > .pagination__item
   ========================================================================== */

.pagination {
    margin-block-start: var(--space-12);
    padding-block-start: var(--space-8);
    border-block-start: 1px solid var(--color-border-subtle);
}

.pagination__list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.pagination__item a,
.pagination__item span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-1);
    min-width: 2.5rem;
    height: 2.5rem;
    padding-inline: var(--space-3);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--color-text-secondary);
    background: var(--color-surface-primary);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-lg);
    text-decoration: none;
    transition:
        color var(--duration-200) var(--ease-out),
        background var(--duration-200) var(--ease-out),
        border-color var(--duration-200) var(--ease-out);
}

.pagination__item a:hover {
    color: var(--color-brand-primary);
    background: var(--color-surface-secondary);
    border-color: var(--color-brand-primary);
}

.pagination__item .current {
    color: var(--color-text-inverse);
    background: var(--gradient-brand);
    border-color: transparent;
}

.pagination__item .prev,
.pagination__item .next {
    padding-inline: var(--space-4);
}

.pagination__item i {
    font-size: 0.875rem;
}

/* ==========================================================================
   ARCHIVE EMPTY STATE
   ========================================================================== */

.archive-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-16);
    text-align: center;
}

.archive-empty i {
    font-size: 4rem;
    color: var(--color-text-tertiary);
    margin-block-end: var(--space-6);
}

.archive-empty__title {
    margin: 0 0 var(--space-3);
    font-family: var(--font-display);
    font-size: var(--text-xl);
    font-weight: var(--weight-semibold);
    color: var(--color-text-primary);
}

.archive-empty__desc {
    margin: 0 0 var(--space-6);
    font-size: var(--text-base);
    color: var(--color-text-secondary);
}

/* ==========================================================================
   ARCHIVE TOOLBAR
   Structure: .archive-toolbar > .archive-search + .view-toggle
   ========================================================================== */

.archive-toolbar {
    padding-block: var(--space-4);
    background: var(--color-surface-primary);
    border-block-end: 1px solid var(--color-border-subtle);
}

.archive-toolbar .container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-4);
}

.archive-toolbar__count {
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--color-text-tertiary);
}

/* ==========================================================================
   ARCHIVE SEARCH
   Structure: .archive-search > i + .archive-search__input
   ========================================================================== */

.archive-search {
    position: relative;
    display: flex;
    align-items: center;
    flex: 1;
    max-width: 320px;
}

.archive-search i {
    position: absolute;
    left: var(--space-3);
    font-size: 1.125rem;
    color: var(--color-text-tertiary);
    pointer-events: none;
    transition: color var(--duration-200) var(--ease-out);
}

.archive-search__input {
    width: 100%;
    height: 2.75rem;
    padding: 0 var(--space-4) 0 var(--space-10);
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--color-text-primary);
    background: var(--color-surface-primary);
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-lg);
    transition:
        border-color var(--duration-200) var(--ease-out),
        background-color var(--duration-200) var(--ease-out),
        box-shadow var(--duration-200) var(--ease-out);
}

.archive-search__input::placeholder {
    color: var(--color-text-tertiary);
}

.archive-search__input:hover {
    border-color: var(--color-border-default);
    background: var(--color-surface-primary);
}

.archive-search__input:focus {
    outline: none;
    border-color: var(--color-brand-primary);
    background: var(--color-surface-primary);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}

.archive-search:has(.archive-search__input:focus) i {
    color: var(--color-brand-primary);
}

/* Clear button for search (native) */
.archive-search__input::-webkit-search-cancel-button {
    -webkit-appearance: none;
    height: 16px;
    width: 16px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23475569'%3E%3Cpath d='M12 10.586l4.95-4.95 1.414 1.414L13.414 12l4.95 4.95-1.414 1.414L12 13.414l-4.95 4.95-1.414-1.414L10.586 12l-4.95-4.95L7.05 5.636 12 10.586z'/%3E%3C/svg%3E") center/contain no-repeat;
    cursor: pointer;
}

/* ==========================================================================
   VIEW TOGGLE
   Structure: .view-toggle > .view-toggle__btn
   ========================================================================== */

.view-toggle {
    display: flex;
    gap: var(--space-1);
    margin-inline-start: auto;
}

.view-toggle__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    font-size: 1.25rem;
    color: var(--color-text-tertiary);
    background: var(--color-surface-secondary);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition:
        color var(--duration-200) var(--ease-out),
        background var(--duration-200) var(--ease-out),
        border-color var(--duration-200) var(--ease-out);
}

.view-toggle__btn:hover {
    color: var(--color-brand-primary);
    background: var(--color-surface-primary);
    border-color: var(--color-brand-primary);
}

.view-toggle__btn.is-active {
    color: var(--color-text-inverse);
    background: var(--gradient-brand);
    border-color: transparent;
}

.view-toggle__btn:focus-visible {
    outline: 2px solid var(--color-brand-primary);
    outline-offset: 2px;
}

/* ==========================================================================
   LIST VIEW LAYOUT
   ========================================================================== */

.featured__grid.is-list-view {
    grid-template-columns: 1fr;
    gap: var(--space-4);
}

.featured__grid.is-list-view .featured-card {
    flex-direction: row;
    border-radius: var(--radius-xl);
}

.featured__grid.is-list-view .featured-card__media {
    flex-shrink: 0;
    width: 200px;
    aspect-ratio: 4 / 3;
    border-radius: var(--radius-lg) 0 0 var(--radius-lg);
}

.featured__grid.is-list-view .featured-card__content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: var(--space-4) var(--space-6);
}

.featured__grid.is-list-view .featured-card__title {
    font-size: var(--text-lg);
}

.featured__grid.is-list-view .featured-card__excerpt {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.featured__grid.is-list-view .featured-card__footer {
    margin-block-start: auto;
    padding-block-start: var(--space-3);
}

/* List view mobile */
@media (max-width: 639px) {
    .featured__grid.is-list-view .featured-card {
        flex-direction: column;
    }

    .featured__grid.is-list-view .featured-card__media {
        width: 100%;
        aspect-ratio: 16 / 9;
        border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    }
}

/* ==========================================================================
   NO SEARCH RESULTS
   ========================================================================== */

.archive-no-results {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-16);
    text-align: center;
}

.archive-no-results i {
    font-size: 3rem;
    color: var(--color-text-tertiary);
    margin-block-end: var(--space-4);
}

.archive-no-results__title {
    margin: 0 0 var(--space-2);
    font-family: var(--font-display);
    font-size: var(--text-xl);
    font-weight: var(--weight-semibold);
    color: var(--color-text-primary);
}

.archive-no-results__desc {
    margin: 0;
    font-size: var(--text-base);
    color: var(--color-text-secondary);
}

@media (max-width: 767px) {
    .archive-filter-bar__row {
        flex-wrap: wrap;
        gap: var(--space-2);
    }

    .archive-dropdown {
        width: 100%;
    }

    .archive-dropdown__form {
        flex: 1;
    }

    .archive-dropdown .select-wrapper,
    .archive-dropdown__select {
        width: 100%;
    }

    .archive-search {
        width: 100%;
        max-width: none;
        order: 3;
    }

    .archive-toolbar__count {
        display: none;
    }

    .view-toggle {
        margin-inline-start: auto;
    }
}