/* =====================================================
   ACTIVITY ARCHIVE – FILTERS
===================================================== */

.activity-filters {
    margin: 2rem 0;
}

.activity-search-group .activity-search-row {
    display: flex;
    gap: 10px;

    /* ✅ FIX 2: ensure the row never overflows horizontally */
    width: 100%;
    max-width: 100%;
}

.filters-dropdowns {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 1rem;
}

.filter-dropdown {
    position: relative;
    flex: 1 1 200px;
}

.filter-toggle {
    width: 100%;
    display: flex;
    justify-content: space-between;
}

.filter-toggle::after {
    content: "▾";
    margin-left: 8px;
}

.filter-panel {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    left: 0;

    /* ✅ CHANGE #2: wider dropdown panels so checkbox text fits */
    right: auto;
    min-width: 280px;
    width: max(100%, 280px);
    max-width: 420px;

    background: #fff;
    border-radius: 12px;
    border: 1px solid #ddd;
    padding: 0.75rem;
    max-height: 220px;
    overflow-y: auto;
    box-shadow: 0 10px 28px rgba(0,0,0,0.14);
    z-index: 100;
}

/* ✅ CHANGE #2: make checkbox rows align nicely and allow wrapping */
.filter-panel label {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.filter-panel input[type="checkbox"] {
    margin-top: 2px;
}

.filter-dropdown.is-open .filter-panel {
    display: block;
}

/* ✅ FIX 2: make sure input can shrink and button stays inside screen */
.activity-search-group .search-field {
    min-width: 0;       /* critical: allow flex children to shrink */
    flex: 1 1 auto;
}

.activity-search-group .search-submit {
    flex: 0 0 auto;
    min-width: 44px;
}

/* Mobile: tighten spacing so search icon never pushes off-screen */
@media (max-width: 767px) {
    .activity-search-group .activity-search-row {
        gap: 8px;
    }

    .activity-search-group .search-submit {
        min-width: 44px;
        width: 44px;
        padding-left: 0;
        padding-right: 0;
    }

    /* ✅ Keep dropdown usable on small screens */
    .filter-panel {
        min-width: 240px;
        max-width: calc(100vw - 40px);
    }
}

/* =====================================================
   ACTIVITY CARDS
===================================================== */

.activity-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.4rem;
    margin-top: 2rem;
}

.activity-card {
    border-radius: 14px;
    background: rgba(255,255,255,0.92);
    border: 1px solid rgba(0,0,0,0.06);
    box-shadow: 0 10px 28px rgba(0,0,0,0.08);
    overflow: hidden;
    transition: transform 0.22s ease, box-shadow 0.22s ease;
}

.activity-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 40px rgba(0,0,0,0.12);
}

.activity-card-link {
    display: block;
    text-decoration: none;
    color: inherit;
}

/* =====================================================
   ACTIVITY CARDS – REVEAL ANIMATION (no conflict with hover)
===================================================== */

/* Animate the INNER link, not the card itself */
.activity-results.activity-reveal .activity-card-link {
    animation: activityCardReveal 420ms ease both;
}

/* Stagger based on the card position, applied to the link */
.activity-results.activity-reveal .activity-card:nth-child(1)  .activity-card-link { animation-delay: 0ms; }
.activity-results.activity-reveal .activity-card:nth-child(2)  .activity-card-link { animation-delay: 40ms; }
.activity-results.activity-reveal .activity-card:nth-child(3)  .activity-card-link { animation-delay: 80ms; }
.activity-results.activity-reveal .activity-card:nth-child(4)  .activity-card-link { animation-delay: 120ms; }
.activity-results.activity-reveal .activity-card:nth-child(5)  .activity-card-link { animation-delay: 160ms; }
.activity-results.activity-reveal .activity-card:nth-child(6)  .activity-card-link { animation-delay: 200ms; }
.activity-results.activity-reveal .activity-card:nth-child(7)  .activity-card-link { animation-delay: 240ms; }
.activity-results.activity-reveal .activity-card:nth-child(8)  .activity-card-link { animation-delay: 280ms; }
.activity-results.activity-reveal .activity-card:nth-child(9)  .activity-card-link { animation-delay: 320ms; }
.activity-results.activity-reveal .activity-card:nth-child(10) .activity-card-link { animation-delay: 360ms; }
.activity-results.activity-reveal .activity-card:nth-child(n+11) .activity-card-link { animation-delay: 400ms; }

@keyframes activityCardReveal {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Respect reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
    .activity-results.activity-reveal .activity-card-link {
        animation: none !important;
    }
}

/* Thumbnail + placeholder */
.activity-thumb {
    position: relative;
    height: 170px;
    background: #fff;
    border-bottom: 1px solid rgba(0,0,0,0.06);
}

.activity-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* =====================================================
   ACTIVITY TAG CHIPS (FIXED)
===================================================== */

.activity-chips {
    position: absolute;
    inset: 0;

    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    justify-content: flex-start;

    gap: 6px;
    padding: 10px;

    background: rgba(255,255,255,0.55);
    backdrop-filter: blur(2px);

    opacity: 0;
    pointer-events: none;
    transition: opacity 0.22s ease;
}

/* HARD RESET to avoid Astra button/tag styles */
.activity-chip {
    all: unset;
    display: inline-flex;

    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

    padding: 4px 8px;
    border-radius: 999px;

    font-size: 12px;
    line-height: 1.1;
    font-weight: 600;

    color: rgba(0,0,0,0.70);
    background: rgba(255,255,255,0.85);
    border: 1px solid rgba(0,0,0,0.12);

    box-shadow: 0 2px 10px rgba(0,0,0,0.06);
}

/* Hover-only (desktop) */
@media (hover: hover) {
    .activity-card:hover .activity-chips {
        opacity: 1;
    }
}

/* Never show on mobile */
@media (hover: none), (pointer: coarse) {
    .activity-chips {
        display: none !important;
    }
}

.activity-title {
    padding: 16px 18px 6px;
    font-size: 1.12rem;
}

.activity-excerpt {
    padding: 0 18px 18px;
    font-size: 0.95rem;
    opacity: 0.85;
}