/* =====================================================================
   Partner Logos widget: filter buttons + logo grid with Load more.
   Pairs with partner-logos.htm (script) and the Partner Logos widget (table).
   Values below come from the Figma file "P4 Partners - Lena".
   Design values are the variables at the top of .partner-logos.
   ===================================================================== */
.partner-logos {
  --pl-navy: #00205c;                 /* Figma --primary-blue */
  --pl-tile-border: #00205b;
  --pl-tile-border-width: 0.5px;      /* hairline, as in Figma (see low-resolution rule below) */
  --pl-pill-border: #e9ecef;
  --pl-pill-text: #00205c;
  --pl-tile-size: 100px;
  --pl-tile-padding: 8px;             /* only used for logos that are not square */
  --pl-tile-radius: 10px;
  --pl-gap-x: 43px;
  --pl-gap-y: 39px;
  --pl-cols: 7;
  --pl-font-ui: Inter, "Helvetica Neue", Arial, sans-serif;           /* filter buttons */
  --pl-font-button: "PT Sans", "Helvetica Neue", Arial, sans-serif;   /* Load more */

  margin: 0 auto;
  font-family: var(--pl-font-ui);
  scroll-margin-top: 100px;           /* breathing room under a sticky site header when "Show less" scrolls back up */
}
.partner-logos [hidden] { display: none !important; }

/* Filter buttons: 36px tall, 8px apart, 6px corners */
.partner-logos .pl-filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 42px; padding: 0; list-style: none; }
.partner-logos .pl-filters > li { margin: 0; padding: 0; list-style: none; background: none; }
.partner-logos .pl-filters > li::before { content: none; }
.partner-logos .pl-filter {
  -webkit-appearance: none; appearance: none;
  display: inline-flex; align-items: center;
  box-sizing: border-box; height: 36px; margin: 0; padding: 0 15px;
  box-shadow: none; text-transform: none; letter-spacing: normal;
  font: 600 13px/1 var(--pl-font-ui);
  border: 1px solid var(--pl-pill-border);
  border-radius: 6px;
  background: #003988;
  color: #ffffff;
  cursor: pointer;
}
.partner-logos .pl-filter:hover { border-color: var(--pl-navy); background: #fff; color: var(--pl-pill-text); }
.partner-logos .pl-filter[aria-pressed="true"],
.partner-logos .pl-filter[aria-pressed="true"]:hover { background: #c75000; border-color: #fff; color: #fff; }
.partner-logos .pl-filter:focus-visible,
.partner-logos .pl-more:focus-visible,
.partner-logos a.pl-tile:focus-visible { outline: 2px solid var(--pl-navy); outline-offset: 2px; }

/* Logo grid: 100px tiles, 43px between columns, 39px between rows */
.partner-logos .pl-grid {
  display: grid;
  grid-template-columns: repeat(var(--pl-cols), minmax(0, 1fr));
  gap: var(--pl-gap-y) var(--pl-gap-x);
  margin: 0; padding: 0; list-style: none;
}
.partner-logos .pl-grid:focus { outline: 0; }   /* the grid only receives focus after "Load more"; no ring around the whole grid */
.partner-logos .pl-grid > li { margin: 0; padding: 0; list-style: none; background: none; }
.partner-logos .pl-grid > li::before { content: none; }
.partner-logos .pl-tile {
  display: flex; align-items: center; justify-content: center;
  box-sizing: border-box; aspect-ratio: 1 / 1; overflow: hidden;
  padding: 0;
  border: var(--pl-tile-border-width) solid var(--pl-tile-border);
  border-radius: var(--pl-tile-radius);
  background: #fff;
  color: var(--pl-navy); text-decoration: none;
  font-size: 11px; font-weight: 600; line-height: 1.25; text-align: center;
}
.partner-logos .pl-tile img { display: block; width: 100%; height: 100%; max-width: none; margin: 0; padding: 0; border: 0; object-fit: contain; }
/* Logos that are not square get a little breathing room automatically */
.partner-logos .pl-tile.pl-fit { padding: var(--pl-tile-padding); }
.partner-logos .pl-tile.pl-fit img { width: auto; height: auto; max-width: 100%; max-height: 100%; }
.partner-logos a.pl-tile { transition: box-shadow .15s ease, transform .15s ease; }
.partner-logos a.pl-tile:hover { box-shadow: 0 4px 12px rgba(0, 32, 92, .18); transform: translateY(-2px); }

/* Load more: plain text link, 20px PT Sans */
.partner-logos .pl-more-wrap { margin-top: 46px; text-align: center; }
.partner-logos .pl-more {
  -webkit-appearance: none; appearance: none;
  display: inline; width: auto; height: auto; margin: 0; padding: 0;
  box-shadow: none; letter-spacing: normal;
  font: 400 20px/1.2 var(--pl-font-button);
  text-transform: uppercase;
  text-decoration: underline;
  color: #00205c; background: none;
  border: 0 !important;
  border-radius: 0;
  cursor: pointer;
}
.partner-logos .pl-more:hover { background: none; color: #00205c; text-decoration: none; }

/* Status line for screen readers only */
.partner-logos .pl-status { position: absolute; width: 1px; height: 1px; margin: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Once the script has built the grid, the editor table is hidden.
   If JavaScript is off, the table simply stays visible as a plain list. */
.partner-logos.pl-ready .pl-source { display: none; }
.partner-logos .pl-source { width: 100%; border-collapse: collapse; font-size: 14px; }
.partner-logos .pl-source th,
.partner-logos .pl-source td { padding: 8px; border: 1px solid #ddd; text-align: left; vertical-align: middle; }
.partner-logos .pl-source img { max-width: 80px; height: auto; }

/* The Figma hairline (0.5px) only renders on high-density screens.
   On standard screens, use a 1px line in a softer navy so it looks the same. */
@media (max-resolution: 1.49dppx), (-webkit-max-device-pixel-ratio: 1.49) {
  .partner-logos { --pl-tile-border-width: 1px; --pl-tile-border: rgba(0, 32, 91, .55); }
}

/* Smaller screens (Figma shows desktop only) */
@media (max-width: 1024px) { .partner-logos { --pl-cols: 5; --pl-gap-x: 28px; --pl-gap-y: 28px; } }
@media (max-width: 640px)  { .partner-logos { --pl-cols: 4; --pl-gap-x: 16px; --pl-gap-y: 16px; } }
@media (max-width: 480px)  { .partner-logos { --pl-cols: 3; } }
@media (prefers-reduced-motion: reduce) { .partner-logos a.pl-tile { transition: none; } .partner-logos a.pl-tile:hover { transform: none; } }