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

.view--content-stories {
  &.view--block-all-filterable {
    --view--row--margin-top: 0;

    display: grid;
    column-gap: site-config.$column-gap;
    row-gap: site-config.spacer(0);
    grid-template-areas:
      "v-head"
      "v-filt"
      "v-cont";

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

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

    .view__header {
      grid-area: v-head;
    }

    .view__content {
      grid-area: v-cont;
    }

    .view__filters {
      grid-area: v-filt;
    }
  }

  &.view--attachment-featured {
    .view__rows {
      display: grid;
      column-gap: site-config.$column-gap;
      row-gap: site-config.spacer(0);

      @media (width > mq.$mq-768) {
        grid-template-columns: 1fr 1fr;
      }
    }

    .view__row {
      --node-teaser--bg-color: var(--bg-color);
      --node-teaser--color: var(--color);
      --node-teaser--color-2: var(--color-2);
      --node-teaser--highlight-color-2: var(--highlight-color-2);

      &:nth-child(1) {
        [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-pinata);
        }
      }

      &:nth-child(2) {
        [data-site-mode="at-work"] & {
          @include maps.map-to-css-vars(maps.$color-scheme-santa-monica);
        }

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

  &.view--embed-recent-by-person,
  &.view--embed-related-by-topic,
  &.view--block-recent {
    --view-grid--row-gap: #{ site-config.spacer(1) };

    border-top: 1px solid var(--highlight-color);
    padding-top: site-config.spacer(3);

    .view__header-content {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: site-config.spacer(1);

      // Drupal class.
      .more-link {
        a {
          @extend %cta-with-arrow;
        }
      }
    }

    .view__row {
      border-top: 1px solid var(--highlight-color-2);
      padding-top: site-config.spacer(1);

      a {
        --heading--color: var(--a--color);
        @extend %text-style-h4;
        @extend %animate-underline-in-to-right;
      }
    }
  }
}
