/* ============================================================
   AJAX Content Search  –  ajax-search.css
   ============================================================ */

/* ── Tokens ── */
.ajs-wrap {
    --ajs-accent:      #2563eb;
    --ajs-accent-h:    #1d4ed8;
    --ajs-bg:          #ffffff;
    --ajs-surface:     #f8fafc;
    --ajs-border:      #e2e8f0;
    --ajs-text:        #0f172a;
    --ajs-muted:       #64748b;
    --ajs-mark-bg:     #fef08a;
    --ajs-mark-text:   #713f12;
    --ajs-radius:      10px;
    --ajs-shadow:      0 1px 3px rgba(0,0,0,.08), 0 4px 16px rgba(0,0,0,.05);
    --ajs-shadow-card: 0 1px 2px rgba(0,0,0,.06), 0 4px 12px rgba(0,0,0,.04);
    font-family: inherit;
    max-width: 860px;
    margin: 0 auto;
    box-sizing: border-box;
}

*, *::before, *::after { box-sizing: inherit; }

/* ── Search bar ── */
.ajs-search-bar {
    display: flex;
    align-items: center;
    gap: 0;
    background: var(--ajs-bg);
    border: 2px solid var(--ajs-border);
    border-radius: var(--ajs-radius);
    box-shadow: var(--ajs-shadow);
    transition: border-color .2s, box-shadow .2s;
    overflow: hidden;
}

.ajs-search-bar:focus-within {
    border-color: var(--ajs-accent);
    box-shadow: 0 0 0 3px rgba(37,99,235,.15), var(--ajs-shadow);
}

.ajs-icon {
    display: flex;
    align-items: center;
    padding: 0 12px 0 16px;
    color: var(--ajs-muted);
    pointer-events: none;
    flex-shrink: 0;
}
.ajs-icon svg { width: 20px; height: 20px; }

.ajs-input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-size: 1rem;
    color: var(--ajs-text);
    padding: 14px 0;
    min-width: 0;
}
.ajs-input::placeholder { color: var(--ajs-muted); }
/* hide native clear on Webkit */
.ajs-input::-webkit-search-cancel-button { display: none; }

.ajs-clear {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 100%;
    border: none;
    background: transparent;
    color: var(--ajs-muted);
    cursor: pointer;
    padding: 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity .15s, color .15s;
    flex-shrink: 0;
}
.ajs-clear svg { width: 17px; height: 17px; }
.ajs-clear:hover { color: var(--ajs-text); }
.ajs-wrap.has-value .ajs-clear { opacity: 1; pointer-events: auto; }

/* ── Status line ── */
.ajs-status {
    font-size: .85rem;
    color: var(--ajs-muted);
    margin: 14px 2px 0;
    min-height: 1.2em;
    transition: opacity .2s;
}
.ajs-status.loading {
    display: flex;
    align-items: center;
    gap: 8px;
}
.ajs-status.loading::before {
    content: '';
    display: inline-block;
    width: 14px; height: 14px;
    border: 2px solid var(--ajs-border);
    border-top-color: var(--ajs-accent);
    border-radius: 50%;
    animation: ajs-spin .7s linear infinite;
    flex-shrink: 0;
}
@keyframes ajs-spin { to { transform: rotate(360deg); } }

/* ── Results grid ── */
.ajs-results {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 18px;
    margin-top: 20px;
}

/* ── Single result card ── */
.ajs-card {
    display: flex;
    flex-direction: column;
    background: var(--ajs-bg);
    border: 1px solid var(--ajs-border);
    border-radius: var(--ajs-radius);
    box-shadow: var(--ajs-shadow-card);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: transform .18s, box-shadow .18s, border-color .18s;
}
.ajs-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 20px rgba(0,0,0,.1);
    border-color: var(--ajs-accent);
}

.ajs-card-thumb {
    width: 100%;
    aspect-ratio: 16/9;
    overflow: hidden;
    background: var(--ajs-surface);
}
.ajs-card-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .3s;
}
.ajs-card:hover .ajs-card-thumb img { transform: scale(1.04); }

.ajs-card-thumb-placeholder {
    width: 100%;
    aspect-ratio: 16/9;
    background: linear-gradient(135deg, var(--ajs-surface) 0%, #e2e8f0 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ajs-border);
}
.ajs-card-thumb-placeholder svg { width: 36px; height: 36px; }

.ajs-card-body {
    padding: 16px 18px 18px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
}

.ajs-card-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .72rem;
    color: var(--ajs-muted);
    text-transform: uppercase;
    letter-spacing: .04em;
}
.ajs-card-type {
    background: var(--ajs-surface);
    border: 1px solid var(--ajs-border);
    border-radius: 4px;
    padding: 1px 6px;
    font-weight: 600;
}

.ajs-card-title {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.35;
    color: var(--ajs-text);
    margin: 0;
}

.ajs-card-excerpt {
    font-size: .875rem;
    color: var(--ajs-muted);
    line-height: 1.55;
    margin: 0;
    /* 3-line clamp */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* keyword highlight */
.ajs-card-title mark,
.ajs-card-excerpt mark {
    background: var(--ajs-mark-bg);
    color: var(--ajs-mark-text);
    border-radius: 2px;
    padding: 0 1px;
}

/* ── No results ── */
.ajs-no-results {
    grid-column: 1 / -1;
    text-align: center;
    padding: 60px 20px;
    color: var(--ajs-muted);
}
.ajs-no-results svg {
    display: block;
    margin: 0 auto 16px;
    width: 48px; height: 48px;
    opacity: .35;
}
.ajs-no-results strong { display: block; font-size: 1.05rem; margin-bottom: 6px; color: var(--ajs-text); }

/* ── Pagination ── */
.ajs-pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 32px;
}

.ajs-page-btn {
    min-width: 38px;
    height: 38px;
    padding: 0 10px;
    border: 1px solid var(--ajs-border);
    border-radius: 7px;
    background: var(--ajs-bg);
    color: var(--ajs-text);
    font-size: .9rem;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    transition: background .15s, border-color .15s, color .15s;
    line-height: 1;
}
.ajs-page-btn svg { width: 15px; height: 15px; }
.ajs-page-btn:hover:not(:disabled) {
    background: var(--ajs-surface);
    border-color: var(--ajs-accent);
    color: var(--ajs-accent);
}
.ajs-page-btn.active {
    background: var(--ajs-accent);
    border-color: var(--ajs-accent);
    color: #fff;
    cursor: default;
}
.ajs-page-btn:disabled {
    opacity: .35;
    cursor: not-allowed;
}
.ajs-page-ellipsis {
    min-width: 28px;
    text-align: center;
    color: var(--ajs-muted);
    font-size: .9rem;
    line-height: 38px;
}

/* ── Fade-in animation for cards ── */
@keyframes ajs-fadein {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
.ajs-card {
    animation: ajs-fadein .22s ease both;
}
.ajs-card:nth-child(1)  { animation-delay: .02s; }
.ajs-card:nth-child(2)  { animation-delay: .05s; }
.ajs-card:nth-child(3)  { animation-delay: .08s; }
.ajs-card:nth-child(4)  { animation-delay: .11s; }
.ajs-card:nth-child(5)  { animation-delay: .14s; }
.ajs-card:nth-child(6)  { animation-delay: .17s; }

/* ── Responsive ── */
@media (max-width: 600px) {
    .ajs-results { grid-template-columns: 1fr; }
    .ajs-input   { font-size: .95rem; }
}