/**
 * @file
 * Testimonial Grid component styles.
 * Matches site design patterns (person-card, bento-card).
 */

@layer components {
  /*
   * Fix: Make Views/Field wrappers invisible to CSS Grid.
   * The grid expects testimonial-items as direct children,
   * but Drupal wraps them in multiple layers of containers.
   * display: contents makes these wrappers "disappear" for layout purposes,
   * so .testimonial-item becomes the actual grid item.
   */
  .testimonial-grid__items > .field__item,
  .testimonial-grid__items > .contextual-region,
  .testimonial-grid__items .views-element-container,
  .testimonial-grid__items .view-testimonials,
  .testimonial-grid__items .view-content,
  .testimonial-grid__items .view-content > div,
  .testimonial-grid__items .views-field,
  .testimonial-grid__items .field-content {
    display: contents;
  }

  /*
   * Featured first testimonial styling (CSS-based).
   * Makes the first testimonial span 2 columns and appear larger.
   *
   * The .view-content has 11 direct children (row divs without class).
   * These have display:contents but still exist in DOM for CSS selectors.
   * We target the first row's testimonial-item to make it featured.
   */

  /* First testimonial spans 2 columns on larger screens */
  .testimonial-grid__items .view-content > div:first-child .testimonial-item {
    @apply sm:col-span-2;
  }

  /* Featured testimonial: larger quote text */
  .testimonial-grid__items .view-content > div:first-child .testimonial-item .testimonial-item__quote {
    @apply p-8 sm:p-12;
  }

  .testimonial-grid__items .view-content > div:first-child .testimonial-item .testimonial-item__quote p {
    @apply text-lg sm:text-xl font-semibold tracking-tight;
  }

  /* Featured testimonial: enhanced author section */
  .testimonial-grid__items .view-content > div:first-child .testimonial-item .testimonial-item__author {
    @apply px-8 py-5 bg-neutral-50/50;
  }

  /* Featured testimonial: larger avatar */
  .testimonial-grid__items .view-content > div:first-child .testimonial-item .testimonial-item__avatar {
    @apply size-12;
  }

  /* Responsive grid adjustments */
  @media (min-width: 1024px) {
    .testimonial-grid__items {
      gap: 1.5rem;
    }
  }

  /* Animate cards in on scroll (optional, matches site pattern) */
  .testimonial-item__card {
    opacity: 0;
    transform: translateY(20px);
    animation: testimonialFadeIn 0.6s ease-out forwards;
  }

  /* Stagger animation delays for grid items */
  .testimonial-grid__items .view-content > div:nth-child(1) .testimonial-item__card { animation-delay: 0ms; }
  .testimonial-grid__items .view-content > div:nth-child(2) .testimonial-item__card { animation-delay: 100ms; }
  .testimonial-grid__items .view-content > div:nth-child(3) .testimonial-item__card { animation-delay: 200ms; }
  .testimonial-grid__items .view-content > div:nth-child(4) .testimonial-item__card { animation-delay: 300ms; }
  .testimonial-grid__items .view-content > div:nth-child(5) .testimonial-item__card { animation-delay: 400ms; }
  .testimonial-grid__items .view-content > div:nth-child(n+6) .testimonial-item__card { animation-delay: 500ms; }

  @keyframes testimonialFadeIn {
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
}