@use "sass:map";
@use "@naomi-2025/ui-core/site-config";
@use "@naomi-2025/ui-core/border-radius";
@use "@naomi-2025/ui-core/maps";
@use "@naomi-2025/ui-core/text-styles";
@use "s360-scss-toolkit";

.view--content-people {
  &.view--block-all {
    --view-grid--column-gap: 0;
    --view-grid--row-gap: 0;

    .view__row {
      background-color: var(--bg-color--active);
      transition: all 250ms ease-in-out;

      &:nth-child(12n+1),
      &:nth-child(12n+8) {
        --border-radius: #{ border-radius.top-arch() };
      }

      &:nth-child(12n+3),
      &:nth-child(12n+10) {
        --border-radius: #{ border-radius.bottom-arch() };
      }

      &:nth-child(12n+4),
      &:nth-child(12n+9) {
        --border-radius: #{ border-radius.circle() };
      }

      &:nth-child(12n+5),
      &:nth-child(12n+11) {
        --border-radius: #{ border-radius.left-arch() };
      }

      &:nth-child(12n+6),
      &:nth-child(12n+12) {
        --border-radius: #{ border-radius.right-arch() };
      }

      // **************************************************
      // Color Schemes

      &:nth-child(12n+1) {
        [data-site-mode="at-work"] & {
          --bg-color: #{ map.get(maps.$color-scheme-bubblegum, 'bg-color') };
          --bg-color--active: #{ map.get(maps.$color-scheme-newport, 'bg-color') };
          --color--active: #{ map.get(maps.$color-scheme-newport, 'color') };
          --border-color--active: #{ map.get(maps.$site-mode-at-work, 'highlight-color') };
        }

        [data-site-mode="at-play"] & {
          --bg-color: #{ map.get(maps.$color-scheme-south-beach, 'bg-color') };
          --bg-color--active: #{ map.get(maps.$color-scheme-sunset, 'bg-color') };
          --color--active: #{ map.get(maps.$color-scheme-sunset, 'color') };
          --border-color--active: #{ map.get(maps.$color-scheme-sunset, 'highlight-color') };
        }
      }

      &:nth-child(12n+2),
      &:nth-child(12n+7) {
        --bg-color: transparent;

        [data-site-mode="at-work"] & {
          --bg-color--active: #{ map.get(maps.$color-scheme-iceland, 'bg-color') };
          --color--active: #{ map.get(maps.$color-scheme-iceland, 'color') };
          --border-color--active: #{ map.get(maps.$color-scheme-iceland, 'highlight-color') };
        }

        [data-site-mode="at-play"] & {
          --bg-color--active: #{ map.get(maps.$site-mode-at-play, 'bg-color') };
          --color--active: #{ map.get(maps.$site-mode-at-play, 'color') };
          --border-color--active: #{ map.get(maps.$site-mode-at-play, 'highlight-color') };
        }
      }

      &:nth-child(12n+3),
      &:nth-child(12n+6) {
        --bg-color: transparent;

        [data-site-mode="at-work"] & {
          --bg-color--active: #{ map.get(maps.$site-mode-at-work, 'bg-color') };
          --color--active: #{ map.get(maps.$site-mode-at-work, 'color') };
          --border-color--active: #{ map.get(maps.$site-mode-at-work, 'highlight-color') };
        }

        [data-site-mode="at-play"] & {
          --bg-color--active: #{ map.get(maps.$color-scheme-oxblood, 'bg-color') };
          --color--active: #{ map.get(maps.$color-scheme-oxblood, 'color') };
          --border-color--active: #{ map.get(maps.$site-mode-at-play, 'highlight-color') };
        }
      }

      &:nth-child(12n+4) {
        [data-site-mode="at-work"] & {
          --bg-color: #{ map.get(maps.$color-scheme-pinata, 'bg-color') };
          --bg-color--active: #{ map.get(maps.$color-scheme-santa-monica, 'bg-color') };
          --color--active: #{ map.get(maps.$color-scheme-santa-monica, 'color') };
          --border-color--active: #{ map.get(maps.$site-mode-at-work, 'highlight-color') };
        }

        [data-site-mode="at-play"] & {
          --bg-color: #{ map.get(maps.$color-scheme-newport, 'bg-color') };
          --bg-color--active: #{ map.get(maps.$color-scheme-pinata, 'bg-color') };
          --color--active: #{ map.get(maps.$color-scheme-pinata, 'color') };
          --border-color--active: #{ map.get(maps.$color-scheme-pinata, 'highlight-color') };
        }
      }

      &:nth-child(12n+5) {
        [data-site-mode="at-work"] & {
          --bg-color: #{ map.get(maps.$site-mode-at-play, 'bg-color') };
          --bg-color--active: #{ map.get(maps.$color-scheme-south-beach, 'bg-color') };
          --color--active: #{ map.get(maps.$color-scheme-south-beach, 'color') };
          --border-color--active: #{ map.get(maps.$color-scheme-south-beach, 'highlight-color') };
        }

        [data-site-mode="at-play"] & {
          --bg-color: #{ map.get(maps.$site-mode-at-work, 'bg-color') };
          --bg-color--active: #{ map.get(maps.$color-scheme-bubblegum, 'bg-color') };
          --color--active: #{ map.get(maps.$color-scheme-bubblegum, 'color') };
          --border-color--active: #{ map.get(maps.$color-scheme-bubblegum, 'highlight-color') };
        }
      }

      &:nth-child(12n+8) {
        [data-site-mode="at-work"] & {
          --bg-color: #{ map.get(maps.$color-scheme-sunset, 'bg-color') };
          --bg-color--active: #{ map.get(maps.$color-scheme-newport, 'bg-color') };
          --color--active: #{ map.get(maps.$color-scheme-newport, 'color') };
          --border-color--active: #{ map.get(maps.$site-mode-at-work, 'highlight-color') };
        }

        [data-site-mode="at-play"] & {
          --bg-color: #{ map.get(maps.$color-scheme-santa-monica, 'bg-color') };
          --bg-color--active: #{ map.get(maps.$color-scheme-sunset, 'bg-color') };
          --color--active: #{ map.get(maps.$color-scheme-sunset, 'color') };
          --border-color--active: #{ map.get(maps.$color-scheme-sunset, 'highlight-color') };
        }
      }

      &:nth-child(12n+9) {
        [data-site-mode="at-work"] & {
          --bg-color: #{ map.get(maps.$color-scheme-bubblegum, 'bg-color') };
          --bg-color--active: #{ map.get(maps.$color-scheme-santa-monica, 'bg-color') };
          --color--active: #{ map.get(maps.$color-scheme-santa-monica, 'color') };
          --border-color--active: #{ map.get(maps.$site-mode-at-work, 'highlight-color') };
        }

        [data-site-mode="at-play"] & {
          --bg-color: #{ map.get(maps.$color-scheme-south-beach, 'bg-color') };
          --bg-color--active: #{ map.get(maps.$color-scheme-pinata, 'bg-color') };
          --color--active: #{ map.get(maps.$color-scheme-pinata, 'color') };
          --border-color--active: #{ map.get(maps.$color-scheme-pinata, 'highlight-color') };
        }
      }

      &:nth-child(12n+10) {
        --bg-color: transparent;

        [data-site-mode="at-work"] & {
          --bg-color--active: #{ map.get(maps.$color-scheme-south-beach, 'bg-color') };
          --color--active: #{ map.get(maps.$color-scheme-south-beach, 'color') };
          --border-color--active: #{ map.get(maps.$color-scheme-south-beach, 'highlight-color') };
        }

        [data-site-mode="at-play"] & {
          --bg-color--active: #{ map.get(maps.$color-scheme-bubblegum, 'bg-color') };
          --color--active: #{ map.get(maps.$color-scheme-bubblegum, 'color') };
          --border-color--active: #{ map.get(maps.$color-scheme-bubblegum, 'highlight-color') };
        }
      }

      &:nth-child(12n+11) {
        [data-site-mode="at-work"] & {
          --bg-color: #{ map.get(maps.$color-scheme-pinata, 'bg-color') };
          --bg-color--active: #{ map.get(maps.$site-mode-at-work, 'bg-color') };
          --color--active: #{ map.get(maps.$site-mode-at-work, 'color') };
          --border-color--active: #{ map.get(maps.$site-mode-at-work, 'highlight-color') };
        }

        [data-site-mode="at-play"] & {
          --bg-color: #{ map.get(maps.$color-scheme-newport, 'bg-color') };
          --bg-color--active: #{ map.get(maps.$color-scheme-oxblood, 'bg-color') };
          --color--active: #{ map.get(maps.$color-scheme-oxblood, 'color') };
          --border-color--active: #{ map.get(maps.$site-mode-at-play, 'highlight-color') };
        }
      }

      &:nth-child(12n+12) {
        --bg-color: transparent;

        [data-site-mode="at-work"] & {
          --bg-color--active: #{ map.get(maps.$color-scheme-newport, 'bg-color') };
          --color--active: #{ map.get(maps.$color-scheme-newport, 'color') };
          --border-color--active: #{ map.get(maps.$site-mode-at-work, 'highlight-color') };
        }

        [data-site-mode="at-play"] & {
          --bg-color--active: #{ map.get(maps.$color-scheme-sunset, 'bg-color') };
          --color--active: #{ map.get(maps.$color-scheme-sunset, 'color') };
          --border-color--active: #{ map.get(maps.$color-scheme-sunset, 'highlight-color') };
        }
      }
    }

    a {
      display: grid;
      row-gap: site-config.spacer(0);
      aspect-ratio: 1;
      grid-template-rows: 1fr max-content;

      &:hover,
      &:focus-visible {
        .view__content-group {
          opacity: 1;
        }
      }
    }

    .view__content-group {
      color: var(--color--active);
      transition: all 200ms ease-in-out;
      display: grid;
      align-content: center;
      overflow: hidden;

      @media (hover: hover) {
        opacity: 0;
        grid-column: 1/-1;
        grid-row: 1/-1;
        background-color: var(--bg-color--active);
      }
    }

    .view__headshot {
      width: 50%;

      @media (hover: hover) {
        background-color: var(--bg-color);
        grid-column: 1/-1;
        grid-row: 1/-1;
        width: 100%;
      }

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

        border-radius: var(--border-radius);
        overflow: hidden;
      }
    }

    .view__title {
      --heading--font-weight: var(--view--content-people--view-title--font-weight);
      --heading--line-height: 0.8;
      @extend %text-style-h2;

      text-transform: uppercase;
      border-bottom: 1px solid var(--border-color--active);
      overflow: hidden;
      height: calc(100% - #{ s360-scss-toolkit.rem(5) });
    }

    .view__job-title {
      @extend %text-style-label;

      margin-top: site-config.spacer(-2);
      max-width: 85%;
    }
  }
}
