/* ============================================================
   BizPlan AI Pro — /business-plan-examples/ hub (PHASE 5)
   Page-specific additions on top of the home.css design system
   (.bp-* tokens). Loaded only on the examples hub (functions.php).
   Small by design: search bar, group titles, filter states.
   ============================================================ */

.bp-search { display: flex; max-width: 560px; margin: 0 auto 6px; }
.bp-search input {
    flex: 1; min-width: 0;
    font-family: var(--bp-font); font-size: .95rem; color: var(--bp-text);
    background: #fff; border: 1px solid var(--bp-border-strong);
    border-radius: 10px; padding: 12px 16px;
    box-shadow: var(--bp-shadow-sm);
}
.bp-search input::placeholder { color: var(--bp-text-faint); }
.bp-search input:focus-visible {
    outline: 2px solid var(--bp-accent); outline-offset: 2px;
    border-color: var(--bp-accent);
}
.bp-filter-hint { text-align: center; font-size: .82rem; color: var(--bp-text-faint); min-height: 1.2em; margin: 0 0 8px; }
.bp-filter-empty { text-align: center; color: var(--bp-text-muted); font-size: .95rem; margin: 28px 0 0; }
.bp-filter-empty a { color: var(--bp-accent-strong); font-weight: 600; }

.bp-ex-group { margin-top: 34px; }
.bp-ex-group:first-child { margin-top: 10px; }
.bp-ex-group-title {
    font-family: var(--bp-font); font-size: 1.05rem; font-weight: 700;
    letter-spacing: .01em; color: var(--bp-accent-strong);
    text-transform: uppercase; margin: 0 0 14px;
    padding-left: 12px; border-left: 3px solid var(--bp-accent);
}
#ex-groups [data-ex-grid] { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 16px; }
#ex-groups [data-ex-grid] .bp-eco-card { margin: 0; }
#ex-groups [hidden] { display: none !important; }
.ex-card h3 { font-size: 1.02rem; }
.ex-card p { font-size: .9rem; }

@media (max-width: 600px) {
    #ex-groups [data-ex-grid] { grid-template-columns: 1fr; }
}

/* Templates hub (PHASE 5B): card headline variant used inside .bp-eco-card */
.bp-eco-card h4 { font-size: 1.06rem; font-weight: 700; margin: 0; color: var(--bp-text); font-family: var(--bp-font); }