/* style.css */

/* We use a custom CSS class for the active state because it's cleaner 
  than adding/removing multiple Tailwind classes with JavaScript.
*/
.filter-btn {
    @apply px-3 py-1.5 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition-colors;
}

.filter-btn.active {
    @apply bg-indigo-600 text-white border-indigo-600 hover:bg-indigo-700;
}

/* Utility for line clamping text in card descriptions.
  Tailwind CSS v3+ has this built-in, but this is a safe fallback.
*/
.line-clamp-2 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}