/* Tiger AJAX Grid + Filter — shared styles */

.tiger-ajax-grid-wrap { position: relative; }

.tiger-ajax-grid {
    display: grid;
    gap: 24px;
    grid-template-columns: repeat(var(--tiger-cols-desktop, 3), minmax(0,1fr));
    transition: opacity .2s ease;
}
.tiger-ajax-grid--list { grid-template-columns: 1fr !important; }

/* Masonry — CSS-only column flow. Good enough for v1 without a JS lib. */
.tiger-ajax-grid--masonry {
    grid-template-columns: none !important;
    column-count: var(--tiger-masonry-cols, 3);
    column-gap: 24px;
    display: block;
}
.tiger-ajax-grid--masonry > .tiger-ajax-card {
    break-inside: avoid;
    margin-bottom: 24px;
    display: block;
}

@media (max-width: 1024px) {
    .tiger-ajax-grid:not(.tiger-ajax-grid--list):not(.tiger-ajax-grid--masonry) {
        grid-template-columns: repeat(var(--tiger-cols-tablet, 2), minmax(0,1fr));
    }
    .tiger-ajax-grid--masonry { --tiger-masonry-cols: var(--tiger-cols-tablet, 2); }
}
@media (max-width: 600px) {
    .tiger-ajax-grid:not(.tiger-ajax-grid--list):not(.tiger-ajax-grid--masonry) {
        grid-template-columns: repeat(var(--tiger-cols-mobile, 1), minmax(0,1fr));
    }
    .tiger-ajax-grid--masonry { --tiger-masonry-cols: var(--tiger-cols-mobile, 1); }
}

/* While AJAX is in flight */
.tiger-ajax-grid-wrap.is-loading .tiger-ajax-grid { opacity: .35; pointer-events: none; }

/* Card */
.tiger-ajax-card {
    overflow: hidden;
    transition: transform .2s ease, box-shadow .2s ease;
}
.tiger-ajax-card:hover { transform: translateY(-3px); }

.tiger-ajax-card__image-wrap { display: block; position: relative; }
.tiger-ajax-card__eyebrow--over {
    position: absolute;
    top: 12px; left: 12px;
    z-index: 2;
    background: rgba(0,0,0,0.72);
    color: #fff;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 11px;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-weight: 600;
    max-width: calc(100% - 24px);
    pointer-events: none;
}
.tiger-ajax-card__image-wrap .tiger-ajax-card__eyebrow--over,
.tiger-ajax-card__image-wrap .tiger-ajax-card__eyebrow--over a,
.tiger-ajax-card__image-wrap .tiger-ajax-card__eyebrow--over a:hover,
.tiger-ajax-card__image-wrap .tiger-ajax-card__eyebrow--over a:visited {
    color: inherit;
    text-decoration: none;
}
.tiger-ajax-card__image {
    width: 100%;
    overflow: hidden;
    background: #f1f5f9;
    aspect-ratio: 16/9;
}
.tiger-ajax-card__image img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .4s ease;
}
.tiger-ajax-card:hover .tiger-ajax-card__image img { transform: scale(1.05); }

.tiger-ajax-card__body { display: flex; flex-direction: column; gap: 8px; }
.tiger-ajax-card__eyebrow {
    font-size: 12px; text-transform: uppercase; letter-spacing: .12em;
    color: #6366f1; font-weight: 600;
}
.tiger-ajax-card__title { margin: 4px 0; font-size: 18px; line-height: 1.3; }
.tiger-ajax-card__title a { color: inherit; text-decoration: none; }
.tiger-ajax-card__meta { font-size: 13px; opacity: .65; }
.tiger-ajax-card__body-text { font-size: 14px; line-height: 1.55; opacity: .85; }
.tiger-ajax-card__btn {
    margin-top: auto;
    align-self: flex-start;
    text-decoration: none;
    font-weight: 600; font-size: 14px;
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 0;
    color: inherit;
}
.tiger-ajax-card__btn span { transition: transform .2s ease; }
.tiger-ajax-card__btn:hover span { transform: translateX(4px); }

/* Empty state */
.tiger-ajax-grid-empty {
    grid-column: 1 / -1;
    padding: 40px 24px;
    text-align: center;
    color: #64748b;
    border: 1px dashed #cbd5e1;
    border-radius: 12px;
}

/* Pager */
.tiger-ajax-grid-pager { display: flex; justify-content: center; margin-top: 28px; }
.tiger-ajax-grid-loadmore {
    padding: 12px 28px; border-radius: 999px;
    border: 1.5px solid currentColor; background: transparent; cursor: pointer;
    font-weight: 600;
    display: inline-flex; align-items: center; gap: 10px;
    transition: background .2s ease, color .2s ease;
}
.tiger-ajax-grid-loadmore:hover { background: currentColor; color: #fff; }
.tiger-ajax-grid-loadmore[disabled] { opacity: .5; cursor: wait; }

.tiger-ajax-grid-spinner {
    width: 14px; height: 14px; border-radius: 50%;
    border: 2px solid currentColor; border-top-color: transparent;
    animation: tiger-spin .8s linear infinite;
}
@keyframes tiger-spin { to { transform: rotate(360deg); } }

/* Numbered pagination */
.tiger-ajax-grid-numbered { display: flex; gap: 6px; justify-content: center; margin-top: 28px; flex-wrap: wrap; }
.tiger-ajax-grid-numbered button {
    min-width: 36px; height: 36px; padding: 0 10px;
    border-radius: 8px; border: 1px solid #e2e8f0; background: #fff; cursor: pointer;
    font-weight: 600;
}
.tiger-ajax-grid-numbered button.is-current { background: #111; color: #fff; border-color: #111; }

/* ===== FILTER WIDGET ===== */

/* --- Buttons (taxonomy) --- */
.tiger-ajax-filter__buttons {
    display: flex; gap: 8px;
    flex-wrap: wrap;
    align-items: center;
}
.tiger-ajax-filter__buttons[style*="flex-direction: column"] { align-items: stretch; }

.tiger-ajax-filter__btn {
    background: transparent;
    border: 1.5px solid #cbd5e1;
    color: #334155;
    padding: 8px 18px;
    border-radius: 999px;
    font-weight: 600; font-size: 14px;
    cursor: pointer;
    display: inline-flex; align-items: center; gap: 6px;
    /* Slight lift on the active button so it feels "selected" without
       requiring a heavy color contrast. */
    transition: background .2s ease, color .2s ease, border-color .2s ease, transform .15s ease, box-shadow .2s ease;
    white-space: nowrap;
}
.tiger-ajax-filter__btn:hover { border-color: #111; color: #111; }
.tiger-ajax-filter__btn:active { transform: translateY(1px); }
.tiger-ajax-filter__btn:focus-visible {
    outline: 2px solid #6366f1; outline-offset: 2px;
}
.tiger-ajax-filter__btn.is-active {
    background: #111; color: #fff; border-color: #111;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.18);
}
.tiger-ajax-filter__buttons.is-multi .tiger-ajax-filter__btn.is-active::before {
    content: '✓';
    font-weight: 700; font-size: 12px;
    margin-right: 2px;
    opacity: .9;
}

/* Per-term post count — slightly muted so the name stays primary. */
.tiger-ajax-filter__count {
    font-weight: 500;
    opacity: .65;
    font-size: 0.9em;
}
.tiger-ajax-filter__btn.is-active .tiger-ajax-filter__count { opacity: .85; }

/* --- Select / search / sort inputs --- */
.tiger-ajax-filter__select,
.tiger-ajax-filter__search,
.tiger-ajax-filter__sort {
    padding: 10px 14px; border-radius: 8px;
    border: 1.5px solid #cbd5e1; background: #fff; font-size: 14px;
    min-width: 200px;
    color: inherit;
    font: inherit;
    transition: border-color .2s ease, box-shadow .2s ease;
}
.tiger-ajax-filter__select:focus,
.tiger-ajax-filter__search:focus,
.tiger-ajax-filter__sort:focus {
    outline: none;
    border-color: #6366f1;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.18);
}

/* --- Search input wrapper (icon + clear button) --- */
.tiger-ajax-filter__search-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-width: 220px;
}
.tiger-ajax-filter__search-wrap .tiger-ajax-filter__search {
    width: 100%;
    min-width: 0;
    padding: 10px 14px;
}
.tiger-ajax-filter__search-wrap.has-icon .tiger-ajax-filter__search { padding-left: 38px; }
.tiger-ajax-filter__search-wrap.has-clear .tiger-ajax-filter__search { padding-right: 36px; }

.tiger-ajax-filter__search-icon {
    position: absolute;
    left: 12px; top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    pointer-events: none;
}

.tiger-ajax-filter__search-clear {
    position: absolute;
    right: 8px; top: 50%;
    transform: translateY(-50%);
    width: 22px; height: 22px;
    display: inline-flex; align-items: center; justify-content: center;
    background: transparent;
    border: 0;
    border-radius: 50%;
    color: #64748b;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}
.tiger-ajax-filter__search-clear:hover { background: #e2e8f0; color: #111; }
.tiger-ajax-filter__search-clear:focus-visible {
    outline: 2px solid #6366f1; outline-offset: 1px;
}

/* --- Sort label --- */
.tiger-ajax-filter__sort-label {
    display: inline-block;
    margin-right: 8px;
    font-size: 14px;
    font-weight: 600;
    color: inherit;
}

/* --- Counter --- */
.tiger-ajax-filter__counter {
    display: inline-block;
    font-size: 14px;
    color: inherit;
    line-height: 1.4;
    font-variant-numeric: tabular-nums;
    transition: opacity .2s ease;
}

/* --- Clear button (widget mode) --- */
.tiger-ajax-filter__clear {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    color: #475569;
    border: 1.5px solid #cbd5e1;
    border-radius: 999px;
    padding: 8px 16px;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    transition: background .2s ease, color .2s ease, border-color .2s ease, opacity .2s ease, transform .2s ease;
}
.tiger-ajax-filter__clear:hover {
    background: #f1f5f9;
    color: #111;
    border-color: #94a3b8;
}
.tiger-ajax-filter__clear:focus-visible {
    outline: 2px solid #6366f1; outline-offset: 2px;
}
.tiger-ajax-filter__clear.is-hidden {
    opacity: 0;
    transform: scale(0.9);
    pointer-events: none;
}

/* Skeleton during initial AJAX (used by JS) */
.tiger-ajax-skeleton {
    background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%);
    background-size: 400% 100%;
    animation: tiger-skel 1.6s ease-in-out infinite;
    border-radius: 12px;
    min-height: 280px;
}
@keyframes tiger-skel {
    0%   { background-position: 100% 50%; }
    100% { background-position: 0   50%; }
}

/* ============================================================
 * Advanced filter modes — checkboxes / radio / range / date / tags
 * Minimal defaults so the new modes look intentional out of the
 * box; users can override via Elementor style controls.
 * ============================================================ */
.tiger-ajax-filter__checks,
.tiger-ajax-filter__radios {
    display: flex; flex-direction: column; gap: 8px;
}
.tiger-ajax-filter__check,
.tiger-ajax-filter__radio {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 6px 10px; border: 1px solid #e2e8f0; border-radius: 8px;
    cursor: pointer; transition: background .15s, border-color .15s;
    font-size: 14px;
}
.tiger-ajax-filter__check.is-active,
.tiger-ajax-filter__radio.is-active {
    background: #eef2ff; border-color: #6366f1;
}
.tiger-ajax-filter__check input,
.tiger-ajax-filter__radio input {
    accent-color: #6366f1;
}

.tiger-ajax-filter__range {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.tiger-ajax-filter__range-inputs {
    display: flex; align-items: center; gap: 6px;
}
.tiger-ajax-filter__range input[type="number"] {
    width: 90px; padding: 6px 10px; border: 1px solid #e2e8f0; border-radius: 8px;
    font-size: 14px;
}
.tiger-ajax-filter__range-sep { color: #94a3b8; }
.tiger-ajax-filter__range-apply {
    padding: 6px 14px; background: #6366f1; color: #fff;
    border: 0; border-radius: 8px; cursor: pointer; font-size: 14px;
}
.tiger-ajax-filter__range-apply:hover { background: #4f46e5; }

.tiger-ajax-filter__date {
    display: flex; gap: 10px; flex-wrap: wrap; align-items: center;
}
.tiger-ajax-filter__date-group {
    display: inline-flex; align-items: center; gap: 6px; font-size: 14px;
}
.tiger-ajax-filter__date input[type="date"] {
    padding: 6px 10px; border: 1px solid #e2e8f0; border-radius: 8px;
    font-size: 14px;
}
.tiger-ajax-filter__date-label { color: #64748b; }

.tiger-ajax-filter__tags {
    display: flex; flex-wrap: wrap; gap: 6px; min-height: 28px;
}
.tiger-ajax-filter__tag {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 4px 8px 4px 10px; background: #eef2ff; color: #4f46e5;
    border-radius: 999px; font-size: 13px;
}
.tiger-ajax-filter__tag-x {
    appearance: none; background: none; border: 0; cursor: pointer;
    color: inherit; font-size: 16px; line-height: 1; padding: 0 4px;
    border-radius: 50%;
}
.tiger-ajax-filter__tag-x:hover { background: rgba(99, 102, 241, .15); }
.tiger-ajax-filter__tags-empty { color: #94a3b8; font-size: 13px; }