@use "@naomi-2025/ui-core/site-config";
@use "@naomi-2025/ui-core/animate-underline";
@use "@naomi-2025/ui-core/animators";
@use "@naomi-2025/ui-core/cta-secondary";
@use "@naomi-2025/ui-core/mq";
@use "@naomi-2025/ui-core/text-styles";
@use "s360-scss-toolkit";

.node--story {
  &.node--full {
    display: grid;
    column-gap: site-config.$column-gap;
    row-gap: site-config.spacer(4);
    grid-template-areas:
      "n-head"
      "n-cont";

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

    @media (width > mq.$mq-1024) {
      grid-template-areas:
        ". . n-head n-head n-head n-head n-head n-head n-head n-head . ."
        ". . n-cont n-cont n-cont n-cont n-cont n-cont n-cont n-cont . .";
    }

    .node__header {
      grid-area: n-head;

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

    .node__metadata,
    .node__dates {
      display: flex;
      flex-wrap: wrap;
      gap: site-config.spacer(0);
      align-items: center;
    }

    .node__dates {
      column-gap: site-config.spacer(-4);
    }

    .node__story-type {
      @extend %text-style-small-copy;

      color: var(--color-2);
      display: inline-block;
      background-color: var(--highlight-color-2);
      padding: 0.5em;
    }

    .node__subtitle {
      @extend %text-style-intro-copy;
    }

    .node__by-line {
      a {
        @extend %animate-underline-to-right;
      }
    }

    .node__content {
      grid-area: n-cont;
      display: grid;
      // column-gap: site-config.$column-gap;
      row-gap: site-config.spacer(4);
    }

    .node__topics {
      display: flex;
      flex-wrap: wrap;
      gap: site-config.spacer(-5);
      grid-column: 1 / -1;
      align-content: start;

      a {
        --cta-secondary--padding: 0.4em;
        @extend %text-style-small-copy;
        @extend %cta-secondary;
      }
    }

    .node__sections,
    .node__view-stories-related-by-topic {
      grid-column: 1 / -1;
    }

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

    .node__topics,
    .node__view-stories-related-by-topic {
      @extend %fadein-slideup-animator;
    }
  }
}
