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


@layer components {
  .cta {
    padding-block: var(--space-3xl);
    background: #000;

    & .cta__terminal {
      background: #050505;
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: var(--radius-m);
      overflow: hidden;
      max-width: 900px;
      margin-inline: auto;
      box-shadow: 0 40px 100px rgba(0, 0, 0, 0.8);
    }

    & .terminal__header {
      background: #111;
      padding: 12px 20px;
      display: flex;
      align-items: center;
      gap: 8px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    }

    & .dot {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.1);
    }

    & .terminal__title {
      font-family: var(--font-mono);
      font-size: 12px;
      color: #666;
      margin-left: 10px;
    }

    & .terminal__body {
      padding: var(--space-3xl) var(--space-xl);
      text-align: center;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: var(--space-xl);
    }

    & .cta__title {
      font-size: clamp(var(--size-step-2), 5vw, var(--size-step-5));
      color: var(--color-text-main);
      font-weight: 700;
      letter-spacing: -0.03em;
      line-height: 1.1;
    }

    & .cta__text {
      font-size: var(--size-step-1);
      color: var(--color-text-muted);
      max-width: 50ch;
      line-height: 1.6;
    }

    & .cta__contacts {
      display: flex;
      gap: var(--space-s);
      margin-top: var(--space-l);
      flex-wrap: wrap;
      justify-content: center;

      @media (max-width: 640px) {
        flex-direction: column;
        align-items: stretch;
      }
    }

    & .cta__contact-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: var(--space-xs);
      padding: var(--space-l) var(--space-2xl);
      border: 1px solid rgba(255, 255, 255, 0.08);
      border-radius: var(--radius-m);
      background: rgba(255, 255, 255, 0.03);
      text-decoration: none;
      transition: border-color 200ms cubic-bezier(0.4, 0, 0.2, 1),
                  background 200ms cubic-bezier(0.4, 0, 0.2, 1),
                  box-shadow 200ms cubic-bezier(0.4, 0, 0.2, 1);
      min-width: 220px;

      &:hover {
        border-color: rgba(0, 112, 243, 0.45);
        background: rgba(0, 112, 243, 0.06);
        box-shadow: 0 0 24px color-mix(in srgb, var(--color-accent-blue) 15%, transparent);
      }

      @media (max-width: 640px) {
        flex-direction: row;
        padding: var(--space-m) var(--space-l);
        min-width: 0;
        gap: var(--space-m);
        align-items: center;
      }
    }

    & .cta__contact-icon {
      color: var(--color-accent-blue);
      display: flex;
      align-items: center;
      justify-content: center;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background: rgba(0, 112, 243, 0.1);
      flex-shrink: 0;
    }

    & .cta__contact-label {
      font-family: var(--font-mono);
      font-size: var(--size-step--2);
      text-transform: uppercase;
      letter-spacing: 0.15em;
      color: var(--color-accent-blue);
      font-weight: 700;

      @media (max-width: 640px) {
        display: none;
      }
    }

    & .cta__contact-value {
      font-family: var(--font-mono);
      font-size: var(--size-step-0);
      color: var(--color-text-main);
      font-weight: 600;
      letter-spacing: 0.02em;

      @media (max-width: 640px) {
        font-size: var(--size-step--1);
      }
    }
  }
}