/* ============================================================
   search-pages.css — shared chrome for the three specialised
   search starts (/search/connections · /search/property ·
   /search/tenders). Mirrors the universal-search hero (centred,
   max-width ~760px) and differs only in the accent colour, set by
   a .ssp--{indigo|amber|forest} modifier on the root.

   Linked globally from App.razor; the per-page .razor files are
   markup-only. The pill input itself is the SearchHero component
   (its own scoped CSS); these classes style everything around it.
   ============================================================ */

.ssp {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--s-6);
    width: 100%;
    max-width: 760px;
    margin: 0 auto;
    padding-block: var(--s-12) var(--s-10);
    min-height: calc(100vh - var(--header-h, 52px) - var(--s-16));
    justify-content: center;
    font-family: var(--font-sans);
    color: var(--body);
    text-align: center;
}

/* ---- Hero header (icon + eyebrow + h1 + sub) ---- */
.ssp-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--s-3);
}

.ssp-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    border-radius: var(--r-xl);
    margin-bottom: var(--s-1);
}

.ssp-eyebrow {
    display: inline-block;
    padding: 4px 12px;
    border-radius: var(--r-pill);
    font: 500 11px/1.4 var(--font-mono);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.ssp-h1 {
    margin: var(--s-1) 0 0;
    font: 700 40px/1.1 var(--font-sans);
    letter-spacing: -0.02em;
    color: var(--ink);
    max-width: 18ch;
}

.ssp-sub {
    margin: 0;
    color: var(--body);
    font: 400 16px/1.6 var(--font-sans);
    max-width: 56ch;
}

/* The whole search block (hero, toggle, input) is one full-width column */
.ssp-search {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--s-4);
    width: 100%;
}

/* ---- Segmented toggle (property type / tenders role) ---- */
.ssp-toggle {
    display: inline-flex;
    align-self: center;
    gap: 2px;
    padding: 3px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-pill);
}

.ssp-toggle-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 16px;
    border: none;
    border-radius: var(--r-pill);
    background: transparent;
    color: var(--muted);
    font: 500 13px/1 var(--font-sans);
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease;
}

    .ssp-toggle-btn:hover { color: var(--ink); }

    .ssp-toggle-btn--on {
        background: var(--white);
        color: var(--ink);
        box-shadow: var(--shadow-sm);
    }

/* ---- Amber warning box (property quota) ---- */
.ssp-warn {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    align-self: center;
    padding: 10px 16px;
    border-radius: var(--r-md);
    background: var(--amber-bg);
    border: 1px solid var(--amber-border);
    color: var(--amber);
    font: 500 13px/1.4 var(--font-sans);
    text-align: left;
}

.ssp-warn b { font-weight: 700; }

/* ---- Feature / stats row ---- */
.ssp-stats {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--s-4);
}

.ssp-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    min-width: 120px;
    padding: var(--s-4) var(--s-5);
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
}

.ssp-stat-val {
    font: 700 24px/1 var(--font-mono);
    font-feature-settings: var(--font-feature-tnum);
    color: var(--ink);
}

.ssp-stat-lbl {
    font: 400 12px/1.3 var(--font-sans);
    color: var(--muted);
}

/* ---- Explainer note under the hero ---- */
.ssp-note {
    margin: 0;
    color: var(--muted);
    font: 400 13px/1.6 var(--font-sans);
    max-width: 60ch;
}

/* ============================================================
   Accent palettes
   ============================================================ */
.ssp--indigo .ssp-icon    { background: var(--indigo-50);  color: var(--indigo-600); }
.ssp--indigo .ssp-eyebrow { background: var(--indigo-50);  color: var(--indigo-800); }
.ssp--indigo .ssp-h1 em   { font-style: normal; color: var(--indigo-600); }
.ssp--indigo .ssp-stat-val { color: var(--indigo-600); }

.ssp--amber .ssp-icon     { background: var(--amber-bg);   color: var(--amber); }
.ssp--amber .ssp-eyebrow  { background: var(--amber-bg);   color: var(--amber); }
.ssp--amber .ssp-h1 em    { font-style: normal; color: var(--amber); }
.ssp--amber .ssp-toggle-btn--on { color: var(--amber); }
.ssp--amber .ssp-stat-val { color: var(--amber); }

.ssp--forest .ssp-icon    { background: var(--forest-bg);  color: var(--forest); }
.ssp--forest .ssp-eyebrow { background: var(--forest-bg);  color: var(--forest); }
.ssp--forest .ssp-h1 em   { font-style: normal; color: var(--forest); }
.ssp--forest .ssp-toggle-btn--on { color: var(--forest); }
.ssp--forest .ssp-stat-val { color: var(--forest); }

@media (max-width: 640px) {
    .ssp-h1 { font-size: 30px; }
    .ssp { padding-block: var(--s-8); }
}