/**********************************/
/* Partner Logos widget           */
/**********************************/
/* A titled panel of partner/sponsor logos: the title sits on the panel's own
   tinted background, the logos on a white card inset within it. */

.pw-partners-wrap {
  padding: 2.5rem 0;
}

.pw-partners-panel {
  max-width: var(--content-width);
  margin: 0 auto;
  background-color: var(--tertiary-accent);
  border-radius: 25px;
  /* No top padding: the heading's own padding sets the height of the tinted
     band above the white card, and an untitled widget then has an even frame. */
  padding: 0 14px 14px;
}

.pw-partners-heading {
  margin: 0;
  padding: 1.5rem 1rem;
  font-size: 1.5em;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  color: var(--body-text);
}

.pw-partners-body {
  background-color: var(--body-content-bg);
  border-radius: 20px;
  padding: 2em 2rem;
}

/* --pw-partner-columns is set inline per widget from its Columns setting, so a
   new column count needs no new CSS. minmax(0, 1fr) rather than 1fr: a wide
   logo would otherwise stretch its track past the panel (1fr's automatic
   minimum is the item's min-content width). */
.pw-partners-grid {
  display: grid;
  grid-template-columns: repeat(var(--pw-partner-columns, 3), minmax(0, 1fr));
  gap: 2.5rem 2rem;
  align-items: center;
  justify-items: center;
}

.pw-partners-item {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-width: 0;
}

/* Logos vary in aspect ratio, so cap the height and let width follow — a wide
   wordmark and a square badge then read as the same visual weight. */
.pw-partners-logo {
  display: block;
  max-width: 100%;
  max-height: 140px;
  width: auto;
  height: auto;
  object-fit: contain;
}

.pw-partners-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  text-decoration: none;
}
.pw-partners-link:hover {
  text-decoration: none;
}

/* Phones: at most --pw-partner-columns-mobile (2, or the widget's own count if
   it asks for fewer), and a tighter panel so the logos keep their room. */
@media (max-width: 640px) {
  .pw-partners-panel {
    padding: 0 10px 10px;
  }
  .pw-partners-body {
    padding: 2rem 1.25rem;
  }
  .pw-partners-grid {
    grid-template-columns: repeat(var(--pw-partner-columns-mobile, 2), minmax(0, 1fr));
    gap: 2rem 1.5rem;
  }
  .pw-partners-logo {
    max-height: 80px;
  }
}