/* ==========================================================================
   itt-clients.css — the "Client Stories" slider. Appears once on the home
   page and once again — reusing the exact same section, data and markup —
   on every solution and industry detail page (template-parts/parts/detail.php
   calls itt_render_section( 'testimonials', $id )).

   Scoped under .itt-cs so nothing collides with the hero slider's own
   .car-arrow / .dot / .dots in site.css. Built on site.css's own tokens
   (--primary-blue, --gray-*, --shadow-*, --font-heading).
   ========================================================================== */

/* half the section's usual top/bottom padding — this band sits between two
   other bands (or the CTA) so it does not need the full 6rem/3rem breathing
   room every other section gets. */
.itt-cs.section { padding: 3rem 0; }
@media (max-width: 767px) { .itt-cs.section { padding: 1.5rem 0; } }

.itt-cs { position: relative; overflow: hidden; }

/* soft brand-colour glows behind the section */
.itt-cs-orb { position: absolute; border-radius: 50%; filter: blur(74px); pointer-events: none; z-index: 0; }
.itt-cs-orb-1 { width: 340px; height: 340px; background: rgba(14, 165, 233, .16); top: -110px; right: -90px; }
.itt-cs-orb-2 { width: 300px; height: 300px; background: rgba(2, 6, 23, .07); bottom: -110px; left: -90px; }

.itt-cs-inner { position: relative; z-index: 1; }
.itt-cs-head { text-align: center; max-width: 46rem; margin: 0 auto clamp(1.5rem, 4vw, 2.25rem); }
.itt-cs-head .section-title { margin-bottom: .6rem; }
/* "Businesses That Trust IT Traders" must stay on one line at every width. */
.itt-cs-head .section-heading { white-space: nowrap; font-size: clamp(1.15rem, 5vw, 2.6rem); }
@media (max-width: 420px) { .itt-cs-head .section-heading { font-size: clamp(1rem, 6.2vw, 1.3rem); } }

/* ---------- track ---------- */
.itt-cs-car { position: relative; padding: 0 .25rem; }
.itt-cs-viewport { overflow: hidden; }
.itt-cs-track { display: flex; will-change: transform; transition: transform .75s cubic-bezier(.22, 1, .36, 1); }
.itt-cs-track.itt-cs-no-anim { transition: none; }
.itt-cs-slide { flex: 0 0 100%; padding: 0 .55rem; box-sizing: border-box; display: flex; }
.itt-cs-slide > * { width: 100%; }
@media (min-width: 560px) { .itt-cs-slide { flex-basis: 50%; } }
@media (min-width: 1024px) { .itt-cs-slide { flex-basis: 33.3334%; } }

/* ---------- card ---------- */
.itt-cs-card {
  position: relative; display: flex; flex-direction: column; width: 100%; height: 100%;
  padding: 1.75rem 1.6rem 1.5rem; border-radius: 22px; overflow: hidden;
  background: #fff; border: 1px solid var(--gray-200, #e5e7eb);
  box-shadow: var(--shadow-md);
  transition: transform .45s cubic-bezier(.22, 1, .36, 1), box-shadow .45s cubic-bezier(.22, 1, .36, 1), border-color .45s ease;
}
.itt-cs-card::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: linear-gradient(90deg, var(--primary-blue) 0%, var(--primary-blue-light) 100%);
  transform: scaleX(0); transform-origin: left; transition: transform .5s cubic-bezier(.22, 1, .36, 1);
}
.itt-cs-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: rgba(14, 165, 233, .3); }
.itt-cs-card:hover::before { transform: scaleX(1); }

.itt-cs-top { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.itt-cs-logo {
  display: grid; place-items: center; flex: none; width: 52px; height: 52px; border-radius: 14px;
  background: var(--gray-50, #f9fafb); border: 1px solid var(--gray-200, #e5e7eb); overflow: hidden;
  box-shadow: 0 6px 16px -10px rgba(2, 6, 23, .25);
}
.itt-cs-logo img { width: 100%; height: 100%; object-fit: contain; padding: 6px; }
.itt-cs-logo-fallback {
  font-family: var(--font-heading); font-weight: 800; font-size: .95rem; letter-spacing: .02em; color: #fff;
  background: linear-gradient(135deg, var(--primary-blue) 0, var(--primary-blue-dark) 100%);
}
.itt-cs-tag {
  display: inline-flex; align-items: center; font-size: .66rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  padding: .32rem .65rem; border-radius: 999px; background: rgba(14, 165, 233, .1); color: var(--primary-blue-dark);
  border: 1px solid rgba(14, 165, 233, .2); white-space: nowrap; max-width: 60%;
  overflow: hidden; text-overflow: ellipsis;
}

.itt-cs-quote {
  position: absolute; top: 1.1rem; right: 1.3rem; font-family: Georgia, serif; font-size: 3.4rem; line-height: .6;
  color: rgba(14, 165, 233, .1); pointer-events: none;
}
.itt-cs-stars { display: flex; gap: .2rem; margin-top: .9rem; color: #f59e0b; }
.itt-cs-stars svg { filter: drop-shadow(0 2px 4px rgba(245, 158, 11, .3)); }

.itt-cs-feedback { flex: 1; margin-top: .7rem; font-size: .96rem; line-height: 1.7; color: var(--gray-700, #374151); position: relative; z-index: 1; }

.itt-cs-foot { margin-top: 1.25rem; padding-top: 1.1rem; border-top: 1px solid var(--gray-100, #f3f4f6); display: flex; flex-direction: column; gap: .15rem; }
.itt-cs-company { font-family: var(--font-heading); font-weight: 800; font-size: .95rem; color: var(--gray-900, #111827); }
.itt-cs-person { font-size: .78rem; color: var(--gray-500, #6b7280); }

/* ---------- arrows + dots ---------- */
.itt-cs-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 5;
  width: 44px; height: 44px; border-radius: 999px; display: grid; place-items: center;
  background: #fff; color: var(--gray-700, #374151); border: 1px solid var(--gray-200, #e5e7eb);
  box-shadow: var(--shadow-md); transition: background .3s ease, color .3s ease, transform .3s ease, box-shadow .3s ease;
}
.itt-cs-arrow.prev { left: -14px; }
.itt-cs-arrow.next { right: -14px; }
.itt-cs-arrow:hover { background: var(--primary-blue); color: #fff; transform: translateY(-50%) scale(1.08); box-shadow: var(--shadow-lg); }
.itt-cs-arrow:focus-visible { outline: 2px solid var(--primary-blue); outline-offset: 2px; }

.itt-cs-dots { display: flex; align-items: center; justify-content: center; gap: .45rem; margin-top: clamp(1.1rem, 3vw, 1.6rem); }
.itt-cs-dots .itt-cs-dot {
  width: 8px; height: 8px; border-radius: 999px; border: 0; padding: 0; background: var(--gray-300, #d1d5db);
  transition: width .4s ease, background .3s ease;
}
.itt-cs-dots .itt-cs-dot:hover { background: var(--gray-400, #9ca3af); }
.itt-cs-dots .itt-cs-dot.active { width: 26px; background: var(--primary-blue); }

/* ---------- CTA row beneath the slider ---------- */
.itt-cs-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1rem; margin-top: clamp(1.75rem, 4vw, 2.5rem); }
.itt-cs-cta .btn { min-width: 0; }
/* .btn-consult (assets/css/itt-modal.css) is now a solid navy fill, legible
   on light and dark backgrounds alike — no local override needed here. */
@media (max-width: 639px) { .itt-cs-cta { margin-top: 1.4rem; gap: .75rem; } .itt-cs-cta .btn { flex: 1 1 auto; justify-content: center; } }

/* ---------- responsive ---------- */
@media (min-width: 640px) and (max-width: 1023px) {
  .itt-cs-arrow.prev { left: 0; }
  .itt-cs-arrow.next { right: 0; }
}
@media (max-width: 639px) {
  .itt-cs-car { padding: 0; }
  .itt-cs-arrow { width: 40px; height: 40px; box-shadow: var(--shadow-sm); }
  .itt-cs-arrow.prev { left: 2px; }
  .itt-cs-arrow.next { right: 2px; }
  .itt-cs-slide { padding: 0 .35rem; }
  .itt-cs-card { padding: 1.4rem 1.25rem 1.25rem; border-radius: 18px; }
  .itt-cs-logo { width: 44px; height: 44px; border-radius: 12px; }
  .itt-cs-tag { font-size: .62rem; padding: .28rem .55rem; }
  .itt-cs-quote { font-size: 2.6rem; top: .9rem; right: 1.05rem; }
  .itt-cs-feedback { font-size: .92rem; line-height: 1.65; }
  .itt-cs-foot { margin-top: 1rem; padding-top: .9rem; }
  .itt-cs-dots { margin-top: 1.1rem; }
}
@media (max-width: 400px) {
  .itt-cs-arrow { display: none; }
  .itt-cs-slide { padding: 0 .15rem; }
}

@media (max-width: 900px) { .itt-cs-orb { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .itt-cs-card, .itt-cs-card::before, .itt-cs-arrow, .itt-cs-dots .itt-cs-dot { transition: none; }
}


/* itt-logo-size.css — OEM partner marquee tiles.

   History: the strip was once a 300x128 card with a per-logo height computed
   from the aspect ratio (h = 62 * ratio^-0.35). That made every logo a
   different height and the cards far larger than the same logo wall on a
   solution page, which is the size the site is judged against.

   The marquee now matches the "Authorised OEM Partners" slider on the
   solution/industry pages (`.pt-brand-slider .pt-brand-logo`, itt-extend.css):
   the same 158x82 tile, the same inner box, the same logo scale.

   Sizing is uniform height, not per-logo: every logo renders 46px tall and is
   capped at the tile's 123px inner width, so anything up to ~2.7:1 is exactly
   the same height and wider wordmarks fall back to the width cap — which is
   what the solution-page slider does for those too. There are deliberately NO
   per-logo rules: a brand added to the marquee sizes itself. */

/* ---------- OEM partner marquee ---------- */
.oem-scroll-container { padding: .35rem 0; }
.oem-scroll-track     { gap: 1rem; align-items: center; }

.oem-logo-card {
  width: 158px;
  min-width: 158px;
  height: 82px;
  padding: .9rem 1.1rem;
  border-radius: 15px;
}
.oem-logo-card img {
  width: auto;
  height: 46px;
  max-width: 123px;
  max-height: 52px;
  object-fit: contain;
}

@media (max-width: 768px) {
  .oem-logo-card { width: 132px; min-width: 132px; height: 72px; padding: .7rem .85rem; border-radius: 13px; }
  .oem-logo-card img { height: 40px; max-width: 105px; max-height: 46px; }
  .oem-scroll-track { gap: .7rem; }
}

/* ---------- Client Stories slider logos ---------- */
.itt-cs-logo     { width: 76px; height: 76px; border-radius: 18px; }
.itt-cs-logo img { padding: 8px; }
@media (max-width: 768px) { .itt-cs-logo { width: 62px; height: 62px; border-radius: 14px; } }

/* ══════════════════════════════════════════════════════════════════════════
   Client change list — 15 Sep 2026
   ══════════════════════════════════════════════════════════════════════════ */

/* 1. OEM marquee sizing now lives in the block above. */

/* 3 + 6. Feature grid photo column: with a second/third image the column is a
   stack of three that fills the grid's full height, instead of one sticky
   photo with empty space below it. Images are absolutely positioned so their
   intrinsic height never stretches the row. Phones show the first photo only. */
.pt-features-stack { display: grid; gap: 1.25rem; }
.pt-features-stack .pt-features-media { position: relative; }
.pt-features-stack .pt-features-media img { position: absolute; inset: 0; }
@media (min-width: 900px) {
  .pt-features--stack { align-items: stretch; }
  .pt-features-stack { grid-template-rows: repeat(3, minmax(0, 1fr)); }
  .pt-features-stack .pt-features-media { position: relative; top: auto; aspect-ratio: auto; max-height: none; min-height: 190px; }
}
@media (max-width: 899px) {
  .pt-features-stack .pt-features-media--extra { display: none; }
}

/* 4. Industry use-case cards are links to the industry page. */
a.pt-usecase-box { display: block; color: inherit; text-decoration: none; }
a.pt-usecase-box h3 { transition: color .25s ease; }
a.pt-usecase-box:hover h3 { color: var(--primary-blue-dark); }
a.pt-usecase-box:focus-visible { outline: 3px solid var(--primary-blue); outline-offset: 3px; }
.pt-usecase-more { display: inline-flex; align-items: center; gap: .4rem; margin-top: .9rem; font-size: .86rem; font-weight: 700; color: var(--primary-blue-dark); }
.pt-usecase-more svg { width: .8em; height: .8em; color: currentColor !important; font-size: inherit !important; margin: 0 !important; transition: transform .25s ease; }
a.pt-usecase-box:hover .pt-usecase-more svg { transform: translateX(4px); }

/* 7. About "What Drives Us": with photos, one card per row, photo and text
   side by side, alternating sides. Phones keep the stacked card. */
@media (min-width: 900px) {
  .about-card-grid:has(.about-card--photo) { grid-template-columns: 1fr; gap: 2rem; max-width: 1080px; margin: 0 auto; }
  .about-card--photo { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr auto auto 1fr; text-align: left; }
  .about-card--photo .about-card-media { grid-column: 1; grid-row: 1 / 5; aspect-ratio: auto; min-height: 340px; }
  .about-card--photo .about-card-media img { position: absolute; inset: 0; }
  .about-card--photo h3 { grid-column: 2; grid-row: 2; margin: 0 2.75rem; font-size: 1.55rem; }
  .about-card--photo p { grid-column: 2; grid-row: 3; padding: 0 2.75rem; margin-top: .85rem; font-size: 1.02rem; }
  .about-card--photo:nth-child(even) .about-card-media { grid-column: 2; }
  .about-card--photo:nth-child(even) h3,
  .about-card--photo:nth-child(even) p { grid-column: 1; }
}