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

.testimonial {
  color: var(--color);
  display: grid;
  column-gap: site-config.$column-gap;
  row-gap: site-config.spacer(0);
  grid-template-areas:
    "p-clt"
    "p-body"
    "p-attrib"
    "p-cta";

  @container (width > #{ mq.$mq-768 }) {
    grid-template-columns: repeat(12, 1fr);
    grid-template-areas:
      "p-clt  p-clt  p-clt  p-clt  p-clt  p-clt  p-clt  p-clt  p-clt  p-clt    p-clt    p-clt"
      "p-body p-body p-body p-body p-body p-body p-body p-body p-body p-attrib p-attrib p-attrib"
      "p-cta  p-cta  p-cta  p-cta  p-cta  p-cta  p-cta  p-cta  p-cta  .        .        .";
  }

  @container (width > #{ mq.$mq-1024 }) {
    grid-template-areas:
      "p-clt p-clt p-body p-body p-body p-body p-body p-body p-body p-attrib p-attrib p-attrib"
      ".     .     p-cta  p-cta  p-cta  p-cta  p-cta  p-cta  p-cta  .        .        .";
  }

  &__client {
    grid-area: p-clt;
  }

  &__body {
    grid-area: p-body;
  }

  &__cta {
    grid-area: p-cta;
  }

  &__attribution-group {
    @extend %text-style-label;

    grid-area: p-attrib;
  }

  &__attribution-name {
    margin-top: site-config.spacer(-4);
  }

  &__body {
    @extend %text-style-intro-copy;

    text-indent: 4ch;
  }

  &__cta {
    a {
      @extend %cta-with-arrow;
    }
  }
}
