/* logo-strip.css - University / Associates / Indexing logo sections (#1890).
   Every rule is scoped under .lgs so nothing else on the page changes.
   Site colours (--lgs-*) are set per section by logo-strip.php. */

.lgs {
  --lgs-accent: #1b3a6b;
  --lgs-border: #e3e6ea;
  --lgs-tile-bg: #fff;
  --lgs-logo-h: 80px;
  --lgs-tile-w: 180px;
  --lgs-gap: 16px;
  --lgs-duration: 40s;
  margin: 40px auto;
  padding: 0 !important;     /* sites style bare <section>, some with !important */
  clear: both;               /* sit below a floated heading column (Bootstrap 3) */
  max-width: 100%;
  box-sizing: border-box;
}
.lgs *, .lgs *::before, .lgs *::after { box-sizing: border-box; }
.lgs.lgs--flush { margin-top: 0; }   /* the page prints its own heading right above */

.lgs .lgs-heading {
  text-align: center;
  margin-top: 0;
  margin-bottom: 24px;
}

.lgs .lgs-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;   /* an incomplete last row stays centred */
  gap: var(--lgs-gap);
}

.lgs .lgs-tile {
  flex: 0 0 var(--lgs-tile-w);
  width: var(--lgs-tile-w);
  height: calc(var(--lgs-logo-h) + 24px);
  margin: 0;
  padding: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--lgs-tile-bg);
  border: 1px solid var(--lgs-border);
  border-radius: 8px;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.lgs .lgs-tile:hover { border-color: var(--lgs-accent); box-shadow: 0 2px 10px rgba(0, 0, 0, .08); }

.lgs .lgs-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  border-radius: 4px;
}
.lgs .lgs-link:focus-visible { outline: 2px solid var(--lgs-accent); outline-offset: 4px; }

.lgs .lgs-img {
  display: block;
  width: auto !important;    /* page rules such as "#clients img { width:140px }" outrank classes */
  height: auto !important;
  max-width: 100% !important;
  max-height: var(--lgs-logo-h) !important;
  object-fit: contain;       /* never stretched or cropped */
  margin: 0;
  padding: 0;
  border: 0;
  box-shadow: none;
}

/* Marquee: two identical lists side by side, the track slides by one list's width. */
.lgs--marquee .lgs-viewport {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
}
.lgs--marquee .lgs-track {
  display: flex;
  width: max-content;
  animation: lgs-scroll var(--lgs-duration) linear infinite;
}
.lgs--marquee .lgs-list {
  flex-wrap: nowrap;
  gap: 0;
}
.lgs--marquee .lgs-tile { margin-right: var(--lgs-gap); }
.lgs--marquee .lgs-viewport:hover .lgs-track,
.lgs--marquee .lgs-viewport:focus-within .lgs-track { animation-play-state: paused; }

@keyframes lgs-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .lgs--marquee .lgs-viewport { -webkit-mask-image: none; mask-image: none; }
  .lgs--marquee .lgs-track { animation: none; width: auto; display: block; }
  .lgs--marquee .lgs-list { flex-wrap: wrap; gap: var(--lgs-gap); }
  .lgs--marquee .lgs-list[aria-hidden="true"] { display: none; }
  .lgs--marquee .lgs-tile { margin-right: 0; }
}

/* Tablet */
@media (max-width: 991px) {
  .lgs { --lgs-logo-h: 64px; --lgs-tile-w: 150px; --lgs-gap: 12px; margin: 32px auto; }
}

/* Mobile: two tiles per row in grids */
@media (max-width: 575px) {
  .lgs { --lgs-logo-h: 52px; --lgs-gap: 10px; margin: 28px auto; }
  .lgs--grid .lgs-tile { flex-basis: calc(50% - var(--lgs-gap) / 2); width: calc(50% - var(--lgs-gap) / 2); }
  .lgs--marquee .lgs-tile { --lgs-tile-w: 130px; }
  .lgs .lgs-heading { margin-bottom: 16px; }
}