@layer components {
  /* ==========================================================================
     Services Page Overrides
     Only page-specific styles — shared classes come from home.css
     ========================================================================== */

  /* Services hero: simpler than home hero — solid background, no animation */
  .services-hero {
    background: var(--color-lab-50);
    animation: none;
    text-align: center;

    &::before,
    &::after {
      display: none;
    }

    & h1 {
      font-size: clamp(2rem, 4vw, 3.5rem);

      & em {
        font-style: normal;
        background: var(--gradient-text-accent);
        background-size: 200% 200%;
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
      }
    }
  }

  /* Override desktop left-align for services hero (keep centered) */
  @media (min-width: 48rem) {
    .services-hero {
      text-align: center;

      & h1 {
        margin-inline: auto;
      }
    }

    .services-hero .hero-subtitle {
      margin-inline: auto;
    }

    .services-hero .hero-actions {
      justify-content: center;
    }
  }

  /* Product studio: light background for visual separation */
  .product-studio-section {
    background: var(--color-gray-50);
  }

  /* ==========================================================================
     Section Image — full-width editorial photo between subtitle and grid
     ========================================================================== */
  .section-image {
    margin-block-end: var(--spacing-lg);

    & img {
      display: block;
      width: 100%;
      aspect-ratio: 16 / 9;
      object-fit: cover;
      filter: grayscale(20%) contrast(1.05);
      transition: filter var(--transition-base);
    }

    &:hover img {
      filter: grayscale(0%) contrast(1.05);
    }
  }

  /* Scroll-reveal for section image */
  [data-controller="scroll-reveal"] .section-image {
    opacity: 0;
    transform: translateY(20px);
    transition:
      opacity var(--duration-reveal) var(--ease-out-expo),
      transform var(--duration-reveal) var(--ease-out-expo);
  }

  [data-controller="scroll-reveal"].is-visible .section-image {
    opacity: 1;
    transform: translateY(0);
  }

  /* ==========================================================================
     Services Grid — 3-column responsive grid (mirrors .pillars-grid)
     ========================================================================== */
  .services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
    gap: var(--spacing-md);
  }

  /* ==========================================================================
     Service Card — card styling (mirrors .pillar-card)
     ========================================================================== */
  .service-card {
    background: var(--color-white);
    border: 1px solid #E5E5E5;
    padding: var(--spacing-lg) var(--spacing-md);
    position: relative;
    overflow: hidden;
    text-align: left;
    transition: border-color var(--transition-base);

    &::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 2px;
      background: var(--color-accent);
      pointer-events: none;
    }

    &:hover {
      border-color: var(--color-accent);
    }

    & h3 {
      color: var(--color-primary);
      margin-block-end: var(--spacing-xs);
      font-size: var(--font-size-xl);
    }

    & p {
      color: var(--color-gray-600);
      line-height: 1.7;
      margin-block-end: 0;
    }
  }

  /* Staggered scroll-reveal for service cards */
  [data-controller="scroll-reveal"] .service-card {
    opacity: 0;
    transform: translateY(20px);
    transition:
      opacity var(--duration-reveal) var(--ease-out-expo),
      transform var(--duration-reveal) var(--ease-out-expo),
      border-color var(--transition-base);
  }

  [data-controller="scroll-reveal"].is-visible .service-card {
    opacity: 1;
    transform: translateY(0);
  }

  .is-visible .service-card:nth-child(1) { transition-delay: 0ms; }
  .is-visible .service-card:nth-child(2) { transition-delay: 100ms; }
  .is-visible .service-card:nth-child(3) { transition-delay: 200ms; }
  .is-visible .service-card:nth-child(4) { transition-delay: 300ms; }

  @media (prefers-reduced-motion: reduce) {
    .section-image {
      & img {
        transition: none;
      }
    }

    [data-controller="scroll-reveal"] .section-image {
      opacity: 1;
      transform: none;
      transition: none;
    }

    .service-card {
      transition: border-color var(--transition-base);
    }

    [data-controller="scroll-reveal"] .service-card {
      opacity: 1;
      transform: none;
      transition: none;
    }
  }
}