/*
 * 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 About component */
@layer components {
  .about {
    position: relative;
    padding-block: var(--space-2xl);
    padding-inline: var(--space-l);
    overflow: hidden;
    background-color: var(--color-surface);
    min-height: 80vh;
    display: flex;
    align-items: center;

    & .about__container {
      max-width: 1400px;
      margin-inline: auto;
      position: relative;
      z-index: 2;
      width: 100%;
    }

    & .about__grid {
      display: grid;
      grid-template-columns: repeat(12, 1fr);
      gap: var(--space-xl);
      align-items: center;
    }

    & .about__image-container {
      grid-column: 1 / span 6;
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    & .about__image-wrapper {
      position: relative;
      z-index: 2;
      width: 80%;
      aspect-ratio: 4/5;
      overflow: hidden;
      border-radius: 2rem;
      box-shadow: 0 30px 60px rgba(0, 0, 0, 0.12);
      transform: rotate(-2deg);
      transition: transform 0.8s var(--ease-zen);

      &:hover {
        transform: rotate(0deg) scale(1.02);
      }
    }

    & .about__image {
      width: 100%;
      height: 100%;
      object-fit: cover;
      filter: grayscale(30%) contrast(1.1);
    }

    & .about__image-deco {
      position: absolute;
      top: -10%;
      right: -5%;
      width: 70%;
      height: 70%;
      background: linear-gradient(135deg, var(--color-accent), transparent);
      opacity: 0.15;
      z-index: 1;
      border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
      filter: blur(40px);
      pointer-events: none;
      transition: transform 0.1s linear;
    }

    & .about__content {
      grid-column: 8 / span 5;
      display: flex;
      flex-direction: column;
      gap: var(--space-m);
    }

    & .about__title {
      font-size: var(--size-step-3);
      font-weight: 800;
      line-height: 1.1;
      color: var(--color-text);
      margin: 0;
      position: relative;

      &::before {
        content: "";
        position: absolute;
        left: -40px;
        top: 0.5em;
        width: 30px;
        height: 2px;
        background-color: var(--color-accent);
      }
    }

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

    /* Topography background */
    & .about__background {
      position: absolute;
      inset: 0;
      z-index: 1;
      opacity: 0.15;
      pointer-events: none;
      transition: transform 0.2s cubic-bezier(0.1, 0, 0.3, 1);

      & svg {
        width: 100%;
        height: 100%;
        color: var(--color-text);
        stroke-dasharray: 5;
        opacity: 0.5;
      }
    }
  }

  /* Dark mode */
  @media (prefers-color-scheme: dark) {
    .about .about__image-wrapper {
      box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5);
    }

    .about .about__image-deco {
      opacity: 0.25;
    }
  }

  /* Responsive */
  @media (max-width: 1024px) {
    .about .about__grid {
      grid-template-columns: 1fr;
      gap: var(--space-2xl);
    }

    .about .about__image-container {
      grid-column: 1;
      order: 2;
    }

    .about .about__content {
      grid-column: 1;
      order: 1;
      text-align: center;
      align-items: center;

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