/* clients.html */

/* Category tabs — segmented pill control */
.cl-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: .35rem;
  margin: 0 auto var(--sp-7); padding: .4rem; width: fit-content; max-width: 100%;
  background: var(--c-bg-50); border: 1px solid var(--c-line); border-radius: var(--r-pill); }
.cl-tab { font-family: var(--font-head); font-weight: 600; font-size: var(--fs-sm); white-space: nowrap;
  padding: .6rem 1.25rem; border-radius: var(--r-pill); color: var(--c-ink-600); cursor: pointer;
  transition: color var(--dur) var(--ease), background var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.cl-tab:hover { color: var(--c-navy-900); }
.cl-tab.is-active { color: #fff; box-shadow: var(--shadow-sm);
  background: linear-gradient(150deg, #0A1252 0%, #14237A 100%); }
@media (max-width: 560px) { .cl-tabs { border-radius: var(--r-lg); } .cl-tab { flex: 1 1 auto; text-align: center; } }

.cl-client-group[hidden] { display: none; }

/* All client cards white (no navy checkerboard fill) */
.client-grid li { background: var(--c-bg-0) !important; border: 2px solid var(--c-line) !important;
  color: var(--c-accent-600) !important; }

/* Client logo + name inside each cell — full-width white tile */
.cl-logo { width: 100%; height: 90px; object-fit: contain; display: block;
  background: #fff; padding: 14px 18px; border-radius: var(--r-sm); box-shadow: var(--shadow-xs); }
.cl-name { font-size: var(--fs-sm); }
.client-grid li { padding: var(--sp-4); }

/* Category-wise client groups */
.cl-client-group + .cl-client-group { margin-top: var(--sp-7); }
.cl-group-title { font-family: var(--font-head); font-weight: 600; font-size: var(--fs-h4);
  color: var(--c-heading); margin-bottom: var(--sp-4); display: flex; align-items: center; gap: var(--sp-4); }
.cl-group-title::before { content: ""; width: 24px; height: 3px; border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--c-accent-500), var(--c-accent-400)); flex: none; }
.cl-group-title::after { content: ""; flex: 1; height: 1px; background: var(--c-line); }

/* Testimonial wall — checkerboard (filled / outlined) matching the client logo wall */
.cl-testimonials { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); }
@media (max-width: 980px) { .cl-testimonials { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .cl-testimonials { grid-template-columns: 1fr; } }

.cl-testi { display: flex; flex-direction: column; height: 100%; border-radius: var(--r-lg);
  padding: var(--sp-6); transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  /* default = OUTLINED: white fill, brand-blue border */
  background: var(--c-bg-0); border: 2px solid var(--c-accent-600); box-shadow: var(--shadow-xs); }
.cl-testi:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.cl-testi__icon { width: 28px; height: 28px; color: var(--c-accent-500); margin-bottom: var(--sp-3); }
.cl-testi__text { font-family: var(--font-body); font-size: var(--fs-base); line-height: 1.65; color: var(--c-ink-700); }
.cl-testi__cite { display: flex; align-items: center; gap: var(--sp-3); margin-top: auto;
  padding-top: var(--sp-4); border-top: 1px solid var(--c-line); }
.cl-testi__text + .cl-testi__cite { margin-top: var(--sp-5); }
.cl-testi__avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex: none;
  background: var(--c-bg-100); }
.cl-testi__name { font-family: var(--font-head); font-weight: 600; font-size: var(--fs-sm); color: var(--c-heading); }
.cl-testi__role { font-size: var(--fs-sm); color: var(--c-ink-400); }

/* FILLED variant: every odd card → navy gradient + light text (checkerboard on 3 cols) */
.cl-testi:nth-child(odd) { border-color: transparent; box-shadow: var(--shadow-sm);
  background: linear-gradient(150deg, #081042 0%, #0C1A5E 100%); }
.cl-testi:nth-child(odd) .cl-testi__icon { color: var(--c-accent-300); }
.cl-testi:nth-child(odd) .cl-testi__text { color: #D8DDFF; }
.cl-testi:nth-child(odd) .cl-testi__name { color: #fff; }
.cl-testi:nth-child(odd) .cl-testi__role { color: var(--c-on-dark-mute); }
.cl-testi:nth-child(odd) .cl-testi__cite { border-top-color: rgba(255,255,255,.16); }
.cl-testi:nth-child(odd) .cl-testi__avatar { background: rgba(255,255,255,.12); }

.cl-mega-h3-mt { margin-top: 1rem; }
.cl-footer-btn-mt { margin-top: 1rem; }
.cl-footer-bar { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; width: 100%; }