/* ==========================================================================
   GRAVITYVIEW MODULE — LIST VIEW CARDS
   --------------------------------------------------------------------------
   File: forms-gravityview-list.css

   Purpose:
   - Defines the complete visual system for GravityView list-view cards.
   - Styles badges, pills, teaser text, metrics, images, titles, avatars,
     and CTA elements used in list-view layouts.
   - Establishes consistent spacing, typography, and card structure across all
     listing types (FounderMatch, Services, Opportunities, PitchDeal, Jobs,
     Exithub) when displayed in list format.
   - Provides layout primitives such as grid behavior, card resets, equal-height
     enforcement, and hardening rules to ensure visual consistency regardless
     of field order or data variations.

   Scope:
   - Applies ONLY to GravityView list-view templates.
   - Does NOT style single-entry pages (belongs in the single-entry modules).
   - Does NOT style hero sections (belongs in forms-gravityview-hero.css).
   - Does NOT style component-level panels (belongs in forms-gravityview-panels.css).
   - Does NOT style modals (belongs in forms-gravityview-modals.css).

   Exclusions:
   - No Gravity Forms styling (belongs in forms-gravityforms.css).
   - No BuddyBoss form or registration styling (belongs in forms.css).
   - No directory or profile UI styling.

   Sections:
   1. CSS Variables
   2. Base Card Reset
   3. Shared Elements (Badges, Pills)
   4. Footer Date Styling
   5. Grid Layout
   6. Card Row Styles
   7. Title Area
   8. Images
   9. Name Styling
   10. Teaser Text
   11. Metrics
   12. CTA Button
   19. Final Hardening & Layout Corrections
   25. Center search and clear buttons on Listings page - mobile only
   26. Style Business Model Line in Exithub Listing Card
   27. Center teaser on all listing cards
   28. Center No Entries box for My Listings page
   29. Change background color, font-size, font-weight of Search and Clear buttons
   ========================================================================== */
   
   /* ==========================================================================
   1. CSS Variables
   ========================================================================== */
:root {
    --color-primary:  #0073AA;
    --color-secondary: #E0DAB8;
    --color-cta-bg:   var(--color-primary);
    --color-cta-text: #fff;

    --font-size-base:  0.95rem;
    --line-height-base: 1.4;

    --radius-pill:     999px;
    --radius-card:     6px;

    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
}


/* ==========================================================================
   2. Base Card Reset
   ========================================================================== */
.gv-list-view-content.card {
    position: relative;
    background: #fff;
    padding: var(--spacing-md);
    border-left: 4px solid var(--color-primary);
    border-radius: var(--radius-card);
    margin-bottom: var(--spacing-lg);
    font-family: sans-serif;
    box-sizing: border-box;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}


/* ==========================================================================
   3. Shared Elements — Badges & Pills
   ========================================================================== */
.gv-card-badges {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  font-size: 0;
  margin-bottom: 8px;
}

.gv-card-badges .gv-badge {
  display: inline-block;
  font-size: 0.85rem;
  white-space: nowrap;
  padding: 6px 10px;
  border-radius: var(--radius-pill);
  font-weight: 700;
  text-transform: uppercase;
  color: var(--color-cta-text) !important;
  line-height: 1;
  background: #888;
}

/* Badge color map */
.badge-pitchdeal { background: #007bff !important; }
.badge-real-estate { background: #00695c !important; }
.badge-foundermatch { background: #28a745 !important; }
.badge-services { background: #ffc107 !important; color: #111 !important; }
.badge-opportunities { background: #dc3545 !important; }
.badge-jobs { background: #6f42c1 !important; }
.badge-exithub { background: #fd7e14 !important; }


/* ==========================================================================
   4. Footer Date Styling
   ========================================================================== */
.gv-list-view-content .gv-list-view-footer-left {
    flex-shrink: 0;
    font-size: 0.75rem;
    color: #999;
    padding: 0 !important;
    white-space: nowrap;
    display: block !important;
    width: 100%;
    min-width: max-content !important;
}

.gv-list-view-content .gv-list-view-footer-left span,
.gv-list-view-content .gv-list-view-footer-left div {
    white-space: nowrap !important;
}


/* ==========================================================================
   5. Grid Layout
   ========================================================================== */
.gv-list-multiple-container.gv-container {
    display: flex;
    flex-wrap: wrap;
}

.gv-list-multiple-container.gv-container .gv-list-view {
    margin-right: 15px;
    width: 320px;
}


/* ==========================================================================
   6. Card Row Styles
   ========================================================================== */
.gv-list-view-content.card .gv-field-title {
  margin-bottom: var(--spacing-sm);
}


/* ==========================================================================
   7. Title Area
   ========================================================================== */
.gv-list-view-title {
    text-align: center;
    padding: var(--spacing-sm) 0;
}


/* ==========================================================================
   8. Images
   ========================================================================== */
.gv-list-view-title #gv-field-1-10,
.gv-list-view-title #gv-field-1-128 {
    text-align: center;
    margin: 0 auto;
    display: block;
    line-height: 0;
}

.gv-list-view-title #gv-field-1-10 img,
.gv-list-view-title #gv-field-1-128 img {
    width: 100%;
    height: auto;
    max-width: 180px;
    border-radius: var(--radius-card);
    object-fit: cover;
    margin: var(--spacing-sm) auto var(--spacing-sm);
    display: block !important;
}


/* ==========================================================================
   9. Name Styling
   ========================================================================== */
.gv-list-view-title .gv-main-name {
    margin-top: var(--spacing-sm);
    margin-bottom: var(--spacing-sm);
}

.gv-list-view-title .gv-main-name p {
    font-size: 1.4rem;
    font-weight: 800;
    line-height: 1.2;
    text-align: center;
    display: block;
    margin: 0;
}


/* ==========================================================================
   10. Teaser Text
   ========================================================================== */
.gv-list-view-title .gv-field-teaser {
    text-align: left;
    padding: 0 var(--spacing-sm);
    margin-bottom: var(--spacing-md);
}

.gv-list-view-content.card .gv-field-teaser {
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  margin-bottom: var(--spacing-sm);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}


/* ==========================================================================
   11. Metrics
   ========================================================================== */
.gv-list-view-content.card .card-metrics {
    margin: var(--spacing-md) 0;
    padding: var(--spacing-sm) 0;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
    font-size: 0.9rem;
    text-align: center;
}

.gv-list-view-content.card .card-metrics .metric-line {
    margin: 4px 0;
    padding: 0;
    line-height: 1.4;
    text-align: left;
    display: inline-block;
}

.gv-list-view-content.card .card-metrics .metric-label {
    font-weight: 700 !important;
    -webkit-text-stroke: 0.25px rgba(0,0,0,0.28);
    text-stroke: 0.25px rgba(0,0,0,0.28);
    display: inline !important;
}

/* Industry pill */
.card-metrics .industry-value {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 6px;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  font-weight: 600;
  color: #0f172a;
  background: #e6f0ff;
  text-transform: none;
  font-size: 10px;
  line-height: 1;
}

/* Expertise pills */
  .card-metrics .expertise-list {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-left: 0; /* remove left bias */
  }

.card-metrics .expertise-list .expertise-pill {
  display: inline-block;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  font-weight: 600;
  color: #0f172a;
  background: #e6f0ff;
  text-transform: none;
  font-size: 13px;
  line-height: 1;
}

	/* Desktop-only centering for expertise pills */
  .card-metrics .expertise-line {
    text-align: center;
  }


/* Opportunity pill */
.card-metrics .opportunity-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 6px;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  font-weight: 600;
  color: #0f172a;
  background: #e6f0ff;
  text-transform: none;
  font-size: 13px;
  line-height: 1;
}


/* ==========================================================================
   12. CTA Button
   ========================================================================== */
.card-cta {
  text-align: center;
}

.card-cta a {
  display: inline-block;
  padding: 8px 16px;
  border-radius: 6px;
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  box-sizing: border-box;
  background: #6c757d;
  color: #ffffff;
  margin: 0 auto;
}

.card-cta a:hover {
  background: #5a6268;
}

/* ==========================================================================
   19. Final Hardening & Layout Corrections
   ========================================================================== */
/* ──────────────────────────────────────────────
   Final hardening: ensure badge rules are not overridden
   Place this at the very end of GravityView-related CSS
   ────────────────────────────────────────────── */

/* Re-assert canonical badge child styles with slightly higher specificity */
.gv-list-view-title .gv-card-badges .gv-badge,
.gv-list-view-content .gv-card-badges .gv-badge {
  display: inline-block;
  font-size: 0.85rem;
  padding: 6px 10px;
  border-radius: var(--radius-pill);
  font-weight: 700;
  text-transform: uppercase;
  color: var(--color-cta-text) !important;
  line-height: 1;
  white-space: nowrap;
}

/* Provide a clear fallback by position while JS normalizes classes */
.gv-card-badges .gv-badge:first-child { background: #007bff !important; }
.gv-card-badges .gv-badge:nth-child(2) { background: #00695c !important; }

/* explicit canonical color map repeated here to beat later overrides if needed */
.badge-pitchdeal { background: #007bff !important; }
.badge-foundermatch { background: #28a745 !important; }
.badge-services { background: #ffc107 !important; color: #111 !important; }
.badge-opportunities { background: #dc3545 !important; }
.badge-jobs { background: #6f42c1 !important; }
.badge-exithub { background: #fd7e14 !important; }

/* Card layout: make each card a column with footer aligned bottom */
.gv-list-view-content.card {
  display: flex;
  flex-direction: column;
  height: 100%; /* allow cards to stretch to grid cell height */
}

/* The main body/content area should consume available space */
.gv-list-view-content.card .gv-field-1-custom,
.gv-list-view-content.card .gv-list-card-body,
.gv-list-view-content.card .card-body {
  flex: 1 1 auto; /* grow/shrink to fill vertical space */
  display: flex;
  flex-direction: column;
}

/* Ensure the teaser and metrics stack naturally and can take space */
.gv-list-view-content.card .gv-field-teaser {
  flex: 0 0 auto;
  margin-bottom: 0.5rem;
}

/* Make metrics occupy remaining space when needed */
.gv-list-view-content.card .card-metrics {
  flex: 0 0 auto;
  margin-top: auto; /* push metrics toward bottom of content area if space allows */
}

/* Footer/CTA container stays at the bottom */
.gv-list-view-content.card .card-footer,
.gv-list-view-content.card .gv-card-footer,
.gv-list-view-content.card .view-details-wrapper {
  margin-top: 0.75rem;
  flex: 0 0 auto;
}


/* If your card grid uses rows of uneven heights, enforce equal-height grid cells */
.gv-card-grid .gv-list-view-content.card,
.gv-list-view-content.card {
  min-height: 420px; /* adjust to match your design — sets consistent card box height */
}

/* Limit teaser height for consistent visual density */
.gv-field-teaser {
  display: -webkit-box;
  -webkit-line-clamp: 3; /* show 3 lines max */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Normalize avatar and badge sizing so rows align */
.gv-list-view-content.card .profile-image,
.gv-list-view-content.card .card-avatar img {
  width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: 50%;
}

/* Tighten and unify metric spacing */
.gv-list-view-content.card .card-metrics {
  padding-top: .5rem;
  padding-bottom: .5rem;
  border-top: 1px solid #eee;
  border-bottom: 1px solid #eee;
  min-height: 66px; /* tune to match typical two-line metric area */
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.gv-list-view-content.card .metric-line { margin: .25rem 0; }

/* Visual hierarchy for company/name and role */
.gv-list-view-content.card .card-title,
.gv-list-view-content.card .founder-name,
.gv-list-view-content.card .service-provider-name {
  font-weight: 700;
  font-size: 1rem;
  margin-bottom: .25rem;
}

/* LinkedIn-style subtle gray for the +X expertise pill in services card */
.metric-value .expertise-pill.expertise-more {
    background: #f3f4f6 !important;
    color: #4b5563 !important;
    border-radius: 12px;
    padding: 4px 10px;
    font-size: 13px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}



/* CSS for salary suffix gravityview jobs card */
.card-metrics .salary-suffix {
  margin-left: 4px;
  font-weight: 400;
  white-space: nowrap;
}

/* -----------------------------------------------
   CRITICAL FIX: Layout & BR Killer
   ----------------------------------------------- */

/* 1. Kill the injected line breaks added by Gravity Forms/GravityView */
.gv-list-view-content.card .card-metrics br {
    display: none !important;
}

/* 2. Use FLEXBOX on the metric line to force horizontal layout, even if breaks are present */
.gv-list-view-content.card .card-metrics .metric-line {
    /* Keep existing rules to prevent regression */
    margin: 4px 0;
    padding: 0;
    line-height: 1.4;
    text-align: left;
    
    /* NEW FLEXBOX RULES: Forces content onto one line and aligns elements */
    display: flex !important; /* Force flex mode */
    flex-wrap: nowrap; /* Prevent wrapping to next line */
    align-items: baseline; /* Align label and value vertically */
    gap: 6px; /* Standard spacing between label and value */
}

/* 3. Re-assert the display for pills, ensuring they don't break flex rules */
.card-metrics .expertise-list,
.card-metrics .industry-value,
.card-metrics .opportunity-pill {
    display: inline-flex !important;
}

/* -----------------------------------------------
   FINAL BADGE COLOR HARDENING
   ----------------------------------------------- */
.gv-list-view-content.card .gv-badge.badge-pitchdeal { background: #007bff !important; }
.gv-list-view-content.card .gv-badge.badge-foundermatch { background: #28a745 !important; }
.gv-list-view-content.card .gv-badge.badge-services { background: #ffc107 !important; }
.gv-list-view-content.card .gv-badge.badge-opportunities { background: #dc3545 !important; }
.gv-list-view-content.card .gv-badge.badge-jobs { background: #6f42c1 !important; }
.gv-list-view-content.card .gv-badge.badge-exithub { background: #fd7e14 !important; }

/* -----------------------------------------------
   IMAGE SIZING UNIFORMITY FIX
   ----------------------------------------------- */
/* Target the specific image wrappers by ID (10 and 128) */
.gv-list-view-title #gv-field-1-10,
.gv-list-view-title #gv-field-1-128 {
    /* Set a consistent size for the entire wrapper container */
    height: 180px; /* Example height: adjust this to match the largest image size */
    width: 100%;
    max-width: 180px; /* Limits overall size */
    margin: 0 auto;
    overflow: hidden; /* Crucial: Hides any spillover */
}

.gv-list-view-title #gv-field-1-10 img,
.gv-list-view-title #gv-field-1-128 img {
    width: 100%;
    height: 100%; /* Image now fills the fixed-height container */
    object-fit: cover !important; /* CRITICAL: Ensures the image covers the area without distortion */
    border-radius: var(--radius-card);
    margin: 0 auto; /* Center the image within its container */
    display: block;
}

/* FIX: Ensure content displays inside pill wrappers */
.card-metrics .opportunity-pill, 
.card-metrics .industry-value {
    /* Ensure the wrapper is visible and holds content */
    display: inline-flex !important;
    
    /* Ensure no text-hiding rule is active */
    font-size: 13px !important; 
    line-height: 1 !important;
    text-indent: 0 !important; 
}

/* Mobile-only code for listings page */
@media (max-width: 768px) {

    /* 1. Center the entire list column */
    .gv-list-container {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }

    /* 2. LinkedIn-style card width + visual polish */
    .gv-list-view {
        width: 100%;
        max-width: 540px; /* LinkedIn mobile card width */
        background: #fff;
        border-radius: 12px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.08);
        margin: 0 auto 24px auto !important;
        padding: 20px 16px !important;
    }

    /* 3. Tighten spacing inside the card */
    .gv-list-view-title h3 {
        margin-bottom: 12px !important;
    }

    .gv-field-1-custom,
    .card-metrics,
    .gv-main-name,
    .gv-field-teaser {
        margin-bottom: 12px !important;
    }

    /* 4. Add mobile-friendly horizontal padding */
    .gv-list-view-title,
    .gv-field-1-custom,
    .card-metrics {
        padding-left: 4px;
        padding-right: 4px;
    }

    /* 5. Improve hierarchy: name + teaser readability */
    .gv-main-name p {
        font-size: 20px !important;
        font-weight: 700 !important;
        line-height: 1.3;
    }

    .gv-field-teaser {
        font-size: 15px;
        line-height: 1.4;
        opacity: 0.9;
    }
	
    /* 6. Ensure CTA is clean and centered */
    .card-cta p {
        text-align: center;
        margin-top: 16px !important;
    }

	/*  7. Center expertise pills when they wrap */
    .expertise-list {
        display: flex;
        flex-wrap: wrap;
        justify-content: center; /* centers pills on each line */
        gap: 6px; /* optional: adds clean spacing between pills */
        text-align: center; /* fallback for inline elements */
    }


    /* 8. Mobile refinement for +X pill */
    .metric-value .expertise-pill.expertise-more {
        background: #e5e7eb !important;
        color: #374151 !important;
        padding: 5px 12px;
        font-size: 14px;
        border-radius: 14px;
    }
}
	
	/* ----------------------------------------------------------
     25. CENTER SEARCH AND CLEAR BUTTONS ON LISTINGS - MOBILE ONLY
   ------------------------------------------------------------- */
	@media (max-width: 768px) {
  .gv-search-box-submit {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 10px; /* optional: adds space between buttons */
    flex-wrap: wrap; /* allows stacking if needed */
  }

  .gv-search-box-submit .button {
    margin: 5px 0; /* optional: vertical spacing for stacked layout */
  }
}

	/* ----------------------------------------------------------
     26. Style Business Model Line in Exithub Listing Card
   ------------------------------------------------------------- */
	.hero-business-model p {
  display: inline-block;
  background-color: #e6f0ff;
  color: #333;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 0 auto 8px;
  text-align: center;
  margin-top: 10px;
}

/* Tighten Exithub business model pill spacing */
.gv-list-view .hero-business-model p {
  margin-top: 11px !important;
  margin-bottom: 4px !important;  
  line-height: 1.1;
}

/* Match Pitchdeal spacing */
.gv-list-view .hero-business-model + .gv-main-name {
  margin-top: 4px !important;  
}


	/* ----------------------------------------------------------
     27. Center teaser on all listing cards
   ------------------------------------------------------------- */
@media (max-width: 768px) {
  /* Center teaser text */
  .gv-field-teaser {
    text-align: center !important;
    width: 100% !important;
    display: block !important;
    margin: 0 auto !important;
  }

  /* Ensure the parent container doesn't force left alignment */
  #gv_list_39 .gv-field-1-custom,
  .gv-list-view .gv-field-1-custom {
    text-align: center !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100%;
  }
}
	/* ----------------------------------------------------------
     28. Center No Entries box on My Listings page
   ------------------------------------------------------------- */
	/* Center the No Entries box on Desktop */
.gv-no-results {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    min-height: 300px; /* Optional: adds some vertical height to the page when empty */
    width: 100% !important;
}

/* Style the internal container */
.gv-no-results div {
    max-width: 450px; /* Keeps the text block from getting too wide on desktop */
    margin: 0 auto !important;
    text-align: center !important;
}

/* Style the 'Add Your First Listing' Button */
.gv-no-results a.button {
    display: inline-block !important;
    background-color: #0B84FF !important; /* Matches your 'Connect' blue */
    color: #ffffff !important;
    padding: 12px 24px !important;
    border-radius: 8px !important;
    text-decoration: none !important;
    font-weight: 500 !important;
	font-size: 16px;
    margin: 20px 0 !important; /* Adds the space above and below the button */
    transition: background-color 0.3s ease;
}

.gv-no-results a.button:hover {
    background-color: #2a4ecf !important; /* Slightly darker on hover */
}

	/* ----------------------------------------------------------
     29. Change background color, font-size, font-weight of Search and Clear buttons
   ------------------------------------------------------------- */
	.gv-search-box-submit .button,
.gv-search-box-submit input[type="submit"] {
  font-size: 16px;         
  font-weight: 500;         
  background-color: #0B84FF;  
  color: #fff;             
}