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

.node-teaser--story {
  &.node-teaser--featured {
    background-color: var(--node-teaser--bg-color);
    color: var(--node-teaser--color, var(--color));
    padding: site-config.spacer(0);
    height: 100%;

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

    .node-teaser__heading {
      @extend %text-style-h3;

      a {
        @extend %animate-underline-in-to-right;
      }
    }

    .node-teaser__metadata {
      display: flex;
      flex-wrap: wrap;
      gap: site-config.spacer(0);
      align-items: center;
    }

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

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