/**
 * Portfolio archive filter — client-side (Alpine.js).
 *
 * Visually mirrors the previous Klingit dropdown look (pill-shaped trigger,
 * popover with options). All filtered-out cards collapse via [data-hidden].
 */

/* x-cloak keeps Alpine-only UI (dropdown popovers, pagination, the
   empty-state) hidden until the component initialises. The card grid is
   NOT cloaked — the server renders the correct first page directly. */
[x-cloak] { visibility: hidden; }

.portfolio-filter-root {
    --pf-border: rgb(13, 29, 70);
    --pf-border-strong: rgb(13, 29, 70);
    --pf-bg: transparent;
    --pf-text: #0d1e24;
    --pf-muted: rgba(13, 30, 36, 0.65);
    --pf-accent: #0d1e24;
}

/* Reserve vertical space on desktop so the footer doesn't jump up when a
   filter/page shows fewer rows than a full result set. */
@media (min-width: 1024px) {
    .portfolio-filter-root {
        min-height: 1400px;
    }
}

.portfolio-filter-bar {
    display: grid;
    gap: var(--wp--preset--spacing--xx-small, 8px);
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    margin-bottom: var(--wp--preset--spacing--small, 16px);
}

.portfolio-filter-trigger {
    appearance: none;
    -webkit-appearance: none;
    border: 1px solid var(--pf-border);
    border-radius: 999px;
    background: var(--pf-bg);
    color: var(--pf-text);
    font: inherit;
    font-size: 16px;
    padding: 12px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    cursor: pointer;
    text-align: left;
    width: 100%;
    min-height: 48px;
    transition: border-color 120ms ease;
}

.portfolio-filter-trigger:hover,
.portfolio-filter-trigger:focus-visible,
.portfolio-filter-trigger[aria-expanded="true"] {
    border-color: var(--pf-border-strong);
    outline: none;
}

.portfolio-filter-trigger .pf-label {
    flex: 1;
    color: var(--pf-text);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.portfolio-filter-trigger .pf-caret {
    width: 12px;
    height: 12px;
    transition: transform 120ms ease;
}

.portfolio-filter-trigger[aria-expanded="true"] .pf-caret {
    transform: rotate(180deg);
}

.portfolio-filter-trigger .pf-clear {
    background: none;
    border: 0;
    color: var(--pf-muted);
    cursor: pointer;
    padding: 0 4px;
    line-height: 1;
    font-size: 18px;
}

.portfolio-filter-trigger .pf-clear:hover {
    color: var(--pf-accent);
}

.portfolio-filter-popover {
    position: absolute;
    z-index: 50;
    margin-top: 6px;
    min-width: 100%;
    max-height: 236px;
    overflow-y: auto;
    background: rgb(242, 248, 248);
    border: 0;
    border-radius: 12px;
    box-shadow: 0 15px 15px rgba(0, 0, 0, 0.05);
    padding: 8px 0;
}

.portfolio-filter-control {
    position: relative;
}

.portfolio-filter-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 24px;
    cursor: pointer;
    user-select: none;
    font-size: 16px;
    color: rgb(13, 29, 70);
}

.portfolio-filter-option:hover {
    background-color: rgba(13, 30, 36, 0.05);
}

/* The checkbox stays for x-model binding + keyboard/a11y, but is
   visually hidden — selection is shown by the right-aligned checkmark
   instead (matches the prod filter design). */
.portfolio-filter-option input[type="checkbox"] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    margin: 0;
}

.pf-option-label {
    flex: 1;
}

.pf-option-check {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    color: rgba(13, 30, 36, 0.4);
    opacity: 0;
    transition: opacity 120ms ease;
}

.portfolio-filter-option input[type="checkbox"]:checked ~ .pf-option-check {
    opacity: 1;
}

.portfolio-filter-option:focus-within {
    background-color: rgba(13, 30, 36, 0.05);
}

.portfolio-filter-search {
    appearance: none;
    -webkit-appearance: none;
    border: 1px solid var(--pf-border);
    border-radius: 999px;
    background: var(--pf-bg);
    color: var(--pf-text);
    font: inherit;
    font-size: 16px;
    padding: 12px 24px;
    min-height: 48px;
    width: 100%;
    transition: border-color 120ms ease;
}

.portfolio-filter-search:hover,
.portfolio-filter-search:focus-visible {
    border-color: var(--pf-border-strong);
    outline: none;
}

/* Placeholder matches the trigger label / border colour rather than the
   browser-default grey. opacity:1 overrides Firefox's dimmed default. */
.portfolio-filter-search::placeholder {
    color: var(--pf-text);
    opacity: 1;
}

/* Meta row hidden by request — match original UX (no visible count line).
   Kept in DOM for screen-reader users via sr-only positioning. */
.portfolio-filter-meta {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.portfolio-filter-clear-all {
    background: none;
    border: 0;
    color: var(--pf-accent);
    text-decoration: underline;
    cursor: pointer;
    padding: 0;
    font: inherit;
}

.portfolio-filter-empty {
    grid-column: 1 / -1;
    padding: var(--wp--preset--spacing--x-large, 48px) 0;
    text-align: center;
    color: var(--pf-muted);
}

/* Pagination inherits the theme's .wp-block-query-pagination styling
   (general.css) so it matches the rest of the site. These rules only
   reset the <button> defaults, since the markup uses <button> rather
   than WP core's <a>/<span>. */
.portfolio-filter-pagination {
    margin-top: var(--wp--preset--spacing--x-large, 48px);
    margin-inline: auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
}

.portfolio-filter-pagination .wp-block-query-pagination-numbers {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem;
}

.portfolio-filter-pagination button.page-numbers {
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    font: inherit;
    cursor: pointer;
    line-height: 1;
    min-width: 50px;
    min-height: 50px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.portfolio-filter-pagination button.page-numbers:not(.current):not(.dots):hover {
    border-color: var(--wp--preset--color--neutral-500, rgb(184, 190, 188));
}

.portfolio-filter-pagination button.page-numbers.dots {
    cursor: default;
    border-color: transparent;
}

.portfolio-filter-pagination button.page-numbers.current {
    cursor: default;
    border-radius: 12px;
}

.portfolio-filter-pagination .wp-block-query-pagination-previous,
.portfolio-filter-pagination .wp-block-query-pagination-next {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

/* Hide cards filtered out by Alpine.
   The block-link div carries data-hidden, but the immediate grid item is
   the wrapping <li class="wp-block-post"> — hide the <li> so the grid
   reflows. The inner rule is a defence-in-depth for browsers without
   :has() support. */
li.wp-block-post:has([data-portfolio-card][data-hidden]) {
    display: none !important;
}

[data-portfolio-card][data-hidden] {
    display: none !important;
}