/**
 * uabaeivacollections.css
 * AEIVA Collections — Component Styles
 *
 * Covers:
 *   - Collection view: controls row (search, filter, sort), results count,
 *     artwork grid, pagination, fair use notice
 *   - Artists view: controls row, results count, artist list grid, pagination
 *
 * UAB Brand Colors (WCAG AA verified):
 *   UAB Green:           #1a5632  (bg) + White  #ffffff  → 8.67:1 ✓
 *   Dragon's Lair Green: #033319  (bg) + Gold   #fdb913  → 8.13:1 ✓
 *   UAB Gold:            #fdb913  (bg) + Black  #000000  → 12.13:1 ✓
 *   Mid Gray (labels):   #636363  on white                → 5.74:1 ✓ (AA large text)
 *   Border Gray:         #d1d1d1  — decorative only, no text on it
 *
 * Tailwind tw- prefix is used by the sleepyDragon template for utility classes.
 * These custom classes handle layout and component-specific styling that
 * Tailwind utilities alone don't cleanly cover (focus rings, pagination
 * states, responsive controls row, etc.).
 *
 * All interactive elements meet WCAG 2.1 AA:
 *   - Focus rings visible on keyboard navigation (3px UAB Green offset outline)
 *   - Minimum 44×44px touch targets on pagination buttons (mobile)
 *   - Color is never the sole means of conveying information
 *   - aria-current="page" + visual distinction on active pagination page
 */

/* ============================================================
   COLLECTION WRAPPER
   ============================================================ */

.uabaeiva-collection {
    /* Breathing room below the breadcrumb / page heading */
    padding-bottom: 3rem;
}

.uabaeiva-collection__description {
    margin-bottom: 1.5rem;
    color: #636363;
}

/* ============================================================
   CONTROLS ROW — Search · Filter by · Sort by
   Figma: horizontal row, search left, filter center, sort right.
   On mobile: stacks vertically.
   ============================================================ */

.uabaeiva-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 1rem 1.5rem;
    margin-bottom: 1.25rem;
}

/* Search: fixed width per Figma — does not stretch to fill remaining space */
.uabaeiva-controls__search {
    flex: 0 1 360px;
    min-width: 220px;
}

.uabaeiva-controls__filter {
    flex: 0 1 220px;
    min-width: 160px;
    margin-left: auto; /* pushes filter + sort + clear to the right */
}

.uabaeiva-controls__sort {
    flex: 0 1 220px;
    min-width: 160px;
}

/* Clear button — sits after sort, aligned to bottom of controls row. */
.uabaeiva-controls__clear {
    flex: 0 0 auto;
    align-self: flex-end;
}

.uabaeiva-clear-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    white-space: nowrap;
}

.uabaeiva-clear-btn i {
    font-size: 0.875rem;
    line-height: 1;
}

.uabaeiva-clear-btn:focus-visible {
    outline: 3px solid #1a5632;
    outline-offset: 2px;
}

/* Mobile: clear button goes full-width like the other controls */
@media (max-width: 639px) {
    .uabaeiva-controls__clear {
        margin-left: 0;
        width: 100%;
    }

    .uabaeiva-clear-btn {
        width: 100%;
        justify-content: center;
    }
}

/* Labels above dropdowns — matches Figma "Filter by:" / "Sort by:" */
.uabaeiva-controls__filter label,
.uabaeiva-controls__sort label {
    display: block;
    font-size: 0.875rem;       /* 14px */
    font-weight: 600;
    color: #1a1a1a;
    margin-bottom: 0.25rem;
}

.uabaeiva-search-group {
    flex-wrap: nowrap;
}

.uabaeiva-search-addon {
    background-color: #ffffff;
    border-color: #d1d1d1;
    color: #1a5632;
}

.uabaeiva-search-group:focus-within {
    outline: 3px solid #1a5632;
    outline-offset: 2px;
    border-radius: 0.375rem;
}

.uabaeiva-search-group:focus-within .uabaeiva-search-addon,
.uabaeiva-search-group:focus-within .uabaeiva-search-input {
    border-color: #1a5632;
    box-shadow: none;
}

/* ---- Search input ---- */

.uabaeiva-search-input {
    display: block;
    width: 100%;
    padding: 0.5rem 0.75rem;
    font-size: 1rem;
    line-height: 1.5;
    color: #1a1a1a;
    background-color: #ffffff;
    border: 1px solid #d1d1d1;
    border-radius: 4px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    -webkit-appearance: none;
    appearance: none;
    box-sizing: border-box;
    border-left: 0;
}

.uabaeiva-search-input::placeholder {
    color: #909090;
}

.uabaeiva-search-input:hover {
    border-color: #1a5632;
}

.uabaeiva-search-input:focus {
    outline: none;
    border-color: #1a5632;
    box-shadow: none;
}

/* Hide the browser's native × clear button — our JS handles clearing */
.uabaeiva-search-input::-webkit-search-cancel-button {
    -webkit-appearance: none;
}

/* ---- Filter and sort dropdowns ---- */

.uabaeiva-filter-select,
.uabaeiva-sort-select {
    display: block;
    width: 100%;
    padding: 0.5rem 2.25rem 0.5rem 0.75rem; /* right pad for chevron */
    font-size: 1rem;
    line-height: 1.5;
    color: #1a1a1a;
    background-color: #ffffff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%231a5632' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: calc(100% - 0.65rem) center;
    background-size: 1rem 1rem;
    border: 1px solid #d1d1d1;
    border-radius: 4px;
    cursor: pointer;
    transition: border-color 0.15s ease;
    -webkit-appearance: none;
    appearance: none;
    box-sizing: border-box;
}

.uabaeiva-filter-select:hover,
.uabaeiva-sort-select:hover {
    border-color: #1a5632;
}

.uabaeiva-filter-select:focus,
.uabaeiva-sort-select:focus {
    outline: 3px solid #1a5632;
    outline-offset: 2px;
    border-color: #1a5632;
    box-shadow: none;
}

/* Mobile: stack controls full-width */
@media (max-width: 639px) {
    .uabaeiva-controls {
        flex-direction: column;
        align-items: stretch;
    }

    .uabaeiva-controls__search,
    .uabaeiva-controls__filter,
    .uabaeiva-controls__sort {
        flex: 1 1 100%;
        min-width: 0;
    }

    /* Reset margin-left: auto on mobile so filter stacks normally */
    .uabaeiva-controls__filter {
        margin-left: 0;
    }
}

/* ============================================================
   RESULTS COUNT
   aria-live="polite" — announced by screen readers on update.
   Figma: "Showing 2313 Results" — small, muted, above the grid.
   ============================================================ */

.uabaeiva-results-count {
    font-size: 0.9375rem;  /* 15px */
    color: #636363;
    margin-top: 0;
    margin-bottom: 1rem;
}

/* ============================================================
   ARTWORK GRID
   Grid layout is handled by Tailwind tw- classes in the template.
   These rules cover loading state only.
   ============================================================ */

#uabaeiva-grid {
    transition: opacity 0.15s ease;
    min-height: 4rem; /* prevents layout jump when results are empty */
}

#uabaeiva-grid[aria-busy="true"] {
    pointer-events: none;
    cursor: wait;
}

.uabaeiva-no-results {
    color: #636363;
    font-size: 1rem;
    padding: 2rem 0;
}

/* ============================================================
   PAGINATION
   Figma: « 1 2 3 … 11 »  |  Page 1 of 11 (right-aligned)
   Current page: UAB Green bg + white text.
   Prev/next: plain text, disabled when at boundary.
   ============================================================ */

.uabaeiva-pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem;
    margin-top: 2rem;
    margin-bottom: 1rem;
}

/* All page buttons and prev/next share base styles */
.uabaeiva-pagination__page,
.uabaeiva-pagination__prev,
.uabaeiva-pagination__next {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.25rem;   /* 36px — touch-safe on desktop */
    min-height: 2.25rem;
    padding: 0.25rem 0.5rem;
    font-size: 0.9375rem;
    font-family: inherit;
    line-height: 1;
    color: #1a1a1a;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 4px;
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
    -webkit-appearance: none;
    appearance: none;
}

/* Hover — all page buttons */
.uabaeiva-pagination__page:hover,
.uabaeiva-pagination__prev:hover,
.uabaeiva-pagination__next:hover {
    background-color: #f0f5f2; /* very light UAB green tint */
    border-color: #1a5632;
    color: #1a5632;
    text-decoration: none;
}

/* Focus ring — keyboard navigation */
.uabaeiva-pagination__page:focus-visible,
.uabaeiva-pagination__prev:focus-visible,
.uabaeiva-pagination__next:focus-visible {
    outline: 3px solid #1a5632;
    outline-offset: 2px;
}

/* Current page — UAB Green background */
.uabaeiva-pagination__page.is-current {
    background-color: #1a5632;
    border-color: #1a5632;
    color: #ffffff;
    font-weight: 600;
    cursor: default;
    pointer-events: none; /* don't re-fetch the current page */
}

/* Disabled prev/next (rendered as <span> by the JS) */
.uabaeiva-pagination__prev.is-disabled,
.uabaeiva-pagination__next.is-disabled {
    color: #c0c0c0;
    cursor: default;
    pointer-events: none;
    border-color: transparent;
    background: transparent;
    /* Keep same sizing so layout doesn't shift */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.25rem;
    min-height: 2.25rem;
    padding: 0.25rem 0.5rem;
    font-size: 0.9375rem;
}

/* Ellipsis — decorative, not interactive */
.uabaeiva-pagination__ellipsis {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.5rem;
    min-height: 2.25rem;
    padding: 0.25rem 0.125rem;
    font-size: 0.9375rem;
    color: #636363;
    pointer-events: none;
    user-select: none;
}

/* Page X of Y — pushed to right end of the pagination row */
.uabaeiva-pagination__summary {
    margin-left: auto;
    font-size: 0.875rem;
    color: #636363;
    white-space: nowrap;
    padding-left: 1rem;
}

/* Mobile: larger touch targets (44px minimum per WCAG 2.5.5) */
@media (max-width: 639px) {
    .uabaeiva-pagination__page,
    .uabaeiva-pagination__prev,
    .uabaeiva-pagination__next {
        min-width: 2.75rem;  /* 44px */
        min-height: 2.75rem;
    }

    .uabaeiva-pagination__summary {
        width: 100%;
        margin-left: 0;
        margin-top: 0.5rem;
        text-align: center;
    }
}

/* ============================================================
   FAIR USE NOTICE
   Figma: small centered text below grid/pagination.
   ============================================================ */

.uabaeiva-fair-use {
    font-size: 0.8125rem;  /* 13px */
    color: #636363;
    text-align: center;
    margin-top: 2rem;
    margin-bottom: 0;
}

.uabaeiva-artwork-card__image {
    transition: transform 0.2s ease-out;
}

.uabaeiva-artwork-card:hover .uabaeiva-artwork-card__image,
.uabaeiva-artwork-card:focus-visible .uabaeiva-artwork-card__image,
.uabaeiva-artwork-card:focus-within .uabaeiva-artwork-card__image {
    transform: scale(1.05);
}

.uabaeiva-artwork-card:hover .uabaeiva-artwork-card__title,
.uabaeiva-artwork-card:focus-visible .uabaeiva-artwork-card__title,
.uabaeiva-artwork-card:focus-within .uabaeiva-artwork-card__title {
    text-decoration: underline;
}

/* ============================================================
   ARTISTS VIEW — list grid + controls
   /artists — 4-column grid of name + years links.
   Controls: search left, sort right (no filter dropdown).
   ============================================================ */

.uabaeiva-artists {
    padding-bottom: 3rem;
}

.uabaeiva-artist-toolbar {
    border-bottom: 1px solid #e4e4e4;
    margin-bottom: 1.75rem;
    padding-bottom: 1rem;
}

.uabaeiva-artist-toolbar__controls {
    margin-bottom: 0.75rem;
}

.uabaeiva-artist-grid {
    align-items: start;
}

/* Artist list grid — matches Figma 4-col layout
   (Tailwind grid classes are on the element in the template,
    these rules cover the link and years text styling.) */

.uabaeiva-artist-item a {
    font-size: 1.125rem;  /* 18px — matches Figma underlined name */
    color: #1E6B52;
    font-weight: 600;
    line-height: 1.3;
    text-decoration: underline;
}

.uabaeiva-artist-item a:hover {
    text-decoration: none;
    color: #1a5632;
}

.uabaeiva-artist-item a:focus-visible {
    outline: 3px solid #1a5632;
    outline-offset: 2px;
    border-radius: 2px;
}

.uabaeiva-artist-item p {
    margin-top: 0.125rem;
    margin-bottom: 0;
    color: #636363;
    font-size: 1rem;
}