@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 {
    font-family: var(--ff-base);
    font-size: var(--fs-200);
    font-weight: var(--fw-regular);
    background-color: var(--clr-bg-default);
    color: var(--clr-txt-primary);
  }
}

@layer layout {

  /* CONTAINER */
  .container {
    --max-width: 69.375rem;
    --container-padding: var(--space-600);

    inline-size: min(100% - var(--container-padding), var(--max-width));
    margin-inline: auto;
  }
}

@layer components {


  /* HEADER */
  .header {
    --padding-block: var(--space-300);

    padding-block: var(--padding-block);
    background-color: var(--clr-bg-default);
    z-index: 20;

    position: relative;
  }

  .header__inner {
    --stack-direction: row;

    justify-content: space-between;
    align-items: center;
  }

  /* HERO */
  .hero {
    --padding-end: var(--space-700);

    padding-block-end: var(--padding-end);
    overflow-x: clip;
  }

  .hero__inner {
    --gap: var(--space-600);
    --media-row: 17.5rem;
    --columns: 1fr;

    display: grid;
    grid-template-columns: var(--columns);
    grid-template-rows: var(--media-row) 1fr;
    justify-items: center;
    gap: var(--gap);
  }

  .hero__media {
    grid-row: 1/2;
    align-self: end;

    position: relative;
  }

  .hero__media::before {
    content: '';
    position: absolute;
    inset-block: 0;
    inset-inline-start: 50%;
    inset-inline-end: 50%;

    margin-left: -50vw;
    margin-right: -50vw;
    background: url('./../assets/images/backgrounds/intro-mobile.svg') no-repeat;
    background-size: cover;
    background-position: center bottom;
    pointer-events: none;
    z-index: -1;
  }

  .hero__content {
    --stack-gap: var(--space-300);

    align-items: center;
    text-align: center;

    h1 {
      font-size: var(--fs-700);
      font-weight: var(--fw-light);
      letter-spacing: -0.0187em;
      line-height: 1.2;
    }

    p {
      --padding-inline: var(--space-100);

      padding-inline: var(--padding-inline);
      font-size: var(--fs-400);
      letter-spacing: -0.014em;
      line-height: 1.55;
      color: var(--clr-txt-secondary);
    }
  }

  .cta {
    --padding-block: var(--space-100);
    --padding-inline: var(--space-400);

    inline-size: max-content;
    padding: var(--padding-block) var(--padding-inline);
    font-size: var(--fs-100);
    font-weight: var(--fw-bold);
    color: var(--clr-txt-inverse);
    background: var(--gradient-cta);
    border-radius: 3em;
    line-height: 2;

    position: relative;
    isolation: isolate;

    &::before {
      content: '';
      position: absolute;
      inset: 0;
      background-color: color-mix(in srgb, var(--clr-bg-default) 40%, transparent);
      border-radius: inherit;
      opacity: 0;
      transition: opacity var(--transition-fast);
      pointer-events: none;
    }
  }

  .header__cta {
    display: none;
  }

  /* FEATURES */
  .features {
    --padding-block: var(--space-800);

    padding-block: var(--padding-block);
    background-color: var(--clr-bg-muted);
  }

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

  .features__overview {
    --stack-gap: var(--space-200);
    --padding-inline: var(--space-0);

    padding-inline: var(--padding-inline);
    text-align: center;

    h2 {
      font-size: var(--fs-600);
      font-weight: var(--fw-light);
      letter-spacing: -0.0547em;
      line-height: 1.2;
    }

    p {
      font-size: var(--fs-400);
      letter-spacing: -0.014em;
      line-height: 1.55;
      color: var(--clr-txt-secondary);
    }
  }

  .features__list {
    --columns: 1fr;
    --gap: var(--space-400);

    display: grid;
    grid-template-columns: var(--columns);
    gap: var(--gap);
  }

  .feature {
    --stack-gap: var(--space-500);

    text-align: center;

    svg {
      inline-size: 4.5rem;
      block-size: 4.5rem;
      margin-inline: auto;
    }
  }

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

    h3 {
      font-size: var(--fs-500);
      font-weight: var(--fw-light);
      letter-spacing: -0.017em;
      line-height: 1.15;
    }

    p {
      font-size: var(--fs-300);
      letter-spacing: -0.018em;
      line-height: 1.86;
      color: var(--clr-txt-secondary);
    }
  }

  /* ARTICLES */
  .articles {
    --padding-block: var(--space-800);

    padding-block: var(--padding-block);
    background-color: var(--clr-bg-subtle);
    text-align: center;
  }

  .articles__inner {
    --stack-gap: var(--space-600);

    h2 {
      font-size: var(--fs-600);
      font-weight: var(--fw-light);
      letter-spacing: -0.0547em;
      line-height: 1.2;
    }
  }

  .articles__list {
    --columns: 1fr;
    --gap: var(--space-200);

    display: grid;
    grid-template-columns: var(--columns);
    justify-items: center;
    gap: var(--gap);
  }

  .article {
    background-color: var(--clr-bg-default);
    border-radius: 0.3125rem;
    overflow: hidden;

    img {
      inline-size: 100%;
      block-size: 12.5rem;
      object-fit: cover;
    }
  }

  .article__content {
    --padding-block: var(--space-300);
    --padding-inline: var(--space-400);
    --stack-gap: var(--space-200);

    padding: var(--padding-block) var(--padding-inline);
    text-align: left;

    p {
      font-size: var(--fs-50);
      line-height: 1.15;
      color: var(--clr-txt-secondary);
    }
  }

  .article__text {
    --stack-gap: var(--space-100);

    h3 {
      font-size: var(--fs-200);
      font-weight: var(--fw-light);
      letter-spacing: -0.0157em;
      line-height: 1.2;

      a {
        display: inline-block;
      }
    }

    p {
      font-size: var(--fs-100);
      line-height: 1.15;
      color: var(--clr-txt-secondary);
    }
  }

  /* FOOTER */
  .footer {
    --padding-block: var(--space-700);

    padding-block: var(--padding-block);
    text-align: center;
    background-color: var(--clr-bg-inverse);
    color: var(--clr-txt-inverse);
  }

  .footer__inner {
    --stack-gap: var(--space-200);
  }

  .footer__main {
    --columns: 1fr;
    --gap: var(--space-400);

    display: grid;
    grid-template-columns: var(--columns);
    gap: var(--gap);
  }

  .footer__branding {
    --stack-gap: var(--space-400);

    align-items: center;
  }

  .social-nav__list {
    --stack-direction: row;
    --stack-gap: var(--space-200);
  }

  .social-nav__link {
    display: grid;
    place-items: center;
    border-radius: 50%;
    transition: color var(--transition-fast);

    svg {
      inline-size: 1.25rem;
      block-size: 1.25rem;
    }
  }

  .footer-nav {
    font-size: var(--fs-100);
    line-height: 1.15;
  }

  .footer-nav__list {
    --columns: 1fr;
    --gap: var(--space-200);

    display: grid;
    grid-template-columns: var(--columns);
    gap: var(--gap);
  }

  .footer-nav__link {
    transition: color var(--transition-fast);
  }

  .footer__actions {
    --stack-gap: var(--space-300);
    align-items: center;

    p {
      font-size: var(--fs-100);
      line-height: 1.15;
      color: color-mix(in srgb, var(--clr-txt-inverse) 60%, transparent);
    }
  }

  .attribution__link {
    margin-inline: .3em;
    transition: color var(--transition-fast);

    position: relative;

    &::after {
      content: '';
      position: absolute;
      inset-block-end: -0.18rem;
      inset-inline-start: 0;
      inline-size: 100%;
      block-size: 0.12rem;
      background-color: currentColor;
      transform: scaleX(1);
      transform-origin: center;
      transition: transform var(--transition-fast);
      pointer-events: none;
    }
  }

  /* MENU OVERLAY */
  .overlay {
    position: fixed;
    inset: 0;
    background: var(--gradient-overlay);
    z-index: 10;
  }

  .overlay[data-state="closed"] {
    pointer-events: none;
    opacity: 0;
  }

  .overlay[data-state="open"] {
    pointer-events: auto;
    opacity: 1;
  }

  /* MAIN MENU */
  .primary-nav {
    --max-width: 37.9375rem;
    --container-padding: var(--space-600);
    --padding-block: var(--space-400);
    --inline-position: 50%;
    --top-position: calc(var(--space-1000) + var(--space-100));

    inline-size: min(100% - var(--container-padding), var(--max-width));
    padding-block: var(--padding-block);
    background-color: var(--clr-bg-default);
    border-radius: 0.25rem;
    z-index: 30;
  }

  .primary-nav[data-state="closed"] {
    display: none;
  }

  .primary-nav[data-state="open"] {
    position: fixed;
    inset-block-start: var(--top-position);
    inset-inline-start: var(--inline-position);
    translate: -50% 0;
  }

  .primary-nav__list {
    --stack-direction: column;
    --stack-gap: var(--space-200);

    align-items: center;
    font-size: var(--fs-450);
  }

  .primary-nav__link {
    transition: color var(--transition-fast);
  }

  /* BRAND */
  .brand {
    --max-width: 9.625rem;
    max-inline-size: var(--max-width);
  }

  .brand--light {
    --max-width: 9.5625rem;
  }

  /* TOGGLE MENU */
  .toggle-menu {
    inline-size: 2rem;
    block-size: 2rem;
    display: grid;
    place-items: center;
    background-color: transparent;
    border-radius: 50%;

    svg {
      block-size: 100%;
    }
  }
}

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

@layer responsive {

  @media (width >=42rem) {
    .container {
      --container-padding: calc(var(--space-1500) + var(--space-500));
    }

    .hero {
      --padding-end: var(--space-900);
    }

    .hero__inner {
      --media-row: 516px;
    }

    .hero__media::before {
      background-image: url('./../assets/images/backgrounds/intro-desktop.svg');
    }

    .hero__content {
      max-inline-size: 27.9375rem;
    }

    .features {
      --padding-block: var(--space-1000);
    }

    .features__inner {
      --stack-gap: var(--space-900);
    }

    .features__overview {
      --stack-gap: var(--space-400);
      --padding-inline: var(--space-400);
    }

    .features__list {
      --columns: repeat(2, 1fr);
      --gap: var(--space-800) var(--space-700);
    }

    .feature {
      text-align: left;

      svg {
        margin-inline: unset;
      }
    }

    .articles__list {
      --columns: repeat(2, 1fr);
    }
  }

  @media (width >=75rem) {

    .header {
      --padding-block: var(--space-200);
    }

    .header__cta {
      display: inline-flex;
    }

    .toggle-menu {
      display: none;
    }

    .primary-nav {
      --max-width: none;
      --padding-block: var(--space-0);

      display: block;
      position: static;
      background-color: transparent;
      border-radius: 0;
      translate: none;
    }

    .primary-nav__list {
      --stack-direction: row;
      --stack-gap: var(--space-400);

      justify-content: center;
      font-size: var(--fs-100);
      line-height: 1.15;
      color: var(--clr-txt-secondary);
    }

    .primary-nav__link {
      position: relative;

      &::before {
        content: '';
        position: absolute;
        inset-inline-start: 0;
        inset-block-end: -1.5rem;
        inline-size: 100%;
        block-size: 4px;
        background: var(--gradient-cta);
        opacity: 0;
        transform: scaleX(0);
        transform-origin: center;
        transition: transform var(--transition-fast), opacity var(--transition-fast);
      }
    }

    .hero {
      --padding-end: var(--space-0);
      block-size: 41rem;
    }

    .hero__inner {
      --columns: 27.9375rem 1fr;
      --gap: var(--space-400);
      grid-template-rows: 41rem;
    }

    .hero__media {
      block-size: 100%;
      grid-column: 2/-1;


      img {
        max-inline-size: none;
        translate: 10rem -10rem;
      }

      &::before {
        inset-inline: 0;
        inline-size: 77.0625rem;

        margin-inline: 0;
        background-position: left bottom -5rem;
      }
    }

    .hero__content {
      align-items: start;
      justify-content: center;
      text-align: left;
    }

    .features {
      --padding-block: calc(var(--space-600) * 2);
    }

    .features__overview {
      --padding-inline: var(--space-0);
      max-inline-size: 39.6875rem;
      text-align: left;
    }

    .features__list {
      --columns: repeat(4, 1fr);
      --gap: var(--space-400);
    }

    .articles {
      --padding-block: var(--space-1000);
      text-align: left;
    }

    .articles__inner {
      --stack-gap: var(--space-700);
    }

    .articles__list {
      --columns: repeat(4, 1fr);
      --gap: var(--space-400);
    }

    .article__content {
      --padding-inline: calc(var(--space-700) / 3);
    }

    .footer {
      --padding-block: var(--space-600);
      text-align: left;
    }

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

    .footer__main {
      --columns: 10.25rem 22rem 1fr;
      --gap: var(--space-1500);
    }

    .footer-nav__list {
      --columns: repeat(2, 1fr);
      --gap: var(--space-300) var(--space-400);
    }

    .footer__actions {
      justify-self: end;
      align-self: start;

      a {
        margin-left: auto;
      }

      p {
        text-align: right;
      }
    }

    .attribution {
      text-align: center;
    }
  }
}

@layer states {

  :focus-visible {
    outline-color: var(--clr-accent);
  }

  .cta:is(:hover, :focus-visible)::before {
    opacity: 1;
  }

  .primary-nav__link:is(:hover, :focus-visible) {
    color: var(--clr-txt-primary);
  }

  .primary-nav__link:is(:hover, :focus-visible)::before {
    opacity: 1;
    transform: scaleX(1);
  }

  .article a:is(:hover, :focus-visible) {
    color: var(--clr-accent);
  }

  .social-nav__link:is(:hover, :focus-visible) {
    color: var(--clr-accent);
  }

  .footer-nav__link:is(:hover, :focus-visible) {
    color: var(--clr-accent);
  }

  .attribution__link:is(:hover, :focus-visible) {
    color: var(--clr-accent);
  }

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