/* ==========================================================================
   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
   ========================================================================== */
   
   /* ==========================================================================
   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: 13px;
  line-height: 1;
}

/* Expertise pills */
.card-metrics .expertise-list {
  display: inline-flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
  margin-left: 6px;
}

.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;
}

/* 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;
}

/* CSS for N+ expertise pill tags in gravityview service card */
.expertise-pill.expertise-more {
  background: rgba(15,23,42,0.08);
  color: #0f172a;
  text-decoration: none;
}

/* 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; 
}