@layer components {
  /* ==========================================================================
     Open Source Page Styles
     Uses .oss- prefix — green palette for open source/community
     ========================================================================== */

  /* OSS hero: deep green gradient */
  .hero.oss-hero {
    background: linear-gradient(135deg, var(--color-oss-700) 0%, var(--color-oss-600) 50%, var(--color-oss-500) 100%);
    animation: none;

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

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

      & em {
        font-style: italic;
        color: var(--color-oss-200);
        -webkit-text-fill-color: var(--color-oss-200);
        background: none;
        -webkit-background-clip: unset;
        background-clip: unset;
      }
    }

    & .hero-subtitle {
      color: rgba(255, 255, 255, 0.75);
    }

    & .btn-primary {
      background: var(--color-white);
      color: var(--color-oss-700);

      &:hover {
        background: var(--color-oss-200);
        color: var(--color-oss-700);
      }
    }

    & .btn-secondary {
      color: var(--color-white);
      border-color: rgba(255, 255, 255, 0.4);

      &:hover {
        background: rgba(255, 255, 255, 0.12);
        color: var(--color-white);
        border-color: rgba(255, 255, 255, 0.7);
        box-shadow: none;
      }
    }
  }

  /* Override desktop left-align for oss hero */
  @media (min-width: 48rem) {
    .oss-hero .hero-actions {
      justify-content: flex-start;
    }
  }

  /* Hero illustration */
  .oss-hero .hero-illustration svg {
    filter: drop-shadow(0 4px 20px rgba(21, 128, 61, 0.15));
  }

  /* Projects section: override card gradient to green */
  .oss-projects .service-card::before,
  .oss-projects .service-card::after {
    background: linear-gradient(135deg, var(--color-oss-600), var(--color-oss-400));
  }

  .oss-projects .service-card:nth-child(2)::before,
  .oss-projects .service-card:nth-child(2)::after {
    background: linear-gradient(135deg, var(--color-oss-500), var(--color-oss-300));
  }

  .oss-projects .service-card:nth-child(3)::before,
  .oss-projects .service-card:nth-child(3)::after {
    background: linear-gradient(135deg, var(--color-oss-400), var(--color-oss-700));
  }

  /* Tech tag for project cards */
  .oss-tech-tag {
    display: inline-block;
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: var(--color-oss-600);
    letter-spacing: 0.05em;
    margin-block-end: var(--spacing-sm);
  }

  /* Philosophy section: light green background */
  .oss-philosophy {
    background: var(--color-oss-50);
  }

  .oss-philosophy .service-card::before,
  .oss-philosophy .service-card::after {
    background: linear-gradient(135deg, var(--color-oss-600), var(--color-oss-400));
  }

  .oss-philosophy .service-card:nth-child(2)::before,
  .oss-philosophy .service-card:nth-child(2)::after {
    background: linear-gradient(135deg, var(--color-oss-500), var(--color-oss-300));
  }

  .oss-philosophy .service-card:nth-child(3)::before,
  .oss-philosophy .service-card:nth-child(3)::after {
    background: linear-gradient(135deg, var(--color-oss-700), var(--color-oss-500));
  }

  .oss-philosophy .service-card:nth-child(4)::before,
  .oss-philosophy .service-card:nth-child(4)::after {
    background: linear-gradient(135deg, var(--color-oss-400), var(--color-oss-700));
  }

  /* OSS CTA: green gradient background */
  .oss-cta-section.cta-section {
    background: linear-gradient(135deg, var(--color-oss-700), var(--color-oss-600), var(--color-oss-500));
    background-size: 200% 200%;

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

  /* Secondary button on dark CTA background needs white styling */
  .oss-cta-section .btn-secondary {
    color: var(--color-white);
    border-color: rgba(255, 255, 255, 0.5);

    &:hover {
      background: rgba(255, 255, 255, 0.15);
      color: var(--color-white);
      border-color: var(--color-white);
      box-shadow: none;
    }
  }

  /* Badge in OSS context uses green */
  .oss-projects .section-badge {
    color: var(--color-oss-700);
    background: var(--color-oss-100);
  }

  /* Card headings in OSS use green */
  .oss-projects .service-card h3,
  .oss-philosophy .service-card h3 {
    color: var(--color-oss-700);
  }
}