/* ── Pattern Archive Filter Bar ──────────────────────────────────────────── */

:root {
    --pa-red:     #c0190f;
    --pa-dark:    #111111;
    --pa-mid:     #555555;
    --pa-muted:   #999999;
    --pa-border:  #e8e8e8;
    --pa-bg:      #f8f7f4;
    --pa-surface: #ffffff;
    --pa-radius:  8px;
}

.sscs-pattern-filter-bar {
    margin: 0 0 32px;
    padding: 16px 0 0;
    border-top: 2px solid var(--pa-red);
}

/* ── Filter rows ── */
.sscs-pf-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.sscs-pf-label {
    font-family: 'Barlow Condensed', 'Arial Narrow', sans-serif;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .1em;
    color: var(--pa-muted);
    text-transform: uppercase;
    min-width: 60px;
    flex-shrink: 0;
}

/* ── Dropdown ── */
.sscs-pf-dropdown {
    position: relative;
    flex: 1;
    min-width: 220px;
    max-width: 380px;
}

.sscs-pdd-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 8px 12px;
    background: var(--pa-surface);
    border: 1.5px solid var(--pa-border);
    border-radius: var(--pa-radius);
    font-family: 'DM Sans', 'Helvetica Neue', sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: var(--pa-dark);
    cursor: pointer;
    text-align: left;
    transition: border-color .15s;
    white-space: nowrap;
    overflow: hidden;
}
.sscs-pdd-trigger:hover,
.sscs-pdd-trigger[aria-expanded="true"] { border-color: var(--pa-red); }

.sscs-pdd-trigger svg {
    width: 10px;
    height: 6px;
    flex-shrink: 0;
    margin-left: 8px;
    color: var(--pa-muted);
    transition: transform .2s;
}
.sscs-pdd-trigger[aria-expanded="true"] svg { transform: rotate(180deg); }

.sscs-pdd-panel {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    min-width: 260px;
    right: auto;
    z-index: 100;
    background: var(--pa-surface);
    border: 1.5px solid var(--pa-border);
    border-radius: var(--pa-radius);
    box-shadow: 0 8px 24px rgba(0,0,0,.1);
    max-height: 300px;
    overflow-y: auto;
    padding: 4px 0;
}

.sscs-pdd-group-label {
    padding: 8px 12px 3px;
    font-size: 10px;
    font-weight: 800;
    color: var(--pa-muted);
    letter-spacing: .08em;
    text-transform: uppercase;
    pointer-events: none;
}

.sscs-pdd-option {
    display: block;
    padding: 7px 14px;
    font-family: 'DM Sans', 'Helvetica Neue', sans-serif;
    font-size: 13px;
    color: var(--pa-dark);
    text-decoration: none;
    transition: background .1s;
    cursor: pointer;
    white-space: nowrap;
}
.sscs-pdd-option:hover { background: #f5eeec; color: var(--pa-red); }
.sscs-pdd-option.selected {
    background: #fff0ef;
    color: var(--pa-red);
    font-weight: 700;
}
.sscs-pf-clear { color: var(--pa-muted); font-style: italic; }

/* ── Pills ── */
.sscs-pf-pills-row { align-items: center; }

.sscs-pf-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.sscs-pf-pill {
    display: inline-flex;
    align-items: center;
    padding: 5px 13px;
    border: 1.5px solid var(--pa-border);
    border-radius: 999px;
    font-family: 'DM Sans', 'Helvetica Neue', sans-serif;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--pa-mid);
    text-decoration: none;
    cursor: pointer;
    transition: all .15s;
    white-space: nowrap;
}
.sscs-pf-pill:hover { border-color: var(--pa-red); color: var(--pa-red); }
.sscs-pf-pill.active {
    background: var(--pa-red);
    border-color: var(--pa-red);
    color: #fff;
}

/* ── Active filter bar ── */
.sscs-pf-active-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 10px 0 0;
    border-top: 1px solid var(--pa-border);
    margin-top: 4px;
    font-family: 'DM Sans', 'Helvetica Neue', sans-serif;
    font-size: 12px;
}

.sscs-pf-active-label {
    color: var(--pa-muted);
    font-weight: 600;
}

.sscs-pf-active-tag {
    background: #fff0ef;
    color: var(--pa-red);
    border: 1px solid #f5c0bc;
    padding: 2px 8px;
    border-radius: 4px;
    font-weight: 700;
    font-size: 11.5px;
}

.sscs-pf-clear-all {
    color: var(--pa-muted) !important;
    font-weight: 500;
    text-decoration: none !important;
    margin-left: auto;
    font-size: 11.5px;
}
.sscs-pf-clear-all:hover { color: var(--pa-red) !important; }

/* ── Filter count badge ── */
.sscs-filter-count {
    font-family: 'DM Sans', sans-serif;
    font-size: 11px;
    font-weight: 700;
    color: var(--pa-red);
    background: #fff0ef;
    border: 1px solid #f5c0bc;
    padding: 2px 8px;
    border-radius: 999px;
    margin-bottom: 10px;
    display: inline-block;
}

/* ── AJAX Post Grid ── */
#sscs-pattern-grid-wrap {
    margin-top: 24px;
    min-height: 100px;
    transition: opacity .2s;
}
#sscs-pattern-grid-wrap.sscs-loading { opacity: .5; pointer-events: none; }

.sscs-grid-spinner {
    width: 32px;
    height: 32px;
    border: 3px solid var(--pa-border);
    border-top-color: var(--pa-red);
    border-radius: 50%;
    animation: sscs-spin .7s linear infinite;
    margin: 40px auto;
}
@keyframes sscs-spin { to { transform: rotate(360deg); } }

.sscs-pattern-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}
@media (max-width: 768px) { .sscs-pattern-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .sscs-pattern-grid { grid-template-columns: 1fr; } }

/* ── Pattern card ── */
.sscs-pattern-card {
    background: var(--pa-surface);
    border: 1px solid var(--pa-border);
    border-radius: var(--pa-radius);
    overflow: hidden;
    transition: border-color .15s, box-shadow .15s;
}
.sscs-pattern-card:hover {
    border-color: #ccc;
    box-shadow: 0 4px 16px rgba(0,0,0,.07);
}

.sscs-pc-thumb {
    display: block;
    aspect-ratio: 16/9;
    overflow: hidden;
}
.sscs-pc-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .3s;
}
.sscs-pattern-card:hover .sscs-pc-thumb img { transform: scale(1.03); }

.sscs-pc-body { padding: 14px; }

.sscs-pc-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-bottom: 8px;
}
.sscs-pc-tag {
    font-size: 10px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 4px;
    letter-spacing: .04em;
    text-decoration: none;
    text-transform: uppercase;
}
.sscs-pc-tag-head {
    background: #fff0ef;
    color: var(--pa-red);
    border: 1px solid #f5c0bc;
}
.sscs-pc-tag-head:hover { background: var(--pa-red); color: #fff; }
.sscs-pc-tag-depth {
    background: var(--pa-bg);
    color: var(--pa-muted);
    border: 1px solid var(--pa-border);
}

.sscs-pc-title {
    font-family: 'Barlow Condensed', 'Arial Narrow', sans-serif !important;
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    color: var(--pa-dark) !important;
    margin: 0 0 6px !important;
    line-height: 1.3;
}
.sscs-pc-title a {
    color: inherit !important;
    text-decoration: none !important;
}
.sscs-pc-title a:hover { color: var(--pa-red) !important; }

.sscs-pc-excerpt {
    font-size: 12px;
    color: var(--pa-muted);
    line-height: 1.55;
    margin: 0 !important;
}

/* ── Pagination ── */
.sscs-pattern-pagination {
    display: flex;
    gap: 6px;
    justify-content: center;
    margin-top: 24px;
    flex-wrap: wrap;
}
.sscs-page-btn {
    width: 34px;
    height: 34px;
    border: 1.5px solid var(--pa-border);
    border-radius: 6px;
    background: var(--pa-surface);
    font-family: 'DM Sans', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: var(--pa-mid);
    cursor: pointer;
    transition: all .15s;
}
.sscs-page-btn:hover { border-color: var(--pa-red); color: var(--pa-red); }
.sscs-page-btn.active { background: var(--pa-red); border-color: var(--pa-red); color: #fff; }

/* ── No results ── */
.sscs-no-results {
    text-align: center;
    padding: 40px 20px;
    color: var(--pa-muted);
}
.sscs-no-results p { font-size: 14px; margin-bottom: 14px; }
.sscs-btn-secondary {
    display: inline-block;
    padding: 8px 18px;
    border: 1.5px solid var(--pa-border);
    border-radius: 6px;
    font-family: 'DM Sans', sans-serif;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--pa-mid);
    text-decoration: none;
    transition: border-color .15s;
}
.sscs-btn-secondary:hover { border-color: var(--pa-dark); color: var(--pa-dark); }

.sscs-error { color: #c0190f; text-align: center; padding: 20px; font-size: 13px; }

/* ── Hide native WordPress loop on pattern archive ───────────────────────── */
/* Our filter bar + AJAX grid handles all post display. */


/* ── Hide native WP loop on filtered pattern archive pages ─────────────── */
/* When a head/depth query var is set, AJAX grid handles all output.        */
/* On /patterns/ base page (no filter), native loop shows all posts.        */
/* JS adds .sscs-filter-active to body when a filter is selected client-side */
.sscs-filter-active.category-patterns #genesis-content article.post,
.sscs-filter-active.category-patterns #genesis-content .entry,
.sscs-filter-active.category-patterns #genesis-content .archive-pagination,
.sscs-filter-active.category-patterns #genesis-content .pagination {
    display: none !important;
}

/* Server-side: when PHP sets post__in=[0] the loop returns nothing —      */
/* but Genesis may still show a "no content" message. Hide it.              */
.category-patterns #genesis-content .entry:empty { display: none; }
/* ── Smart fallback notice ────────────────────────────────────────────────── */
.sscs-fallback-notice {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: #fff8e1;
    border: 1px solid #ffe082;
    border-left: 3px solid #e65100;
    border-radius: 6px;
    padding: 12px 16px;
    margin-bottom: 20px;
    font-family: 'DM Sans', 'Helvetica Neue', sans-serif;
    font-size: 13.5px;
    color: #555;
    line-height: 1.5;
}
.sscs-fallback-notice p { margin: 0; }
.sscs-fallback-notice strong { color: #333; }
.sscs-fallback-icon { font-size: 16px; flex-shrink: 0; margin-top: 1px; }


/* ── Pattern CTA Bar ─────────────────────────────────────────────────────────── */
.ss-pattern-cta {
    display: flex;
    gap: 1px;
    background: #e5e3df;
    margin: 40px 0 0;
    border-top: 3px solid #c0190f;
}
.ss-pattern-cta .ss-pattern-cta__item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 28px 20px;
    background: #f8f7f4;
    text-decoration: none;
    color: inherit;
    transition: background .15s;
}
.ss-pattern-cta .ss-pattern-cta__item:hover {
    background: #fff;
    text-decoration: none;
}
.ss-pattern-cta .ss-pattern-cta__icon {
    font-size: 22px;
    margin-bottom: 8px;
    display: block;
}
.ss-pattern-cta .ss-pattern-cta__label {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #1a1a1a;
    display: block;
    margin-bottom: 4px;
    transition: color .15s;
}
.ss-pattern-cta .ss-pattern-cta__item:hover .ss-pattern-cta__label {
    color: #c0190f;
}
.ss-pattern-cta .ss-pattern-cta__sub {
    font-family: 'DM Sans', sans-serif;
    font-size: 13px;
    color: #666;
    display: block;
}
@media (max-width: 640px) {
    .ss-pattern-cta { flex-direction: column; }
    .ss-pattern-cta .ss-pattern-cta__item { padding: 20px; }
}

/* Hide category featured image on pattern archive — it overlays the filter bar */
.category-patterns .authority-featured-image {
    display: none !important;
}

/* Submit a Pattern button in filter bar */
.sscs-pf-submit-btn {
    margin-left: auto;
    align-self: center;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: #c0190f;
    color: #fff;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    border-radius: 3px;
    text-decoration: none;
    white-space: nowrap;
    transition: background .15s;
}
.sscs-pf-submit-btn:hover {
    background: #a01208;
    color: #fff;
    text-decoration: none;
}
@media (max-width: 640px) {
    .sscs-pf-submit-btn { display: none; }
}