/**
 * ==========================================================================
 * QueryKey Cases – collections.css
 *
 * @fileOverview
 * Collections landing and grid polish to visually align collection cards and
 * hero with the /case/ presentation while preserving the existing structure.
 *
 * @author
 * QueryKey Cases Web Team
 *
 * @maintainer
 * Cases Engineering Lead
 *
 * @usage
 * Linked by pages serving the collections grid and detail hero.
 *
 * @dependencies
 * variables.css, base.css, fonts.css, components/*
 *
 * @notes
 * - Vendor-prefixed properties are scoped and documented where necessary for
 *   Safari rendering (backdrop-filter).
 *
 * @license
 * QueryKey™ is a trademark of Farrel Wilson. All rights reserved.
 * @timestamp
 * 2025-10-31 17:18:18 UTC
 * ==========================================================================
 */
 
/* Collections page specific enhancements */

.p-collections {
  --nav-link-color: var(--light-text, #E0E7F5);
  --nav-link-hover-color: var(--qk-accent-orange);
  --account-link-border-color: var(--qk-accent-orange);
  --account-link-color: var(--qk-accent-orange);
  --account-link-hover-bg: var(--qk-accent-orange);
  --account-link-hover-text: #fff;
  --menu-toggle-color: var(--qk-accent-orange);
  --theme-switch-track-color: var(--primary-dark-blue, #162C50);
  --theme-switch-thumb-color: var(--light-text, #E0E7F5);
  --theme-switch-active-track-color: var(--qk-accent-orange);
  --theme-switch-active-thumb-color: #fff;
  --footer-bg: transparent;
  --footer-border: rgb(255 255 255 / 10%);
  --footer-heading-color: var(--qk-accent-orange);
  --footer-link-color: var(--white, #fff);
  --footer-link-hover-color: var(--qk-accent-orange);
  --mobile-nav-divider: rgb(255 255 255 / 12%);
}

body.light-mode.p-collections {
  --nav-link-color: var(--dark-text, #1a202c);
  --nav-link-hover-color: var(--qk-accent-orange);
  --account-link-color: var(--qk-accent-orange);
  --account-link-border-color: var(--qk-accent-orange);
  --menu-toggle-color: var(--qk-accent-orange);
  --theme-switch-track-color: #cbd5ff;
  --theme-switch-thumb-color: #fff;
  --footer-bg: #fff;
  --footer-border: rgb(0 0 0 / 10%);
  --footer-link-color: var(--light-text, #4a5568);
  --footer-link-hover-color: var(--qk-accent-orange);
  --mobile-nav-divider: rgb(0 0 0 / 8%);
}


/* Keep the collection hero flush with the navigation shell so we avoid the legacy gap the catalog team wanted removed. */
.p-collections .main-search-component {
    /* Expand collection hero shell edge-to-edge while keeping vertical rhythm consistent with /case/. */
    width: 100%;
    max-width: none;
    margin: 0;

    /* Hero gradient and line pattern brought in from docs/go-to-market/proposals/hero.html (2025-10-15 alignment). */
    background: linear-gradient(162deg, rgb(25 25 81 / 96%), rgb(14 18 52 / 92%));
    border: 1px solid rgb(88 102 214 / 45%);
    box-shadow: 0 36px 68px rgb(6 10 30 / 60%), 0 0 0 1px rgb(84 102 210 / 30%);
}

.p-collections .main-search-title {
    color: #EA580C;
}

body.light-mode.p-collections .main-search-title {
    color: #EA580C;
}

.p-collections .main-search-component::before {
    /* Collections hero keeps the solid gradient panel—disable the gridlines. */
    background: none;
}

.p-collections .main-search-component::after {
    background:
        radial-gradient(circle at 22% 12%, rgb(255 255 255 / 20%), transparent 70%),
        radial-gradient(circle at 80% 18%, rgb(249 115 22 / 22%), transparent 75%);
}

body.light-mode.p-collections .main-search-component {
    margin: 0;
    background: linear-gradient(162deg, rgb(245 248 255 / 97%), rgb(227 235 255 / 93%));
    border: 1px solid rgb(158 178 235 / 55%);
    box-shadow: 0 32px 60px rgb(148 163 184 / 32%), 0 0 0 1px rgb(177 196 244 / 40%);
}

body.light-mode.p-collections .main-search-component::before {
    background: none;
}

body.light-mode.p-collections .main-search-component::after {
    background:
        radial-gradient(circle at 24% 10%, rgb(96 165 250 / 28%), transparent 74%),
        radial-gradient(circle at 78% 18%, rgb(249 115 22 / 20%), transparent 80%);
}

/* Page-scoped header/footer token overrides */

/* Place collection cases list items before generic footer li to satisfy ordering */
.collection-cases-list li {
    padding: 0.5rem 0;
    border-bottom: 1px solid rgb(233 236 239 / 30%);
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    transition: all 0.2s ease;
}

.cases-section .cases-container {
    max-width: 1200px;
    margin: 0 auto;
}

/* Collections page body modifier */
.collections-page {
    --page-accent: var(--qk-accent-orange);
}

/* Collection-specific card enhancements */
.collection-card {
    position: relative;
    counter-increment: collection-counter;
}

.p-collections .collection-card .case-card-header {
    /* Three-column layout: support CTA, titles, ordinal badge. */
    grid-template-columns: auto 1fr auto;
}

.p-collections .collection-card .case-number-badge {
    /* Reuse the compact badge pill styling from case cards so numbering stays consistent. */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    padding: 8px 14px;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--case-badge-primary) 0%, var(--case-badge-secondary) 100%);
    color: var(--case-badge-text);
    font-weight: 800;
    font-size: 0.9rem;
    letter-spacing: 0.05em;
    box-shadow: 0 12px 20px rgb(15 23 42 / 32%);
    justify-self: end;
}

.collections-page .unified-cases-grid {
    counter-reset: collection-counter;

    /* Mirror the centered grid alignment used on /case/ so collection cards anchor identically. */
    justify-content: center;
    justify-items: center;
    grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
}

.collections-page .unified-cases-grid > * {
    /* Match the centred card width constraint used on /case/ so fewer results stay visually balanced. */
    width: min(100%, 540px);
}

/* Narrow viewports: avoid minmax(420px) blowing past the viewport; inset so cards do not hug screen edges. */
@media (width <= 720px) {
    .collections-page .unified-cases-grid {
        grid-template-columns: 1fr;
        gap: 20px;
        padding-inline: max(16px, env(safe-area-inset-left)) max(16px, env(safe-area-inset-right));
        box-sizing: border-box;
    }

    .collections-page .unified-cases-grid > * {
        width: 100%;
        max-width: 100%;
    }
}

/* Collection cards now inherit the canonical case badge; suppress legacy overlay counter. */
.collection-card::before {
    content: none;
}

/* Collection stats in footer */
.case-footer .case-stats {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.case-footer .stat {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    color: var(--qk-accent-blue);
    font-weight: 600;
    font-size: 0.9rem;
}

/* Professional tier badge styling */
.professional-tier {
    background: linear-gradient(135deg, var(--qk-accent-orange) 0%, #f97316 100%) !important;
    color: var(--white) !important;
    font-weight: 700;
    text-shadow: 0 1px 2px rgb(0 0 0 / 20%);
    box-shadow: 0 2px 4px rgb(233 151 90 / 30%);
}

/* Collection cases list styling */
.collection-cases-list {
    padding-left: 0;
    margin: 0 0 1rem;
    font-size: 0.9rem;
    line-height: 1.4;
    list-style: none;
}

/* moved earlier to satisfy ordering */

.collection-cases-list li::before {
    content: "▶";
    color: var(--qk-accent-orange);
    font-size: 0.8rem;
    margin-top: 0.1rem;
    flex-shrink: 0;
}

.collection-lock-hint {
    margin-top: 0.75rem;
    font-size: 0.9rem;
    color: var(--qk-accent-orange);
    font-weight: 600;
}

body.light-mode.p-collections .collection-lock-hint {
    color: #c2410c;
}

.collections-summary {
    margin: 24px auto;
    max-width: 960px;
    text-align: center;
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.015em;
    color: rgb(226 232 255 / 85%);
}

/* Align pagination summary placement with cases page so text anchors inside the shared row. */
.cases-pagination-row .collections-summary {
    margin: 0;
}

body.light-mode.p-collections .collections-summary {
    color: rgb(71 85 105);
}

.p-collections .filter-section {
    /* Tighten spacing so the filter controls feel anchored to the refreshed hero. */
    margin: clamp(1.8rem, 4vw, 2.75rem) auto clamp(0.4rem, 1.5vw, 0.85rem);
}

.p-collections .filter-bar {
    border-radius: 0;
    border: none;
    background: none;
    box-shadow: none;
    padding: 0;
    /* stylelint-disable-next-line property-no-vendor-prefix */
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

.p-collections .filter-label {
    color: rgb(224 232 255 / 82%);
}

.p-collections .filter-select {
    border-width: 2px;
    border-color: rgb(99 102 241 / 75%);
    background: rgb(255 255 255 / 8%);
    color: rgb(248 250 255 / 95%);
    padding: 14px 52px 14px 22px;
    box-shadow: 0 18px 34px rgb(9 14 40 / 45%);
}

.p-collections .filter-select:focus {
    border-color: rgb(129 140 248);
    box-shadow: 0 0 0 3px rgb(99 102 241 / 32%), 0 20px 44px rgb(12 18 48 / 55%);
    background: rgb(255 255 255 / 16%);
    outline: none;
}

.p-collections .filter-select#filterSort {
    border-color: rgb(249 115 22 / 85%);
    box-shadow: 0 20px 38px rgb(249 115 22 / 40%);
}

.p-collections .filter-select#filterSort:focus {
    border-color: rgb(249 115 22);
    box-shadow: 0 0 0 3px rgb(249 115 22 / 32%), 0 22px 42px rgb(249 115 22 / 45%);
    background: rgb(255 255 255 / 18%);
}

.p-collections .filter-select-wrapper::after {
    color: rgb(226 232 255 / 86%);
}

body.light-mode.p-collections .filter-bar {
    border: none;
    background: none;
    box-shadow: none;
}

body.light-mode.p-collections .filter-label {
    color: rgb(99 112 138);
}

body.light-mode.p-collections .filter-select {
    background: rgb(248 250 255 / 92%);
    border-color: rgb(99 102 241 / 40%);
    color: rgb(30 41 59);
    box-shadow: 0 18px 32px rgb(148 163 184 / 25%);
}

body.light-mode.p-collections .filter-select:focus {
    border-color: rgb(59 130 246 / 85%);
    box-shadow: 0 0 0 3px rgb(59 130 246 / 20%), 0 20px 36px rgb(148 163 184 / 26%);
    background: rgb(242 247 255 / 96%);
}

body.light-mode.p-collections .filter-select#filterSort {
    border-color: rgb(249 115 22 / 70%);
    box-shadow: 0 18px 34px rgb(249 115 22 / 26%);
}

body.light-mode.p-collections .filter-select#filterSort:focus {
    border-color: rgb(249 115 22);
    box-shadow: 0 0 0 3px rgb(249 115 22 / 18%), 0 20px 34px rgb(249 115 22 / 28%);
    background: rgb(255 248 240 / 96%);
}

body.light-mode.p-collections .filter-select-wrapper::after {
    color: rgb(82 94 121);
}

.collections-page .cases-empty-state {
    display: none;
}

.collection-cases-list li:hover {
    background: rgb(233 151 90 / 5%);
    padding-left: 0.5rem;
    margin-left: -0.5rem;
    border-radius: 4px;
}

.collection-cases-list li:last-child {
    border-bottom: none;
}

/* Subset note styling */
.subset-note {
    font-size: 0.8rem;
    color: #6b7280;
    font-style: italic;
    padding: 0.75rem 1rem;
    background: linear-gradient(135deg, rgb(107 114 128 / 5%) 0%, rgb(107 114 128 / 10%) 100%);
    border-radius: 8px;
    border-left: 3px solid var(--qk-accent-orange);
    margin-top: 1rem;
}

/* Case extra meta chips */
.case-extra-meta {
    display: flex;
    gap: 0.5rem;
    margin-top: 1rem;
    flex-wrap: wrap;
}

.meta-chip {
    display: inline-flex;
    align-items: center;
    background: linear-gradient(135deg, rgb(11 79 156 / 10%) 0%, rgb(11 79 156 / 15%) 100%);
    color: var(--qk-accent-blue);
    padding: 0.25rem 0.75rem;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    border: 1px solid rgb(11 79 156 / 20%);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.meta-chip.license {
    background: linear-gradient(135deg, rgb(34 197 94 / 10%) 0%, rgb(34 197 94 / 15%) 100%);
    color: #059669;
    border-color: rgb(34 197 94 / 20%);
}

.meta-chip.tags {
    background: linear-gradient(135deg, rgb(233 151 90 / 10%) 0%, rgb(233 151 90 / 15%) 100%);
    color: var(--qk-accent-orange);
    border-color: rgb(233 151 90 / 20%);
}

.meta-chip.last-verified {
    background: linear-gradient(135deg, rgb(139 92 246 / 10%) 0%, rgb(139 92 246 / 15%) 100%);
    color: #7c3aed;
    border-color: rgb(139 92 246 / 20%);
}

/* Pagination styling */
.pagination {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 3rem;
    padding: 2rem 0;
}

.pagination button {
    padding: 0.75rem 1rem;
    border: 2px solid rgb(11 79 156 / 20%);
    background: var(--white);
    color: var(--qk-accent-blue);
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    min-width: 3rem;
}

.pagination button:hover {
    background: var(--qk-accent-blue);
    color: var(--white);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgb(11 79 156 / 30%);
}

.pagination button.active {
    background: linear-gradient(135deg, var(--qk-accent-orange) 0%, #f97316 100%);
    /* Blue text for the active page number to improve contrast in dark mode */
    color: var(--qk-accent-blue);
    border-color: var(--qk-accent-orange);
    box-shadow: 0 4px 8px rgb(233 151 90 / 30%);
}

.pagination button.active:hover {
    background: linear-gradient(135deg, #f97316 0%, var(--qk-accent-orange) 100%);
    transform: translateY(-2px);
}

/* Enhanced collections intro */
.collections-intro {
    margin-bottom: 1.25rem;
    color: rgb(255 255 255 / 90%);
    font-size: 1rem;
    line-height: 1.5;
}

/* Responsive adjustments */
@media (width <= 768px) {
    .meta-chip {
        font-size: 0.7rem;
        padding: 0.2rem 0.5rem;
    }
    
    .pagination {
        flex-wrap: wrap;
        gap: 0.25rem;
    }
    
    .pagination button {
        padding: 0.5rem 0.75rem;
        min-width: 2.5rem;
    }

    .collection-card::before {
        content: none;
    }
    
    .case-extra-meta {
        gap: 0.25rem;
    }
}

/* Legacy collection styles for compatibility */
.collection-header {
    border-bottom: 1px solid rgb(255 255 255 / 20%);
    padding-bottom: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
}

.collection-title {
    color: var(--white);
    margin: 0 0 var(--spacing-sm) 0;
    font-size: var(--font-size-2xl);
}

.collection-meta {
    color: rgb(255 255 255 / 80%);
    font-size: var(--font-size-sm);
    display: flex;
    gap: var(--spacing-lg);
    flex-wrap: wrap;
}

.collection-description {
    color: rgb(255 255 255 / 90%);
    margin-bottom: var(--spacing-lg);
    line-height: var(--line-height-relaxed);
}

.collection-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: var(--spacing-md);
    margin-top: var(--spacing-lg);
}

.collection-stat {
    text-align: center;
    padding: var(--spacing-md);
    background: rgb(255 255 255 / 10%);
    border-radius: var(--border-radius-md);
  /* stylelint-disable-next-line property-no-vendor-prefix */
  /* stylelint-disable-next-line property-no-vendor-prefix */
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.collection-stat-value {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    color: var(--white);
    display: block;
}

.collection-stat-label {
    font-size: var(--font-size-xs);
    color: rgb(255 255 255 / 80%);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}