/** * Archive Filter Module * Filters, results wrapper, grid, pagination, AJAX loading state * * Generic block — used by all CPT archives (event, network, press, work). * Per-CPT styling (cards, archive header) lives in each CPT's own block. */ /* —————————————————————————————————————————— FILTER BAR —————————————————————————————————————————— */ .archive-filter-block { position: sticky; top: var(--TopBar); border-top: solid 1px var(--K-base-ink); border-bottom: solid 1px var(--K-base-ink); z-index: 800; } .archive-filter-toggle { width: 100%; text-align: left; padding: var(--S01) 0; cursor: pointer; position: relative; background-color: var(--K-base); color: var(--K-base-ink); border: 0; } .archive-filter-toggle::before { content: "+"; height: 100%; display: flex; align-items: center; justify-content: center; position: absolute; right: 0; top: 0; transition: transform var(--A01); } .archive-filter-block.is-open .archive-filter-toggle::before { transform: rotate(45deg); } .archive-filter-block:has(.has-active-filters) .archive-filter-toggle::after { content: '◉'; margin-left: var(--S00); } .archive-filter-block__panel { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows var(--A02), opacity var(--A02); } .archive-filter-block__panel > * { min-height: 0; overflow: hidden; } .archive-filter-block.is-open .archive-filter-block__panel { grid-template-rows: 1fr; opacity: 1; } .archive-filter { display: flex; flex-direction: column; gap: 1px; position: relative; background-color: #666; } /* Filter fields */ .archive-filter__field { display: flex; align-items: stretch; flex: 1; min-width: 0; padding: 0; background: var(--K-negative); color: var(--K-negative-ink); } .archive-filter__field-label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .archive-filter__select { width: 100%; height: 100%; padding: var(--S01); border: 0; border-radius: 0; background: transparent; color: var(--K-base); -webkit-appearance: none; -moz-appearance: none; appearance: none; cursor: pointer; outline: none; transition: background var(--A01); } .archive-filter__select:hover { background: var(--K-accent); } .archive-filter__select.is-active, .archive-filter__select.is-active:hover { background-color: var(--K-accent); color: var(--K-accent-ink); } .archive-filter__select:focus-visible { outline: 2px solid var(--K-accent); outline-offset: -2px; border-radius: 0; } /* Buttons */ .archive-filter__buttons { display: flex; flex-direction: row; gap: 1px; padding: 0; } .archive-filter__buttons-label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .archive-filter__order { flex: 2; display: flex; gap: 1px; } .archive-filter__button { flex: 1; display: flex; align-items: center; justify-content: center; padding: var(--S01) 0; border: 0; background: var(--K-negative); color: var(--K-negative-ink); text-decoration: none; cursor: pointer; transition: background var(--A01), color var(--A01); } .archive-filter__button:hover { background: var(--K-accent); color: var(--K-accent-ink); text-decoration: none; } .archive-filter__button input { position: absolute; opacity: 0; pointer-events: none; } .archive-filter__button:has(input:checked), .archive-filter__button:has(input:checked):hover { background: var(--K-accent); color: var(--K-accent-ink); } .archive-filter__button:has(input:checked) span, .archive-filter__button:has(input:checked):hover span { text-decoration: none; } .archive-filter__button:has(input:focus-visible) { outline: 2px solid var(--K-base); outline-offset: -2px; } .archive-filter__button-reset { flex: 1; cursor: pointer; pointer-events: none; transition: background var(--A01), color var(--A01); } .archive-filter__button-reset span { opacity: 0.3; transition: opacity var(--A01);} .archive-filter__button-reset:hover { background: var(--K-negative); color: var(--K-negative-ink); text-decoration: none; } .archive-filter__button-reset:focus-visible { outline: 2px solid var(--K-accent); outline-offset: -2px; } .archive-filter.has-active-filters .archive-filter__button-reset { pointer-events: auto; } .archive-filter.has-active-filters .archive-filter__button-reset span { opacity: 1;} .archive-filter.has-active-filters .archive-filter__button-reset:hover { background: var(--K-accent); color: var(--K-accent-ink); text-decoration: none; } /* —————————————————————————————————————————— RESULTS —————————————————————————————————————————— */ .archive-filter__results { transition: opacity var(--A01); min-height: 200px; /* Prevent layout shift during AJAX swaps */ } .archive-filter__results.is-loading { opacity: 0.4; pointer-events: none; } /* GRID */ .archive-filter__grid { display: grid; grid-template-columns: 1fr; gap: var(--S04) 0; } .archive-filter__grid:has(.list-row) { gap: 0; } /* LIST CARDS */ .list-card { width: 100%; height: 100%; margin: 0; padding: 0; } .list-card__link { width: 100%; height: 100%; display: flex; flex-direction: column; gap: 0; color: var(--K-base-ink); text-decoration: none; } .list-card__link:hover { text-decoration: none; color: var(--K-base-ink); } .list-card__thumb { width: 100%; height: auto; aspect-ratio: 16/9; flex: 0 0 auto; margin: 0; padding: 0; overflow: hidden; position: relative; } .list-card__thumb img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); transition: filter var(--A02); } .list-card__thumb::after { content: ''; position: absolute; inset: 0; background: var(--K-accent); mix-blend-mode: screen; pointer-events: none; transition: opacity var(--A02); } .list-card__link:hover .list-card__thumb img { filter: grayscale(0); } .list-card__link:hover .list-card__thumb::after { opacity: 0; } .list-card__info { padding: var(--S04); flex: 1 1 auto; display: flex; flex-direction: column; justify-content: space-between; gap: var(--S04); } .list-card__header { display: flex; flex-direction: column; gap: var(--S00); } .list-card__meta { margin: 0 0 4px 0; padding: 0; list-style: none; display: flex; flex-direction: row; flex-wrap: wrap; gap: var(--S01); } .list-card__subtitle { margin-top: 8px; } .list-card__footer { display: flex; flex-direction: column; gap: 0; } /* LIST ROWS */ .list-row { display: grid; grid-template-columns: 1fr; gap: var(--S04); margin: 0; padding: var(--S03); border-bottom: solid 1px var(--K-base-ink); background-color: var(--K-base); color: var(--K-base-ink); transition: background-color var(--A01), color var(--A01); position: relative; } .list-row:hover { background: var(--K-accent); color: var(--K-accent-ink); } .list-row:last-of-type { border-bottom: 0; } .list-row__toggle { position: absolute; inset: 0; padding: 0; border: 0; background: transparent; cursor: pointer; z-index: 1; } .list-row .bt-regular { position: relative; z-index: 2; margin-right: auto; } .list-row .bt-round { pointer-events: none; transition: background-color var(--A01), color var(--A01), border-color var(--A01), transform var(--A02); } .list-row:hover .bt-regular { color: var(--K-accent-ink); background: var(--K-accent); border-color: var(--K-accent-ink); } .list-row:hover .bt-regular:hover { color: var(--K-accent); background: var(--K-accent-ink); border-color: var(--K-accent-ink); } .list-row:hover .bt-round { color: var(--K-accent-ink); background: var(--K-accent); border-color: var(--K-accent-ink); } .list-row:hover .bt-round:hover { color: var(--K-accent); background: var(--K-accent-ink); border-color: var(--K-accent-ink); } .list-row.is-expanded .bt-round { transform: rotate(45deg); } .list-row__info { grid-row: 1; grid-column: 1; display: flex; flex-direction: column; } .list-row__header { display: flex; flex-direction: column; gap: var(--S00); } .list-row__meta { margin: 0 0 4px 0; padding: 0; list-style: none; display: flex; flex-direction: row; flex-wrap: wrap; gap: var(--S01); } .list-row__subtitle { margin: 8px 0; } .list-row__content { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows var(--A02), opacity var(--A02), margin-block-start var(--A02); } .list-row__content-inner { min-height: 0; overflow: hidden; } .list-row.is-expanded .list-row__content { grid-template-rows: 1fr; opacity: 1; } .list-row__footer { display: flex; flex-direction: column; gap: var(--S04); } .list-row__header, .list-row__content, .list-row__footer { margin-block-start: var(--S04); } .list-row__info > :first-child { margin-block-start: 0; } .list-row:not(.is-expanded) .list-row__content { margin-block-start: 0; } .list-row__actions { grid-row: 2; grid-column: 1; display: flex; flex-direction: row-reverse; gap: var(--S01); align-items: flex-start; justify-content: space-between; } /* —————————————————————————————————————————— EMPTY STATE —————————————————————————————————————————— */ .archive-filter__empty { padding: var(--S03) 0; text-align: center; color: var(--K-muted); } /* —————————————————————————————————————————— PAGINATION —————————————————————————————————————————— */ .archive-filter__pagination { margin-top: var(--S03); padding-top: var(--S02); border-top: 1px solid var(--K-base-ink); display: flex; gap: 0.5rem; justify-content: center; flex-wrap: wrap; } .archive-filter__pagination .page-numbers { display: inline-block; padding: 0.5rem 0.75rem; border: 1px solid var(--K-base-ink); min-width: 2.5rem; text-align: center; transition: background var(--A01), color var(--A01); } .archive-filter__pagination .page-numbers:hover { background: var(--K-base-ink); color: var(--K-base); text-decoration: none; } .archive-filter__pagination .page-numbers.current { background: var(--K-accent); color: var(--K-base); border-color: var(--K-accent); } .archive-filter__pagination .page-numbers.dots { border: 0; cursor: default; } @media (min-width: 768px) { .archive-filter__grid { grid-template-columns: repeat(2, 1fr); } .list-row { grid-column: 1 / span 2; } } @media (min-width: 1024px) { .archive-filter__grid { grid-template-columns: repeat(3, 1fr); } .list-row { grid-column: 1 / span 3; } } @media (min-width: 1440px) { .archive-filter-toggle { display: none; } .archive-filter-block__panel { display: block; grid-template-rows: none; opacity: 1; transition: none; } .archive-filter-block__panel > * { overflow: visible; } .archive-filter { flex-direction: row; flex-wrap: wrap; height: var(--S09); } .archive-filter__select { padding: var(--S01) var(--S03); } .archive-filter__buttons { flex: 0 0 auto; min-width: 0; } .archive-filter__button { flex: 0 0 auto; padding: var(--S01) var(--S03); } .archive-filter__button-reset { flex: 0 0 auto; padding: var(--S01) var(--S03); } .list-row { grid-template-columns: repeat(12,1fr); } .list-row__info { grid-row: 1; grid-column: 1 / span 8; } .list-row__actions { grid-row: 1; grid-column: 9 / -1; flex-direction: row; justify-content: flex-end; } .list-row .bt-regular { margin-right: 0; } } @media (min-width: 1920px) { .archive-filter__grid { grid-template-columns: repeat(4, 1fr); } .list-row { grid-column: 1 / span 4; } }