/* Client wall -- shared by the homepage and all eight city pages.
   Generated markup lives in stack/build_clientwall.py; this only styles it.

   The wall mixes 25 real vector marks with 47 wordmarks set as live text. The
   whole job of this file is that the seam does not show. Two rules do that:

   1. EVERY CELL IS THE SAME SIZE and the art is fitted INTO it. The old wall set
      a common height and let width fall where it landed, so NETFLIX came out
      130px wide next to a 33px NBC NEWS and the row read as a jumble.
   2. A wordmark is toned to the same weight as a mark beside it -- hence the
      matched opacity, and the per-brand styles rather than one bold sans for all.

   ⚠️ Do not give .m a height in px alone: a wordmark that wraps to two lines has
   to be able to grow, or long names clip. min-height + centring, never height. */

/* Flex, not grid, for ONE reason: the last row is short (60 marks over 8 columns
   leaves 4), and a grid packs an incomplete final row hard against the start edge
   with a gap where the missing cells would be. There is no grid property that
   centres just that row -- justify-content centres the whole track set, not the
   orphans inside it. Wrapped flex centres every line independently, so a short
   last row sits under the middle of the block where it belongs.
   ⚠️ The basis must stay in step with the widths below, or the column count
   changes and the rhythm goes with it. */
.wall{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;
  gap:.35rem .5rem;
  max-width:1080px;
  margin:0 auto;
}

.wall .m{
  flex:0 0 126px;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:52px;
  padding:.35rem .5rem;
  overflow:hidden;
}

/* --h is computed per mark by stack/build_clientwall.py so that every mark
   renders at roughly the same AREA. Setting a common height instead is what made
   the old wall read as a jumble: at 26px tall, Bloomberg covered 3.4x the ink of
   AJ+. The fallback only applies if the generator has not run. */
.wall .m img{
  max-height:var(--h,26px);
  max-width:100%;
  width:auto;
  object-fit:contain;
  filter:grayscale(1) contrast(.9);
  opacity:.62;
  transition:opacity .2s,filter .2s,transform .2s;
}

.wall .m .w{
  font-family:var(--fd,system-ui,sans-serif);
  font-style:normal;
  color:#2c2d33;
  opacity:.62;
  text-align:center;
  line-height:1.12;
  text-wrap:balance;
  transition:opacity .2s,transform .2s;
}

/* Per-brand typesetting. A wordmark IS the logo for most of these brands, so it
   gets the treatment the real mark uses rather than one house style for all. */
.wall .w.bold {font-weight:800;letter-spacing:-.005em;text-transform:uppercase}
.wall .w.wide {font-weight:700;letter-spacing:.13em;text-transform:uppercase}
.wall .w.light{font-weight:500;letter-spacing:.09em;text-transform:uppercase}
.wall .w.lower{font-weight:800;letter-spacing:-.02em;text-transform:lowercase}
.wall .w.serif{font-family:var(--fb,Georgia,serif);font-weight:600;font-style:italic;
               letter-spacing:-.01em;text-transform:none}
.wall .w.slab {font-family:var(--fb,Georgia,serif);font-weight:600;letter-spacing:.05em;
               text-transform:uppercase}

/* Size by name length, so a long name fits the same cell as a short one. */
.wall .w.s1{font-size:1.02rem}
.wall .w.s2{font-size:.88rem}
.wall .w.s3{font-size:.76rem}
.wall .w.s4{font-size:.68rem}
.wall .w.serif.s1{font-size:1.15rem}
.wall .w.serif.s2{font-size:1rem}

.wall .m:hover img{filter:none;opacity:1;transform:translateY(-2px)}
.wall .m:hover .w{opacity:.92;transform:translateY(-2px)}

@media (prefers-reduced-motion:reduce){
  .wall .m img,.wall .m .w{transition:none}
  .wall .m:hover img,.wall .m:hover .w{transform:none}
}

/* Tablet */
@media (max-width:860px){
  .wall{max-width:640px}
  .wall .m{flex-basis:108px;min-height:46px;padding:.3rem .35rem}
  .wall .m img{max-height:calc(var(--h,26px) * .84)}
}

/* Phone -- four across. Three leaves the marks too big and the block too tall;
   four keeps 72 clients to a scroll and a half instead of three. */
@media (max-width:560px){
  .wall{gap:.2rem .25rem;max-width:100%}
  .wall .m{flex-basis:calc((100% - .75rem) / 4);min-height:38px;padding:.25rem .2rem}
  .wall .m img{max-height:calc(var(--h,26px) * .64)}
  .wall .w.s1{font-size:.72rem}
  .wall .w.s2{font-size:.63rem}
  .wall .w.s3{font-size:.56rem}
  .wall .w.s4{font-size:.5rem}
  .wall .w.serif.s1{font-size:.8rem}
  .wall .w.serif.s2{font-size:.7rem}
  .wall .w.wide,.wall .w.light{letter-spacing:.06em}
}

/* The link out to the full list. */
.logobar .more,.outlets-section .more{
  margin:1.6rem 0 0;
  font-family:var(--fm,ui-monospace,monospace);
  font-size:.62rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  text-align:center;
}
.logobar .more a,.outlets-section .more a{
  color:var(--mut,#7a7a82);
  text-decoration:none;
  border-bottom:1px solid currentColor;
  padding-bottom:2px;
}
.logobar .more a:hover,.outlets-section .more a:hover{color:var(--accent,#b23)}

/* Narrow phones (360px and down). Four columns leaves ~59px of usable cell, and
   eleven of the longer wordmarks -- "Clear Vision Videography", "US Event
   Management" -- overflow it. Three columns buys back the width they need.
   ⚠️ Measured by RENDERING at 320px, not by reading the media query: the wall
   looked fine in the CSSOM at every width. */
@media (max-width:360px){
  .wall .m{flex-basis:calc((100% - .5rem) / 3);min-height:40px}
  .wall .w.s1{font-size:.76rem}
  .wall .w.s2{font-size:.68rem}
  .wall .w.s3{font-size:.6rem}
  .wall .w.s4{font-size:.55rem}
}