/*
 * This file is part of the UX SDC Bundle
 *
 * (c) Jozef Môstka <https://github.com/tito10047/ux-sdc>
 *
 * For the full copyright and license information, please view the LICENSE
 * file that was distributed with this source code.
 */

/* Styles for Capabilities component */


@layer components {
  .capabilities {
    padding-block: var(--space-3xl);
    background: var(--color-bg);

    & .capabilities__header {
      --stack-space: var(--space-xs);
      margin-bottom: var(--space-2xl);
    }

    & .capabilities__title {
      font-size: var(--size-step-3);
      color: var(--color-text-main);
      font-weight: 700;
      letter-spacing: -0.02em;
    }

    & .capabilities__lead {
      font-size: var(--size-step-1);
      color: var(--color-text-muted);
      max-width: 60ch;
    }

    & .capabilities__grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
      border-top: var(--border-thin);
      border-left: var(--border-thin);
    }

    & .capabilities__item {
      position: relative;
      padding: var(--space-xl);
      border-right: var(--border-thin);
      border-bottom: var(--border-thin);
      background: transparent;
      overflow: hidden;
      display: flex;
      flex-direction: column;
    }

    & .capabilities__item-glow {
      position: absolute;
      inset: 0;
      background: radial-gradient(
        600px circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
        rgba(0, 112, 243, 0.1),
        transparent 40%
      );
      opacity: 0;
      transition: opacity var(--transition-fast);
      pointer-events: none;
    }

    & .capabilities__item:hover .capabilities__item-glow {
      opacity: 1;
    }

    & .capabilities__item-content {
      position: relative;
      z-index: 1;
      --stack-space: var(--space-m);
    }

    & .capabilities__item-tag {
      font-family: var(--font-mono);
      font-size: var(--size-step--2);
      color: var(--color-accent-blue);
      text-transform: uppercase;
      letter-spacing: 0.1em;
      font-weight: 700;
    }

    & .capabilities__item-title {
      font-size: var(--size-step-1);
      color: var(--color-text-main);
      font-weight: 600;
      line-height: 1.2;
    }

    & .capabilities__item-text {
      font-size: var(--size-step-0);
      color: var(--color-text-muted);
      line-height: 1.6;
    }

    & .capabilities__item-footer {
      display: flex;
      flex-wrap: wrap;
      gap: var(--space-xs);
      margin-top: auto;
      padding-top: var(--space-m);
    }

    & .capabilities__badge {
      font-family: var(--font-mono);
      font-size: var(--size-step--2);
      color: var(--color-text-muted);
      padding: 4px 10px;
      background: rgba(255, 255, 255, 0.03);
      border: 1px solid rgba(255, 255, 255, 0.05);
      border-radius: 4px;
    }
  }
}