@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
  .gear-card {
    @apply bg-white rounded-lg shadow-md overflow-hidden transition-all duration-300;
    @apply border border-gray-100;
    @apply hover:shadow-xl;
  }
  
  .gear-card-image {
    @apply w-full h-48 object-cover;
    @apply transition-transform duration-300;
  }
  
  .gear-card:hover .gear-card-image {
    @apply scale-105;
  }
  
  .gear-card-content {
    @apply p-6;
  }
  
  .gear-card-title {
    @apply text-xl font-semibold text-gray-800 mb-2;
    @apply transition-colors duration-200;
  }
  
  .gear-card:hover .gear-card-title {
    @apply text-primary;
  }
  
  .gear-card-description {
    @apply text-sm text-gray-600 mb-4;
    @apply leading-relaxed;
  }
  
  .gear-card-link {
    @apply inline-block bg-primary text-white px-4 py-2 rounded-lg font-semibold;
    @apply transition-all duration-200;
    @apply hover:bg-[#e05a00] hover:shadow-md;
    @apply focus:outline-none focus:ring-2 focus:ring-primary focus:ring-opacity-50;
  }
  
  .gear-disclaimer {
    @apply text-sm text-gray-500;
    @apply leading-relaxed;
  }

  .affiliate-link {
    @apply text-primary underline decoration-1 underline-offset-2;
    @apply transition-colors duration-200;
    @apply hover:text-[#e05a00] hover:decoration-2;
    @apply focus:outline-none focus:ring-2 focus:ring-primary focus:ring-opacity-50 focus:rounded;
  }

  .affiliate-link::after {
    content: "↗";
    @apply ml-0.5 text-xs opacity-70;
  }

  /* Ready to Bake Section Styles */
  .ready-to-bake {
    @apply relative;
    @apply bg-gradient-to-b from-background to-white;
    @apply py-12 px-4;
  }

  .ready-to-bake::before {
    content: '';
    @apply absolute inset-0;
    @apply bg-[url('/images/pizza-pattern.png')] opacity-5;
    @apply pointer-events-none;
  }

  .ready-to-bake h2 {
    @apply text-3xl font-['Permanent_Marker'] text-primary mb-4;
    @apply text-center;
  }

  .ready-to-bake p {
    @apply text-lg text-secondary;
    @apply max-w-2xl mx-auto text-center;
    @apply mb-8;
  }

  .ready-to-bake .grid {
    @apply gap-6;
    @apply mt-8;
  }

  .ready-to-bake .gear-card {
    @apply h-full;
    @apply flex flex-col;
  }

  .ready-to-bake .gear-card-content {
    @apply flex-1;
    @apply flex flex-col;
  }

  .ready-to-bake .gear-card-description {
    @apply flex-1;
  }

  .ready-to-bake .gear-disclaimer {
    @apply mt-8 text-center;
    @apply text-sm text-gray-500;
    @apply max-w-2xl mx-auto;
  }

  .ready-to-bake a[href="/gear"] {
    @apply inline-block mt-4;
    @apply text-primary font-semibold;
    @apply hover:text-[#e05a00];
    @apply transition-colors duration-200;
  }

  /* Status Badge Styles */
  .gear-card .absolute {
    @apply top-4 right-4;
  }

  .gear-card .bg-primary {
    @apply px-3 py-1;
    @apply rounded-full;
    @apply text-sm font-semibold;
    @apply text-white;
  }

  /* Price Styles */
  .gear-card .text-primary {
    @apply font-semibold;
    @apply text-lg;
  }
}