/* Testimonials variant: letters (template/blocks/testimonials/letters.twig) — readers' letters on lined paper, slightly turned.
   Paper — --et-paper / --et-paper-text (a light sheet that stays light in the dark theme; fallback — surface / text), lines — the accent. */
[data-section="testimonials"][data-variant="letters"] .et-letters__list { display: grid; grid-template-columns: repeat(var(--et-cols, 3), minmax(0, 1fr)); gap: var(--et-grid-gap, 1.375rem); margin: 0; padding: 0.5rem 0.25rem 1rem; list-style: none; }
[data-section="testimonials"][data-variant="letters"] .et-letters__item { min-width: 0; }
[data-section="testimonials"][data-variant="letters"] .et-letters__note {
  --et-letter-line: color-mix(in oklab, var(--et-accent) 16%, transparent);
  height: 100%;
  margin: 0;
  padding: 1.75rem 1.625rem 1.5rem;
  border-radius: var(--et-radius-xs, 6px);
  background: repeating-linear-gradient(transparent 0 calc(2rem - 1px), var(--et-letter-line) calc(2rem - 1px) 2rem) 0 1.25rem / 100% calc(100% - 2.5rem) no-repeat, var(--et-paper, var(--et-surface));
  color: var(--et-paper-text, var(--et-text));
  box-shadow: 0 18px 30px -24px rgb(var(--et-shadow-rgb) / 0.7);
  rotate: -1deg;
}
[data-section="testimonials"][data-variant="letters"] .et-letters__item:nth-child(3n + 2) .et-letters__note { rotate: 1.2deg; }
[data-section="testimonials"][data-variant="letters"] .et-letters__item:nth-child(3n) .et-letters__note { rotate: -0.6deg; }
[data-section="testimonials"][data-variant="letters"] .et-letters__quote { margin: 0; padding: 0; border: 0; font: italic 500 var(--et-text-base)/2rem var(--et-font); color: inherit; }
[data-section="testimonials"][data-variant="letters"] .et-letters__who { margin-top: 0.75rem; font-size: var(--et-text-sm); color: var(--et-paper-accent, var(--et-accent-text, var(--et-accent))); }
[data-section="testimonials"][data-variant="letters"] .et-letters__who b { font-weight: 800; }
[data-section="testimonials"][data-variant="letters"] .et-letters__who a { color: inherit; }
/* turned notes and long words never widen the page */
[data-section="testimonials"][data-variant="letters"] { overflow-x: clip; }
[data-section="testimonials"][data-variant="letters"] .et-letters__quote { overflow-wrap: break-word; }
/* columns from the editor (.et-section--cols / --cols-m): the list rule above outweighs the generic .et-section__grid one */
@media (max-width: 767.98px) {
  [data-section="testimonials"][data-variant="letters"].et-section--cols-m .et-letters__list { grid-template-columns: repeat(var(--et-cols-mobile), minmax(0, 1fr)); }
}
@media (min-width: 768px) and (max-width: 991.98px) {
  [data-section="testimonials"][data-variant="letters"].et-section--cols .et-letters__list { grid-template-columns: repeat(var(--et-cols-tablet), minmax(0, 1fr)); }
}
@media (max-width: 991.98px) {
  [data-section="testimonials"][data-variant="letters"]:not(.et-section--cols-m) .et-letters__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 575.98px) {
  [data-section="testimonials"][data-variant="letters"]:not(.et-section--cols-m) .et-letters__list { grid-template-columns: minmax(0, 1fr); }
  [data-section="testimonials"][data-variant="letters"] .et-letters__note { rotate: 0deg !important; }
}