/* ═══════════════════════════════════════════════════════════════
   CLIP Resource Search — component styles
   Sections: ks1-2 | ks3 | gcse | teachers
   RE:Quest palette (no longer YFC-bound — see project memory
   "Ownership Transition"): Bible teal #12907E · God purple #5B4B9E ·
   Festivals orange #D9722E · Life of Jesus blue #1D6FA5 · Ink #22303A
   ═══════════════════════════════════════════════════════════════ */

/* ── Section theme tokens ─────────────────────────────────────── */
.clip-search { --cs-accent:#12907E; --cs-accent2:#D9722E; --cs-text:#1a1a1a;
               --cs-bg:#f8fafa; --cs-card-bg:#fff; --cs-radius:10px;
               --cs-title-size:1.05rem; --cs-filter-cols:repeat(auto-fit,minmax(180px,1fr)); }

.clip-search[data-section="ks1-2"]  { --cs-accent:#12907E; --cs-accent2:#D9722E;
                                       --cs-radius:18px; --cs-title-size:1.2rem;
                                       --cs-bg:#f0fafa; }

.clip-search[data-section="ks3"]    { --cs-accent:#5B4B9E; --cs-accent2:#1D6FA5;
                                       --cs-radius:10px; --cs-title-size:1.05rem; }

.clip-search[data-section="gcse"]   { --cs-accent:#1D6FA5; --cs-accent2:#22303A;
                                       --cs-radius:4px; --cs-title-size:1rem; }

.clip-search[data-section="teachers"]{ --cs-accent:#22303A; --cs-accent2:#1D6FA5;
                                       --cs-radius:4px; --cs-title-size:0.95rem;
                                       --cs-bg:#f4f5f6; }

/* ── Wrapper ──────────────────────────────────────────────────── */
.clip-search {
    font-family: inherit;
    background: var(--cs-bg);
    padding: 24px 0 40px;
}

/* ── Filter bar ───────────────────────────────────────────────── */
.clip-search__filters {
    display: grid;
    grid-template-columns: var(--cs-filter-cols);
    gap: 12px;
    align-items: end;
    margin-bottom: 20px;
    padding: 20px;
    background: #fff;
    border-radius: var(--cs-radius);
    box-shadow: 0 2px 8px rgba(0,0,0,.07);
}

.clip-search__filter-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.clip-search__filter-group label {
    font-size: .78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #666;
}

.clip-search__select,
.clip-search__input {
    height: 42px;
    padding: 0 12px;
    border: 2px solid #ddd;
    border-radius: 6px;
    font-size: .95rem;
    background: #fff;
    color: var(--cs-text);
    transition: border-color .15s;
    width: 100%;
    box-sizing: border-box;
}

.clip-search__select:focus,
.clip-search__input:focus {
    outline: none;
    border-color: var(--cs-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--cs-accent) 20%, transparent);
}

.clip-search__filter-actions {
    display: flex;
    align-items: end;
    gap: 8px;
    /* Matches a labelled filter-group's total height (measured: 64.7px
       vs this row's own 42px — a ~23px gap, exactly a label's height).
       Without it, whenever auto-fit packs this into the same row as a
       labelled field (e.g. Sort by), that row's height stretches to fit
       the label+select and align-items:end leaves these label-less
       buttons sitting low with odd empty space above them. Matching the
       height keeps it aligned wherever the grid places it, rather than
       forcing it onto its own row and wasting space on wide screens. */
    padding-top: 23px;
}

.clip-search__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    height: 42px;
    padding: 0 20px;
    border: 2px solid transparent;
    border-radius: 6px;
    font-size: .95rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: opacity .15s, transform .1s;
    white-space: nowrap;
}
.clip-search__btn:active { transform: scale(.98); }

.clip-search__btn--primary {
    background: var(--cs-accent);
    color: #fff;
}
.clip-search__btn--primary:hover { opacity: .88; }

.clip-search__btn--ghost {
    background: transparent;
    color: #888;
    border-color: #ddd;
}
.clip-search__btn--ghost:hover { border-color: #aaa; color: #555; }

/* View toggle */
.clip-search__view-toggle {
    display: flex;
    gap: 4px;
}

.clip-search__view-btn {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #ddd;
    border-radius: 6px;
    background: #fff;
    cursor: pointer;
    color: #888;
    transition: all .15s;
}
.clip-search__view-btn.is-active,
.clip-search__view-btn:hover {
    background: var(--cs-accent);
    border-color: var(--cs-accent);
    color: #fff;
}

/* ── KS1-2 category tiles ─────────────────────────────────────── */
.clip-search__cat-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 8px;
}

.clip-search__cat-tile-input { position: absolute; opacity: 0; width: 0; height: 0; }

.clip-search__cat-tile-label {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 72px;
    padding: 8px 4px;
    border-radius: 14px;
    border: 3px solid #e0e0e0;
    background: #fff;
    cursor: pointer;
    font-size: .82rem;
    font-weight: 700;
    text-align: center;
    line-height: 1.2;
    color: #444;
    transition: border-color .15s, background .15s, transform .1s;
    user-select: none;
}
.clip-search__cat-tile-label:hover {
    border-color: var(--cs-accent);
    background: color-mix(in srgb, var(--cs-accent) 8%, #fff);
    transform: translateY(-2px);
}
.clip-search__cat-tile-input:checked + .clip-search__cat-tile-label {
    border-color: var(--cs-accent);
    background: color-mix(in srgb, var(--cs-accent) 15%, #fff);
    color: var(--cs-accent);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--cs-accent) 30%, transparent);
}
.clip-search__cat-tile-icon { font-size: 1.6rem; margin-bottom: 4px; line-height: 1; }

/* ── Results meta bar ─────────────────────────────────────────── */
.clip-search__meta-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    min-height: 32px;
}
.clip-search__result-count {
    font-size: .9rem;
    color: #666;
}
.clip-search__result-count strong { color: var(--cs-text); }

/* ── Active filter chips ──────────────────────────────────────── */
.clip-search__active-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 14px;
}
.clip-search__chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px 4px 12px;
    background: color-mix(in srgb, var(--cs-accent) 12%, #fff);
    border: 1.5px solid color-mix(in srgb, var(--cs-accent) 40%, #fff);
    border-radius: 20px;
    font-size: .82rem;
    font-weight: 600;
    color: var(--cs-accent);
    text-decoration: none;
}
.clip-search__chip-remove {
    width: 16px; height: 16px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--cs-accent) 25%, #fff);
    color: var(--cs-accent);
    font-size: .75rem;
    display: flex; align-items: center; justify-content: center;
    text-decoration: none;
    line-height: 1;
}
.clip-search__chip-remove:hover { background: var(--cs-accent); color: #fff; }

/* ── Resource grid ────────────────────────────────────────────── */
.clip-search__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
}

/* ── Resource card ────────────────────────────────────────────── */
.clip-resource-card {
    border-radius: var(--cs-radius);
    background: var(--cs-card-bg);
    box-shadow: 0 2px 10px rgba(0,0,0,.08);
    overflow: hidden;
    transition: transform .15s, box-shadow .15s;
    display: flex;
    flex-direction: column;
}
.clip-resource-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 6px 20px rgba(0,0,0,.13);
}

.clip-resource-card__link {
    display: flex;
    flex-direction: column;
    height: 100%;
    text-decoration: none;
    color: inherit;
}

.clip-resource-card__thumb {
    height: 160px;
    background: linear-gradient(135deg, var(--cs-accent) 0%, var(--cs-accent2) 100%);
    background-size: cover;
    background-position: center;
    position: relative;
    flex-shrink: 0;
}

/* KS1-2: larger thumbnails */
.clip-search[data-section="ks1-2"] .clip-resource-card__thumb { height: 180px; }

.clip-resource-card__type-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    padding: 3px 10px;
    border-radius: 20px;
    background: rgba(0,0,0,.55);
    color: #fff;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .03em;
    backdrop-filter: blur(4px);
}

.clip-resource-card__level-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    padding: 3px 10px;
    border-radius: 20px;
    background: var(--cs-accent2);
    color: #fff;
    font-size: .72rem;
    font-weight: 700;
}

.clip-resource-card__body {
    padding: 14px 16px 16px;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.clip-resource-card__title {
    font-size: var(--cs-title-size);
    font-weight: 700;
    line-height: 1.3;
    margin: 0;
    color: var(--cs-text);
    /* 3-line clamp */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.clip-resource-card__cat {
    font-size: .78rem;
    color: var(--cs-accent);
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.clip-resource-card__footer {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: auto;
    font-size: .78rem;
    color: #888;
}
.clip-resource-card__time::before { content: '⏱ '; }

/* ── List view ────────────────────────────────────────────────── */
.clip-search__results[data-view="list"] .clip-search__grid {
    grid-template-columns: 1fr;
    gap: 8px;
}

.clip-search__results[data-view="list"] .clip-resource-card {
    border-radius: 6px;
}

.clip-search__results[data-view="list"] .clip-resource-card__link {
    flex-direction: row;
    align-items: stretch;
}

.clip-search__results[data-view="list"] .clip-resource-card__thumb {
    width: 100px;
    height: auto;
    min-height: 80px;
    flex-shrink: 0;
    border-radius: 0;
}

/* Grid view: the type/level badges live over the thumbnail image (see
   base rules above) and the list-view copies stay hidden. */
.clip-resource-card__list-badges { display: none; }

/* List view: the opposite — hide the over-the-image copies (a 100px
   thumb has no room for badge text without covering the photo) and show
   the dedicated list-badges column between the thumbnail and the title. */
.clip-search__results[data-view="list"] .clip-resource-card__thumb .clip-resource-card__type-badge,
.clip-search__results[data-view="list"] .clip-resource-card__thumb .clip-resource-card__level-badge {
    display: none;
}

.clip-search__results[data-view="list"] .clip-resource-card__list-badges {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 6px;
    flex-shrink: 0;
    max-width: 110px;
    padding: 12px 10px;
}

.clip-search__results[data-view="list"] .clip-resource-card__list-badges .clip-resource-card__type-badge,
.clip-search__results[data-view="list"] .clip-resource-card__list-badges .clip-resource-card__level-badge {
    position: static;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.clip-search__results[data-view="list"] .clip-resource-card__body {
    flex-direction: row;
    align-items: center;
    padding: 12px 16px;
    gap: 16px;
}

.clip-search__results[data-view="list"] .clip-resource-card__title {
    font-size: .95rem;
    -webkit-line-clamp: 2;
    flex: 1;
    min-width: 0;
}

.clip-search__results[data-view="list"] .clip-resource-card__cat {
    /* Fixed box, not a min/max range: with content-based sizing, this
       column's own width (and so its start position, since the title's
       flex:1 fills whatever's left) shifted per row depending on the
       category text's length — a ragged left edge, not the aligned
       column it looks like at a glance. */
    flex: 0 0 220px;
    text-align: left;
}

.clip-search__results[data-view="list"] .clip-resource-card__footer {
    margin-top: 0;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    min-width: 80px;
    text-align: right;
}

/* ── No results ───────────────────────────────────────────────── */
.clip-search__no-results {
    padding: 48px 24px;
    text-align: center;
    background: #fff;
    border-radius: var(--cs-radius);
    color: #666;
}
.clip-search__no-results h3 { font-size: 1.2rem; color: #333; margin: 0 0 8px; }
.clip-search__no-results a { color: var(--cs-accent); }

/* ── Pagination ───────────────────────────────────────────────── */
.clip-search__pagination {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin: 32px 0 0;
    padding: 0;
    list-style: none;
    flex-wrap: wrap;
}
.clip-search__pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 6px;
    background: #fff;
    border: 2px solid #ddd;
    color: #444;
    text-decoration: none;
    font-weight: 600;
    font-size: .9rem;
    transition: all .15s;
}
.clip-search__pagination .page-numbers.current,
.clip-search__pagination .page-numbers:hover {
    background: var(--cs-accent);
    border-color: var(--cs-accent);
    color: #fff;
}
.clip-search__pagination .page-numbers.dots {
    border: none;
    background: transparent;
    color: #aaa;
    pointer-events: none;
}

/* ── Loading state ────────────────────────────────────────────── */
.clip-search__results.is-loading {
    opacity: .5;
    pointer-events: none;
    transition: opacity .2s;
}

/* ── Responsive ───────────────────────────────────────────────── */
@media (max-width: 768px) {
    .clip-search__filters {
        grid-template-columns: 1fr;
    }
    .clip-search__filter-actions {
        flex-wrap: wrap;
    }
    .clip-search__grid {
        grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
        gap: 14px;
    }
    .clip-search__results[data-view="list"] .clip-resource-card__thumb {
        width: 72px;
    }
    .clip-search__results[data-view="list"] .clip-resource-card__cat { display: none; }
    .clip-search__results[data-view="list"] .clip-resource-card__list-badges {
        max-width: 80px;
        padding: 8px 6px;
    }
    .clip-search__cat-tiles {
        grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
    }
}

@media (max-width: 480px) {
    .clip-search__grid {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }
    .clip-resource-card__thumb { height: 120px; }
    .clip-search[data-section="ks1-2"] .clip-resource-card__thumb { height: 130px; }
    .clip-resource-card__body { padding: 10px 12px 12px; }
}

/* ── Type badge colour overrides ─────────────────────────────── */
.clip-resource-card__type-badge[data-type="Video"],
.clip-resource-card__type-badge[data-type="Video Gallery"] { background: rgba(0,179,179,.8); }
.clip-resource-card__type-badge[data-type="Image Gallery"] { background: rgba(127,84,157,.8); }
.clip-resource-card__type-badge[data-type="Timeline"]      { background: rgba(232,104,48,.8); }
.clip-resource-card__type-badge[data-type="Game"]          { background: rgba(232,104,48,.8); }
.clip-resource-card__type-badge[data-type="File"]          { background: rgba(48,65,73,.8); }
.clip-resource-card__type-badge[data-type="Text"]          { background: rgba(0,104,179,.8); }