/*
 * 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 Details component */
@layer components {
  .details {
    position: relative;
    padding-block: var(--space-2xl);
    padding-inline: var(--space-l);
    background-color: transparent;
    overflow: hidden;

    & .details__container {
      max-width: 1200px;
      margin-inline: auto;
      position: relative;
      z-index: 2;
    }

    & .details__grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: var(--space-xl);
      justify-content: center;
    }

    & .details__item {
      position: relative;
      padding: var(--space-2xl) var(--space-l);
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      transition: all 0.8s var(--ease-zen);
      overflow: hidden;

      /* Glassmorphism base */
      background: rgba(255, 255, 255, 0.03);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 2rem 5rem 2rem 4rem;

      &:hover,
      &.is-active {
        transform: translateY(-12px);
        background: rgba(255, 255, 255, 0.08);
        border-color: rgba(255, 255, 255, 0.2);
        box-shadow: 0 30px 60px rgba(0, 0, 0, 0.1);

        & .details__topo-bg {
          opacity: 0.3;
          transform: scale(1.1) rotate(2deg);
        }

        & .details__icon {
          color: var(--color-accent);
          transform: scale(1.1);
        }
      }

      &::after {
        content: "";
        position: absolute;
        inset: 0;
        background: radial-gradient(circle at top right, rgba(255, 255, 255, 0.05), transparent);
        pointer-events: none;
      }
    }

    & .details__topo-bg {
      position: absolute;
      inset: 0;
      z-index: -1;
      opacity: 0.1;
      transition: all 1.5s var(--ease-zen);
      pointer-events: none;

      & svg {
        width: 100%;
        height: 100%;
        color: var(--color-text);
      }
    }

    & .details__icon {
      margin-bottom: var(--space-m);
      color: var(--color-text-muted);
      transition: all 0.6s var(--ease-zen);
      display: flex;
      justify-content: center;
    }

    & .details__label {
      font-size: var(--size-step-1);
      font-weight: 700;
      margin-bottom: var(--space-s);
      color: var(--color-text);
      letter-spacing: 0.05em;
      text-transform: uppercase;
      background: transparent !important; /* Fix for gray background bug */
    }

    & .details__description {
      font-size: var(--size-step-0);
      color: var(--color-text-muted);
      line-height: 1.8; /* Breathable typography */
      max-width: 16rem;
      margin-inline: auto;
      background: transparent !important;
    }

    /* Special style for Code card Matrix effect */
    & .details__item--code {
      & .details__description {
        transition: opacity 0.3s ease;

        &[data-matrix="true"] {
          font-family: var(--font-mono);
          font-variant-numeric: tabular-nums;
          font-kerning: none;
          color: var(--color-accent);
          opacity: 0.8;
        }
      }
    }

    /* New dynamic element styles */
    & .details__dynamic-value {
      font-weight: 700;
      color: var(--color-accent);
      font-variant-numeric: tabular-nums;
    }

    & .details__climber {
      filter: drop-shadow(0 0 4px var(--color-accent));
    }

    & .pulse-animate {
      stroke-dasharray: 20, 2;
      animation: pulse-flow 2s linear infinite;
    }

    @keyframes pulse-flow {
      0% { stroke-dashoffset: 22; }
      100% { stroke-dashoffset: 0; }
    }

    /* Responsive adjustments */
    @media (max-width: 768px) {
      padding-inline: var(--space-m);
      padding-block: var(--space-xl);

      & .details__grid {
        grid-template-columns: 1fr;
        gap: var(--space-l);
      }

      & .details__item {
        padding: var(--space-xl) var(--space-m);
        border-radius: 2rem 3rem 2rem 3rem;
      }

      & .details__description {
        max-width: 100%;
      }
    }
  }

  /* Dark mode specifics */
  @media (prefers-color-scheme: dark) {
    .details .details__item {
      background: rgba(15, 23, 42, 0.3);
      border: 1px solid rgba(255, 255, 255, 0.05);

      &:hover,
      &.is-active {
        background: rgba(15, 23, 42, 0.5);
      }
    }
  }
}