/* ---------------------------------------------------------------------------
   Prime Tech — client logo wall
   ---------------------------------------------------------------------------
   Its own file, not part of portfolio.css: about*.html shows the wall but has
   no project cards and no lightbox, so it would otherwise carry ~10 KB of CSS
   it never uses. projects*.html loads both.

   Markup comes from js/clients-render.js, data from the `clients` array in
   data/projects.js.
--------------------------------------------------------------------------- */

/* Logos only — no names, no cards, no links (see data/projects.js). Client
   logos arrive at wildly different aspect ratios and with different amounts of
   built-in padding, so each tile is a fixed box and the logo is contained
   inside it. That, plus a shared max-height, is what makes a row of unrelated
   marks read as one set rather than six pasted images.

   Greyscale at rest is deliberate: it flattens six competing brand palettes
   into one quiet band so the eye reads "these are clients", not six adverts. */

/* The grid above already closes on 100px of its own bottom padding, so this
   section only needs room underneath itself. */
.pt-clients-section {
  position: relative;
  padding: 0 0 100px;
}

.pt-clients-section .btn-box {
  position: relative;
  margin-top: 40px;
}

.pt-clients {
  /* Flex-wrap rather than a grid, because the client count is not a number this
     layout gets to choose. A grid leaves a short last row hanging on the left;
     wrapped flex boxes with justify-content:center put the remainder in the
     middle, which reads as deliberate at any count. Fixed-width items keep the
     rows aligned the way grid tracks would. */
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pt-client {
  display: flex;
  align-items: center;
  justify-content: center;
  /* A fixed box, not an intrinsic one: otherwise a wide wordmark sits three
     times the size of a square mark and the wall looks like a ransom note. */
  /* Explicit border-box: the flex basis is the whole tile, not the tile minus
     its padding and border, so the per-row count is predictable wherever this
     file is used rather than depending on the host page's reset.
     175px is chosen against the template's 1170px container: six per row
     (6*175 + 5*20 = 1150) so eleven logos break 6+5 instead of stranding one
     alone. Revisit it if the client count changes a lot. */
  box-sizing: border-box;
  flex: 0 0 175px;
  height: 110px;
  padding: 18px 22px;
  background: #ffffff;
  border: 1px solid #e8ecf3;
  border-radius: 6px;
  transition: box-shadow 300ms ease, transform 300ms ease;
}

.pt-client:hover {
  box-shadow: 0 14px 30px rgba(20, 32, 63, 0.11);
  transform: translateY(-3px);
}

.pt-client a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.pt-client img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  /* contain, never cover: cropping somebody's logo is not an option. */
  object-fit: contain;
  filter: grayscale(100%);
  opacity: 0.72;
  transition: filter 300ms ease, opacity 300ms ease;
}

.pt-client:hover img,
.pt-client a:focus-visible img {
  filter: grayscale(0);
  opacity: 1;
}

@media only screen and (max-width: 767px) {
  /* Two per row on a phone rather than one giant logo per screen. */
  .pt-clients { gap: 14px; }
  .pt-client {
    /* Two per row on a phone rather than one giant logo per screen. */
    flex: 0 0 calc(50% - 7px);
    height: 92px;
    padding: 14px;
  }
}

/* Motion-sensitive visitors get the colour change without the lift. */
@media (prefers-reduced-motion: reduce) {
  .pt-client,
  .pt-client img { transition: none; }
  .pt-client:hover { transform: none; }
}

/* about*.html hosts the wall inside the template's .sponsors-section. Once
   .style-two switches off that section's background band, its only vertical
   room came from the .carousel-outer wrapper the wall replaced — so put it
   back here rather than reintroduce a div named after a carousel. */
.sponsors-section .pt-clients {
  padding-bottom: 30px;
}