/* LUNARTECH RISE ACADEMY: "The names around our work." on index.html, between the numbers and "Learners, in their own words." The markup is written by
   tools/stories/home-wall.mjs from the wall on Success Stories, which keeps its own larger version in css/lunartech-stories.css. Five rows of logos move sideways as one.
   Each logo's height comes from its markup (--h, worked out from its area) times --lt-wall-u, so a wide wordmark and a square mark read as the same size. */

.lt-wall { --lt-wall-u: clamp(0.8px, 0.0695vw, 1.6px); } /* grows with the screen, as the home page's titles and spacing do */

/* The title takes the second size on the home page (.lt-paths-title). The description starts on the third column of the numbers directly above: .lt-metrics is 80% of the
   width, pushed right, with four columns and a 3.2vw gap, which puts that column at 60% plus half a gap. */
.lt-wall-head { display: grid; grid-template-columns: calc(60% + 1.6vw) minmax(0, 1fr); align-items: end; align-items: last baseline; }
.lt-wall-title { margin: 0; font-size: 2.2vw; font-weight: 300; line-height: 1.14; letter-spacing: -0.01em; text-transform: none; color: #f5f5f5; }
.lt-wall-title .highlight { display: block; } /* two lines: white, then gray */
.lt-wall-sub { max-width: 34rem; margin: 0; font-family: 'Geist', sans-serif; font-size: 13.5px; font-weight: 300; line-height: 1.65; letter-spacing: 0.01em; color: #8b8b8b; } /* .lt-metric-desc */

/* Seven columns, each at least a sixth of the band, so a set is wider than the band by a column and no logo is ever on screen twice. The soft edges are the same as the Learners rows below. */
.lt-wall-band { container-type: inline-size; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.lt-wall-track { display: grid; grid-template-rows: repeat(5, auto); grid-auto-flow: column; grid-auto-columns: max(150px, 16.67vw); grid-auto-columns: max(150px, calc(100cqw / 6)); width: max-content; opacity: 0.8; animation: lt-wall 56s linear infinite; will-change: transform; transition: opacity 0.6s ease; }
@keyframes lt-wall { to { transform: translate3d(-50%, 0, 0); } }
.lt-wall-cell { display: flex; align-items: center; justify-content: center; gap: 0.55rem; height: clamp(60px, 5.3vw, 136px); padding: 0 0.5rem; box-sizing: border-box; }
.lt-wall-cell img { display: block; flex: none; width: auto; max-width: none; height: calc(var(--h) * var(--lt-wall-u)); filter: brightness(0) invert(1); } /* every file turned white */
.lt-wall-word { font-family: 'Inter', sans-serif; font-size: calc(15 * var(--lt-wall-u)); font-weight: 400; line-height: 1; letter-spacing: -0.01em; white-space: nowrap; color: #fff; }
.lt-wall-word.is-alone { font-size: calc(17 * var(--lt-wall-u)); font-weight: 500; letter-spacing: 0.01em; } /* a name with no logo file stands in for a wordmark */

/* Resting on the wall holds it still and lifts it to full white, so a name can be read. */
@media (hover: hover) {
  .lt-wall-band:hover .lt-wall-track { opacity: 1; animation-play-state: paused; }
}

/* The numbers go to two columns here: half the remaining width plus half of their 2rem gap. */
@media (max-width: 1199px) {
  .lt-wall-head { grid-template-columns: calc(60% + 1rem) minmax(0, 1fr); }
}
@media (max-width: 991px) {
  .lt-wall-head { display: block; }
  .lt-wall-title { font-size: 4.4vw; }
  .lt-wall-sub { margin-top: 1.2rem; }
}
@media (max-width: 767px) {
  .lt-wall-title { font-size: 6.6vw; }
  .lt-wall-band { -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
}
@media (prefers-reduced-motion: reduce) {
  .lt-wall-track { animation: none; transition: none; opacity: 1; }
  .lt-wall-band { overflow-x: auto; scrollbar-width: none; }
  .lt-wall-band::-webkit-scrollbar { display: none; }
  .lt-wall-cell[aria-hidden='true'] { display: none; }
}