/**
 * Artist Archive - CSS
 *
 * Styles for the artist archive page (/artists/)
 *
 * Features:
 * - Artist cards with hover overlays
 * - Letter divider cards (A-Z grouping)
 * - Sticky A-Z filter navigation
 * - Responsive grid (1/2/3/4 columns)
 * - Loading and empty states
 *
 * Converted from design system main.css (lines 1479-2145)
 * All values use design tokens from design-tokens/dist/tokens.css
 *
 * @package ARTBID
 */

/* ============================================
   ARTIST CARD
   ============================================ */

.artist-card {
    display: block;
    position: relative;
    transition: all 0.2s ease;
    cursor: pointer;
    text-decoration: none; /* Override WordPress link styles */
}

.artist-card:focus-visible {
    outline: 2px solid var(--color-base-black);
    outline-offset: 2px;
}

.artist-card-image-wrapper {
    position: relative;
    overflow: hidden;
    margin-bottom: var(--spacing-scale-2); /* 8px - Space between image and name */
    border-radius: var(--radius-brand, 0);
    /* Ensure wrapper maintains aspect ratio for proper overlay positioning */
    aspect-ratio: 1;
}

.artist-card-image {
    width: 100%;
    height: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    background-color: var(--color-gray-100);
    border-radius: var(--radius-brand, 0);
    /* Lazy loading states - simple fade in */
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    display: block; /* Remove any inline spacing */
}

.artist-card-image.loaded {
    opacity: 1;
}

/* No zoom on hover - keep image stable */
.artist-card:hover .artist-card-image {
    transform: none;
}

/* Hover overlay - shows medium + description */
.artist-card-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-scale-6); /* 24px */
    color: var(--color-base-white);
    text-align: center;
    opacity: 0;
    transition: opacity 0.3s ease;
    background: var(--overlay-dark-50);
    border-radius: var(--radius-brand, 0);
    pointer-events: none;
    z-index: 1;
}

.artist-card:hover .artist-card-overlay {
    opacity: 1;
}

/* Medium label - serif font, centered */
.artist-card-medium {
    font-family: var(--font-display, serif);
    margin-bottom: var(--spacing-scale-3); /* 12px */
    font-size: var(--text-2xl, clamp(1.5rem, 1.21rem + 0.775vw, 2.25rem)); /* 24px → 36px */
    line-height: 1.2;
    pointer-events: none;
}

/* Description - small sans-serif, centered */
.artist-card-description {
    font-family: var(--font-sans, sans-serif);
    font-size: var(--text-sm, clamp(0.875rem, 0.851rem + 0.065vw, 0.9375rem)); /* 14px → 15px */
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    pointer-events: none;
}

/* Artist name - left-aligned, sans-serif */
.artist-card-name {
    font-family: var(--font-sans, sans-serif);
    text-align: left;
    font-size: var(--text-base, clamp(1rem, 0.903rem + 0.194vw, 1.1875rem)); /* 16px → 19px */
    line-height: 1.3;
    text-decoration: none; /* Remove underline from link */
    margin-block-start: 0; /* Reset h3 default margin */
    margin-block-end: 0;
    margin: 0; /* Fallback for older browsers */
}

/* ============================================
   LETTER SECTION & CARD
   ============================================ */

/* Letter section - Wrapper for scroll-to functionality */
.letter-section {
    /* Takes up one grid cell - first box in that letter's section */
    scroll-margin-top: var(--spacing-scale-36); /* 144px - Offset for sticky header + filter bar */
}

/* Letter card - Alphabetical divider in grid */
.letter-card {
    position: relative;
    background-color: var(--color-base-white);
    aspect-ratio: 1; /* Match artist card aspect ratio */
    display: flex;
    align-items: flex-end; /* Bottom alignment */
    justify-content: flex-end; /* Right alignment */
    border-radius: var(--radius-brand, 0);
}

.letter-card-letter {
    font-family: var(--font-display, serif);
    font-size: clamp(4rem, 3rem + 5vw, 8rem); /* 64px → 128px */
    line-height: 1;
    color: var(--color-base-black);
}

/* Artist card wrapper for grid positioning */
.artist-card-wrapper {
    /* No styles needed - just a wrapper for data attributes */
}

/* ============================================
   FILTER BAR
   ============================================ */

.filter-bar {
    background-color: var(--color-base-white);
    border-top: 1px solid var(--color-gray-200); /* gray-200 */
    border-bottom: 1px solid var(--color-gray-200);
    padding-top: clamp(1.5rem, 1rem + 1.5vw, 2rem); /* 24px → 32px fluid */
    padding-bottom: clamp(1.5rem, 1rem + 1.5vw, 2rem);
}

.filter-bar-inner {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-scale-6); /* 24px */
}

/* Top row: Search + A-Z */
.filter-top-row {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-scale-6);
    align-items: flex-start;
}

@media (min-width: 768px) {
    .filter-top-row {
        flex-direction: row;
        align-items: center;
    }
}

/* Search section */
.filter-search {
    width: 100%;
}

@media (min-width: 768px) {
    .filter-search {
        width: var(--spacing-scale-80); /* 320px */
    }
}

@media (min-width: 1024px) {
    .filter-search {
        width: var(--spacing-scale-96); /* 384px */
    }
}

.filter-search-input {
    width: 100%;
    padding: var(--spacing-scale-2.5) var(--spacing-scale-4); /* 10px 16px */
    font-size: var(--text-base, 1rem);
    background-color: var(--color-base-white);
    border: 1px solid var(--color-gray-300); /* gray-300 */
    transition: all 0.2s ease;
    border-radius: var(--radius-brand, 0);
}

.filter-search-input::placeholder {
    color: var(--color-gray-400); /* gray-400 */
}

.filter-search-input:hover {
    border-color: var(--color-gray-400); /* gray-400 */
}

.filter-search-input:focus {
    outline: none;
    ring: 2px solid var(--color-base-black);
    border-color: transparent;
}

/* A-Z Navigation - compact inline */
.filter-az-wrapper {
    flex: 1;
}

.filter-az {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-scale-1); /* 4px */
}

.filter-az-btn {
    width: var(--spacing-scale-8); /* 32px */
    height: var(--spacing-scale-8);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-xs, 0.75rem); /* 12px */
    font-weight: 500;
    border: 1px solid var(--color-gray-300); /* gray-300 */
    background-color: var(--color-base-white);
    color: var(--color-base-black);
    transition: all 0.2s ease;
    cursor: pointer;
    border-radius: var(--radius-brand, 0);
}

.filter-az-btn:hover {
    background-color: var(--color-base-black);
    color: var(--color-base-white);
    border-color: var(--color-base-black);
}

.filter-az-btn:focus-visible {
    outline: 2px solid var(--color-base-black);
    outline-offset: 2px;
}

.filter-az-btn:active {
    transform: scale(0.95);
}

.filter-az-btn.active {
    background-color: var(--color-base-black);
    color: var(--color-base-white);
    border-color: var(--color-base-black);
}

.filter-az-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.filter-az-btn:disabled:hover {
    background-color: var(--color-base-white);
    color: var(--color-base-black);
    border-color: var(--color-gray-300); /* gray-300 */
}

/* Scroll variant - sticky positioning with underline active state */
.filter-bar--scroll {
    position: sticky;
    top: 0; /* Sticks below header */
    z-index: 40; /* Below header but above content */
    background-color: var(--color-base-white);
    border-top: 0;
    border-bottom: 1px solid var(--color-gray-100); /* gray-100 */
}

.filter-bar--scroll .filter-bar-inner {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
}

.filter-bar--scroll .filter-az-wrapper {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-scale-2); /* 8px */
    width: 100%;
}

@media (min-width: 1024px) {
    .filter-bar--scroll .filter-az-wrapper {
        flex-direction: row;
        align-items: center;
        gap: var(--spacing-scale-4); /* 16px */
    }
}

.filter-bar--scroll .filter-label {
    font-size: var(--text-base, 1rem);
    font-family: var(--font-sans, sans-serif);
    font-weight: 400;
    color: var(--color-gray-600); /* gray-600 */
    flex-shrink: 0;
}

.filter-bar--scroll .filter-az {
    gap: var(--spacing-scale-3); /* 12px */
}

.filter-bar--scroll .filter-az-btn {
    width: auto;
    height: auto;
    padding: 0 var(--spacing-scale-1); /* Minimal padding for underline */
    border: 0;
    background-color: transparent;
    font-size: var(--text-sm, 0.875rem); /* 14px */
    font-family: var(--font-sans, sans-serif);
    font-weight: 400;
    color: var(--color-gray-600); /* gray-600 */
    position: relative; /* For underline positioning */
    padding-bottom: var(--spacing-scale-1); /* Space for underline */
}

.filter-bar--scroll .filter-az-btn:hover {
    color: var(--color-base-black);
    background-color: transparent;
}

/* Active state underline - using CSS custom property for easy modification */
.filter-bar--scroll .filter-az-btn.active {
    background-color: transparent;
    color: var(--color-base-black);
    font-weight: 500;
}

.filter-bar--scroll .filter-az-btn.active::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: var(--active-letter-underline-height, var(--spacing-scale-0.5));
    background-color: var(--active-letter-underline-color, currentColor);
}

.filter-bar--scroll .filter-az-btn:disabled {
    color: var(--color-gray-300); /* gray-300 */
}

/* Bottom row: Tag filters */
.filter-bottom-row {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-scale-4);
    align-items: flex-start;
}

@media (min-width: 640px) {
    .filter-bottom-row {
        flex-direction: row;
        align-items: center;
    }
}

.filter-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-scale-2); /* 8px */
}

.filter-tag {
    padding: var(--spacing-scale-2) var(--spacing-scale-4); /* 8px 16px */
    font-size: var(--text-sm, 0.875rem); /* 14px */
    font-weight: 500;
    border: 1px solid var(--color-gray-300); /* gray-300 */
    background-color: var(--color-base-white);
    color: var(--color-base-black);
    transition: all 0.2s ease;
    cursor: pointer;
    border-radius: var(--radius-brand, 0);
}

.filter-tag:hover {
    background-color: var(--color-base-black);
    color: var(--color-base-white);
    border-color: var(--color-base-black);
}

.filter-tag:focus-visible {
    outline: 2px solid var(--color-base-black);
    outline-offset: 2px;
}

.filter-tag:active {
    transform: scale(0.95);
}

.filter-tag.active {
    background-color: var(--color-base-black);
    color: var(--color-base-white);
    border-color: var(--color-base-black);
}

/* Filter section labels */
.filter-label {
    font-size: var(--text-xs, 0.75rem); /* 12px */
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 500;
    color: var(--color-gray-500); /* gray-500 */
    display: block;
}

/* ============================================
   GRIDS
   ============================================ */

/* Artist grid - responsive columns */
.artist-grid {
    display: grid;
    gap: var(--spacing-scale-6); /* 24px */
    grid-template-columns: repeat(2, 1fr); /* 2 columns on mobile */
}

@media (min-width: 640px) {
    .artist-grid {
        gap: var(--spacing-scale-8); /* 32px */
    }
}

@media (min-width: 1024px) {
    .artist-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 1536px) {
    .artist-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* ============================================
   LOADING & EMPTY STATES
   ============================================ */

/* Empty state */
.empty-state {
    text-align: center;
    /* Fluid vertical padding: 64px → 96px (375px → 1920px) */
    padding-top: clamp(4rem, 3rem + 3vw, 6rem);
    padding-bottom: clamp(4rem, 3rem + 3vw, 6rem);
}

.empty-state-icon {
    margin: 0 auto var(--spacing-scale-4);
    color: var(--color-gray-300); /* gray-300 */
    /* Fluid icon size: 64px → 80px */
    width: clamp(4rem, 3.5rem + 1.5vw, 5rem);
    height: clamp(4rem, 3.5rem + 1.5vw, 5rem);
}

.empty-state-title {
    font-size: var(--text-2xl, 1.5rem); /* 24px */
    font-family: var(--font-display, serif);
    margin-bottom: var(--spacing-scale-2); /* 8px */
    color: var(--color-gray-900); /* gray-900 */
}

.empty-state-description {
    font-size: var(--text-base, 1rem);
    color: var(--color-gray-600); /* gray-600 */
    max-width: var(--spacing-scale-96); /* 384px - closest available token to 448px */
    margin: 0 auto var(--spacing-scale-6);
}

/* Loading spinner */
.loading-spinner {
    display: inline-block;
    width: var(--spacing-scale-8); /* 32px */
    height: var(--spacing-scale-8);
    border: var(--spacing-scale-1) solid var(--color-gray-200); /* 4px, gray-200 */
    border-top-color: var(--color-base-black);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

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

.loading-state {
    text-align: center;
    padding: var(--spacing-scale-8) 0; /* 32px */
}