/**
 * Gas Archive — Reusable archive layout component
 *
 * Provides: hero, filter pills, controls bar (search + sort + display toolbar),
 * masonry / compact / list / magazine layouts, infinite scroll loader,
 * pagination fallback, responsive breakpoints.
 *
 * Usage: apply class `.gas-archive` on the root element, then use
 * `.gas-archive__*` BEM children. Module-specific overrides go in the
 * module's own CSS file (e.g. editorial-archive.css).
 *
 * Requires: gas-design-tokens.css, gas-card.css, gas-buttons.css
 */

/* ==========================================================================
   Hero section
   ========================================================================== */

.gas-archive__hero {
    margin-bottom: var(--gas-space-xl);
}

.gas-archive__hero h1 {
    margin: 0 0 var(--gas-space-s);
    font-size: var(--gas-text-3xl);
    font-weight: var(--gas-weight-bold);
    line-height: var(--gas-leading-tight);
}

.gas-archive__hero p {
    margin: 0;
    color: var(--gas-text-secondary);
    font-size: var(--gas-text-base);
}

.gas-archive__hero-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--gas-space-m);
    margin-top: var(--gas-space-m);
}

.gas-archive__hero-note {
    font-size: var(--gas-text-sm);
    color: var(--gas-text-muted, var(--gas-neutral-400));
    margin: 0;
}

.gas-archive__hero-note a {
    color: var(--gas-primary);
    text-decoration: none;
    font-weight: var(--gas-weight-medium, 500);
}

.gas-archive__hero-note a:hover {
    text-decoration: underline;
}

/* ==========================================================================
   Category filter pills
   ========================================================================== */

.gas-archive__filters {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gas-space-s);
    margin-bottom: var(--gas-space-l);
}

.gas-archive__filter-pill {
    display: inline-flex;
    align-items: center;
    gap: var(--gas-space-xs);
    padding: var(--gas-space-xs) var(--gas-space-m);
    border: 1px solid var(--gas-neutral-200);
    border-radius: var(--gas-radius-full);
    background: var(--gas-bg-surface);
    color: var(--gas-text-secondary);
    font-size: var(--gas-text-sm);
    text-decoration: none;
    transition: all 0.15s ease;
    cursor: pointer;
}

.gas-archive__filter-pill:hover {
    border-color: var(--gas-primary);
    color: var(--gas-primary);
    background: var(--gas-primary-ultra-light);
    text-decoration: none;
}

.gas-archive__filter-pill--active {
    border-color: var(--gas-primary);
    background: var(--gas-primary);
    color: var(--gas-text-color-inverse);
}

.gas-archive__filter-pill--active:hover {
    background: var(--gas-primary-dark);
    border-color: var(--gas-primary-dark);
    color: var(--gas-text-color-inverse);
}

.gas-archive__filter-count {
    font-size: var(--gas-text-xs);
    opacity: 0.7;
}

/* ==========================================================================
   Controls bar (search + sort + display mode)
   ========================================================================== */

.gas-archive__controls {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--gas-space-m);
    margin-bottom: var(--gas-space-l);
}

/* ==========================================================================
   Search
   ========================================================================== */

.gas-archive__search {
    position: relative;
    flex: 1;
    min-width: 200px;
    max-width: 360px;
}

.gas-archive__search-icon {
    position: absolute;
    left: var(--gas-space-s);
    top: 50%;
    transform: translateY(-50%);
    font-size: var(--gas-text-sm);
    color: var(--gas-text-secondary);
    pointer-events: none;
}

.gas-archive__search-input {
    width: 100%;
    padding: var(--gas-space-xs) var(--gas-space-xl) var(--gas-space-xs) calc(var(--gas-space-s) + 20px);
    border: 1px solid var(--gas-neutral-200);
    border-radius: var(--gas-radius-full);
    background: var(--gas-bg-surface);
    color: var(--gas-text-primary);
    font-size: var(--gas-text-sm);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    outline: none;
}

.gas-archive__search-input::placeholder {
    color: var(--gas-text-muted, var(--gas-neutral-400));
}

.gas-archive__search-input:focus {
    border-color: var(--gas-primary);
    box-shadow: 0 0 0 2px var(--gas-primary-ultra-light);
}

.gas-archive__search-spinner {
    position: absolute;
    right: var(--gas-space-s);
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    border: 2px solid var(--gas-neutral-200);
    border-top-color: var(--gas-primary);
    border-radius: 50%;
    animation: gas-archive-spin 0.6s linear infinite;
}

.gas-archive__search-clear {
    position: absolute;
    right: var(--gas-space-xs);
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border: none;
    border-radius: 50%;
    background: var(--gas-neutral-200);
    color: var(--gas-text-secondary);
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    transition: background 0.15s ease;
}

.gas-archive__search-clear:hover {
    background: var(--gas-neutral-300, #ccc);
}

.gas-archive__search-status {
    margin-bottom: var(--gas-space-m);
    font-size: var(--gas-text-sm);
    color: var(--gas-text-secondary);
}

/* ==========================================================================
   Top keywords (quick search pills)
   ========================================================================== */

.gas-archive__top-keywords {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gas-space-xs);
    margin-bottom: var(--gas-space-m);
}

.gas-archive__keyword-pill {
    display: inline-flex;
    align-items: center;
    padding: 2px var(--gas-space-s);
    font-size: var(--gas-text-xs);
    line-height: var(--gas-leading-normal);
    color: var(--gas-text-secondary);
    background: var(--gas-bg-surface);
    border: 1px solid var(--gas-neutral-200);
    border-radius: var(--gas-radius-full);
    cursor: pointer;
    transition: all var(--gas-transition-fast);
    white-space: nowrap;
}

.gas-archive__keyword-pill:hover {
    color: var(--gas-primary);
    border-color: var(--gas-primary);
    background: var(--gas-primary-ultra-light);
}

.gas-archive__keyword-count {
    font-size: 0.7em;
    color: var(--gas-text-muted, var(--gas-neutral-400));
    margin-left: 1px;
    font-weight: var(--gas-weight-normal, 400);
}

.gas-archive__keyword-pill:hover .gas-archive__keyword-count {
    color: var(--gas-primary-light, var(--gas-primary));
}

/* ==========================================================================
   Sort controls
   ========================================================================== */

.gas-archive__sort {
    display: flex;
    align-items: center;
    gap: var(--gas-space-xs);
}

.gas-archive__sort-label {
    font-size: var(--gas-text-sm);
    color: var(--gas-text-secondary);
    white-space: nowrap;
}

.gas-archive__sort-btn {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: var(--gas-space-xs) var(--gas-space-s);
    border: 1px solid var(--gas-neutral-200);
    border-radius: var(--gas-radius-s);
    background: var(--gas-bg-surface);
    color: var(--gas-text-secondary);
    font-size: var(--gas-text-sm);
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
}

.gas-archive__sort-btn:hover {
    border-color: var(--gas-primary);
    color: var(--gas-primary);
}

.gas-archive__sort-btn--active {
    border-color: var(--gas-primary);
    background: var(--gas-primary);
    color: var(--gas-text-color-inverse);
}

.gas-archive__sort-btn--active:hover {
    background: var(--gas-primary-dark);
    border-color: var(--gas-primary-dark);
    color: var(--gas-text-color-inverse);
}

/* ==========================================================================
   Display mode toolbar
   ========================================================================== */

.gas-archive__toolbar {
    display: flex;
    align-items: center;
    gap: var(--gas-space-xs);
    margin-left: auto;
}

.gas-archive__toolbar-label {
    margin-right: var(--gas-space-s);
    font-size: var(--gas-text-sm);
    color: var(--gas-text-secondary);
}

.gas-archive__mode-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid var(--gas-neutral-200);
    border-radius: var(--gas-radius-s);
    background: var(--gas-bg-surface);
    color: var(--gas-text-secondary);
    font-size: 16px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.gas-archive__mode-btn:hover {
    border-color: var(--gas-primary);
    color: var(--gas-primary);
}

.gas-archive__mode-btn--active {
    border-color: var(--gas-primary);
    background: var(--gas-primary);
    color: var(--gas-text-color-inverse);
}

/* ==========================================================================
   Card overrides for archive (Vue template uses plain <a> + <img>)
   ========================================================================== */

.gas-archive a.gas-card__image {
    display: block;
}

.gas-archive .gas-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.gas-archive .gas-card__actions {
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
}

/* ==========================================================================
   Masonry layout — CSS columns with varied heights
   ========================================================================== */

.gas-archive__masonry {
    column-count: 3;
    column-gap: var(--gas-space-l);
}

.gas-archive__masonry > .gas-card {
    break-inside: avoid;
    margin-bottom: var(--gas-space-l);
    display: inline-block;
    width: 100%;
    height: auto;
    min-height: unset;
}

.gas-archive__masonry > .gas-card.gas-card--equal-height {
    min-height: unset;
}

/* Vary image heights for masonry feel */
.gas-archive__masonry > .gas-card:nth-child(3n+1) .gas-card__image {
    --card-image-height: 220px;
}

.gas-archive__masonry > .gas-card:nth-child(3n+2) .gas-card__image {
    --card-image-height: 160px;
}

.gas-archive__masonry > .gas-card:nth-child(3n+3) .gas-card__image {
    --card-image-height: 280px;
}

.gas-archive__masonry > .gas-card:nth-child(odd) .gas-card__description {
    -webkit-line-clamp: 4;
}

.gas-archive__masonry > .gas-card:nth-child(even) .gas-card__description {
    -webkit-line-clamp: 2;
}

/* ==========================================================================
   Compact layout — 2 columns grid of horizontal cards
   ========================================================================== */

.gas-archive__compact {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--gas-space-m);
}

/* ==========================================================================
   List layout — content left-aligned, button right-aligned
   ========================================================================== */

.gas-archive__list .gas-card--minimal {
    padding: 0;
}

.gas-archive__list .gas-card--minimal .gas-card__content {
    flex: 1;
    flex-wrap: nowrap;
    width: 100%;
    padding: var(--gas-space-m) var(--gas-space-l);
}

.gas-archive__list .gas-card--minimal .gas-card__meta-badges {
    flex-shrink: 0;
}

.gas-archive__list .gas-card--minimal .gas-card__title {
    flex: 1;
    min-width: 0;
}

.gas-archive__list .gas-card--minimal .gas-card__actions {
    margin-left: auto;
    flex-shrink: 0;
    padding-top: 0;
    border-top: none;
}

/* ==========================================================================
   Magazine layout (featured first + grid)
   ========================================================================== */

.gas-archive__magazine {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--gas-space-l);
}

.gas-archive__magazine > .gas-card--featured {
    grid-column: 1 / -1;
}

.gas-archive__magazine > .gas-card--featured .gas-card__image {
    --card-image-height: 400px;
}

.gas-archive__magazine > .gas-card--featured .gas-card__title {
    font-size: var(--gas-text-2xl);
}

.gas-archive__magazine > .gas-card--featured .gas-card__description {
    -webkit-line-clamp: 4;
    font-size: var(--gas-text-base);
}

/* ==========================================================================
   Search context (snippet + keywords) — shown inside cards during search
   ========================================================================== */

.gas-card__search-context {
    margin-top: var(--gas-space-xs);
}

.gas-card__search-snippet {
    margin: 0 0 var(--gas-space-xs);
    font-size: var(--gas-text-s);
    color: var(--gas-text-secondary);
    line-height: var(--gas-leading-relaxed);
}

.gas-card__search-snippet mark {
    background: var(--gas-warning-light, #fff3cd);
    color: inherit;
    padding: 0 2px;
    border-radius: 2px;
    font-weight: var(--gas-weight-medium, 500);
}

.gas-card__search-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: var(--gas-space-xs);
}

.gas-card__search-tag {
    display: inline-flex;
    align-items: center;
    padding: 2px var(--gas-space-xs);
    border-radius: var(--gas-radius-full);
    background: var(--gas-primary-ultra-light, #e8f0fe);
    color: var(--gas-primary);
    font-size: var(--gas-text-xs);
    line-height: 1.4;
    white-space: nowrap;
}

.gas-card__search-tag--theme {
    background: var(--gas-info-light, #e0f2fe);
    color: var(--gas-info, #0369a1);
}

/* ==========================================================================
   Empty state
   ========================================================================== */

.gas-archive__empty {
    padding: var(--gas-space-2xl) var(--gas-space-l);
    text-align: center;
    color: var(--gas-text-secondary);
    font-size: var(--gas-text-base);
}

/* ==========================================================================
   Infinite scroll loader
   ========================================================================== */

.gas-archive__loader {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: var(--gas-space-xl) 0;
    color: var(--gas-text-secondary);
    font-size: var(--gas-text-sm);
    gap: var(--gas-space-s);
}

.gas-archive__loader-spinner {
    width: 20px;
    height: 20px;
    border: 2px solid var(--gas-neutral-200);
    border-top-color: var(--gas-primary);
    border-radius: 50%;
    animation: gas-archive-spin 0.6s linear infinite;
}

@keyframes gas-archive-spin {
    to { transform: rotate(360deg); }
}

.gas-archive__end {
    text-align: center;
    padding: var(--gas-space-l) 0;
    color: var(--gas-text-muted, var(--gas-neutral-400));
    font-size: var(--gas-text-sm);
}

/* ==========================================================================
   Pagination (no-JS fallback & SEO)
   ========================================================================== */

.gas-archive__pagination {
    display: flex;
    justify-content: center;
    gap: var(--gas-space-xs);
    margin-top: var(--gas-space-xl);
}

.gas-archive__pagination a,
.gas-archive__pagination span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 var(--gas-space-s);
    border: 1px solid var(--gas-neutral-200);
    border-radius: var(--gas-radius-s);
    background: var(--gas-bg-surface);
    color: var(--gas-text-primary);
    font-size: var(--gas-text-sm);
    text-decoration: none;
    transition: all 0.15s ease;
}

.gas-archive__pagination a:hover {
    border-color: var(--gas-primary);
    color: var(--gas-primary);
}

.gas-archive__pagination .current {
    background: var(--gas-primary);
    border-color: var(--gas-primary);
    color: var(--gas-text-color-inverse);
}

/* ==========================================================================
   Grid wrapper transition
   ========================================================================== */

.gas-archive__grid-wrapper {
    transition: opacity 0.2s ease;
}

.gas-archive__grid-wrapper--loading {
    opacity: 0.5;
    pointer-events: none;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1200px) {
    .gas-archive__masonry {
        column-count: 2;
    }

    .gas-archive__magazine {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .gas-archive__masonry {
        column-count: 1;
    }

    .gas-archive__compact {
        grid-template-columns: 1fr;
    }

    .gas-archive__magazine {
        grid-template-columns: 1fr;
    }

    .gas-archive__magazine > .gas-card--featured .gas-card__image {
        --card-image-height: 200px;
    }

    .gas-archive__filters {
        gap: var(--gas-space-xs);
    }

    .gas-archive__filter-pill {
        padding: var(--gas-space-xs) var(--gas-space-s);
        font-size: var(--gas-text-xs);
    }

    /* Controls bar: stack on mobile */
    .gas-archive__controls {
        flex-direction: column;
        align-items: stretch;
    }

    .gas-archive__search {
        max-width: none;
    }

    .gas-archive__sort {
        justify-content: flex-start;
    }

    .gas-archive__toolbar {
        justify-content: center;
        margin-left: 0;
    }

    /* List: stack on mobile */
    .gas-archive__list .gas-card--minimal .gas-card__content {
        flex-direction: column;
        align-items: flex-start;
    }

    .gas-archive__list .gas-card--minimal .gas-card__actions {
        margin-left: 0;
    }
}