@import "tailwindcss/theme";
@import "../variables/theme.css";
@import "../components/eventCard.css";
@import "../patterns/carousel.css";

.landing {
  @apply relative;
}

.landing-container {
  @apply grid h-screen grid-cols-4;

  max-height: 720px;

  @variant md {
    @apply grid-cols-8;

    max-height: 800px;
  }

  @variant lg {
    @apply grid-cols-12;
  }

  &:last-child {
    @apply h-fit;

    max-height: none;

    @variant md {
      max-height: none;
    }

    @variant lg {
      @apply absolute bottom-0;

      padding-right: var(--container-margin-lg);
    }
  }
}

.landing-contentContainer {
  @apply relative col-span-4 flex items-center;

  @variant md {
    @apply col-span-8;
  }

  @variant lg {
    @apply col-span-12;
  }
}

.landing-visual {
  @apply pointer-events-none absolute h-full;

  z-index: -1;
  width: calc(100% + var(--container-margin) * 2);
  margin-left: calc(var(--container-margin) * -1);

  @variant md {
    width: calc(100% + var(--container-margin-md) * 2);
    margin-left: calc(var(--container-margin-md) * -1);
  }

  @variant lg {
    width: calc(100% + var(--container-margin-lg) * 2);
    margin-left: calc(var(--container-margin-lg) * -1);
  }
}

.landing-content {
  @apply grid w-full text-white;

  gap: var(--spacing-sm-xs);

  @variant md {
    gap: var(--spacing-md-xs);
  }

  @variant lg {
    @apply w-auto;

    gap: var(--spacing-lg-xs);
  }
}

.landing-action {
  @apply flex flex-wrap justify-between;

  gap: var(--spacing-8);

  @variant md {
    @apply justify-start;

    gap: var(--spacing-16);
  }

  > * {
    flex: 1 1 160px;
    min-width: auto;

    @variant md {
      @apply flex-none;

      min-width: 160px;
    }
  }

  > *:last-child {
    --color-button-text: var(--color-white);
    --icon-color: var(--color-white);

    background: transparent;
    box-shadow: inset 0 0 0 1px var(--color-white);
  }
}

.landing-eventContainer {
  @apply relative col-span-4 flex items-center;

  padding-block: var(--spacing-sm-md);

  @variant md {
    @apply col-span-8;

    padding-block: var(--spacing-md-md);
  }

  @variant lg {
    @apply col-span-6 col-start-7 items-end;

    padding-block: var(--spacing-sm-md);
  }
}

.landing-carousel {
  @apply w-full;

  &:has(.carousel-control--enabled) .carousel-controlContainer {
    @apply flex;

    @variant lg {
      @apply hidden;
    }
  }
}

/* stylelint-disable plugin/selector-bem-pattern */

.landing .carousel-list {
  gap: var(--spacing-16);
  width: fit-content;
  padding-inline: var(--container-margin);

  @variant md {
    gap: var(--spacing-16);
    padding-inline: var(--container-margin-md);
  }

  @variant lg {
    gap: var(--spacing-16);
    padding-inline: 0;
  }
}

.landing .carousel-list > * {
  @apply snap-end;

  flex: 1 1 50%;
  min-width: 285px;
  padding: 2px;

  &:last-child {
    @apply snap-start;
  }
}

.landing .eventCard {
  &:has(> *:not(a)),
  & > *:is(a) {
    @variant lg {
      @apply bg-black/60 text-neutral-100;

      box-shadow: 0 0 0 1px --alpha(var(--color-neutral-300) / 40%);
    }
  }

  .eventCard-type {
    @variant lg {
      @apply text-neutral-100;
    }
  }

  .eventCard-dateIcon {
    @variant lg {
      --icon-color: var(--color-neutral-100);
    }
  }

  .eventCard-locationIcon {
    @variant lg {
      --icon-color: var(--color-neutral-100);
    }
  }
}