/*
 * 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 Stack component */


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

    & .stack__title {
      font-size: var(--size-step--1);
      text-transform: uppercase;
      letter-spacing: 0.2em;
      color: var(--color-accent-blue);
      margin-bottom: var(--space-xl);
      font-family: var(--font-mono);
      font-weight: 700;
    }

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

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

    & .stack__item:hover {
      background: rgba(255, 255, 255, 0.015);
    }

    /* Subtle glow effect on hover */
    & .stack__item::after {
      content: "";
      position: absolute;
      inset: 0;
      background: radial-gradient(
        circle at top left,
        rgba(0, 112, 243, 0.08),
        transparent 70%
      );
      opacity: 0;
      transition: opacity var(--transition-fast);
      pointer-events: none;
    }

    & .stack__item:hover::after {
      opacity: 1;
    }

    & .stack__header {
      display: flex;
      flex-direction: column;
      gap: var(--space-xs);
    }

    & .stack__number {
      font-family: var(--font-mono);
      font-size: var(--size-step--2);
      color: var(--color-accent-blue);
      font-weight: 700;
    }

    & .stack__item-title {
      font-size: var(--size-step-1);
      color: var(--color-text-main);
      font-weight: 600;
      letter-spacing: -0.01em;
    }

    & .stack__item-desc {
      font-size: var(--size-step-0);
      color: var(--color-text-muted);
      line-height: 1.6;
      max-width: 45ch;
    }

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

    & .stack__tag {
      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;
      transition: var(--transition-fast);
    }

    & .stack__item:hover .stack__tag {
      border-color: rgba(0, 112, 243, 0.2);
      color: var(--color-text-main);
    }
  }
}