/* what-we-do-cards-style.css: 
 * 
 * - Shared Tailwind utility classes for <WhatWeDo /> cards 
 * - NOTE: Used 'wwd' prefix for <WhatWeDo /> Tailwind classes 
 */

@layer components {
  /* --- Responsive layout --- */
  .wwd-card-flex {
    @apply relative z-10 flex flex-col mobile:flex-col-reverse gap-4 h-full;
  }

  /* --- Typography --- */
  .wwd-card-title {
    /* Title with color transition & hover effect */
    @apply text-lg mobile:text-xl font-semibold text-title mb-3 transition-colors duration-300 group-hover:scale-105 transform;
  }

  .wwd-card-caption {
    @apply text-body text-sm mobile:text-base leading-6;
  }

  /* --- Card & image: Styles & effects --- */
  .wwd-card-bg-border {
    /* Gradient card background with border and hover effect */
    @apply absolute inset-0 bg-gradient-to-br rounded-xl border transition-all duration-300;
  }

  .wwd-card-image {
    @apply aspect-video object-cover rounded-lg shadow-lg group-hover:shadow-xl;
  }

  .wwd-card-image-filter {
    @apply absolute inset-0 bg-gradient-to-t from-transparent to-black/20 rounded-lg;
  }

  .wwd-card-image-filter-group {
    /* Wrapper for image and filter with hover effect */
    @apply w-[80%] mx-auto md:w-full relative group-hover:scale-105 transition-transform duration-300;
  }
}
