/* ===================================
   Resources Filter Pills
   =================================== */

.filter-pills-section {
  max-width: min(1400px, 100%);
  margin: 0 auto var(--youth-spacing-xl);
  padding: 0 var(--youth-spacing-lg);
}

.filter-pills-container {
  position: relative;
}

.filter-pills-wrapper {
  display: flex;
  gap: var(--youth-spacing-sm);
  padding: var(--youth-spacing-md) 0;
  overflow-x: auto;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.filter-pills-wrapper::-webkit-scrollbar {
  display: none;
}

/* Fade edges on mobile for horizontal scroll */
.filter-pills-container::before,
.filter-pills-container::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 40px;
  pointer-events: none;
  z-index: 1;
}

.filter-pills-container::before {
  left: 0;
  background: linear-gradient(90deg, var(--resources-bg-warm) 0%, transparent 100%);
}

.filter-pills-container::after {
  right: 0;
  background: linear-gradient(90deg, transparent 0%, var(--resources-bg-warm) 100%);
}

/* Filter Pill Styles */
.filter-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--youth-spacing-xs);
  padding: var(--youth-spacing-sm) var(--youth-spacing-md);
  background: var(--resources-bg-warm-secondary);
  border: 2px solid transparent;
  border-radius: 24px;
  font-family: var(--resources-font-base);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--resources-text-warm);
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
  flex-shrink: 0;
  text-decoration: none;
}

/* Category-colored borders (default) */
.filter-pill--coral { border-color: rgba(255, 107, 91, 0.3); }
.filter-pill--amber { border-color: rgba(244, 162, 97, 0.3); }
.filter-pill--mint { border-color: rgba(129, 178, 154, 0.3); }
.filter-pill--lavender { border-color: rgba(155, 142, 194, 0.3); }
.filter-pill--sky { border-color: rgba(126, 200, 227, 0.3); }
.filter-pill--pink { border-color: rgba(236, 72, 153, 0.3); }
.filter-pill--teal { border-color: rgba(20, 184, 166, 0.3); }
.filter-pill--indigo { border-color: rgba(99, 102, 241, 0.3); }

/* Hover: category-colored background */
.filter-pill--coral:hover {
  background: #FFE8E5;
  border-color: #FF6B5B;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(255, 107, 91, 0.2);
}
.filter-pill--amber:hover {
  background: #FFF0D6;
  border-color: #F4A261;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(244, 162, 97, 0.2);
}
.filter-pill--mint:hover {
  background: #D8F8ED;
  border-color: #81B29A;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(129, 178, 154, 0.2);
}
.filter-pill--lavender:hover {
  background: #EDE6F8;
  border-color: #9B8EC2;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(155, 142, 194, 0.2);
}
.filter-pill--sky:hover {
  background: #DCF0FC;
  border-color: #7EC8E3;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(126, 200, 227, 0.2);
}
.filter-pill--pink:hover {
  background: #FCE7F3;
  border-color: #EC4899;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(236, 72, 153, 0.2);
}
.filter-pill--teal:hover {
  background: #CCFBF1;
  border-color: #14B8A6;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(20, 184, 166, 0.2);
}
.filter-pill--indigo:hover {
  background: #E0E7FF;
  border-color: #6366F1;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.2);
}

.filter-pill:focus-visible {
  outline: 2px solid var(--resources-coral);
  outline-offset: 2px;
}

/* Active: category-colored solid */
.filter-pill--coral.active {
  background: #FF6B5B;
  border-color: #FF6B5B;
  color: white;
  box-shadow: 0 4px 12px rgba(255, 107, 91, 0.3);
}
.filter-pill--amber.active {
  background: #F4A261;
  border-color: #F4A261;
  color: white;
  box-shadow: 0 4px 12px rgba(244, 162, 97, 0.3);
}
.filter-pill--mint.active {
  background: #81B29A;
  border-color: #81B29A;
  color: white;
  box-shadow: 0 4px 12px rgba(129, 178, 154, 0.3);
}
.filter-pill--lavender.active {
  background: #9B8EC2;
  border-color: #9B8EC2;
  color: white;
  box-shadow: 0 4px 12px rgba(155, 142, 194, 0.3);
}
.filter-pill--sky.active {
  background: #7EC8E3;
  border-color: #7EC8E3;
  color: white;
  box-shadow: 0 4px 12px rgba(126, 200, 227, 0.3);
}
.filter-pill--pink.active {
  background: #EC4899;
  border-color: #EC4899;
  color: white;
  box-shadow: 0 4px 12px rgba(236, 72, 153, 0.3);
}
.filter-pill--teal.active {
  background: #14B8A6;
  border-color: #14B8A6;
  color: white;
  box-shadow: 0 4px 12px rgba(20, 184, 166, 0.3);
}
.filter-pill--indigo.active {
  background: #6366F1;
  border-color: #6366F1;
  color: white;
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
}

.filter-pill.active:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}

/* Filter Pill Content */
.filter-pill__emoji {
  font-size: 1rem;
  line-height: 1;
}

.filter-pill__text {
  font-size: 0.875rem;
  font-weight: 600;
}

/* Responsive Design */
@media (max-width: 768px) {
  .filter-pills-section {
    padding: 0 var(--youth-spacing-sm);
    margin-bottom: var(--youth-spacing-lg);
  }
  
  .filter-pills-wrapper {
    padding: var(--youth-spacing-sm) 0;
    gap: var(--youth-spacing-xs);
  }
  
  .filter-pill {
    padding: var(--youth-spacing-xs) var(--youth-spacing-sm);
    font-size: 0.8125rem;
  }
  
  .filter-pill__emoji {
    font-size: 0.875rem;
  }
  
  .filter-pill__text {
    font-size: 0.8125rem;
  }
  
  /* Show fade edges only when scrollable */
  .filter-pills-wrapper:not(:hover) .filter-pills-container::before,
  .filter-pills-wrapper:not(:hover) .filter-pills-container::after {
    opacity: 0.8;
  }
}

@media (max-width: 480px) {
  .filter-pill {
    padding: var(--youth-spacing-xs) var(--youth-spacing-sm);
    font-size: 0.75rem;
  }
  
  .filter-pill__emoji {
    font-size: 0.75rem;
  }
  
  .filter-pill__text {
    font-size: 0.75rem;
  }
}

/* Dark mode adjustments */
html.dark-mode .filter-pills-container::before {
  background: linear-gradient(90deg, var(--resources-bg-warm) 0%, transparent 100%);
}

html.dark-mode .filter-pills-container::after {
  background: linear-gradient(90deg, transparent 0%, var(--resources-bg-warm) 100%);
}

html.dark-mode .filter-pill {
  background: var(--resources-bg-warm-secondary);
  color: var(--resources-text-warm);
}

html.dark-mode .filter-pill--coral:hover { background: rgba(255, 107, 91, 0.2); }
html.dark-mode .filter-pill--amber:hover { background: rgba(244, 162, 97, 0.2); }
html.dark-mode .filter-pill--mint:hover { background: rgba(129, 178, 154, 0.2); }
html.dark-mode .filter-pill--lavender:hover { background: rgba(155, 142, 194, 0.2); }
html.dark-mode .filter-pill--sky:hover { background: rgba(126, 200, 227, 0.2); }
html.dark-mode .filter-pill--pink:hover { background: rgba(236, 72, 153, 0.2); }
html.dark-mode .filter-pill--teal:hover { background: rgba(20, 184, 166, 0.2); }
html.dark-mode .filter-pill--indigo:hover { background: rgba(99, 102, 241, 0.2); }

html.dark-mode .filter-pill.active {
  color: white;
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .filter-pills-wrapper {
    scroll-behavior: auto;
  }
  
  .filter-pill {
    transition: none;
  }
  
  .filter-pill:hover {
    transform: none;
  }
}

/* High contrast mode */
@media (prefers-contrast: high) {
  .filter-pill {
    border-width: 3px;
  }
  
  .filter-pill:focus-visible {
    outline-width: 3px;
    outline-offset: 3px;
  }
}