/**
 * Harvard Sikh Center - People Directory Views (GravityView)
 * Version: 7.2 (Matches Wireframe v7.1)
 * 
 * Dependencies: 
 * - GravityView (List Layout)
 * - hsc-gravity-forms-v10.6.0.css (Base Variables)
 * 
 * SECTIONS:
 * 1. Directory Grid Layout (Faculty/Alumni)
 * 2. Sidebar Filters
 * 3. Search Bar Premium Styling
 * 4. Staff/Board "Team" Layout (v7.2 Update)
 * 5. Single Profile Page (Universal)
 * 6. Internal Donor CRM Table
 */
 [id^="gv-view-7101"] * {
	margin: 0 !important;
	padding: 0 !important;
	border: none !important;
	width: unset !important;
}
/* ==========================================================================
   1. DIRECTORY GRID LAYOUT (The "Card" System)
   ========================================================================== */

/* The main container for the View */
[id^="gv-view-7101"] {
    font-family: 'Average', Georgia, serif;
    color: #374151;	
}

/* Transform standard List View into CSS Grid */
[id^="gv-view-7101"] .gv-container {
	padding: 20px !important;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 16px;
}
[id^="gv-view-7101"] .gv-search-widget-area {
	align-items: center !important;
	flex-wrap: unset !important;
	gap: 15px;
}

/* The Individual Card */
[id^="gv-view-7101"] .gv-layout-builder-view--entry {
    background: #fff;
    border: 1px solid #e5e5e5 !important;
    border-radius: 10px;
    padding: 18px !important;
    cursor: pointer;
    transition: all 0.2s;
}

/* Hover State - Gold Border + Shadow */
[id^="gv-view-7101"] .gv-layout-builder-view--entry:hover {
    border-color: #C5A572 !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
    transform: translateY(-2px);
    cursor: pointer;
}

[id^="gv-view-7101"] .gv-layout-builder-view--entry .gv-grid-row:first-child{
    display: flex;
    gap: 14px;
    margin-bottom: 14px !important;
}

[id^="gv-view-7101"] .middle{
    flex: 1;
}

[id^="gv-view-7101"] .gv-layout-builder-view--entry .gv-grid-row:first-child .right{
    display: flex;
	align-items: center;
}

/* Card Header (Avatar + Name) */
.gv-card-header {
    display: flex;
    gap: 14px;
    margin-bottom: 16px;
    align-items: center;
}

/* Avatar Circle */
.gv-card-avatar img {
    width: 64px !important;
    height: 64px;
    border-radius: 12px;
    object-fit: cover;
    background: linear-gradient(135deg, rgba(197, 165, 114, 0.2), rgba(197, 165, 114, 0.4));
    flex-shrink: 0;
}

/* Avatar Text Fallback (if no image) */
.gv-card-avatar.no-img {
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Barlow Condensed', sans-serif !important;
    font-size: 22px !important;
    font-weight: 700 !important;
    color: #C5A572;
}

/* Name & Title Container */
.gv-card-info {
    flex: 1;
    min-width: 0;
    /* Prevents flex overflow */
}

/* Name Styling */
.gv-card-name a {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #152A45 !important;
    line-height: 1.2;
    margin-bottom: 4px;
    display: block;
    text-decoration: none;
	text-transform: unset;
}

[id^="gv-view-7101"] .gv-layout-builder-view:hover .gv-card-name a {
    color: #A51C30 !important;
    /* Crimson on hover */
}

/* Title Styling */
.gv-card-title {
    font-family: 'Barlow Condensed', sans-serif !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #C5A572;
    /* Gold */
    letter-spacing: 0.5px;
    margin-bottom: 2px !important;
}

/* Meta (Institution/Country) */
.gv-card-meta {
    font-size: 12px !important;
    color: #6b7280;
    display: flex;
    gap: 8px;
}

/* "View Profile" Chevron (The Arrow) */
.gv-card-chevron::after {
    content: "›";
    font-family: 'Inter', sans-serif;
    /* Use sans-serif font for arrow */
    font-size: 18px;
    color: #d1d5db;
    margin-left: auto;
    font-weight: 300;
    line-height: 1;
}

[id^="gv-view-7101"] .gv-layout-builder-view:hover .gv-card-chevron::after {
    color: #C5A572;
}

/* Card Body (Short Bio) */
.gv-card-bio {
    font-size: 14px;
    line-height: 1.6;
    color: #4b5563;
    margin-bottom: 16px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    /* Limit to 3 lines */
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Badges (Mentee/Term) */
.gv-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px !important;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    margin-top: auto !important;
    /* Pushes to bottom */
    align-self: flex-start;
	background: #dcfce7;
    color: #166534;
}

.gv-badge-mentee {
    background: #dcfce7;
    color: #166534;
}
[id^="gv-view-7101"] .gv-layout-builder-view--entry .gv-grid-row:nth-child(3):has(.gv-badge) {
	padding-top:20px !important;
    border-top: 1px solid #f3f4f6 !important;
}

.gv-badge-term {
    background: #f3f4f6;
    color: #374151;
}

/* ==========================================================================
   2. SIDEBAR FILTERS (Detailed Facets)
   ========================================================================== */

.affiliated-accordion .e-n-accordion-item {
    border: 1px solid #d5d8dc !important;
    border-width: 1px 0px 0px 0px !important;
}
.affiliated-accordion .e-n-accordion {
    border: 1px solid #d5d8dc !important;
    border-width: 0px 0px 1px 0px !important;
}

.gv-sidebar-filters {
    padding: 20px;
}

.gv-sidebar-title {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: #152A45;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.clear-link {
    font-size: 12px;
    color: #A51C30;
    margin-left: auto !important;
}

.mentor-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px;
    background: #f9fafb;
    border-radius: 8px;
}

.gv-checkbox-group label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #374151;
    margin-bottom: 8px;
    cursor: pointer;
}

/* Custom Checkbox Appearance */
.gv-checkbox-group input[type="checkbox"] {
    accent-color: #A51C30;
    width: 16px;
    height: 16px;
}

/* ==========================================================================
   3. SEARCH BAR PREMIUM STYLING
   ========================================================================== */
.gv-grid-col-1-1 {
	width: 100% !important
}
.gv-search-box:has(#gv_search_button_7101) {
	flex: 1;
    min-width: auto;
}
.gv-widget-search.gv-search-rows .gv-search-widget-area.gv-search-horizontal .gv-search-box {
    flex: none !important;
}
.gv-widgets-header {
    background: #ffffff;
    border-bottom: 1px solid #e5e5e5 !important;
    padding: 14px 20px !important;
    align-items: center;
    border-radius: 8px 8px 0 0;
}

.gv-widget-search {
	display:unset !important;
}

.gv-search-box input[type="text"] {
    border: 1px solid #d1d5db !important;
    border-radius: 6px !important;
    padding: 10px 14px 10px 40px !important;
    /* Space for icon */
    font-family: 'Average', Georgia, serif;
    font-size: 14px;
    width: 100%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%239ca3af'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z'%3E%3C/path%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 12px center;
    background-size: 16px;
}

.gv-search-box input[type="text"]:focus {
    border-color: #A51C30 !important;
    box-shadow: 0 0 0 3px rgba(165, 28, 48, 0.1) !important;
}

.gv-search-box select {
    border: 1px solid #d1d5db !important;
    border-radius: 6px !important;
    padding: 10px 14px 10px 14px !important;
    /* Space for icon */
    font-family: 'Average', Georgia, serif !important;
    font-size: 14px !important;
}

.gv-search-box input[type="submit"] {
    border: 1px solid #d1d5db !important;
    border-radius: 6px !important;
    padding: 10px 14px 10px 14px !important;
    /* Space for icon */
    font-family: 'Average', Georgia, serif;
    font-size: 14px;
    background: #A51C30;
	color: #fff;
}
/* Status Text (Result Count) */
.gv-search-status {
    margin-left: auto;
    font-size: 13px;
    color: #6b7280;
    font-style: italic;
}

/* ==========================================================================
   4. STAFF/BOARD "TEAM" LAYOUT (v7.2 Update),
   ========================================================================== */

/* Section Titles for "Leadership Team" and "Executive Board" */
.hsc-section-title {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 28px;
    font-weight: 700;
    color: #152A45;
    border-bottom: 3px solid #C5A572;
    padding-bottom: 12px;
    margin-bottom: 32px;
    margin-top: 40px;
}

.hsc-section-title:first-child {
    margin-top: 0;
}

/* ==========================================================================
   5. SINGLE PROFILE PAGE (Universal Layout)
   ========================================================================== */

.gv-profile-container {
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
    /* Deep shadow */
    overflow: hidden;
    max-width: 1000px;
    margin: 40px auto;
    display: grid;
    grid-template-columns: 350px 1fr;
    /* Sidebar + Main Content */
}

/* Left Column (Photo & Quick Info) */
.gv-profile-sidebar {
    background: linear-gradient(180deg, #f9fafb, #ffffff);
    padding: 40px 32px;
    border-right: 1px solid #f3f4f6;
    text-align: center;
}

.gv-profile-photo {
    width: 240px;
    height: 240px;
    border-radius: 12px;
    object-fit: cover;
    border: 4px solid #ffffff;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    margin-bottom: 24px;
}

/* Right Column (Bio & Details) */
.gv-profile-main {
    padding: 40px 48px;
}

/* Profile Header Typography */
.gv-profile-name {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 36px;
    font-weight: 700;
    color: #152A45;
    line-height: 1.1;
    margin-bottom: 8px;
}

.gv-profile-role {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 20px;
    font-weight: 600;
    color: #C5A572;
    letter-spacing: 1px;
    margin-bottom: 24px;
    padding-bottom: 24px;
    border-bottom: 1px solid #e5e5e5;
}

/* Biography Text */
.gv-profile-bio {
    font-size: 16px;
    line-height: 1.8;
    color: #374151;
    margin-bottom: 32px;
}

/* Profile Sections (Research, Expertise) */
.gv-profile-section-title {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: #152A45;
    margin-bottom: 12px;
}

/* Expertise Tags */
.gv-tag-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.gv-tag {
    background: rgba(197, 165, 114, 0.15);
    color: #8b6914;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    font-family: 'Barlow Condensed', sans-serif;
}

/* Contact Links Row */
.gv-profile-links {
    display: flex;
    gap: 12px;
    margin-top: 24px;
}

.gv-btn-primary {
    background: #A51C30;
    color: #ffffff;
    padding: 10px 20px;
    border-radius: 6px;
    text-decoration: none;
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 600;
    font-size: 14px;
    transition: background 0.2s;
}

.gv-btn-primary:hover {
    background: #8a1728;
}

.gv-social-icon {
    width: 40px;
    height: 40px;
    background: #f3f4f6;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #4b5563;
    font-size: 16px;
    text-decoration: none;
    transition: all 0.2s;
}

.gv-social-icon:hover {
    background: #152A45;
    color: #ffffff;
}

/* ==========================================================================
   5. DONOR CRM TABLE (Admin View)
   ========================================================================== */

.gv-donor-table {
    width: 100%;
    border-collapse: collapse;
    background: #ffffff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.gv-donor-table th {
    background: #152A45;
    color: #C5A572;
    padding: 14px 18px;
    text-align: left;
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 600;
    font-size: 13px;
}

.gv-donor-table td {
    padding: 14px 18px;
    border-bottom: 1px solid #f3f4f6;
    font-size: 14px;
}

.gv-donor-table tr:hover td {
    background: #f9fafb;
    cursor: pointer;
}

/* Giving Circle Badges */
.badge-visionaries {
    background: #fae8ff;
    color: #86198f;
    padding: 4px 8px;
    border-radius: 4px;
    font-weight: 600;
    font-size: 11px;
}

.badge-cornerstones {
    background: #fef3c7;
    color: #92400e;
    padding: 4px 8px;
    border-radius: 4px;
    font-weight: 600;
    font-size: 11px;
}

.badge-builders {
    background: #dbeafe;
    color: #1e40af;
    padding: 4px 8px;
    border-radius: 4px;
    font-weight: 600;
    font-size: 11px;
}

.badge-sustainers {
    background: #dcfce7;
    color: #166534;
    padding: 4px 8px;
    border-radius: 4px;
    font-weight: 600;
    font-size: 11px;
}

/* ==========================================================================
   6. RESPONSIVE BREAKPOINTS
   ========================================================================== */

@media (max-width: 768px) {

    /* Stack Grid to 1 Column */
    [id^="gv-view-7101"] .gv-list-view {
        grid-template-columns: 1fr;
    }

    /* Stack Profile Page */
    .gv-profile-container {
        grid-template-columns: 1fr;
        /* Vertical Stack */
        margin: 20px;
    }

    .gv-profile-sidebar {
        border-right: none;
        border-bottom: 1px solid #f3f4f6;
        padding: 24px;
    }

    .gv-profile-main {
        padding: 24px;
    }

    .gv-profile-photo {
        width: 160px;
        height: 160px;
    }
}