/* ---- Homepage quotes: 4-line clamp ---- */
.quote-clamp {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;   /* browser adds the "…" on line 4 */
  line-clamp: 4;
  overflow: hidden;
}

.quote-more {
  display: inline-block;
  margin-top: .5rem;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: .9em;
  color: var(--teal, #2f6f6a);   /* swap for the site's teal token */
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.quote-more:hover { text-decoration-thickness: 2px; }
.quote-more:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.quote-more[hidden] { display: none; }

/* ---- Modal ---- */
.quote-dialog {
  padding: 0;
  border: 0;
  border-radius: 6px;
  width: min(640px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  background: var(--paper, #faf8f3);   /* swap for the site's paper token */
  color: inherit;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .35);
}
.quote-dialog::backdrop { background: rgba(0, 0, 0, .6); }

.quote-dialog-inner {
  position: relative;
  padding: 56px 32px 32px;
}

.quote-dialog-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  cursor: pointer;
}
.quote-dialog-close:hover { background: rgba(0, 0, 0, .08); }
.quote-dialog-close:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

/* Neutralize carousel card sizing the cloned testimonial brings along */
.quote-dialog-body > .t-card { width: auto; max-width: none; height: auto; margin: 0; flex: none; }

/* Stop the page scrolling behind the open modal */
html:has(.quote-dialog[open]) { overflow: hidden; }

@media (max-width: 480px) {
  .quote-dialog-inner { padding: 52px 20px 24px; }
}