/* ==========================================================================
   Schools — "trusted by" logo marquee (pure-CSS infinite scroll)
   ========================================================================== */

.schools { padding: 88px 0; background: var(--surface-alt); overflow: hidden; }
.schools .section-head { margin-bottom: 40px; }

.logos { position: relative; }
/* Soft fade on both edges so logos slide in/out instead of being hard-cut. */
.logos__viewport {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.logos__track {
  display: flex; align-items: center; width: max-content;
  animation: logos-scroll 48s linear infinite;
  will-change: transform;
}
.logos:hover .logos__track { animation-play-state: paused; }

/* The list is rendered as 4 identical groups; the animation shifts by exactly
   one group (-25%), so the track always overflows the viewport (no trailing gap
   on wide screens) and the loop restart is seamless. */
.logos__group { display: flex; align-items: center; flex: none; }

/* Spacing lives on each item (36px each side = 72px between neighbours), NOT as
   a flex `gap`. A `gap` is inserted *between* groups but not after the last one,
   so the translate would land half a gap off and the loop would visibly jump.
   Per-item margins keep every group self-contained, so the shift is seamless. */
.logo-item { flex: none; display: inline-flex; align-items: center; justify-content: center; margin: 0 36px; }
/* Per-logo height comes from --logo-h (set per entry in config.extra.schools),
   so each logo can be sized to its own visual weight; 40px is the default. */
.logo-item img {
  max-height: var(--logo-h, 40px); width: auto; object-fit: contain;
  filter: grayscale(1); opacity: .62;
  transition: filter .2s ease, opacity .2s ease;
}
.logo-item:hover img { filter: none; opacity: 1; }

/* Dark mode: the logos are mostly dark artwork, which would disappear on the
   dark section. Invert the (already grayscale) logo so it reads as light;
   hover just brightens it. Interior-white marks (e.g. the ČVUT lion) flip dark
   and blend, which keeps the silhouettes legible. */
[data-theme="dark"] .logo-item img { filter: grayscale(1) invert(1); opacity: .8; }
[data-theme="dark"] .logo-item:hover img { filter: grayscale(1) invert(1); opacity: 1; }
.logo-item__name {
  font-size: 17px; font-weight: 700; letter-spacing: -.01em;
  color: var(--text-mute); white-space: nowrap;
  transition: color .2s ease;
}
.logo-item:hover .logo-item__name { color: var(--heading); }

@keyframes logos-scroll {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-25%, 0, 0); }
}

/* No animation if the user prefers reduced motion: fall back to a quiet,
   manually scrollable row so every logo is still reachable. */
@media (prefers-reduced-motion: reduce) {
  .logos__track { animation: none; }
  .logos__group:nth-child(n + 2) { display: none; }
  .logos__viewport { overflow-x: auto; scrollbar-width: none; }
  .logos__viewport::-webkit-scrollbar { display: none; }
}

@media (max-width: 720px) {
  .schools { padding: 56px 0; }
  .logos__track { animation-duration: 34s; }
  .logo-item { margin: 0 24px; }
  .logo-item img { max-height: calc(var(--logo-h, 40px) * .82); }
  .logo-item__name { font-size: 15px; }
}