@use "@naomi-2025/ui-core/site-config";
@use "@naomi-2025/ui-core/animators";
@use "@naomi-2025/ui-core/content-containers";
@use "@naomi-2025/ui-core/cta-with-arrow";
@use "@naomi-2025/ui-core/cta-secondary";
@use "@naomi-2025/ui-core/mq";
@use "@naomi-2025/ui-core/heading-styles";
@use "@naomi-2025/ui-core/text-styles";
@use "s360-scss-toolkit";

.node--project {
  &.node--full {
    .node__heading-content {
      display: grid;
      column-gap: site-config.$column-gap;
      row-gap: site-config.spacer(0);

      grid-template-areas:
        "nh-label"
        "nh-heading";

      @media (width > mq.$mq-768) {
        grid-template-columns: repeat(12, 1fr);
        grid-template-areas: "nh-label nh-label nh-label nh-heading nh-heading nh-heading nh-heading nh-heading nh-heading nh-heading nh-heading nh-heading";
      }
    }

    .node__label {
      @extend %text-style-label;

      grid-area: nh-label;
    }

    .node__header {
      margin-bottom: site-config.spacer(5);
    }

    .node__heading {
      grid-area: nh-heading;
      text-indent: 2ch;
    }

    .node__image {
      --img--width: 100%;
      --img--height: 100%;
      --img--object-fit: cover;
      --figure--height: 100%;

      overflow: hidden;
      max-height: 100vh;
    }

    .node__content {
      display: grid;
      column-gap: site-config.$column-gap;
      row-gap: site-config.spacer(10);
      grid-template-areas:
        "nc-proj-d"
        "nc-tldr-g";

      @media (width > mq.$mq-768) {
        grid-template-columns: repeat(12, 1fr);
        grid-template-areas: "nc-tldr-g nc-tldr-g nc-tldr-g nc-tldr-g nc-tldr-g nc-tldr-g nc-tldr-g nc-tldr-g . nc-proj-d nc-proj-d nc-proj-d";
      }
    }

    .node__project-details {
      grid-area: nc-proj-d;

      > * + * {
        margin-top: site-config.spacer(1);
      }
    }

    .node__project-link {
      a {
        @extend %cta-with-arrow;
      }
    }

    .node__tldr-group {
      grid-area: nc-tldr-g;
    }

    .node__tldr-statistic {
      margin-top: site-config.spacer(1);
    }

    .node__sac-link {
      margin-top: site-config.spacer(4);

      a {
        @extend %cta-secondary;
      }
    }

    .node__sections {
      grid-column: 1 / -1;
    }

    .node__awards {
      margin-top: site-config.spacer(2);

      h2 {
        --heading--margin-bottom: 0.25em;
        @extend %heading-style-h4;
      }
    }

    // **************************************************
    // ANIMATORS

    .node__project-details > *,
    .node__tldr-group > * {
      @extend %fadein-slideup-animator;
    }
  }
}
