/* ============================================
   MENTOR GALLERY - Museum/Gallery Experience
   Design: Apple-inspired spaciousness + Harry Potter magic
   ============================================ */

/* -------------------- Variables -------------------- */
:root {
    --gallery-bg: var(--body-bg, #FFFDF9);
    --card-bg: var(--card-bg, #FFFFFF);
    --card-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    --card-shadow-hover: 0 12px 40px rgba(0, 0, 0, 0.15);
    --era-badge-bg: rgba(139, 92, 246, 0.1);
    --era-badge-text: #7C3AED;
    --tag-bg: rgba(128, 128, 128, 0.08);
    --tag-text: var(--muted-text, #6B7280);
    --quote-color: var(--text-color, #2C1810);
    --muted-text: var(--sidebar-text-muted, #6B7280);
    --accent-purple: #8B5CF6;
    --accent-purple-hover: #7C3AED;
    --serif-font: 'Palatino Linotype', 'Book Antiqua', Palatino, Georgia, serif;
    --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* -------------------- Era Navigation Ribbon -------------------- */
.era-ribbon {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    padding: 1.5rem 1rem;
    margin-bottom: 2rem;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.era-ribbon::-webkit-scrollbar {
    display: none;
}

.era-btn {
    padding: 0.625rem 1.25rem;
    border: 1px solid var(--input-border, rgba(139, 92, 246, 0.2));
    border-radius: 9999px;
    background: transparent;
    color: var(--muted-text);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: var(--transition-smooth);
    white-space: nowrap;
}

.era-btn:hover {
    border-color: var(--accent-purple);
    color: var(--accent-purple);
    background: var(--era-badge-bg);
}

.era-btn.active {
    background: var(--accent-purple);
    border-color: var(--accent-purple);
    color: white;
}

/* Era dot separators */
.era-ribbon::after {
    content: none;
}

/* -------------------- Filters Row (Dropdowns) -------------------- */
.filters-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    padding: 1rem 2rem;
    max-width: 1400px;
    margin: 0 auto 1.5rem;
    flex-wrap: wrap;
}

.filter-group {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.filter-label {
    font-weight: 600;
    font-size: 0.8125rem;
    color: var(--muted-text);
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.filter-select {
    padding: 0.5rem 2rem 0.5rem 1rem;
    border: 1px solid var(--input-border, rgba(139, 92, 246, 0.2));
    border-radius: 9999px;
    background: var(--card-bg);
    color: var(--text-color, #2C1810);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: var(--transition-smooth);
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236B7280' d='M2 4l4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    min-width: 140px;
}

.filter-select:hover {
    border-color: var(--accent-purple);
}

.filter-select:focus {
    outline: none;
    border-color: var(--accent-purple);
    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1);
}

.filter-select.active {
    border-color: var(--accent-purple);
    background-color: var(--era-badge-bg);
}

.clear-filters-btn {
    padding: 0.5rem 1rem;
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: 9999px;
    background: transparent;
    color: #EF4444;
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    transition: var(--transition-smooth);
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.clear-filters-btn:hover {
    background: rgba(239, 68, 68, 0.1);
    border-color: #EF4444;
}

@media (max-width: 640px) {
    .filters-row {
        flex-direction: column;
        gap: 0.75rem;
        padding: 1rem;
    }

    .filter-group {
        width: 100%;
        justify-content: space-between;
    }

    .filter-select {
        flex: 1;
        max-width: 200px;
    }
}

/* -------------------- Council/Blocked Tabs -------------------- */
.council-tabs {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.council-tab {
    background: transparent;
    color: var(--muted-text);
    font-size: 0.8125rem;
    padding: 2px 6px;
    border-radius: 6px;
    cursor: pointer;
    transition: var(--transition-smooth);
}

.council-tab:hover {
    color: var(--accent-purple);
}

.council-tab.active {
    color: var(--text-color, #2C1810);
    font-weight: 600;
}

.tab-separator {
    color: var(--muted-text);
    opacity: 0.5;
}

/* -------------------- Gallery Layout -------------------- */
.mentor-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
    gap: 2.5rem;
    padding: 0 2rem 3rem;
    max-width: 1400px;
    margin: 0 auto;
}

@media (max-width: 480px) {
    .mentor-gallery {
        grid-template-columns: 1fr;
        padding: 0 1rem 2rem;
        gap: 1.5rem;
    }
}

/* -------------------- Mentor Card -------------------- */
.mentor-card {
    background: var(--card-bg);
    border-radius: 16px;
    box-shadow: var(--card-shadow);
    overflow: visible;
    transition: var(--transition-smooth);
    position: relative;
    display: flex;
    flex-direction: column;
}

.mentor-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--card-shadow-hover);
}

/* Blocked card style */
.mentor-card.blocked-card {
    opacity: 0.6;
    cursor: default;
}

.mentor-card.blocked-card:hover {
    transform: none;
    box-shadow: var(--card-shadow);
}

.blocked-occupations-panel {
    grid-column: 1 / -1;
    background: var(--card-bg);
    border: 1px solid var(--card-border, rgba(0, 0, 0, 0.08));
    border-radius: 12px;
    box-shadow: var(--card-shadow);
    padding: 1rem 1.25rem;
}

.blocked-occupations-title {
    color: var(--text-color);
    font-size: 0.95rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
}

.blocked-occupations-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.625rem;
}

.blocked-occupation-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    border: 1px solid var(--card-border, rgba(0, 0, 0, 0.08));
    border-radius: 999px;
    background: var(--era-badge-bg);
    color: var(--text-color);
    padding: 0.45rem 0.7rem 0.45rem 0.85rem;
    font-size: 0.875rem;
}

.blocked-occupation-chip button {
    color: var(--muted-text);
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0.1rem;
    line-height: 1;
}

.blocked-occupation-chip button:hover {
    color: var(--accent-purple);
}

/* Card inner padding */
.mentor-card-inner {
    padding: 2rem;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    background: var(--card-bg);
    border-radius: 16px;
}

/* -------------------- Portrait Section -------------------- */
.mentor-portrait {
    display: flex;
    justify-content: center;
    margin-bottom: 1.5rem;
}

.mentor-portrait img {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid rgba(139, 92, 246, 0.1);
    transition: var(--transition-smooth);
}

.mentor-card:hover .mentor-portrait img {
    border-color: rgba(139, 92, 246, 0.3);
    box-shadow: 0 0 20px rgba(139, 92, 246, 0.2);
}

/* -------------------- Quote (Speech Bubble on Hover) -------------------- */
/* Their words on paper: the hover quote renders as a small parchment
   fragment — same ink-on-paper language as the landing page's mentor
   letters (fixed warm palette, self-contained in every theme). */
.mentor-quote-bubble {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(12px) rotateX(-6deg);
    transform-origin: 50% 100%;
    background: linear-gradient(175deg, #faf5e8, #efe4cd);
    color: #3a3128;
    /* top padding reserves a band for the stroke quote mark — text never
       wraps under it */
    padding: 2.375rem 1.5rem 1rem;
    border: 1px solid rgba(139, 110, 74, 0.35);
    border-radius: 10px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), visibility 0.3s ease;
    z-index: 100;
    width: max-content;
    max-width: 340px;
    margin-bottom: 12px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
    pointer-events: none;
}

/* The hand-drawn stroke quote mark from the highlight share cards — one
   'quoted wisdom' icon language across the product */
.mentor-quote-mark {
    position: absolute;
    top: 10px;
    left: 14px;
    pointer-events: none;
}
.mentor-quote-mark svg path {
    stroke: rgba(139, 110, 74, 0.35);
}

/* A found fragment, not a tooltip: rests at a half-degree tilt */
.mentor-card:hover .mentor-quote-bubble {
    transform: translateX(-50%) translateY(0) rotateX(0) rotate(-0.6deg);
}

/* Paper-colored arrow */
.mentor-quote-bubble::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 8px solid transparent;
    border-top-color: #efe4cd;
}

.mentor-card:hover .mentor-quote-bubble {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0) rotateX(0);
}

.mentor-quote {
    font-family: var(--serif-font);
    font-size: 0.9688rem;
    /* upright, not italic: quotes are localized and CJK has no true italics —
       the browser's fake slant reads poorly in zh/ja. The paper already says
       "quoted words"; the ornament below carries the rest. */
    font-style: normal;
    line-height: 1.65;
    color: #4a4036;
    text-align: center;
    margin: 0;
    position: relative;
    z-index: 1;
}

/* Card clickable area */
.mentor-card {
    cursor: pointer;
}

/* Card actions - prevent click propagation */
.mentor-card-actions {
    position: relative;
    z-index: 10;
}

/* -------------------- Name & Identity -------------------- */
.mentor-name {
    font-size: 1.375rem;
    font-weight: 600;
    text-align: center;
    margin: 0 0 0.5rem 0;
    color: var(--text-color, #2C1810);
    letter-spacing: -0.01em;
}

.mentor-tagline {
    font-size: 0.9375rem;
    color: var(--muted-text);
    text-align: center;
    margin: 0 0 1rem 0;
    line-height: 1.5;
}

/* -------------------- Era Badge -------------------- */
.era-badge {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    background: var(--era-badge-bg);
    color: var(--era-badge-text);
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.mentor-meta {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.mentor-years {
    font-size: 0.8125rem;
    color: var(--muted-text);
}

/* -------------------- Best For Tags -------------------- */
.best-for-tags {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

.best-for-tag {
    padding: 0.25rem 0.625rem;
    background: var(--tag-bg);
    color: var(--tag-text);
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 500;
}

/* -------------------- Card Actions -------------------- */
.mentor-card-actions {
    display: flex;
    justify-content: center;
    gap: 0.75rem;
    margin-top: auto;
    padding-top: 1rem;
}

.enter-mind-btn {
    padding: 0.75rem 1.5rem;
    background: transparent;
    border: 1px solid var(--accent-purple);
    color: var(--accent-purple);
    border-radius: 9999px;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: var(--transition-smooth);
}

.enter-mind-btn:hover {
    background: var(--accent-purple);
    color: white;
}

/* Follow button on card - Jony Ive inspired */
.card-follow-btn {
    padding: 0.625rem 1.125rem;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(0, 0, 0, 0.08);
    color: #1d1d1f;
    border-radius: 980px;
    font-size: 0.8125rem;
    font-weight: 400;
    letter-spacing: -0.01em;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.card-follow-btn:hover {
    background: rgba(255, 255, 255, 1);
    border-color: rgba(0, 0, 0, 0.12);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transform: scale(1.02);
}

.card-follow-btn:active {
    transform: scale(0.98);
}

.card-follow-btn.following {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.1), rgba(139, 92, 246, 0.05));
    border: 1px solid rgba(139, 92, 246, 0.2);
    color: var(--accent-purple);
}

.card-follow-btn.following:hover {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.15), rgba(139, 92, 246, 0.08));
    border-color: rgba(139, 92, 246, 0.3);
}

/* Chat button on card - Jony Ive inspired */
.chat-btn-card {
    padding: 0.625rem 1.125rem;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    border: none;
    color: white;
    border-radius: 980px;
    font-size: 0.8125rem;
    font-weight: 400;
    letter-spacing: -0.01em;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.25);
}

.chat-btn-card:hover {
    background: linear-gradient(135deg, #5558e8, #7c4fe0);
    box-shadow: 0 4px 16px rgba(99, 102, 241, 0.35);
    transform: scale(1.02);
}

.chat-btn-card:active {
    transform: scale(0.98);
}

.chat-btn-card i {
    font-size: 0.75rem;
    opacity: 0.9;
}

/* -------------------- Profile Modal -------------------- */
.mentor-profile-modal {
    position: fixed;
    inset: 0;
    z-index: 10001; /* Higher than historical modal (1500) to appear on top */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.mentor-profile-modal.visible {
    opacity: 1;
    visibility: visible;
}

.mentor-profile-modal .modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
}

.mentor-profile-modal .modal-content {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    background: var(--card-bg);
    border-radius: 16px;
    max-width: 520px;
    width: min(520px, calc(100vw - 2rem));
    max-height: calc(100vh - 1.5rem);
    max-height: calc(100dvh - 1.5rem);
    margin: 0;
    padding: 0;
    overflow: hidden;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    transform: scale(0.95) translateY(8px);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    animation: none;
}

.mentor-profile-modal.visible .modal-content {
    transform: scale(1) translateY(0);
}

.mentor-profile-modal .modal-close-btn {
    display: none; /* Hidden - user closes by clicking outside */
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    width: 2rem;
    height: 2rem;
    border: none;
    background: transparent;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    color: var(--muted-text);
    transition: var(--transition-smooth);
    z-index: 10;
}

.mentor-profile-modal .modal-close-btn:hover {
    color: var(--text-color);
}

/* Modal Header - Horizontal Layout */
.mentor-profile-modal .modal-header {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    gap: 1.25rem;
    padding: 1rem 1.5rem 0.75rem;
}

.mentor-profile-modal .modal-portrait {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: 3px solid rgba(139, 92, 246, 0.15);
    box-shadow: 0 0 20px rgba(139, 92, 246, 0.1);
}

.mentor-profile-modal .modal-header-info {
    flex: 1;
    min-width: 0;
}

.mentor-profile-modal .modal-name {
    font-size: 1.375rem;
    font-weight: 600;
    margin: 0 0 0.25rem 0;
    color: var(--text-color);
    line-height: 1.2;
    text-align: left;
}

.mentor-profile-modal .modal-meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.mentor-profile-modal .modal-years {
    font-size: 0.8125rem;
    color: var(--muted-text);
    margin: 0;
}

.mentor-profile-modal .modal-category {
    display: inline-block;
    padding: 0.2rem 0.5rem;
    background: rgba(139, 92, 246, 0.15);
    color: #8B5CF6;
    border-radius: 9999px;
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.02em;
}

.mentor-profile-modal .modal-era {
    display: inline-block;
    padding: 0.2rem 0.5rem;
    background: var(--era-badge-bg);
    color: var(--era-badge-text);
    border-radius: 9999px;
    font-size: 0.6875rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Modal Quote */
.mentor-profile-modal .modal-quote {
    font-family: var(--serif-font);
    font-size: 1rem;
    font-style: italic;
    color: var(--quote-color);
    line-height: 1.6;
    text-align: center;
    padding: 1rem 1.5rem;
    margin: 0;
    background: rgba(139, 92, 246, 0.03);
    border-top: 1px solid rgba(139, 92, 246, 0.1);
    border-bottom: 1px solid rgba(139, 92, 246, 0.1);
}

/* Modal Body */
.mentor-profile-modal .modal-body {
    padding: 1rem 1.5rem 1.5rem;
    overflow-y: auto;
    min-height: 0;
}

.mentor-profile-modal .modal-overview {
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--text-color);
    margin: 0 0 1rem 0;
}

/* Best For Section in Modal */
.mentor-profile-modal .modal-best-for {
    margin-bottom: 1rem;
}

.mentor-profile-modal .modal-section-title {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--muted-text);
    margin: 0 0 0.5rem 0;
}

.mentor-profile-modal .modal-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
}

.mentor-profile-modal .modal-tag {
    padding: 0.25rem 0.625rem;
    background: var(--tag-bg);
    color: var(--tag-text);
    border-radius: 5px;
    font-size: 0.75rem;
    font-weight: 500;
}

/* Honest Note */
.mentor-profile-modal .modal-honest-note {
    background: rgba(251, 191, 36, 0.08);
    border: 1px solid rgba(251, 191, 36, 0.2);
    border-radius: 10px;
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
}

.mentor-profile-modal .honest-note-title {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #B45309;
    margin: 0 0 0.375rem 0;
}

.mentor-profile-modal .modal-limitations {
    font-size: 0.875rem;
    color: var(--text-color);
    line-height: 1.5;
    margin: 0;
}

/* Modal Actions */
.mentor-profile-modal .modal-actions {
    display: flex;
    justify-content: center;
    gap: 0.75rem;
    padding-top: 0.5rem;
}

.mentor-profile-modal .modal-follow-btn {
    padding: 0.625rem 1.25rem;
    background: var(--accent-purple);
    border: none;
    color: white;
    border-radius: 9999px;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: var(--transition-smooth);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.mentor-profile-modal .modal-follow-btn:hover {
    background: var(--accent-purple-hover);
    transform: translateY(-1px);
}

.mentor-profile-modal .modal-follow-btn.following {
    background: transparent;
    border: 2px solid var(--accent-purple);
    color: var(--accent-purple);
}

.mentor-profile-modal .modal-chat-btn {
    padding: 0.625rem 1.25rem;
    background: transparent;
    border: 2px solid var(--accent-purple);
    color: var(--accent-purple);
    border-radius: 9999px;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: var(--transition-smooth);
}

.mentor-profile-modal .modal-chat-btn:hover {
    background: var(--accent-purple);
    color: white;
    transform: translateY(-1px);
}

/* -------------------- Search Enhancement -------------------- */
.gallery-search-container {
    max-width: 600px;
    margin: 0 auto 1rem;
    padding: 0 1rem;
}

.gallery-search-input {
    width: 100%;
    padding: 1rem 1.5rem;
    border: 2px solid rgba(139, 92, 246, 0.2);
    border-radius: 9999px;
    font-size: 1rem;
    background: var(--card-bg);
    color: var(--text-color);
    transition: var(--transition-smooth);
}

.gallery-search-input:focus {
    outline: none;
    border-color: var(--accent-purple);
    box-shadow: 0 0 0 4px rgba(139, 92, 246, 0.1);
}

.gallery-search-input::placeholder {
    color: var(--muted-text);
    font-style: italic;
}

/* -------------------- Section Headers -------------------- */
.gallery-section-header {
    text-align: center;
    margin-bottom: 2rem;
    padding: 0 1rem;
}

.gallery-section-title {
    font-family: var(--serif-font);
    font-size: 2rem;
    font-weight: 500;
    color: var(--text-color);
    margin: 0 0 0.5rem 0;
}

.gallery-section-subtitle {
    font-size: 1rem;
    color: var(--muted-text);
    margin: 0;
}

/* Your Council (followed mentors) */
.your-council-section {
    margin-bottom: 3rem;
    padding-bottom: 3rem;
    border-bottom: 1px solid rgba(139, 92, 246, 0.1);
}

/* -------------------- Category Badge (keep for compatibility) -------------------- */
.category-badge {
    padding: 0.25rem 0.625rem;
    background: rgba(139, 92, 246, 0.1);
    color: var(--accent-purple);
    border-radius: 6px;
    font-size: 0.6875rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* -------------------- Menu Button (three-dot) -------------------- */
.mentor-card .card-menu-container {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 5;
}

/* -------------------- Animations -------------------- */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.mentor-card {
    animation: fadeInUp 0.5s ease forwards;
}

.mentor-gallery .mentor-card:nth-child(1) { animation-delay: 0s; }
.mentor-gallery .mentor-card:nth-child(2) { animation-delay: 0.1s; }
.mentor-gallery .mentor-card:nth-child(3) { animation-delay: 0.2s; }
.mentor-gallery .mentor-card:nth-child(4) { animation-delay: 0.3s; }
.mentor-gallery .mentor-card:nth-child(5) { animation-delay: 0.4s; }
.mentor-gallery .mentor-card:nth-child(6) { animation-delay: 0.5s; }

/* -------------------- Responsive -------------------- */
@media (max-width: 768px) {
    .era-ribbon {
        justify-content: flex-start;
        padding: 1rem;
    }

    .mentor-gallery {
        grid-template-columns: 1fr;
    }

    .mentor-profile-modal .modal-content {
        margin: 0.5rem;
        max-height: 95vh;
        max-height: 95dvh;
        max-width: calc(100% - 1rem);
    }

    .mentor-profile-modal .modal-header {
        flex-direction: column;
        text-align: center;
        padding: 1.25rem 1.25rem 0.75rem;
        gap: 0.75rem;
    }

    .mentor-profile-modal .modal-header-info {
        text-align: center;
    }

    .mentor-profile-modal .modal-meta {
        justify-content: center;
    }

    .mentor-profile-modal .modal-portrait {
        width: 70px;
        height: 70px;
    }

    .mentor-profile-modal .modal-name {
        font-size: 1.25rem;
    }

    .mentor-profile-modal .modal-body {
        padding: 0.75rem 1.25rem 1.25rem;
    }

    .mentor-profile-modal .modal-quote {
        font-size: 0.9375rem;
        padding: 0.875rem 1.25rem;
    }

    .mentor-profile-modal .modal-overview {
        font-size: 0.875rem;
    }

    .mentor-profile-modal .modal-actions {
        flex-direction: column;
        gap: 0.5rem;
    }

    .mentor-profile-modal .modal-follow-btn,
    .mentor-profile-modal .modal-chat-btn {
        width: 100%;
        justify-content: center;
    }
}

@media (max-height: 950px) {
    .mentor-profile-modal {
        padding: 0.75rem;
    }

    .mentor-profile-modal .modal-content {
        max-height: calc(100vh - 1.5rem);
        max-height: calc(100dvh - 1.5rem);
        width: min(520px, calc(100vw - 1.5rem));
    }
}

/* -------------------- Hide Original Sidebar on Gallery -------------------- */
.gallery-active .inspiration-sidebar {
    display: none;
}

.gallery-active #main-content {
    margin-left: 0;
}

/* -------------------- Empty State -------------------- */
.gallery-empty-state {
    text-align: center;
    padding: 4rem 2rem;
    color: var(--muted-text);
}

.gallery-empty-state h3 {
    font-size: 1.25rem;
    margin-bottom: 0.5rem;
    color: var(--text-color);
}

.gallery-empty-state p {
    font-size: 1rem;
}

/* -------------------- Loading State -------------------- */
.mentor-card.loading {
    opacity: 0.6;
    pointer-events: none;
}

.mentor-card.loading::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
    animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

/* -------------------- Lazy Loading -------------------- */
.load-more-container {
    display: flex;
    justify-content: center;
    padding: 2rem 0 3rem;
    width: 100%;
}

.load-more-spinner {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 2rem;
    background: var(--card-bg);
    border-radius: 9999px;
    box-shadow: var(--card-shadow);
    color: var(--muted-text);
    font-size: 0.9375rem;
}

.load-more-spinner i {
    color: var(--accent-purple);
    font-size: 1.25rem;
}

.load-more-spinner.hidden {
    display: none;
}

/* Fade in animation for newly loaded cards */
.mentor-card.fade-in {
    animation: fadeInUp 0.4s ease-out forwards;
}

/* ==================== HYBRID FILTER SYSTEM ==================== */

/* Remove browser default outline on all filter buttons */
.filters-container button,
.filters-container .dropdown-trigger,
.filters-container .dropdown-item,
.filters-container .filter-pill,
.filters-container .clear-filters-btn {
    outline: none;
    -webkit-tap-highlight-color: transparent;
}

.filters-container button:focus,
.filters-container .dropdown-trigger:focus,
.filters-container .dropdown-item:focus,
.filters-container .filter-pill:focus,
.filters-container .clear-filters-btn:focus {
    outline: none;
    box-shadow: none;
}

.filters-container {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 0 1rem 1.5rem;
    max-width: 1400px;
    margin: 0 auto;
}

/* Filter Row Layout */
.craft-filter-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.25rem;
}

.filter-pills-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.25rem 0;
}

.filter-row-label {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--muted-text);
    min-width: 50px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* -------------------- Custom Dropdown (Craft) -------------------- */
.custom-dropdown {
    position: relative;
    min-width: 160px;
}

.dropdown-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: var(--card-bg);
    border: 1px solid var(--input-border, rgba(139, 92, 246, 0.2));
    border-radius: 9999px;
    cursor: pointer;
    transition: var(--transition-smooth);
    font-size: 0.875rem;
    color: var(--text-color);
    min-width: 140px;
}

.dropdown-trigger:hover {
    border-color: var(--accent-purple);
    box-shadow: 0 2px 8px rgba(139, 92, 246, 0.15);
}

.dropdown-trigger.active {
    background: var(--accent-purple);
    color: white;
    border-color: var(--accent-purple);
}

.dropdown-trigger.active .dropdown-arrow {
    color: white;
}

.dropdown-arrow {
    font-size: 0.75rem;
    color: var(--muted-text);
    transition: transform 0.2s ease;
}

.custom-dropdown.open .dropdown-arrow {
    transform: rotate(180deg);
}

.dropdown-menu {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    min-width: 200px;
    max-height: 480px;
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    background: var(--card-bg);
    border: 1px solid var(--input-border, rgba(139, 92, 246, 0.15));
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
    z-index: 100;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: all 0.2s ease;
}

.dropdown-menu::-webkit-scrollbar {
    display: none;
}

.custom-dropdown.open .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.dropdown-item {
    display: block;
    width: 100%;
    padding: 0.625rem 1rem;
    text-align: left;
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 0.875rem;
    color: var(--text-color);
    transition: background 0.15s ease;
}

.dropdown-item:first-child {
    border-radius: 11px 11px 0 0;
}

.dropdown-item:last-child {
    border-radius: 0 0 11px 11px;
}

.dropdown-item:hover {
    background: rgba(139, 92, 246, 0.08);
}

.dropdown-item.active {
    background: rgba(139, 92, 246, 0.12);
    color: var(--accent-purple);
    font-weight: 500;
}

/* -------------------- Filter Pills -------------------- */
.filter-pills {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* Wrap instead of horizontal scroll: Windows mice have no natural horizontal
   wheel, and the collapsed-by-default panel makes vertical space free — every
   option visible to everyone. */
.filter-pills.scrollable {
    flex-wrap: wrap;
    padding: 4px 0;
}

/* Ensure pills aren't clipped */
.filter-pills-row {
    overflow: visible;
}

.filter-pill {
    padding: 0.4rem 0.875rem;
    border: 1px solid var(--input-border, rgba(139, 92, 246, 0.2));
    border-radius: 9999px;
    background: transparent;
    color: var(--muted-text);
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    transition: var(--transition-smooth);
    white-space: nowrap;
}

.filter-pill:hover {
    border-color: var(--accent-purple);
    color: var(--accent-purple);
    background: rgba(139, 92, 246, 0.05);
}

.filter-pill.active {
    background: var(--accent-purple);
    color: white;
    border-color: var(--accent-purple);
}

/* Clear Filters Button */
.clear-filters-btn {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.4rem 0.75rem;
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.2);
    border-radius: 9999px;
    color: #EF4444;
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    transition: var(--transition-smooth);
    margin-left: auto;
}

.clear-filters-btn:hover {
    background: rgba(239, 68, 68, 0.15);
    border-color: rgba(239, 68, 68, 0.3);
}

.clear-filters-btn i {
    font-size: 0.75rem;
}

/* -------------------- Responsive -------------------- */
@media (max-width: 768px) {
    .filters-container {
        padding: 0 0.75rem 1rem;
        gap: 0.5rem;
    }

    .filter-row-label {
        min-width: 40px;
        font-size: 0.75rem;
    }

    .craft-filter-row {
        flex-wrap: wrap;
    }

    .custom-dropdown {
        flex: 1;
        min-width: 120px;
    }

    .filter-pills-row {
        overflow: hidden;
    }

    .filter-pills {
        flex-wrap: nowrap;
        overflow-x: auto;
    }

    .filter-pill {
        padding: 0.35rem 0.75rem;
        font-size: 0.75rem;
    }

    .clear-filters-btn {
        position: fixed;
        bottom: 1rem;
        right: 1rem;
        z-index: 50;
        box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
    }
}

/* ============================================
   MENTOR FINDER — "share your struggle" hero + results takeover
   Theme-safe: every color rides the runtime CSS vars (same convention
   as the rest of this file); fallbacks are the light palette.
   ============================================ */

.mentor-finder-hero {
    max-width: 720px;
    margin: 0.5rem auto 2rem;
    padding: 1.75rem 2rem;
    background: var(--card-bg, #FFFFFF);
    border: 1px solid var(--input-border, rgba(139, 92, 246, 0.18));
    border-radius: 20px;
    box-shadow: var(--card-shadow);
    text-align: center;
    transition: var(--transition-smooth);
}

.mentor-finder-hero .finder-title {
    font-family: var(--serif-font);
    font-size: 1.375rem;
    color: var(--text-color, #2C1810);
    margin: 0 0 0.25rem;
}

.mentor-finder-hero .finder-title .finder-spark {
    color: var(--accent-purple);
    margin-right: 0.375rem;
}

.mentor-finder-hero .finder-subtitle {
    font-size: 0.9375rem;
    color: var(--muted-text);
    margin: 0 0 1.125rem;
}

/* Collapsed state: an inviting Airbnb-style pill that expands on focus */
.finder-pill {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    width: 100%;
    padding: 0.875rem 1.25rem;
    border: 1px solid var(--input-border, rgba(139, 92, 246, 0.25)) !important;
    border-radius: 9999px;
    background: var(--input-bg, var(--gallery-bg, #FFFDF9));
    color: var(--muted-text);
    font-size: 0.9375rem;
    cursor: text;
    text-align: left;
    transition: var(--transition-smooth);
}

.finder-pill:hover {
    border-color: var(--accent-purple) !important;
    box-shadow: 0 2px 12px rgba(139, 92, 246, 0.15);
}

.finder-expanded {
    display: none;
    text-align: left;
}

.mentor-finder-hero.expanded .finder-pill { display: none; }
.mentor-finder-hero.expanded .finder-expanded { display: block; }

.finder-textarea {
    width: 100%;
    min-height: 108px;
    padding: 0.875rem 1rem;
    border: 1px solid var(--input-border, rgba(139, 92, 246, 0.25)) !important;
    border-radius: 14px;
    background: var(--input-bg, var(--gallery-bg, #FFFDF9));
    color: var(--text-color, #2C1810);
    font-size: 0.9375rem;
    line-height: 1.55;
    resize: vertical;
    transition: var(--transition-smooth);
}

.finder-textarea:focus {
    outline: none;
    border-color: var(--accent-purple) !important;
    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.12);
}

.finder-textarea::placeholder { color: var(--muted-text); opacity: 0.8; }

.finder-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 0.75rem;
    flex-wrap: wrap;
}

.finder-privacy-note {
    font-size: 0.75rem;
    color: var(--muted-text);
    opacity: 0.85;
}

.finder-submit-btn {
    padding: 0.625rem 1.5rem;
    border-radius: 9999px;
    background: var(--accent-purple);
    color: #fff;
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition-smooth);
    white-space: nowrap;
}

.finder-submit-btn:hover:not(:disabled) { background: var(--accent-purple-hover); }
.finder-submit-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* -------------------- Results takeover -------------------- */
.finder-overlay {
    position: fixed;
    inset: 0;
    z-index: 9000; /* below the mentor profile modal (10001) so profiles open on top */
    background: var(--background-color, var(--gallery-bg, #FFFDF9));
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.finder-overlay.visible { opacity: 1; visibility: visible; }

.finder-overlay-inner {
    max-width: 1080px;
    margin: 0 auto;
    padding: 3.5rem 1.5rem 4rem;
}

.finder-close-btn {
    position: fixed;
    top: 1.25rem;
    right: 1.5rem;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--card-bg, #FFFFFF);
    color: var(--muted-text);
    font-size: 1.125rem;
    cursor: pointer;
    box-shadow: var(--card-shadow);
    transition: var(--transition-smooth);
    z-index: 2;
}

.finder-close-btn:hover { color: var(--text-color, #2C1810); transform: scale(1.06); }

.finder-echo {
    font-family: var(--serif-font);
    font-style: italic;
    font-size: 1.0625rem;
    color: var(--muted-text);
    text-align: center;
    max-width: 640px;
    margin: 0 auto 0.5rem;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.finder-results-title {
    font-family: var(--serif-font);
    font-size: 1.75rem;
    color: var(--text-color, #2C1810);
    text-align: center;
    margin: 0.5rem 0 2.25rem;
}

/* Loading state */
.finder-loading {
    display: none;
    text-align: center;
    padding: 5rem 1rem;
}

.finder-overlay.is-loading .finder-loading { display: block; }
.finder-overlay.is-loading .finder-results,
.finder-overlay.is-loading .finder-footer,
.finder-overlay.is-loading .finder-error,
.finder-overlay.is-loading .finder-echo,
.finder-overlay.is-loading .finder-results-title { display: none; }

.finder-loading .finder-loading-spark {
    font-size: 2rem;
    color: var(--accent-purple);
    display: inline-block;
    animation: finderPulse 1.6s ease-in-out infinite;
}

.finder-loading .finder-loading-msg {
    font-family: var(--serif-font);
    font-size: 1.125rem;
    color: var(--muted-text);
    margin-top: 1rem;
    transition: opacity 0.4s ease;
}

@keyframes finderPulse {
    0%, 100% { transform: scale(1); opacity: 0.55; }
    50% { transform: scale(1.25); opacity: 1; }
}

/* Result cards */
.finder-results {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

.finder-card {
    background: var(--card-bg, #FFFFFF);
    border: 1px solid var(--input-border, rgba(139, 92, 246, 0.12));
    border-radius: 20px;
    padding: 2rem 1.5rem 1.5rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    cursor: pointer;
    box-shadow: var(--card-shadow);
    transition: var(--transition-smooth);
    opacity: 0;
    transform: translateY(16px);
    animation: finderCardIn 0.5s ease forwards;
}

.finder-card:nth-child(2) { animation-delay: 0.12s; }
.finder-card:nth-child(3) { animation-delay: 0.24s; }

@keyframes finderCardIn {
    to { opacity: 1; transform: translateY(0); }
}

.finder-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--card-shadow-hover);
}

.finder-card .finder-card-portrait {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    object-fit: cover;
    margin: 0 auto 1rem;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
}

.finder-card .finder-card-angle {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--accent-purple);
    margin-bottom: 0.375rem;
}

.finder-card .finder-card-name {
    font-family: var(--serif-font);
    font-size: 1.25rem;
    color: var(--text-color, #2C1810);
    margin: 0 0 0.125rem;
}

.finder-card .finder-card-category {
    font-size: 0.8125rem;
    color: var(--muted-text);
    margin-bottom: 0.875rem;
}

.finder-card .finder-card-reason {
    font-size: 0.9063rem;
    line-height: 1.6;
    color: var(--text-color, #2C1810);
    opacity: 0.85;
    text-align: left;
    flex: 1;
    margin-bottom: 1.25rem;
}

.finder-card .finder-card-cta {
    padding: 0.5625rem 1.25rem;
    border: 1px solid var(--accent-purple) !important;
    border-radius: 9999px;
    background: transparent;
    color: var(--accent-purple);
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition-smooth);
    align-self: center;
}

.finder-card:hover .finder-card-cta,
.finder-card .finder-card-cta:hover {
    background: var(--accent-purple);
    color: #fff;
}

/* Footer: refresh + remaining */
.finder-footer {
    text-align: center;
    margin-top: 2.5rem;
}

.finder-refresh-btn {
    padding: 0.75rem 1.75rem;
    border: 1px solid var(--input-border, rgba(139, 92, 246, 0.3)) !important;
    border-radius: 9999px;
    background: var(--card-bg, #FFFFFF);
    color: var(--text-color, #2C1810);
    font-size: 0.9375rem;
    font-weight: 500;
    cursor: pointer;
    transition: var(--transition-smooth);
}

.finder-refresh-btn:hover:not(:disabled) {
    border-color: var(--accent-purple) !important;
    color: var(--accent-purple);
}

.finder-refresh-btn:disabled { opacity: 0.45; cursor: not-allowed; }

.finder-remaining-note {
    font-size: 0.75rem;
    color: var(--muted-text);
    opacity: 0.85;
    margin-top: 0.75rem;
}

/* Error / limit state */
.finder-error {
    display: none;
    text-align: center;
    padding: 4rem 1rem;
}

.finder-overlay.is-error .finder-error { display: block; }
.finder-overlay.is-error .finder-results,
.finder-overlay.is-error .finder-footer,
.finder-overlay.is-error .finder-loading,
.finder-overlay.is-error .finder-echo,
.finder-overlay.is-error .finder-results-title { display: none; }

.finder-error .finder-error-msg {
    font-family: var(--serif-font);
    font-size: 1.125rem;
    color: var(--text-color, #2C1810);
    margin-bottom: 1.5rem;
}

@media (max-width: 900px) {
    .finder-results { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; }
    .mentor-finder-hero { margin: 0.5rem 1rem 1.5rem; padding: 1.5rem 1.25rem; }
    .finder-overlay-inner { padding-top: 4.5rem; }
}

/* ============================================
   SEARCH ROW + COLLAPSED FILTERS
   The 5 filter rows hide behind a "Filters" toggle so the top of the
   page stays calm: hero, then one search row, then the gallery.
   ============================================ */

.gallery-search-container {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    max-width: 680px;
}

.gallery-search-container .gallery-search-input {
    flex: 1;
    min-width: 0;
}

.filters-toggle-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.875rem 1.25rem;
    border: 2px solid rgba(139, 92, 246, 0.2) !important;
    border-radius: 9999px;
    background: var(--card-bg, #FFFFFF);
    color: var(--text-color, #2C1810);
    font-size: 0.9375rem;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    transition: var(--transition-smooth);
}

.filters-toggle-btn:hover,
.filters-toggle-btn.open {
    border-color: var(--accent-purple) !important;
    color: var(--accent-purple);
}

.filters-toggle-btn .filters-count-badge {
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 9999px;
    background: var(--accent-purple);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.filters-container.collapsed {
    display: none;
}

@media (max-width: 768px) {
    .filters-toggle-btn {
        padding: 0.75rem 1rem;
    }
    .filters-toggle-btn > span:first-of-type {
        display: none; /* icon + badge only on small screens */
    }
}

/* ============================================
   ONE SEARCH HOME — name search + Filters live inside the hero card
   as a quiet secondary line under a hairline divider. The finder pill
   stays the primary action; the search line is deliberately subdued.
   ============================================ */

.mentor-finder-hero .gallery-search-container {
    max-width: none;
    margin: 1.25rem 0 0;
    padding: 1.125rem 0 0;
    border-top: 1px solid var(--input-border, rgba(139, 92, 246, 0.14));
    gap: 0.5rem;
}

.mentor-finder-hero .filters-toggle-btn {
    padding: 0.625rem 1rem;
    font-size: 0.875rem;
    border-width: 1px !important;
    background: transparent;
}

/* Search icon marks the secondary line as lookup (vs the feather = describe) */
.mentor-finder-hero .finder-search-icon {
    color: var(--muted-text);
    font-size: 0.875rem;
    opacity: 0.7;
    margin-left: 0.375rem;
}

/* ============================================
   FINDER ICON POLISH — delicate stroke SVGs (Lucide-style) replace the
   Font Awesome glyphs; search icon sits INSIDE a bordered field.
   ============================================ */

.finder-icon {
    width: 1.125em;
    height: 1.125em;
    flex-shrink: 0;
}

/* Search icon inside the field */
.finder-search-field {
    position: relative;
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
}

.finder-search-field .finder-search-icon {
    position: absolute;
    left: 1rem;
    width: 1rem;
    height: 1rem;
    color: var(--muted-text);
    opacity: 0.75;
    pointer-events: none;
}

/* The name search reads as quiet text at rest (transparent field), hints on
   hover, and becomes a full bar on focus — clicking the text IS the input.
   One consolidated block (was three stacked iterations). The border keeps one
   !important because the page template globally sets
   `input[type="text"] { border: none !important }`. */
.mentor-finder-hero .finder-search-field .gallery-search-input {
    width: 100%;
    padding: 0.625rem 1.125rem;
    font-size: 0.9375rem;
    border: 1px solid transparent !important;
    background: transparent;
    transition: var(--transition-smooth);
}

.mentor-finder-hero .finder-search-field:hover .gallery-search-input:not(:focus) {
    background: var(--input-bg, rgba(128, 128, 128, 0.05));
    cursor: text;
}

.mentor-finder-hero .finder-search-field .gallery-search-input:focus {
    outline: none;
    border-color: var(--accent-purple) !important;
    background: var(--input-bg, rgba(128, 128, 128, 0.05));
    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1);
}

.filters-toggle-btn .finder-filters-icon {
    width: 1rem;
    height: 1rem;
}

/* #searchInput's inline-template ID rule (padding-left: 16px) outranks class
   selectors — qualify with the ID to make room for the in-field icon. */
.mentor-finder-hero .finder-search-field #searchInput {
    padding-left: 2.5rem;
}

/* ============================================
   WISDOM COUNCIL RAIL — the council as one gathered circle: round
   portraits with names, gold ceremonial accents (gold = chosen,
   purple = explorable), an overflow seat that unfolds in place, and
   an empty chair that recruits. Replaces the council card wall.
   ============================================ */

.council-header { text-align: center; margin-bottom: 0.5rem; }

.council-eyebrow {
    font-size: 0.875rem;
    color: #C9A227;
    opacity: 0.85;
    margin-bottom: 0.375rem;
    text-shadow: 0 0 10px rgba(201, 162, 39, 0.4);
}

.council-title {
    font-family: var(--serif-font);
    font-weight: 500;
    font-size: 2rem;
    color: var(--text-color, #2C1810);
    margin: 0;
}

.council-subtitle {
    font-family: var(--serif-font);
    font-style: italic;
    font-size: 0.9375rem;
    color: var(--muted-text);
    margin: 0.5rem 0 0;
}

/* The gallery container keeps its id (tab JS toggles .hidden on it) but drops
   the grid. :not(.hidden) keeps the Tailwind utility authoritative — a plain
   ID rule here once outranked .hidden and broke the Blocked view. */
#council-gallery.council-rail-mode:not(.hidden) { display: block; }

.council-rail-wrap { position: relative; padding: 1rem 0 0.5rem; }

.council-rail-glow {
    position: absolute;
    inset: -90px -60px -40px;
    background: radial-gradient(ellipse 50% 60% at 50% 55%, rgba(139, 92, 246, 0.10), transparent 68%);
    pointer-events: none;
}

.council-rail {
    display: flex;
    /* flex-start + first/last auto margins = centered when it fits, scrollable
       when it doesn't (plain center clips the leading seats on overflow) */
    justify-content: flex-start;
    align-items: flex-start;
    gap: 22px;
    position: relative;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    max-width: 1080px;
    margin: 0 auto;
    /* top padding lives INSIDE the scroll box: hover lift (-8px), the gold
       main-mentor star (-7px) and the seat menu (-4px) all stay visible */
    padding: 14px 1rem 0;
}
.council-rail::-webkit-scrollbar { display: none; }
.council-rail > :first-child { margin-left: auto; }
.council-rail > :last-child { margin-right: auto; }

.council-rail.expanded {
    flex-wrap: wrap;
    row-gap: 26px;
    justify-content: center;
    overflow-x: visible;
}
.council-rail.expanded > :first-child { margin-left: 0; }
.council-rail.expanded > :last-child { margin-right: 0; }

.council-seat {
    position: relative;
    width: 76px;
    flex-shrink: 0;
    text-align: center;
    cursor: pointer;
    background: none;
    text-decoration: none;
    opacity: 0;
    transform: translateY(14px);
    animation: councilRise 0.55s cubic-bezier(0.2, 0.7, 0.3, 1) forwards;
    animation-delay: var(--d, 0ms);
    transition: transform 0.25s ease;
}

@keyframes councilRise { to { opacity: 1; transform: translateY(0); } }

.council-seat:hover { transform: translateY(-8px); }

.council-portrait { position: relative; width: 76px; height: 76px; }

.council-portrait img {
    width: 76px;
    height: 76px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--background-color, var(--gallery-bg, #FFFDF9));
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
}

.council-seat-name {
    display: block;
    font-size: 0.75rem;
    color: var(--muted-text);
    margin-top: 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Main mentor: the gold seat */
.council-seat-main .council-portrait img {
    border-color: #C9A227;
    box-shadow: 0 0 0 2px rgba(184, 134, 11, 0.35), 0 6px 20px rgba(0, 0, 0, 0.3);
}
.council-seat-main .council-seat-name { color: var(--text-color, #2C1810); font-weight: 600; }
.council-seat-main .council-portrait::after {
    content: '\2726';
    position: absolute;
    top: -7px;
    right: 0;
    color: #C9A227;
    font-size: 0.8125rem;
    text-shadow: 0 0 8px rgba(201, 162, 39, 0.8);
}

/* Quick-chat: appears on hover (hover-capable devices only; touch goes
   through the profile modal, which has the chat button) */
.council-seat-chat {
    position: absolute;
    right: -4px;
    bottom: -2px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--accent-purple);
    color: #fff;
    font-size: 0.6875rem;
    display: none;
    align-items: center;
    justify-content: center;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.35);
    opacity: 0;
    transition: var(--transition-smooth);
    cursor: pointer;
}
@media (hover: hover) {
    .council-seat-chat { display: flex; }
    .council-seat:hover .council-seat-chat { opacity: 1; }
    .council-seat-chat:hover { background: var(--accent-purple-hover); transform: scale(1.1); }
}

/* Overflow seat (+N) and the empty chair */
.council-overflow-circle,
.council-empty-circle {
    width: 76px;
    height: 76px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.council-overflow-circle {
    background: var(--card-bg, #FFFFFF);
    border: 3px solid var(--background-color, var(--gallery-bg, #FFFDF9));
    color: var(--muted-text);
    font-size: 0.9375rem;
    font-weight: 600;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.council-seat-overflow:hover .council-overflow-circle { color: var(--accent-purple); }
.council-empty-circle {
    border: 2px dashed rgba(184, 134, 11, 0.55);
    color: #C9A227;
    font-size: 1.5rem;
    font-weight: 300;
    transition: var(--transition-smooth);
}
.council-seat-empty:hover .council-empty-circle {
    border-style: solid;
    background: rgba(184, 134, 11, 0.07);
}
.council-seat-name.council-gold { color: #B8860B; opacity: 0.9; }

.council-links { text-align: center; margin-top: 1rem; }
.council-collapse-link {
    font-size: 0.8125rem;
    color: var(--muted-text);
    background: none;
    cursor: pointer;
    transition: var(--transition-smooth);
}
.council-collapse-link:hover { color: var(--accent-purple); }

/* Quiet blocked/council toggle under the rail */
.council-tabs-quiet { margin: 0.75rem 0 0; text-align: center; opacity: 0.75; }

/* Empty state: the waiting table */
.council-empty-state { text-align: center; padding: 1.5rem 0 0.75rem; }
.council-empty-state .council-seat { display: inline-block; animation: none; opacity: 1; transform: none; }
.council-empty-title {
    font-family: var(--serif-font);
    font-size: 1.125rem;
    color: var(--text-color, #2C1810);
    margin: 1rem 0 0.25rem;
}
.council-empty-sub { font-size: 0.875rem; color: var(--muted-text); margin: 0; }

@media (max-width: 768px) {
    .council-rail { gap: 16px; padding: 0 0.75rem; }
    .council-title { font-size: 1.5rem; }
}

/* Let the gold invite label wrap instead of clipping */
.council-seat-empty .council-seat-name.council-gold {
    white-space: normal;
    line-height: 1.3;
}


/* 1) Tabs row: while the council view is active, show only the Blocked link;
   the council tab reappears as the way back from the blocked view */
.council-tabs-quiet .council-tab[data-tab="council"].active { display: none; }
.council-tabs-quiet:has(.council-tab[data-tab="council"].active) .tab-separator { display: none; }

/* 3) Seat "⋯" menu — appears on hover, top-right of the portrait */
.council-seat-menu {
    position: absolute;
    top: -4px;
    right: -4px;
    z-index: 3;
}
.council-seat-menu .card-menu-button {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--card-bg, #FFFFFF);
    color: var(--muted-text);
    font-size: 0.625rem;
    display: none;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: var(--transition-smooth);
    cursor: pointer;
}
@media (hover: hover) {
    .council-seat-menu .card-menu-button { display: flex; }
    .council-seat:hover .council-seat-menu .card-menu-button { opacity: 1; }
}
.council-seat-menu .card-dropdown-menu {
    position: absolute;
    top: 28px;
    right: 0;
    min-width: 150px;
    z-index: 20;
}

/* Inner definition ring: white-background headshots (e.g. Naval) read as a
   white border at 76px — a faint inner ring gives every portrait an edge */
.council-portrait::before {
    content: '';
    position: absolute;
    inset: 3px;
    border-radius: 50%;
    border: 1px solid rgba(128, 128, 128, 0.25);
    pointer-events: none;
    z-index: 1;
}

/* Defeat any inherited .chat-btn-card positioning — pin bottom-right */
.council-seat-chat { left: auto !important; right: -4px !important; }

/* Blocked link belongs in the section's manage corner, not under the rail */
.your-council-section { position: relative; }
.council-tabs-quiet {
    position: absolute;
    top: 0.25rem;
    right: 1.25rem;
    margin: 0;
}
@media (max-width: 768px) {
    .council-tabs-quiet { position: static; text-align: center; margin-top: 0.5rem; }
}

/* ============================================
   ORIENTATION PASS (post independent UX review)
   Curated shelves, blocked-view fix, denser Discover, mobile rail,
   back-to-top. Three densities = instant orientation:
   council rail (yours) → curated shelves (picked) → Discover (all).
   ============================================ */

/* Curated collections: compact shelf tiles instead of full cards */
.curated-row {
    display: flex;
    gap: 18px;
    justify-content: center;
    flex-wrap: nowrap;
    overflow-x: auto;
    padding: 0.5rem 1rem 0.75rem;
    scrollbar-width: none;
}
.curated-row::-webkit-scrollbar { display: none; }

.shelf-tile {
    width: 108px;
    flex-shrink: 0;
    text-align: center;
    padding: 14px 6px 12px;
    border-radius: 16px;
    border: 1px solid transparent;
    cursor: pointer;
    transition: var(--transition-smooth);
}
.shelf-tile:hover {
    background: var(--card-bg, #FFFFFF);
    border-color: rgba(139, 92, 246, 0.25);
    transform: translateY(-4px);
}
.shelf-portrait { position: relative; width: 84px; height: 84px; margin: 0 auto; }
.shelf-portrait img {
    width: 84px;
    height: 84px;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 5px 14px rgba(0, 0, 0, 0.25);
}
.shelf-portrait::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1px solid rgba(128, 128, 128, 0.25);
    pointer-events: none;
    z-index: 1;
}
.shelf-name {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-color, #2C1810);
    margin-top: 10px;
    line-height: 1.25;
    min-height: 2em; /* two-line wrap: unfamiliar people need full names */
}
.shelf-craft { font-size: 0.6875rem; color: var(--muted-text); margin-top: 2px; }

.curated-category-section { margin-bottom: 2.25rem; }
.curated-category-section .gallery-section-header { margin-bottom: 0.25rem; }

/* Discover density: 3-up at desktop widths instead of 2 giant columns */
.mentor-gallery {
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

/* Back-to-top pill */
.back-to-top {
    position: fixed;
    right: 1.5rem;
    bottom: 1.75rem;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--card-bg, #FFFFFF);
    color: var(--muted-text);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--card-shadow-hover);
    cursor: pointer;
    z-index: 8000;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: var(--transition-smooth);
}
.back-to-top.visible { opacity: 1; visibility: visible; transform: translateY(0); }
.back-to-top:hover { color: var(--accent-purple); transform: translateY(-2px); }

/* Search zero-state ("X is already in your council") */
.search-zero-state {
    text-align: center;
    font-size: 0.9375rem;
    color: var(--muted-text);
    padding: 0.75rem 1rem 0;
}
.search-zero-state a { color: var(--accent-purple); cursor: pointer; }

.blocked-empty-state {
    grid-column: 1 / -1;
    text-align: center;
    font-family: var(--serif-font);
    font-style: italic;
    color: var(--muted-text);
    padding: 2rem 1rem;
}

/* Card actions stack vertically: side-by-side buttons crowd 3-up cards */
.mentor-card-actions {
    flex-direction: column;
    gap: 8px;
}
.mentor-card-actions .card-follow-btn,
.mentor-card-actions .chat-btn-card {
    width: 100%;
    justify-content: center;
}

/* ============================================
   BREATHABLE DISCOVER CARDS — the resting card is identity only
   (portrait, name, 2-line tagline, craft). Actions slide up over the
   card's foot on hover, Netflix-style; best-for tags live in the
   profile modal where they have room. Touch devices tap the card ->
   modal, which carries all actions. Scoped to Discover only — the
   blocked management view keeps its plain cards.
   ============================================ */

#discover-gallery .best-for-tags { display: none; }

#discover-gallery .mentor-card-actions {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0;
    padding: 2.5rem 1.25rem 1rem;
    border-radius: 0 0 16px 16px; /* match the card's corners (no overflow:hidden — the hover quote bubble sits above the card) */
    background: linear-gradient(180deg, transparent, var(--background-color, #1a1625) 36%);
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.25s ease, transform 0.25s ease;
    pointer-events: none;
}

@media (hover: hover) {
    #discover-gallery .mentor-card:hover .mentor-card-actions {
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
    }
}

/* Touch: no hover — keep the overlay hidden; tapping the card opens the
   profile modal, which has follow + chat */
@media (hover: none) {
    #discover-gallery .mentor-card-actions { display: none; }
}


/* Text under the hover overlay dims so the gradient never slices glyphs */
@media (hover: hover) {
    #discover-gallery .mentor-card .mentor-tagline,
    #discover-gallery .mentor-card .mentor-meta {
        transition: opacity 0.25s ease;
    }
    #discover-gallery .mentor-card:hover .mentor-tagline,
    #discover-gallery .mentor-card:hover .mentor-meta {
        opacity: 0.15;
    }
}

/* Light themes: the white follow pill needs an edge on white cards */
#discover-gallery .card-follow-btn {
    border: 1px solid rgba(139, 92, 246, 0.3) !important;
}

/* Lazy portraits: neutral translucent placeholder instead of a white flash */
.shelf-portrait img.lazy,
#discover-gallery .mentor-portrait img.lazy {
    background: rgba(128, 128, 128, 0.12);
}

/* Blocked link on small screens: tuck it right under the rail, not orphaned */
@media (max-width: 768px) {
    .council-tabs-quiet { margin-top: 0; opacity: 0.65; }
}