/**
 * ============================================================================
 * CATEGORY ARTICLES GRID EFFECTS - GRID CARD HOVER ANIMATIONS
 * ============================================================================
 * Interactive hover effects for article cards in the category grid layout.
 * ============================================================================
 */

/* ========================================================================== */
/* CARD CONTAINER TRANSITIONS */
/* ========================================================================== */
.category-articles-grid__card {
  transition: all 0.3s ease; /* Smooth transitions */
}

/* CARD HOVER STATE - Lift up */
.category-articles-grid__card:hover {
  border-color: #2a2530; /* Lighter border */
  transform: translateY(-4px); /* Lift up */
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); /* Strong drop shadow */
}

/* ========================================================================== */
/* CARD LINK TRANSITIONS */
/* ========================================================================== */
.category-articles-grid__link {
  transition: all 0.3s ease; /* Smooth transitions */
}

/* ========================================================================== */
/* THUMBNAIL EFFECTS */
/* ========================================================================== */
.category-articles-grid__thumbnail {
  transition:
    transform 0.5s ease,
    opacity 0.3s ease; /* Smooth zoom */
}

/* THUMBNAIL HOVER STATE - Zoom in */
.category-articles-grid__card:hover .category-articles-grid__thumbnail {
  transform: scale(1.1); /* Scale up 10% */
  opacity: 0.9; /* Slightly transparent */
}

/* ========================================================================== */
/* TITLE EFFECTS */
/* ========================================================================== */
.category-articles-grid__title {
  transition: color 0.3s ease; /* Smooth color change */
}

/* TITLE HOVER STATE - Brighten */
.category-articles-grid__link:hover .category-articles-grid__title {
  color: rgba(255, 255, 255, 0.9); /* Brighter white */
}

/* ========================================================================== */
/* DATE EFFECTS */
/* ========================================================================== */
.category-articles-grid__date {
  transition: color 0.3s ease; /* Smooth color change */
}

/* DATE HOVER STATE - Brighten */
.category-articles-grid__link:hover .category-articles-grid__date {
  color: rgba(255, 255, 255, 0.9); /* Brighter white */
}

/* ========================================================================== */
/* READ BUTTON EFFECTS */
/* ========================================================================== */
.category-articles-grid__read-btn {
  transition: all 0.3s ease; /* Smooth transitions */
}

/* BUTTON HOVER STATE - Lift and shadow */
.category-articles-grid__link:hover .category-articles-grid__read-btn {
  background-color: #2a2530; /* Lighter background */
  transform: translateY(-2px); /* Lift up */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); /* Drop shadow */
}