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

.node--person {
  &.node--full {
    display: grid;
    column-gap: site-config.$column-gap;
    row-gap: site-config.spacer(2);
    grid-template-columns: 1fr;
    grid-template-areas:
      "n-head"
      "n-cont";

    .node__header {
      grid-area: n-head;

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

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

    .node__content {
      display: grid;
      grid-template-columns: 1fr;
      grid-area: n-cont;
      container-type: inline-size;

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

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

      overflow: hidden;
      max-height: 100vh;
      grid-column: 1 / -1;

      [data-site-mode="at-play"] & {
        border-radius: border-radius.top-left--bottom-right();
        overflow: hidden;
      }
    }

    .node__headshot {
      --img--width: 100%;

      border-radius: border-radius.circle();
      overflow: hidden;
      align-self: start;
    }

    .node__name {
      @extend %text-style-h3;
    }

    .node__job-title {
      @extend %text-style-h4;
    }

    .node__social-links {
      display: flex;
      column-gap: site-config.spacer(0);

      a {
        &:hover,
        &:focus-visible {
          opacity: 0.7;
        }
      }
    }

    .node__meet-the-team-cta {
      a {
        @extend %cta-with-arrow;
      }
    }

    .node__info-card {
      background-color: var(--bg-color);
      container-type: inline-size;
      padding-inline: site-config.$column-gap;
      margin-inline: calc(#{ site-config.$column-gap } * -1);
      padding-block: site-config.spacer(3);
      display: grid;
      row-gap: site-config.spacer(0);
      column-gap: site-config.$column-gap;
      overflow: hidden;

      [data-site-mode="at-work"] & {
        @include maps.map-to-css-vars(maps.$color-scheme-newport);
      }

      [data-site-mode="at-play"] & {
        @include maps.map-to-css-vars(maps.$color-scheme-sunset);

        border-radius: border-radius.top-right--bottom-left();
      }

      @container (width > 400px) {
        grid-template-columns: 1fr 2fr;
      }
    }

    .node__info-card-content {
      display: grid;
      row-gap: site-config.spacer(0);
    }

    .node__email {
      margin-top: site-config.spacer(0);

      a {
        @extend %cta-secondary;
      }
    }

    .node__view-stories-recent-by-person {
      margin-top: site-config.spacer(4);
      grid-column: 1 / -1;
    }

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

    .node__summary,
    .node__content > *:not(.node__info-card) {
      @extend %fadein-slideup-animator;
    }

    .node__info-card > *:not(.node__info-card-content, .node__headshot),
    .node__info-card-content > * {
      @extend %fadein-slideleft-animator;
    }

    .node__headshot {
      @extend %fadein-slideright-animator;
    }

    // **************************************************
    // MEDIA QUERIES

    @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 n-cont n-cont";

      .node__bio,
      .node__info-card {
        grid-column: 2 / -2;
      }

      .node__content {
        grid-template-columns: repeat(12, 1fr);
      }
    }

    @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 n-cont n-cont n-cont n-cont";

      .node__bio,
      .node__info-card {
        grid-column: 3 / -3;
      }

      .node__page-image {
        grid-column: 2 / -2;
      }
    }
  }
}
