/* =========================================
   COMPARISON SECTION STYLES
   ========================================= */

/* --- CONTAINER & WRAPPER --- */
.comparison-section {
  background-color: #f9fafb; /* Light gray to separate from white sections */
}

.comparison-wrapper {
  max-width: 900px;
  margin: 0 auto;
  background: white;
  border-radius: 24px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05),
    0 2px 4px -1px rgba(0, 0, 0, 0.03);
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.05);
}

/* --- GRID LAYOUT (4 COLUMNS) --- */
.c-row {
  display: grid;
  /* Feature | Manual | Marketplace | UGC Reach */
  grid-template-columns: 1fr 1.2fr 1.2fr 1.4fr;
  padding: 1.5rem 2rem;
  border-bottom: 1px solid #f3f4f6;
  align-items: center;
  gap: 1rem;
  transition: background-color 0.2s ease-in-out;
}

.c-row:hover:not(.c-header) {
  background-color: #fcfaff; /* Very subtle purple tint on hover */
}

.c-row.last-row {
  border-bottom: none;
}

/* --- HEADER ROW --- */
.c-header {
  background: #1f2937; /* Dark background for header */
  color: white;
  font-weight: 600;
  padding: 1.25rem 2rem;
  border-bottom: none;
}

/* --- COLUMN STYLING --- */

/* 1. Feature Column */
.feature-col {
  font-weight: 600;
  color: #111827;
}

/* 2. Manual / Competitor Column */
.competitor-col {
  color: #6b7280;
  font-size: 0.95rem;
  border-right: 1px dashed #e5e7eb;
  padding-right: 1rem;
}

/* 3. Marketplace Column (New) */
.marketplace-col {
  color: #6b7280;
  font-size: 0.95rem;
  border-left: 1px dashed #e5e7eb; /* Visual separator */
  padding-left: 1rem;
  opacity: 0.9;
}

/* 4. UGC Reach Column (Highlighted) */
.ugc-reach-col {
  color: #7c3aed; /* Brand Purple */
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background-color: rgba(124, 58, 237, 0.03); /* Subtle column highlight */
  height: 100%; /* Full height highlight */
  /* Negative margin hacks to fill the grid cell fully including padding */
  margin: -1.5rem -2rem -1.5rem 0;
  padding: 1.5rem 0 1.5rem 2rem;
}

.c-header .ugc-reach-col {
  background: transparent;
  color: white;
  margin: 0;
  padding: 0;
  padding-left: 1.5rem;
}

/* --- VISUAL ASSETS --- */
.check-icon {
  width: 20px;
  height: 20px;
  stroke-width: 3px;
  color: #7c3aed;
}

.logo-badge {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.1rem;
}

.logo-icon-sm {
  background: white;
  color: #7c3aed;
  border-radius: 4px;
  padding: 2px 4px;
  font-size: 0.8rem;
  font-weight: 800;
}

.mobile-label {
  display: none;
}

/* =========================================
   RESPONSIVE (TABLET & MOBILE)
   ========================================= */

@media (max-width: 900px) {
  /* Hide the main header row */
  .c-header {
    display: none;
  }

  /* Switch to Vertical Stack */
  .c-row {
    grid-template-columns: 1fr;
    gap: 0.75rem;
    padding: 1.5rem;
    border-bottom: 4px solid #f3f4f6;
  }

  /* Reset column borders and padding for stack */
  .marketplace-col,
  .competitor-col {
    border: none;
    padding: 0;
    padding-left: 20px; /* Indent slightly under label */
  }

  .ugc-reach-col {
    margin: 0;
    padding: 0;
    padding-left: 20px;
    margin-top: 0.5rem;
    background-color: transparent; /* Remove highlight background on mobile */
    font-size: 1.1rem;
  }

  /* Show labels */
  .mobile-label {
    display: inline-block;
    font-size: 0.75rem;
    text-transform: uppercase;
    color: #9ca3af;
    width: 100px; /* Fixed width for alignment */
    font-weight: 600;
  }
}

@media (max-width: 900px) {
  /* Hide the Table Header */
  .c-header {
    display: none !important;
  }

  /* Turn Rows into Cards */
  .c-row {
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 1rem;
    gap: 0.75rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
  }

  /* The Feature Title (Top of Card) */
  .feature-col {
    font-size: 1.1rem;
    border-bottom: 1px solid #f3f4f6;
    padding-bottom: 0.5rem;
    margin-bottom: 0.5rem;
    color: #111827;
  }

  /* Hide the "Mobile Labels" you had before if we use this layout */
  .mobile-label {
    display: none;
  }

  /* Style the Competitor Items */
  .competitor-col,
  .marketplace-col {
    font-size: 0.9rem;
    color: #6b7280;
    padding: 0;
    border: none;
    display: flex;
    justify-content: space-between;
  }

  /* Add pseudo-labels so user knows which is which */
  .competitor-col::before {
    content: "Manual:";
    font-weight: 500;
  }
  .marketplace-col::before {
    content: "Marketplace:";
    font-weight: 500;
  }

  /* Highlight UGC Reach (Bottom of Card) */
  .ugc-reach-col {
    background: #f5f3ff; /* Light purple bg */
    color: #7c3aed;
    padding: 0.75rem;
    border-radius: 8px;
    margin-top: 0.5rem;
    font-weight: 700;
    justify-content: space-between;
    width: 100%;
  }
  .ugc-reach-col::before {
    content: "UGC Reach:";
    color: #4b5563;
    font-weight: 500;
    font-size: 0.9rem;
  }
}