/**
 * Poll Cards - Container-Aware & Responsive
 * 
 * Makes poll cards scale cleanly inside constrained containers
 * (carousels, mobile viewports, partial-width layouts) without overflow.
 * 
 * Scope: Poll card markup and styles only
 * NO feed logic changes
 * NO poll state changes
 */

/* ===========================================
   POLL CARD CONTAINER
   =========================================== */

.mcp-poll-card {
  /* Container-aware: scales with parent */
  width: 100%;
  min-width: 0; /* Allow shrinking below content size */
  max-width: 100%; /* Prevent overflow */
  box-sizing: border-box;
  
  /* Preserve existing visual styling */
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 20px;
  background: #fff;
  
  /* Ensure content wraps naturally */
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* ===========================================
   POLL CARD GRID
   Flexible grid that adapts to container width
   =========================================== */

.mcp-poll-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
  margin: 20px 0;
  width: 100%;
}

/* In carousels, grid becomes flex */
.mcp-carousel-track .mcp-poll-card-grid {
  display: flex !important;
  grid-template-columns: none !important;
  gap: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* Mobile: reduce minimum card width */
@media (max-width: 768px) {
  .mcp-poll-card-grid {
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 16px;
  }
}

/* Very narrow containers (carousels, small viewports) */
@media (max-width: 480px) {
  .mcp-poll-card-grid {
    grid-template-columns: 1fr; /* Single column on very small screens */
    gap: 12px;
  }
  
  .mcp-poll-card {
    padding: 16px; /* Slightly reduce padding on mobile */
  }
}

/* ===========================================
   POLL QUESTION TEXT
   Prevent text overflow
   =========================================== */

.mcp-poll-card strong {
  display: block;
  margin-bottom: 15px;
  font-size: 16px;
  line-height: 1.4;
  word-wrap: break-word;
  overflow-wrap: break-word;
  hyphens: auto;
}

/* Mobile: slightly smaller font */
@media (max-width: 768px) {
  .mcp-poll-card strong {
    font-size: 15px;
    margin-bottom: 12px;
  }
}

/* ===========================================
   POLL BARS CONTAINER
   Ensure bars scale with container
   =========================================== */

.mcp-poll-bars,
.mcp-poll-counting-preview,
.mcp-poll-closed-preview {
  width: 100%;
  min-width: 0; /* Allow shrinking */
  box-sizing: border-box;
}

.mcp-poll-counting-bars {
  width: 100%;
  min-width: 0;
}

/* ===========================================
   PROGRESS BARS (WPBakery classes)
   Ensure bars scale with container width
   =========================================== */

.mcp-poll-bars .vc_progress_bar {
  width: 100%;
  min-width: 0;
  margin-bottom: 8px;
}

.mcp-poll-bars .vc_single_bar {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.mcp-poll-bars .vc_bar {
  /* Width is set inline (50% for animated, percentage for results) */
  /* Ensure it respects container */
  max-width: 100%;
  box-sizing: border-box;
}

/* ===========================================
   RESULT BARS (Closed polls)
   Scale with container
   =========================================== */

.mcp-poll-result-row {
  width: 100%;
  min-width: 0;
  margin-bottom: 6px;
  box-sizing: border-box;
}

.mcp-poll-result-label {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  width: 100%;
  min-width: 0;
  gap: 8px; /* Prevent label/percentage collision */
}

.mcp-poll-result-label span {
  /* Allow text to wrap if needed */
  word-wrap: break-word;
  overflow-wrap: break-word;
  flex-shrink: 1;
}

.mcp-poll-result-label span:last-child {
  /* Percentage label - don't shrink */
  flex-shrink: 0;
  white-space: nowrap;
}

.mcp-poll-result-bar {
  width: 100%;
  min-width: 0;
  background: #eee;
  height: 6px;
  border-radius: 3px;
  overflow: hidden;
  box-sizing: border-box;
}

.mcp-poll-result-fill {
  height: 100%;
  background: #0073aa;
  /* Width is set inline as percentage - already flexible */
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

/* ===========================================
   SHARE CTA BLOCK
   Prevent overflow in narrow containers
   =========================================== */

.mcp-poll-share-cta {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  margin-top: 16px;
  padding: 16px;
  background: #f0f6fc;
  border: 2px solid #0073aa;
  border-radius: 8px;
  cursor: pointer;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.mcp-poll-share-cta h3 {
  margin: 0;
  font-size: 16px;
  color: #0073aa;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap; /* Allow icon to wrap on very narrow screens */
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* Mobile: slightly smaller share CTA */
@media (max-width: 768px) {
  .mcp-poll-share-cta {
    padding: 12px;
    margin-top: 12px;
  }
  
  .mcp-poll-share-cta h3 {
    font-size: 14px;
    gap: 6px;
  }
}

/* ===========================================
   ACTION BUTTONS ROW
   Flex wrap to prevent overflow
   =========================================== */

.mcp-poll-card > div:last-child,
.mcp-poll-closed-preview > div:last-child {
  margin-top: 12px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap; /* Allow buttons to wrap */
  width: 100%;
  min-width: 0;
}

.mcp-poll-view-results,
.mcp-poll-share-cta[style*="display: inline-block"] {
  /* Ensure buttons can shrink */
  flex-shrink: 1;
  min-width: 0;
  box-sizing: border-box;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* ===========================================
   TEXT ELEMENTS
   Prevent overflow
   =========================================== */

.mcp-poll-vote-count,
.mcp-poll-counting-text,
.mcp-poll-share-prompt,
.mcp-poll-privacy-note {
  width: 100%;
  min-width: 0;
  word-wrap: break-word;
  overflow-wrap: break-word;
  box-sizing: border-box;
}

/* ===========================================
   BADGES
   Prevent overflow
   =========================================== */

.mcp-poll-voted-badge,
.mcp-poll-badge {
  width: 100%;
  min-width: 0;
  word-wrap: break-word;
  overflow-wrap: break-word;
  box-sizing: border-box;
}

/* ===========================================
   CAROUSEL-SPECIFIC OVERRIDES
   When poll cards are in carousel track
   =========================================== */

.mcp-carousel-track .mcp-poll-card {
  /* Carousel width is controlled by carousel CSS */
  /* This ensures internal content scales */
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

/* Ensure bars don't overflow in carousel */
.mcp-carousel-track .mcp-poll-card .mcp-poll-result-bar,
.mcp-carousel-track .mcp-poll-card .vc_progress_bar {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

/* ===========================================
   SAFE MINIMUM WIDTH
   Poll cards must render cleanly at ~85-90% viewport width
   =========================================== */

@media (max-width: 400px) {
  .mcp-poll-card {
    padding: 12px;
  }
  
  .mcp-poll-card strong {
    font-size: 14px;
  }
  
  .mcp-poll-share-cta {
    padding: 10px;
  }
  
  .mcp-poll-share-cta h3 {
    font-size: 13px;
  }
  
  .mcp-poll-result-label {
    font-size: 12px;
  }
}