/* Comparison Section - Minimal overrides for Pico CSS */

/* Section spacing handled by common.css */

/* Table overflow for mobile */
figure {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Product icons - brand-specific styling */
.product-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--secondary);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  margin: 0 auto 8px;
  transition: all var(--transition-fast);
}

.product-icon.primary {
  background: var(--primary);
}

/* Highlight column - brand-specific styling */
.highlight {
  background: var(--primary-focus);
  border-left: 3px solid var(--primary);
  border-right: 3px solid var(--primary);
}

/* Status indicators - brand-specific colors */
.check,
.cross,
.partial {
  font-weight: 700;
  font-size: 18px;
  cursor: help;
  position: relative;
  display: inline-block;
}

.check {
  color: var(--accent);
}

.cross {
  color: var(--academic-warning);
}

.partial {
  color: #F59E0B;
}

/* Tooltip on hover */
.check:hover::after,
.cross:hover::after,
.partial:hover::after {
  content: attr(title);
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: var(--color);
  color: var(--background-color);
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  z-index: 10;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.check:hover::before,
.cross:hover::before,
.partial:hover::before {
  content: '';
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(2px);
  border: 4px solid transparent;
  border-top-color: var(--color);
  z-index: 10;
}

/* Feature icons */
.feature-icon {
  margin-right: 8px;
}

/* Feature values - semantic color classes */
.positive {
  color: var(--accent);
}

.negative {
  color: var(--academic-warning);
}

.partial {
  color: #F59E0B;
}

/* Highlight text styling */
.highlight-text strong {
  color: var(--primary);
}

/* Comparison Summary Card */
.comparison-summary-card {
  margin-top: 48px;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  border: 2px solid var(--primary);
  background: var(--primary-focus);
}

.comparison-summary-card header {
  background: var(--primary);
  color: white;
  padding: 16px;
  margin: -2px -2px 24px -2px;
}

.comparison-summary-card header h3 {
  margin: 0;
  color: white;
  font-size: 24px;
}

.comparison-summary-card p {
  padding: 0 24px;
  margin-bottom: 20px;
}

.comparison-summary-card p:first-of-type {
  font-size: 14px;
  color: var(--gray-600);
  line-height: 1.6;
}

.comparison-summary-card .highlight-text {
  background: rgba(30, 64, 175, 0.1);
  padding: 16px 24px;
  border-radius: 8px;
  margin: 16px 24px 24px;
  font-size: 18px;
  line-height: 1.6;
}

/* Mobile comparison cards - hidden by default */
.comparison-cards {
  display: none;
}

/* Tablet responsiveness */
@media (max-width: 968px) {
  .comparison-table {
    font-size: 15px;
  }
  
  .comparison-table th,
  .comparison-table td {
    padding: 10px 6px;
  }
  
  .product-icon {
    width: 28px;
    height: 28px;
    font-size: 13px;
  }
}

/* Mobile responsive table */
@media (max-width: 767px) {
  /* Keep table visible but make it scroll horizontally */
  figure {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 0 -16px; /* Extend to edges on mobile */
    padding: 0 16px;
  }
  
  .comparison-table {
    min-width: 650px; /* Ensure minimum width for readability */
    font-size: 13px;
  }
  
  .comparison-table th,
  .comparison-table td {
    padding: 8px 4px;
    white-space: nowrap;
  }
  
  .comparison-table th:first-child,
  .comparison-table td:first-child {
    position: sticky;
    left: 0;
    background: var(--background-color);
    z-index: 1;
    min-width: 140px;
  }
  
  .product-icon {
    width: 24px;
    height: 24px;
    font-size: 11px;
    margin-bottom: 4px;
  }
  
  .comparison-table small {
    font-size: 9px;
    display: block;
    line-height: 1.2;
  }
  
  /* Feature icons smaller on mobile */
  .feature-icon {
    margin-right: 4px;
    font-size: 14px;
  }
}

/* Extra small mobile devices */
@media (max-width: 480px) {
  figure {
    margin: 0 -12px;
    padding: 0 12px;
  }
  
  .comparison-table {
    min-width: 600px;
    font-size: 12px;
  }
  
  .comparison-table th,
  .comparison-table td {
    padding: 6px 3px;
  }
  
  .comparison-table th:first-child,
  .comparison-table td:first-child {
    min-width: 120px;
    font-size: 11px;
  }
  
  .product-icon {
    width: 20px;
    height: 20px;
    font-size: 10px;
  }
  
  .comparison-table small {
    font-size: 8px;
  }
}

/* Hover effects for non-touch devices */
@media (hover: hover) {
  .comparison-cards article:hover {
    transform: translateY(-4px);
  }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .product-icon,
  .comparison-cards article {
    transition: none;
  }
  
  .comparison-cards article:hover {
    transform: none;
  }
}