/* ============================================================
   German Power Solutions — Brand grid (/brands/)
   The full partner list as a bordered tile grid.

   Sized against the reference, which runs a 1160px five-column
   gallery: 220px tiles, 15px gutters, each logo inset 15px inside a
   1px hairline. Those four numbers are reproduced exactly at the
   desktop rung and are the only fixed measurements in the file —
   everything below 64rem derives from them.

   This is NOT brands.css. That sheet drives the homepage marquee,
   which is a lane that translates; this one is static and paints a
   grid. They share no selector and neither loads on the other's
   template.
   ============================================================ */

.brandgrid{
  /* The tile is a custom property because the media queries below
     re-column the grid without re-stating the tile size, and because
     --gap has to appear twice in the max-width arithmetic. */
  --brandgrid-tile:220px;
  --brandgrid-gap:15px;

  display:grid;
  grid-template-columns:repeat(2,minmax(0,var(--brandgrid-tile)));
  gap:var(--brandgrid-gap);

  /* justify-content, not justify-items. The track list is capped at
     220px per column, so on a viewport wider than the grid needs the
     surplus belongs BETWEEN the grid and its container — centring the
     whole block — rather than inside each cell, which would leave the
     tiles their 220px and strand them against the left edge. */
  justify-content:center;

  /* 5 x 220 + 4 x 15 = 1160, the reference width. Written as the sum
     rather than the literal so changing --brandgrid-tile moves the cap
     with it. Our --container is 1320px, so without this the grid would
     stretch 160px wider than the design it is matching. */
  max-width:calc(var(--brandgrid-tile) * 5 + var(--brandgrid-gap) * 4);

  margin:var(--sp-7) auto 0;
  padding:0;
  list-style:none;
}

/* display:flex so the tile can be told to fill the row.

   Without it the tile sized itself from aspect-ratio alone, which is a
   PREFERRED size, not a floor: a wordmark that wrapped to five lines
   pushed its own tile to 202px while its four row-mates stayed at 136
   and sat top-aligned against it — a 66px ragged step across the row.
   Measured, with a partner retitled to its full legal entity name,
   which is the normal case for a German company.

   The grid stretches every item to the row height already; this makes
   the tile inside follow. */
.brandgrid__item{margin:0;display:flex}

/* The tile. Both branches below render this same box: an <a> when the
   brand has somewhere to go, a <div> when it does not, so the border,
   the inset and the aspect ratio cannot drift apart between the two. */
.brandgrid__tile{
  display:flex;
  align-items:center;
  justify-content:center;

  /* 220 x 136 is the reference tile. aspect-ratio rather than a fixed
     height so the row still resolves once the columns shrink below
     220px at the narrower rungs — a fixed 136px there would leave a
     150px-wide tile letterboxing its own logo. */
  aspect-ratio:220 / 136;
  width:100%;

  /* No height and no min-height, deliberately -- both were tried and both
     were wrong.

     The tile is a flex ITEM of its <li>, so its automatic minimum size is
     min-height:auto, and that is the only thing that lets content push it
     past the aspect ratio above. Setting height:100% pinned it; setting
     min-height:100% overrode the auto minimum and pinned it just the same,
     and in each case a name long enough to need a sixth line spilled
     straight through the hairline.

     Left alone, the <li>'s align-items:stretch fills a row a sibling has
     made taller, and the auto minimum grows the box when this tile is the
     sibling doing the making. */

  /* 15px of breathing room, exactly as the reference insets its
     gallery images, with box-sizing keeping the outer box at 220. */
  padding:15px;

  border:1px solid rgba(0,0,0,.2);
  background:var(--gps-white);
  text-decoration:none;
  transition:border-color var(--dur-fast) var(--ease);
}

/* Hover belongs only to the tiles that are links. A plain tile that
   lit up under the cursor would promise a destination it does not
   have. :where() keeps this at the specificity of the base rule so
   source order still decides, per the note at the top of base.css. */
a.brandgrid__tile:hover,
a.brandgrid__tile:focus-visible{border-color:var(--gps-red)}

.brandgrid__img{
  /* max-height as well as max-width, and object-fit:contain. The
     reference can get away with object-fit:fill because every file in
     its library is the same 270x150; ours accepts whatever the client
     uploads, and fill would stretch a square logo into a letterbox. */
  max-width:100%;
  max-height:100%;
  width:auto;
  height:auto;
  object-fit:contain;
}

.brandgrid__mark{
  width:100%;
  height:100%;
  max-height:100%;
  fill:currentColor;
  color:var(--gps-black);
}

/* The wordmark: what a brand with no uploaded logo renders instead.

   Deliberately not a placeholder graphic. A partner's logo is their
   trademark and is usable only from the asset pack they supply, so
   the honest default is the partner's NAME set in the site's own
   face — which is accurate, legible, indexable, and stops being
   drawn the moment a real logo is attached in wp-admin. */
.brandgrid__word{
  font-family:var(--font-head);
  font-weight:700;
  font-size:clamp(.875rem,1.5vw,1.0625rem);
  line-height:1.25;
  letter-spacing:.005em;
  text-align:center;
  text-transform:uppercase;
  color:var(--gps-black);

  /* A name like "Wacker Neuson" has to break somewhere inside a 190px
     content box; anywhere is better than overflowing the hairline. */
  overflow-wrap:anywhere;
  hyphens:auto;
}

a.brandgrid__tile .brandgrid__word{color:var(--gps-black)}

/* The page lede, when the client writes one above the grid. */
.gps-page--brands .gps-page__lede{
  max-width:60ch;
  margin-inline:auto;
  text-align:center;
}

/* ===== Rungs — the ladder documented at the top of base.css =====
   Two columns below 48rem, three to 64rem, five above. No new
   breakpoint is introduced: between 1024px and 1160px the five
   columns simply resolve below 220px, which the aspect-ratio above
   absorbs without any rule of its own. */

@media (width >= 48rem){
  .brandgrid{grid-template-columns:repeat(3,minmax(0,var(--brandgrid-tile)))}
}

@media (width >= 64rem){
  .brandgrid{grid-template-columns:repeat(5,minmax(0,var(--brandgrid-tile)))}
}

/* Print. base.css already strips the chrome; the grid itself only
   needs its hairlines to survive a colour-managed printer that drops
   light borders, and to not break a tile across a page. */
@media print{
  .brandgrid{max-width:none !important;gap:8px !important}
  .brandgrid__tile{
    border-color:#767676 !important;
    break-inside:avoid !important;
    page-break-inside:avoid !important;
  }
}