.sl-tab {
  min-height: 44px;
}

.sl-partner-tiers {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.sl-partner-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, 160px);
  gap: 16px;
}

.sl-partner-tile {
  align-items: center;
  border: 1px solid var(--line-dark);
  display: flex;
  height: 96px;
  justify-content: center;
  width: 160px;
}

.sl-partner-tile img {
  --info-logo-h: 70%;
  --info-logo-w: 70%;
  --info-logo-main-h: 70%;
  --info-logo-scale: 1;
  /* Same treatment as the footer's .r-plogo (responsive.css 303): the partner SVGs are dark artwork, shown white on
     black. Without it most logos were invisible in the tiles (operator review 2026-10-01). */
  filter: brightness(0) invert(1);
  display: block;
  max-height: var(--info-logo-h);
  max-width: var(--info-logo-w);
  object-fit: contain;
}

.sl-partner-tile:focus-visible {
  outline: 2px solid var(--pink);
  outline-offset: 2px;
}

@media (max-width: 480px) {
  .sl-partner-grid {
    grid-template-columns: repeat(auto-fit, 140px);
  }

  .sl-partner-tile {
    height: 84px;
    width: 140px;
  }
}

/* Info page partners (UX review 2026-10-06): the main partner rendered smallest (111×30); give it more of its tile. */
.sl-partner-tile img[alt="Câmara Municipal de Lisboa"]{ max-width:84%; }

/* CMS sizes scale the tile's existing 70% logo box. Width is bounded by the tile and height
   by the normal main-partner height, keeping every editor choice inside the card. */
.sl-partner-tile img.r-plogo--size-small {
  --info-logo-scale: .8;
}

.sl-partner-tile img.r-plogo--size-large {
  --info-logo-scale: 1.3;
}

.sl-partner-tile img.r-plogo--size-xlarge {
  --info-logo-scale: 1.7;
}

.sl-partner-tile img[class*="r-plogo--size-"] {
  max-height: min(calc(var(--info-logo-h) * var(--info-logo-scale)), var(--info-logo-main-h));
  max-width: min(calc(var(--info-logo-w) * var(--info-logo-scale)), 100%);
  object-fit: contain;
}

/* As in the footer, trim only targets explicitly opted-in PNGs. SVG/tightly cropped artwork
   retains object-fit:contain and cannot be clipped by the trim modifier. */
.sl-partner-tile img.r-plogo--trim:is([src$=".png" i], [src*=".png?" i], [src*=".png#" i]) {
  aspect-ratio: 5 / 3;
  height: min(calc(var(--info-logo-h) * var(--info-logo-scale)), var(--info-logo-main-h));
  max-height: none;
  max-width: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  width: auto;
}