/* depoimentos: composição editorial em 3 escalas. Sem card: fio fino e espaço. */

.depoimentos { position: relative; z-index: 2; padding-block: var(--respiro); }
.depoimentos__moldura { padding-inline: var(--margem); }
.depoimentos__topo .apoio { margin-top: .75rem; }

.depoimentos__mural {
  display: grid;
  gap: 2.25rem;
  margin-top: 2.5rem;
}

.aval { padding-top: 1.5rem; border-top: 1px solid var(--fio); }
.aval__texto { max-width: 62ch; color: var(--grafite); }
.aval--g .aval__texto {
  font-family: var(--serif);
  font-size: clamp(1.5rem, 6.4vw, 2rem);
  line-height: 1.28;
  color: var(--navy);
  max-width: 40ch;
}
.aval--m .aval__texto { font-size: 1.1875rem; line-height: 1.55; }
.aval--p .aval__texto { font-size: 1.0625rem; line-height: 1.55; }

.aval__autor {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-top: 1rem;
}
.aval__monograma {
  flex: none;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--navy);
  color: var(--branco);
  font-size: .875rem;
  font-weight: 800;
  letter-spacing: .04em;
}
.aval__nome { font-weight: 800; color: var(--navy); line-height: 1.3; }

@media (min-width: 1024px) {
  .depoimentos__moldura {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gutter);
  }
  .depoimentos__topo {
    grid-column: 1 / span 4;
    position: sticky;
    top: calc(var(--header-altura) + 3rem);
    align-self: start;
  }
  .depoimentos__topo .titulo { font-size: clamp(2.25rem, 3.6vw, calc(3.625rem + var(--folga) * .03)); }

  .depoimentos__mural {
    grid-column: 5 / -1;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: clamp(2.5rem, 4.5vw, 4rem) var(--gutter);
    margin-top: 0;
  }

  .aval--g { grid-column: 1 / -1; padding-top: 0; border-top: 0; }
  .aval--g .aval__texto { font-size: clamp(1.75rem, 2.7vw, calc(2.625rem + var(--folga) * .016)); line-height: 1.26; }

  .aval--n2 { grid-column: 1 / span 5; }
  .aval--n3 { grid-column: 1 / span 5; }
  .aval--n4 { grid-column: 6 / -1; grid-row: 2 / span 2; align-self: start; margin-top: 5rem; }
  .aval--n8 { grid-column: 1 / span 3; grid-row: 4; }
  .aval--n5 { grid-column: 4 / span 5; grid-row: 4; }
  .aval--n6 { grid-column: 1 / span 3; grid-row: 5; }
  .aval--n7 { grid-column: 4 / span 5; grid-row: 5; }

  .aval--m .aval__texto { font-size: calc(1.25rem + var(--folga) * .0047); }
  .aval--p .aval__texto { font-size: calc(1.125rem + var(--folga) * .0035); }
}

/* A marca enche o vão sob o título fixo, tom sobre tom e cortada pela borda */
@media (min-width: 1280px) {
  .depoimentos__topo::after {
    content: "";
    display: block;
    width: calc(100% + var(--margem));
    height: min(52vh, 34vw);
    margin: clamp(2rem, 5vh, 4rem) 0 0 calc(var(--margem) * -1);
    background: var(--marca-nitida) no-repeat -6vw 0 / auto 100%;
    opacity: .14;
    pointer-events: none;
  }
}