/* /clients/ testimonials — card grid + full-quote modal (design: Client Quotes.dc.html).
   Replaces the horizontal rail with a wrapping grid (no right-side cutoff). */

.tq-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
  gap: 28px;
}

.tq-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 36px;
  color: #fff;
  background: #111D3B;
  border: 1px solid rgba(255, 255, 255, .13);
  box-shadow: 8px 8px 0 var(--shadow, #35D0EE);
  cursor: pointer;
  transition: transform .18s, box-shadow .18s;
}
.tq-card:hover { transform: translate(-2px, -3px); box-shadow: 10px 11px 0 var(--shadow, #35D0EE); }
.tq-card:focus-visible {
  transform: translate(-2px, -3px);
  box-shadow: 10px 11px 0 var(--shadow, #35D0EE);
  outline: 2px solid var(--cyan);
  outline-offset: 4px;
}
.tq-card__logo {
  width: auto; height: 42px; max-width: 180px;
  object-fit: contain; object-position: left center;
  filter: brightness(0) invert(1);
}
.tq-card__pull {
  margin: 34px 0 36px;
  font-family: 'Playfair Display', serif;
  font-style: italic; font-weight: 600;
  font-size: 30px; line-height: 1.34; letter-spacing: -.01em;
  text-wrap: pretty;
}
.tq-card__foot {
  display: flex; align-items: center; gap: 14px;
  margin-top: auto; padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, .13);
}
.tq-card__avatar { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; }
.tq-card__who { min-width: 0; }
.tq-card__name { display: block; font-size: 16.5px; font-weight: 600; letter-spacing: -.01em; }
.tq-card__role { display: block; margin-top: 3px; color: #C8D2DD; font-size: 14px; line-height: 1.4; }
.tq-card__read {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; margin-left: auto; padding-left: 16px;
  color: #7BE9FF; font-size: 12.5px; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; white-space: nowrap;
}

/* ---------- full-quote modal ---------- */
.tq-dialog {
  width: min(780px, calc(100% - 32px));
  max-height: min(86vh, 860px);
  padding: 0; border: 0; background: transparent; color: #fff; overflow: visible;
}
.tq-dialog::backdrop { background: rgba(3, 7, 13, .86); backdrop-filter: blur(8px); }
.tq-dialog__panel {
  display: flex; flex-direction: column;
  max-height: min(86vh, 860px);
  background: #0D1B2E; border: 1px solid rgba(255, 255, 255, .16);
  box-shadow: 12px 12px 0 #F45FC0;
}
.tq-dialog__head {
  display: flex; align-items: center; gap: 20px; flex: 0 0 auto;
  padding: 24px 30px; border-bottom: 1px solid rgba(255, 255, 255, .13);
}
.tq-dialog__logo {
  width: auto; height: 38px; max-width: 180px;
  object-fit: contain; object-position: left center; filter: brightness(0) invert(1);
}
.tq-dialog__close, .tq-dialog__navbtn {
  display: grid; place-items: center; width: 44px; height: 44px; flex: 0 0 auto;
  padding: 0; color: #fff; cursor: pointer; transition: background .15s, color .15s;
}
.tq-dialog__close { margin-left: auto; border: 1px solid rgba(255, 255, 255, .3); border-radius: 50%; background: #0A1018; }
.tq-dialog__close:hover, .tq-dialog__close:focus-visible { background: #35D0EE; color: #0A1018; outline: none; }
.tq-dialog__close .material-symbols-rounded,
.tq-dialog__navbtn .material-symbols-rounded { font-size: 20px; }
.tq-dialog__body { flex: 1 1 auto; overflow-y: auto; padding: 34px 30px 32px; }
.tq-dialog__pull {
  max-width: 32ch; margin: 0 0 26px; color: #fff;
  font-family: 'Playfair Display', serif; font-style: italic; font-weight: 600;
  font-size: clamp(24px, 2.6vw, 31px); line-height: 1.3; letter-spacing: -.015em; text-wrap: pretty;
}
.tq-dialog__quote { max-width: 66ch; margin: 0; color: #E4EBF2; font-size: 18px; line-height: 1.8; text-wrap: pretty; }
.tq-dialog__foot {
  display: flex; align-items: center; gap: 14px; flex: 0 0 auto;
  padding: 22px 30px; background: #0A1018; border-top: 1px solid rgba(255, 255, 255, .13);
}
.tq-dialog__avatar { width: 54px; height: 54px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; }
.tq-dialog__name { display: block; font-size: 17px; font-weight: 600; letter-spacing: -.01em; }
.tq-dialog__role { display: block; margin-top: 3px; color: #C8D2DD; font-size: 14px; line-height: 1.45; }
.tq-dialog__nav { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.tq-dialog__navbtn { border: 1px solid rgba(255, 255, 255, .25); background: #0D1B2E; }
.tq-dialog__navbtn:hover, .tq-dialog__navbtn:focus-visible { background: #35D0EE; color: #0A1018; outline: none; }

body.modal-open { overflow: hidden; }

@media (max-width: 600px) {
  .tq-grid { grid-template-columns: 1fr; gap: 22px; }
  .tq-card { padding: 28px; }
  .tq-card__pull { font-size: 24px; margin: 26px 0 28px; }
  .tq-card__read { display: none; }
  .tq-dialog__head, .tq-dialog__body, .tq-dialog__foot { padding-left: 22px; padding-right: 22px; }
  .tq-dialog__quote { font-size: 16px; line-height: 1.7; }
}