/* Global styles & Refinements */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: var(--color-brand_text_primary); /* Default text color */
}

/* Filter Select Styling */
.filter-select {
  width: 100%;
  appearance: none;
  background-color: var(--color-brand_surface);
  border: 1px solid var(--color-slate_300);
  color: var(--color-brand_text_secondary);
  padding: 0.75rem 2.5rem 0.75rem 1rem;
  border-radius: 0.5rem; /* rounded-lg */
  font-size: 0.875rem; /* text-sm */
  line-height: 1.25rem;
  /* Custom SVG for the dropdown arrow */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%2364748b' class='w-5 h-5'%3E%3Cpath fill-rule='evenodd' d='M5.23 7.21a.75.75 0 011.06.02L10 10.94l3.71-3.71a.75.75 0 111.06 1.06l-4.25 4.25a.75.75 0 01-1.06 0L5.23 8.29a.75.75 0 01.02-1.06z' clip-rule='evenodd' /%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 1.25em 1.25em;
  transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
  cursor: pointer;
}

.filter-select:focus {
  outline: none;
  border-color: var(--color-brand_primary);
  box-shadow: 0 0 0 2px var(--color-brand_primary_rgba_25);
}

@media (min-width: 768px) { /* md breakpoint */
  .filter-select {
    width: auto;
    min-width: 12rem; /* Example: 192px */
  }
}

/* Resource Card Styling with Enhanced Hover Effects */
.resource-card {
  background-color: var(--color-brand_surface);
  border-radius: 0.75rem; /* rounded-xl */
  /* Enhanced transition for smoother hover effects */
  transition: all 0.3s ease-in-out;
  display: flex;
  flex-direction: column;
  overflow: hidden; /* Important for consistent border-radius application */
  height: 100%; /* Ensure cards in a row have equal height if content varies slightly */
  cursor: pointer;
  /* Base state - subtle shadow */
  box-shadow: 0 4px 12px -1px rgba(0, 0, 0, 0.05), 0 2px 8px -1px rgba(0, 0, 0, 0.03);
  /* Add border for subtle definition */
  border: 1px solid rgba(0, 0, 0, 0.05);
  /* Ensure smooth transform origin */
  transform-origin: center;
}

/* Enhanced Hover Effects */
.resource-card:hover {
  /* Elegant lift and scale effect */
  transform: translateY(-8px) scale(1.03);
  /* Enhanced shadow for more depth and sophistication */
  box-shadow: 
    0 20px 40px -5px rgba(0, 0, 0, 0.15), 
    0 8px 20px -3px rgba(0, 0, 0, 0.1),
    0 0 0 1px rgba(10, 104, 255, 0.1); /* Subtle brand color border glow */
  /* Subtle border color enhancement */
  border-color: rgba(10, 104, 255, 0.2);
  /* Slight background brightness increase */
  background-color: rgba(255, 255, 255, 0.98);
}

/* Enhanced hover effect for the card image/visual area */
.resource-card:hover .resource-card-visual {
  /* Subtle scale effect for the image area */
  transform: scale(1.05);
  transition: transform 0.4s ease-in-out;
}

/* Enhanced hover effect for card content */
.resource-card:hover .card-content {
  /* Subtle animation for text content */
  transform: translateY(-2px);
  transition: transform 0.3s ease-in-out;
}

/* Enhanced hover effects for buttons within cards */
.resource-card:hover .btn-outline {
  border-color: var(--color-brand_primary);
  color: var(--color-brand_primary);
  background-color: rgba(10, 104, 255, 0.05);
}

.resource-card:hover .btn-secondary {
  background-color: var(--color-brand_primary);
  color: var(--color-brand_surface);
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(10, 104, 255, 0.25);
}

/* Ensure visual area maintains proper overflow handling during hover */
.resource-card-visual {
  width: 100%;
  padding-top: 56.25%; /* 16:9 Aspect Ratio (9 / 16 * 100) */
  position: relative;
  overflow: hidden; /* Ensure image/icon respects card border radius and hover scaling */
  background-color: var(--color-slate_100); /* Placeholder background */
  display: flex; /* Use flex for centering icon/placeholder */
  align-items: center;
  justify-content: center;
  color: var(--color-slate_400); /* Placeholder icon/text color */
  flex-shrink: 0; /* Prevent this section from shrinking */
  /* Add transition for smooth hover effects */
  transition: transform 0.4s ease-in-out;
}

.resource-card-visual img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* 设置固定尺寸，避免图标被拉伸 */
  width: 56px;
  height: 56px;
  max-width: 56px;
  max-height: 56px;
  /* 使用cover保持图标比例，避免变形 */
  object-fit: cover;
  /* 确保图片显示为块级元素 */
  display: block;
  /* 添加过渡效果 */
  transition: transform 0.3s ease-in-out, filter 0.3s ease-in-out;
  /* 使用auto渲染，保持图标清晰度 */
  image-rendering: auto;
  /* 添加背景色，使图标更加突出 */
  background-color: var(--color-brand_surface);
  border-radius: 0.5rem;
  /* 确保图标在最上层显示 */
  z-index: 2;
  /* 添加轻微阴影增强视觉效果 */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Subtle image enhancement on hover */
.resource-card:hover .resource-card-visual img {
  /* Slight brightness/contrast enhancement and scale */
  filter: brightness(1.05) contrast(1.02);
  transform: translate(-50%, -50%) scale(1.1);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.resource-card-visual .card-icon-placeholder {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* 调整图标占位符的尺寸，避免过大 */
  display: flex;
  align-items: center;
  justify-content: center;
  height: 3.5rem; /* 调整为更大的尺寸 */
  width: 3.5rem;  /* 调整为更大的尺寸 */
  flex-shrink: 0;
  /* 添加圆角和背景色，使图标更加突出 */
  border-radius: 0.5rem;
  background-color: var(--color-slate_50);
  /* 添加过渡效果 */
  transition: transform 0.3s ease-in-out, background-color 0.3s ease-in-out, opacity 0.3s ease-in-out;
  /* 将占位符图标放到下层 */
  z-index: 1;
  /* 降低透明度，使其更加低调 */
  opacity: 0.6;
}

/* Enhanced hover effect for icon placeholder */
.resource-card:hover .card-icon-placeholder {
  transform: translate(-50%, -50%) scale(1.05);
  background-color: var(--color-slate_100);
  opacity: 0.4;
}

/* Button Styles */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.625rem 1.25rem; /* Default: py-2.5 px-5. Can be overridden by size classes */
  border-radius: 0.5rem; /* rounded-lg */
  font-weight: 600; /* semibold */
  font-size: 0.875rem; /* text-sm, default for buttons */
  line-height: 1.25rem; /* leading-5 */
  text-align: center;
  transition: all 0.3s ease-in-out; /* Enhanced transition for all properties */
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap; /* Prevents button text from wrapping */
}

.btn:focus, .btn:focus-visible { /* Enhanced focus state */
  outline: none;
  box-shadow: 0 0 0 3px var(--color-brand_primary_rgba_40);
}

.btn:active {
  transform: scale(0.97); /* Slightly more noticeable active state */
}

.btn-primary {
  background-color: var(--color-brand_primary);
  color: var(--color-brand_surface);
  border-color: var(--color-brand_primary);
}
.btn-primary:hover {
  background-color: var(--color-brand_primary_dark);
  border-color: var(--color-brand_primary_dark);
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(10, 104, 255, 0.3);
}

.btn-secondary {
  background-color: var(--color-brand_surface);
}

/* Category Badge Styles */
.category-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.75rem;
  border-radius: 9999px; /* rounded-full */
  font-size: 0.75rem; /* text-xs */
  font-weight: 600; /* semibold */
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
  transition: all 0.2s ease-in-out;
}

.category-badge-default {
  background-color: var(--color-slate_200);
  color: var(--color-slate_700);
}

.category-badge-development {
  background-color: var(--color-sky_100);
  color: var(--color-sky_800);
}

.category-badge-design {
  background-color: var(--color-purple_100);
  color: var(--color-purple_800);
}

.category-badge-ai-ml {
  background-color: var(--color-teal_100);
  color: var(--color-teal_800);
}

.category-badge-data-science {
  background-color: var(--color-amber_100);
  color: var(--color-amber_800);
}

.category-badge-community {
  background-color: var(--color-pink_100);
  color: var(--color-pink_800);
}

.category-badge-learning {
  background-color: var(--color-green_100);
  color: var(--color-green_800);
}

.category-badge-other {
  background-color: var(--color-slate_100);
  color: var(--color-slate_800);
}
.btn-secondary:hover {
  background-color: var(--color-brand_primary_rgba_10_bg); /* Light primary color for hover */
  border-color: var(--color-brand_primary); /* Solid primary on hover */
  color: var(--color-brand_primary_dark);
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(10, 104, 255, 0.2);
}

.btn-outline {
  background-color: transparent;
  color: var(--color-brand_text_secondary);
  border: 1px solid var(--color-slate_300);
}
.btn-outline:hover {
  background-color: var(--color-slate_50); /* Very light hover */
  border-color: var(--color-slate_400);
  color: var(--color-brand_text_primary);
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Modal styles refinement */
#resource-modal .bg-brand-surface {
    border-radius: 0.75rem; /* rounded-xl */
    box-shadow: var(--tw-shadow-xl, 0 20px 25px -5px rgba(0,0,0,0.1), 0 10px 10px -5px rgba(0,0,0,0.04));
}

#resource-modal h3 { /* Modal title */
    font-size: 1.375rem; /* text-xl md:text-2xl - adjusted for consistency */
    line-height: 1.3;
    font-weight: 700; /* font-bold */
    color: var(--color-brand_text_primary);
}
@media (min-width: 768px) { /* md breakpoint */
  #resource-modal h3 {
    font-size: 1.5rem; /* text-2xl */
  }
}

/* Modal body styles */
#resource-modal-content-wrapper .modal-body {
    padding: 1.5rem; /* p-6 */
    overflow-y: auto; /* Enable scrolling for modal content if it exceeds max height */
}

#resource-modal-content-wrapper .modal-footer {
    padding: 1rem 1.5rem; /* px-6 py-4 */
    border-top: 1px solid var(--color-slate_200);
    display: flex;
    justify-content: flex-end; /* Align buttons to the right */
    gap: 0.75rem; /* space-x-3 equivalent */
    flex-shrink: 0; /* Prevent footer from shrinking */
}

/* Scrollbar styling */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: var(--color-slate_100);
  border-radius: 10px;
}
::-webkit-scrollbar-thumb {
  background: var(--color-slate_300);
  border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--color-slate_400);
}

/* Category Badge Styles */
.category-badge {
    font-size: 0.75rem; /* text-xs (12px) */
    font-weight: 600; /* font-semibold */
    padding: 0.2rem 0.625rem; /* Adjusted padding for better balance */
    border-radius: 9999px; /* rounded-full */
    text-transform: uppercase;
    letter-spacing: 0.05em; /* tracking-wider */
    display: inline-block;
    line-height: 1.4; /* Added line height for small text */
    /* Add transition for hover effects */
    transition: all 0.3s ease-in-out;
}

/* Enhanced category badge hover effects */
.resource-card:hover .category-badge {
    transform: scale(1.05);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Specific category badge colors (using CSS Variables) */
.category-badge-development { background-color: var(--color-sky_100); color: var(--color-sky_800); }
.category-badge-design { background-color: var(--color-purple_100); color: var(--color-purple_800); }
.category-badge-ai-ml { background-color: var(--color-teal_100); color: var(--color-teal_800); }
.category-badge-data-science { background-color: var(--color-amber_100); color: var(--color-amber_800); }
.category-badge-community { background-color: var(--color-pink_100); color: var(--color-pink_800); }
.category-badge-learning { background-color: var(--color-green_100); color: var(--color-green_800); }
.category-badge-default { background-color: var(--color-slate_100); color: var(--color-slate_800); }

/* Line Clamp Utilities */
.line-clamp-3 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Placeholder text color refinement */
input::placeholder, textarea::placeholder {
    color: var(--color-slate_400); /* Tailwind gray-400 equivalent */
    opacity: 1; /* Ensuring consistent opacity */
}

/* Added style for the 'NEW' tag inside cards/modal */
.new-tag {
    display: inline-block;
    background-color: var(--color-brand_accent);
    color: var(--color-brand_surface); /* White text for contrast */
    font-size: 0.625rem; /* text-xs */
    font-weight: 700; /* font-bold */
    padding: 0.125rem 0.5rem; /* px-2 py-0.5 */
    border-radius: 0.25rem; /* rounded */
    margin-left: 0.5rem; /* ml-2 */
    vertical-align: middle;
    text-transform: uppercase;
    letter-spacing: 0.05em; /* tracking-wider */
    /* Add transition for hover effects */
    transition: all 0.3s ease-in-out;
}

/* Enhanced NEW tag hover effect */
.resource-card:hover .new-tag {
    transform: scale(1.1);
    box-shadow: 0 2px 6px rgba(255, 140, 0, 0.4);
}

/* Add a subtle animation for card content on hover */
.resource-card .card-content {
    transition: transform 0.3s ease-in-out;
}

/* Accessibility: Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
  .resource-card,
  .resource-card-visual,
  .resource-card-visual img,
  .card-icon-placeholder,
  .btn,
  .category-badge,
  .new-tag,
  .card-content {
    transition: none !important;
  }
  
  .resource-card:hover {
    transform: none !important;
  }
  
  .resource-card:hover .resource-card-visual,
  .resource-card:hover .card-content,
  .resource-card:hover .card-icon-placeholder,
  .resource-card:hover .category-badge,
  .resource-card:hover .new-tag {
    transform: none !important;
  }
}