@use "@naomi-2025/ui-core/site-config";
@use "@naomi-2025/ui-core/text-styles";
@use "@naomi-2025/ui-core/cta-primary";
@use "s360-scss-toolkit";

.node-teaser--project {
  &.node-teaser--horizontal {
    position: relative;

    a {
      --a--color: var(--color);
      --a--color--active: var(--color);

      display: grid;
      grid-template-columns: repeat(12, 1fr);
      column-gap: site-config.$column-gap;

      &::before,
      &::after {
        content: '';
        position: absolute;
        inset: 0;
        pointer-events: none;
        transition: all 200ms ease-in-out;
      }

      &::after {
        border-radius: var(--node-teaser--border-radius);
        opacity: 0.8;
        overflow: hidden;
        background-color: var(--node-teaser--bg-color, var(--bg-color));
      }

      &::before {
        opacity: 0;
        background-color: var(--node-teaser--accent-bg-color);
      }

      &:hover,
      &:focus-visible {
        &::before,
        &::after {
          opacity: 1;
        }

        .node-teaser__summary,
        .node-teaser__cta {
          margin-top: 1em;
          opacity: 1;
          transform: translateY(0);
          max-height: 500px;
        }

        .node-teaser__cta {
          @extend %cta-primary;
        }
      }
    }

    .node-teaser__header {
      grid-column: 2 / -2;
      grid-row: 1 / -1;
      align-self: center;
      z-index: 1;
    }

    .node-teaser__heading {
      @extend %text-style-h2;

      text-indent: 2ch;
      position: relative;
    }

    .node-teaser__summary,
    .node-teaser__cta {
      transform: translateY(1em);
      transition:
        all 200ms ease-in-out,
        max-height 300ms ease-in-out;
      opacity: 0;
      max-height: 0;
      overflow: hidden;
    }

    .node-teaser__cta {
      display: inline-block;
    }

    .node-teaser__content {
      --img--width: 100%;

      grid-column: 1 / -1;
      grid-row: 1 / -1;
    }
  }
}
