@layer reset, fonts, tokens, base, layout, components, utilities, responsive, states;

@import url('./reset.css') layer(reset);
@import url('./fonts.css') layer(fonts);
@import url('./tokens.css') layer(tokens);

@layer base {
  body {
    padding-block: var(--space-300);
    font-family: var(--ff-base);
    font-size: var(--fs-200);
    font-weight: var(--fw-medium);
    background-color: var(--color-surface-default);
    color: var(--color-text-body);
  }
}


@layer layout {
  .container {
    margin-inline: auto;
    inline-size: 21.4375rem;
  }

  /* HEADER */
  .header__inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  /* HERO */
  .hero {
    margin-block-start: var(--space-500);
    overflow-x: clip;
  }

  .hero__inner {
    display: grid;
    grid-template-columns: 1fr;
    justify-items: center;
    gap: var(--space-800);
  }

  .hero__content {
    --stack-space: var(--space-400);
    max-inline-size: 40ch;
  }

  .hero__text {
    --stack-space: var(--space-300);
  }

  /* FEATURES */
  .features {
    margin-block-start: var(--space-300);
    overflow-x: clip;
  }

  .features__overview {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-800);
  }

  .features__content {
    --stack-space: var(--space-300);
  }

  .features__list {
    padding-block: var(--space-800);
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-500);
  }

  .feature {
    --stack-space: var(--space-400);
  }

  .feature__content {
    --stack-space: var(--space-250);
  }

  /* FOOTER */
  .footer__inner {
    --stack-space: var(--space-200);
    align-items: center;
  }

  /* BUTTONS */
  .hero__actions {
    --cluster-space: var(--space-300);
  }

  /* ILLUSTRATIONS */
  .features__illustrations {
    --cluster-space: var(--space-300);
    inline-size: 23.3125rem;
    transform: translateX(calc(-1 * var(--space-400)));
  }
}


@layer components {

  /* BUTTONS */
  .btn {
    font-size: var(--fs-200);
    font-weight: var(--fw-bold);
    text-transform: uppercase;
    border-radius: var(--radius-100);
    transition: background-color var(--transition-fast), color var(--transition-fast);
  }

  .btn--primary {
    padding: 1em 1.5em;
    background-color: var(--color-surface-accent);
    color: var(--color-text-inverse);
    text-shadow: 0 0 1px var(--color-text-heading);
  }

  .btn--secondary {
    padding: .75em 1em;
    background-color: var(--color-surface-muted);
    color: var(--color-text-heading);
  }

  /* ILLUSTRATION */
  .hero__illustration {
    inline-size: 23.25rem;
    border-radius: var(--radius-250);
    overflow: hidden;
  }

  .features__image {
    border-radius: var(--radius-250);
    overflow: hidden;
  }

  .features__image--accent {
    background-color: var(--color-surface-accent);

    img {
      mix-blend-mode: multiply;
    }
  }

  .feature__icon {
    inline-size: 4.0625rem;
    block-size: 4.0625rem;
    display: grid;
    place-items: center;
    border-radius: var(--radius-200);
    background-color: var(--color-surface-accent);
  }

  /* TYPOGRAPHY */
  .hero__title {
    font-size: var(--fs-600);
    font-weight: var(--fw-black);
    text-transform: uppercase;
    color: var(--color-text-heading);
    line-height: 1;
  }

  .hero__description {
    font-size: var(--fs-300);
    line-height: 1.6;
  }

  .features__title {
    max-inline-size: 10ch;
    font-size: var(--fs-500);
    font-weight: var(--fw-black);
    text-transform: uppercase;
    color: var(--color-text-heading);
    line-height: 1.1;
  }

  .features__description {
    max-inline-size: 38ch;
  }

  .feature__title {
    inline-size: 15ch;
    font-size: var(--fs-400);
    font-weight: var(--fw-black);
    text-transform: uppercase;
    text-wrap: balance;
    color: var(--color-text-heading);
    line-height: 1.15;
  }

  .attribution {
    font-size: var(--fs-100);
  }

  .attribution__link {
    position: relative;
    margin-inline: .3em;
    text-decoration: none;
    color: var(--color-text-heading);
    border-radius: var(--radius-025);

    &::after {
      content: '';
      position: absolute;
      right: 0;
      bottom: -0.125rem;
      inline-size: 100%;
      block-size: 0.125rem;
      inline-size: 100%;
      background-color: currentColor;
      transition: inline-size var(--transition-fast);
      pointer-events: none;
    }
  }

  .text-meta {
    font-weight: var(--fw-bold);
    font-size: var(--fs-200);
    text-transform: uppercase;
  }

  .text-body {
    font-size: var(--fs-200);
    font-weight: var(--fw-medium);
    line-height: 1.6;
  }
}


@layer utilities {
  .stack {
    display: flex;
    flex-direction: column;
    gap: var(--stack-space, 1rem);
  }

  .cluster {
    display: flex;
    align-items: center;
    gap: var(--cluster-space, 1rem);
  }
}

@layer responsive {
  @media (width >=48rem) {

    /* BASE */
    body {
      padding-block: var(--space-500);
    }

    /* LAYOUT */
    .container {
      inline-size: 44rem;
    }

    .hero {
      margin-block-start: var(--space-600);
    }

    .hero__inner {
      grid-template-columns: auto 1fr;
      gap: var(--space-600);
      justify-items: start;
    }

    .hero__content {
      --stack-space: var(--space-500);
      align-self: center;
    }

    .hero__text {
      --stack-space: var(--space-400);
    }

    .features {
      margin-block-start: var(--space-500);
    }

    .features__overview {
      gap: var(--space-500);
    }

    .features__illustrations {
      inline-size: 43.0625rem;
    }

    .features__content {
      --stack-space: var(--space-0);
      flex-direction: row;
      justify-content: space-between;
    }

    .features__list {
      padding-block: var(--space-1000);
      grid-template-columns: repeat(2, 1fr);
      gap: var(--space-400);
    }

    .feature {
      --stack-space: var(--space-600);
    }

    .feature__content {
      --stack-space: var(--space-300);
    }

    /* BUTTONS */
    .btn--secondary {
      padding: 1em 1.5em;
    }

    /* ILLUSTRATIONS */
    .hero__illustration {
      inline-size: 29.875rem;
      justify-self: end;
    }

    .features__illustrations {
      inline-size: 100%;
      gap: var(--space-400);
      transform: unset;
    }

    /* TYPOGRAPHY */
    .features__description {
      max-inline-size: 44ch;
    }
  }

  @media (width >=75rem) {

    /* BASE */
    body {
      padding-block-end: var(--space-0);
    }

    /* LAYOUT */
    .container {
      inline-size: 69.375rem;
    }

    .hero {
      margin-block-start: var(--space-1000);

    }

    .hero__inner {
      position: relative;
      gap: var(--space-0);

      &::after {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        inline-size: 15.9375rem;
        block-size: 15rem;
        background: url('./../assets/images/patterns/pattern-square.svg') no-repeat center / contain;
        transform: translateX(calc(100% + var(--space-400)));
        pointer-events: none;
      }
    }

    .hero__content {
      max-inline-size: 50ch;
    }

    .hero__text {
      --stack-space: var(--space-300);
    }

    .features__overview {
      position: relative;
      grid-template-columns: 1fr auto;
      gap: var(--space-0);

      &::before {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        inline-size: 15.9375rem;
        block-size: 15rem;
        background: url('./../assets/images/patterns/pattern-square.svg') no-repeat center / contain;
        transform: translateX(calc(-100% - var(--space-400)));
        pointer-events: none;
      }
    }

    .features__content {
      --stack-space: var(--space-250);

      flex-direction: column;
      justify-content: start;
      justify-self: end;
      align-self: center;
    }

    .features__illustrations {
      inline-size: 45.625rem;
    }

    .features__list {
      padding-block: calc(3 * var(--space-500));
      grid-template-columns: repeat(4, 1fr);
    }

    .footer {
      padding-block-end: var(--space-400);
    }

    /* BUTTONS */
    .hero__actions {
      --cluster-space: var(--space-500);
    }

    /* ILLUSTRATION */
    .hero__illustration {
      inline-size: 33.75rem;
    }

    /* TYPOGRAPHY */
    .features__description {
      max-inline-size: 28ch;
    }
  }
}

@layer states {
  .btn--primary:hover {
    background-color: var(--color-surface-accent-hover);
  }

  .btn--secondary:hover {
    background-color: var(--color-surface-muted-hover);
    color: var(--color-text-inverse);
  }

  .btn--primary:focus-visible {
    outline-color: var(--color-focus-ring-accent);
  }

  :where(.btn--secondary, .attribution__link):focus-visible {
    outline-color: var(--color-focus-ring-default);
  }

  .attribution__link:is(:hover, :focus-visible)::after {
    inline-size: 0;
  }
}