/* ============================================================
   FIND-GUIDES PAGE — styles/find-guides.css
   ------------------------------------------------------------
   Moved out of find-guides.html's inline <style> block, verbatim
   (separation standard: docs/frontend-separation.md). Linked after
   styles/styles.css so page rules still win.
   ============================================================ */

.guides-hero {
    background: linear-gradient(135deg, var(--accent-deep), var(--accent));
    border-radius: 1.5rem; padding: 2.5rem; color: #fff; margin-bottom: 2rem; text-align: center;
}
.guides-hero h1 { margin: 0; font-size: clamp(1.8rem, 5vw, 2.6rem); }
.guides-hero p { margin: 0.5rem auto 0; max-width: 640px; opacity: 0.95; }

/* Search + language filter bar */
.filter-bar { display: flex; flex-direction: column; gap: 1rem; margin-bottom: 1.5rem; }
.search-wrap { position: relative; }
.search-wrap input {
    width: 100%; padding: 0.85rem 1.1rem 0.85rem 2.8rem; border-radius: 14px;
    border: 1px solid var(--line); background: var(--surface-strong); color: var(--ink);
    font: inherit; font-size: 1rem;
}
.search-wrap input:focus { outline: none; border-color: var(--accent); }
.search-icon {
    position: absolute; left: 1rem; top: 50%; transform: translateY(-50%);
    color: var(--muted); pointer-events: none;
}
.search-icon svg { width: 1.1rem; height: 1.1rem; }
.lang-filter { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.lang-filter-label { color: var(--muted); font-size: 0.9rem; margin-right: 0.25rem; }
.lang-chip {
    background: var(--surface-strong); border: 1px solid var(--line); border-radius: 999px;
    padding: 0.4rem 0.9rem; font-size: 0.85rem; color: var(--muted); cursor: pointer;
    transition: background 0.2s, color 0.2s, border-color 0.2s; user-select: none;
}
.lang-chip:hover { border-color: var(--accent); color: var(--ink); }
.lang-chip.active { background: var(--accent); border-color: var(--accent); color: var(--ink); font-weight: 600; }

/* Guide cards */
.guides-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.5rem; }
.guide-card {
    background: var(--surface-strong); border: 1px solid var(--line); border-radius: 1.5rem;
    padding: 1.5rem; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 0.85rem;
    transition: transform 0.2s, box-shadow 0.2s;
}
.guide-card:hover { transform: translateY(-4px); box-shadow: 0 12px 30px rgba(0,0,0,0.15); }
.guide-card-top { display: flex; align-items: center; gap: 1rem; }
.guide-avatar {
    width: 64px; height: 64px; border-radius: 50%; background: var(--accent); color: var(--ink);
    display: inline-flex; align-items: center; justify-content: center; font-size: 1.5rem; font-weight: 700;
    flex: 0 0 64px; overflow: hidden;
}
.guide-avatar img { width: 100%; height: 100%; object-fit: cover; }
.guide-card h3 { margin: 0; font-size: 1.2rem; color: var(--ink); display: flex; align-items: center; flex-wrap: wrap; gap: 0.3rem; }
.verified-badge {
    display: inline-flex; align-items: center; justify-content: center;
    width: 1.1em; height: 1.1em; border-radius: 50%; background: #1d9bf0;
    color: #fff; font-size: 0.65em; font-weight: 800; line-height: 1;
    vertical-align: middle; cursor: help;
}
.guide-rating { color: #f4a261; font-weight: 600; font-size: 0.9rem; }
.payment-badge {
    display: inline-flex; align-items: center; gap: 0.3rem;
    background: rgba(46, 204, 113, 0.15); color: #2ecc71;
    border: 1px solid rgba(46, 204, 113, 0.4); border-radius: 999px;
    padding: 0.2rem 0.6rem; font-size: 0.72rem; font-weight: 700;
    cursor: help; margin-top: 0.3rem;
}
.payment-badge svg { width: 0.85em; height: 0.85em; }

/* Trust score pill */
.trust-pill {
    display: inline-flex; align-items: center; gap: 0.4rem;
    border-radius: 999px; padding: 0.3rem 0.8rem; font-size: 0.85rem; font-weight: 700;
    cursor: help; border: 1px solid transparent;
}
.trust-pill.green { background: rgba(46, 204, 113, 0.15); color: #2ecc71; border-color: rgba(46, 204, 113, 0.4); }
.trust-pill.blue { background: rgba(29, 155, 240, 0.15); color: #1d9bf0; border-color: rgba(29, 155, 240, 0.4); }
.trust-pill.orange { background: rgba(230, 126, 34, 0.15); color: #e67e22; border-color: rgba(230, 126, 34, 0.4); }
.rep-pill {
    display: inline-flex; align-items: center; gap: 0.3rem;
    border-radius: 999px; padding: 0.3rem 0.8rem; font-size: 0.8rem; font-weight: 600;
    cursor: help; border: 1px solid transparent;
    background: rgba(29, 155, 240, 0.08); color: var(--muted, #8b9bb0); border-color: rgba(29, 155, 240, 0.25);
    margin-left: 0.4rem;
}

.rep-pill.rep-empty { background: rgba(120, 130, 150, 0.1); color: var(--muted, #8b9bb0); border-color: rgba(120, 130, 150, 0.25); }


.guide-meta { color: var(--muted); font-size: 0.85rem; display: flex; flex-wrap: wrap; gap: 0.75rem; }
.guide-meta span { display: inline-flex; align-items: center; gap: 0.3rem; }
.guide-bio {
    color: var(--muted); font-size: 0.9rem; line-height: 1.5; flex: 1;
    min-width: 0; margin: 0; overflow: hidden;
}
.guide-bio span {
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
    line-clamp: 3; overflow: hidden; overflow-wrap: anywhere;
}
.guide-tags { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.guide-tag {
    background: var(--bg); border: 1px solid var(--line); border-radius: 999px;
    padding: 0.2rem 0.7rem; font-size: 0.75rem; color: var(--muted);
}
.guide-rate { font-size: 1.3rem; font-weight: 800; color: var(--accent-deep); }
.guide-rate small { font-size: 0.8rem; font-weight: 500; color: var(--muted); }
/* Provider workload notice: informational, muted, never a warning. */
.workload-notice {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin: 0.75rem 0 0;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--bg);
    color: var(--muted);
    font-size: 0.85rem;
    line-height: 1.4;
}
.workload-notice svg { width: 16px; height: 16px; flex: 0 0 auto; margin-top: 2px; }
.workload-notice-label { display: block; font-weight: 600; color: var(--ink); margin-bottom: 0.15rem; }
.guide-card-actions { margin-top: 0.25rem; }
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
    padding: 0.7rem 1.2rem; border: none; border-radius: 12px; background: var(--accent);
    color: var(--ink); font-weight: 600; cursor: pointer; text-decoration: none; transition: background 0.2s, transform 0.2s;
}
.btn:hover { background: var(--accent-deep); color: #fff; transform: translateY(-2px); }
.btn.block { width: 100%; }

/* Empty state */
.guides-empty { text-align: center; padding: 4rem 1rem; color: var(--muted); }
.guides-empty .empty-emoji { font-size: 3rem; margin-bottom: 0.5rem; }
.guides-empty h2 { color: var(--ink); font-size: 1.4rem; margin: 0 0 0.5rem; }
.guides-empty p { margin: 0 0 1.5rem; }
.guides-loading { text-align: center; padding: 4rem 1rem; color: var(--muted); }
.hidden { display: none !important; }

/* ============================================================
   Card presentation zones
   ------------------------------------------------------------
   .card-media, .card-main and .card-side group the existing card
   content into the identity, information and action zones used by the
   desktop layout. Below the desktop breakpoint they add no box of their
   own, so the card keeps exactly the vertical layout it has today.
   ============================================================ */
.card-media { display: flex; }
.card-main, .card-side { display: contents; }

@media (min-width: 1024px) {
    /* Desktop: one full-width horizontal card per row. */
    .guides-grid { grid-template-columns: 1fr; gap: var(--space-6); }

    .guide-card {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) minmax(220px, 260px);
        align-items: start;
        column-gap: var(--space-6);
        row-gap: var(--space-3);
        padding: var(--space-5) var(--space-6);
        /* Desktop premium treatment: no hard outline - the soft warm shadow and
           the white-on-cream surface step carry the card edge instead. */
        border: none;
        box-shadow: var(--shadow);
    }
    .guide-card:hover { box-shadow: 0 30px 80px rgba(120, 52, 16, 0.20); }

    /* Identity zone: portrait, name, rating, verification */
    .guide-card-top { display: contents; }
    .card-media { grid-column: 1; grid-row: 1 / span 2; }
    .card-media .guide-avatar {
        width: 104px; height: 104px; flex: 0 0 104px; font-size: 2.25rem;
        box-shadow: 0 0 0 6px var(--accent-soft);
    }
    .card-identity {
        grid-column: 2; grid-row: 1;
        display: flex; flex-direction: column; align-items: flex-start; gap: 0.2rem; min-width: 0;
    }
    .card-identity .payment-badge { margin-top: 0; }

    /* Information zone */
    .card-main {
        grid-column: 2; grid-row: 2;
        display: flex; flex-direction: column; gap: var(--space-3); min-width: 0;
    }
    .card-main .guide-bio { flex: 0 0 auto; }

    /* Action zone: price, availability notice, primary action */
    .card-side {
        grid-column: 3; grid-row: 1 / span 2;
        display: flex; flex-direction: column; align-items: stretch; gap: var(--space-3); min-width: 0;
        border-left: 1px solid var(--line); padding-left: var(--space-5);
    }
    .guide-rate { font-size: 1.5rem; }
    .workload-notice { margin: 0; }
    .guide-card-actions { margin-top: 0; }
}