.patrons-strip {
  border-block: 1px solid var(--rule);
  background: var(--card);
}

.partners-strip {
  border-block: 1px dashed var(--rule);
  background: var(--paper-2);
}

.patrons-strip__heading,
.patron-slot__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

/* Kafelki maja stala szerokosc i wyrownuja sie do lewej, zamiast dzielic
   cala szerokosc miedzy siebie. Przy `auto-fit` i `1fr` dwoch patronow
   rozlewalo sie na pol ekranu kazdy, przez co wordmark plywal w srodku
   wielkiego pustego prostokata i cala sekcja czytala sie jak niedokonczona.
   Liczba patronow zmienia sie w czasie, wiec uklad nie moze zalezec od tego,
   ilu ich akurat jest. */
.patrons-strip__list,
.partners-strip__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 210px));
  justify-content: start;
  gap: 1rem;
  padding: 0;
  list-style: none;
}

.patrons-strip__list a,
.partners-strip__list a,
.patron-card,
.patron-slot,
.patron-profile__terms,
.patron-editorial-rule {
  border: 1px solid var(--rule);
  background: var(--card);
}

.patrons-strip__list a,
.partners-strip__list a {
  text-decoration: none;
  color: var(--ink);
  border-radius: var(--radius-sm);
  transition: border-color .18s, box-shadow .18s;
}

.patrons-strip__list a:hover,
.partners-strip__list a:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow);
}

.patrons-strip__list a {
  min-height: 7rem;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  text-align: center;
}

.partners-strip__list a {
  min-height: 6rem;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  border-style: dashed;
  text-align: center;
}

/* Zastepnik logotypu.
   Wczesniej: przerywana ramka w kolorze biezacym, wewnatrz podkreslony tekst
   linku - czytalo sie to jak uszkodzony <img> z tekstem alternatywnym, bo
   dokladnie tak wyglada obrazek, ktory sie nie wczytal. Teraz: wordmark
   tekstowy w kroju znaku firmowego, bez ramki i bez podkreslenia, na tej samej
   plycie co logotypy graficzne. Marka bez pliku ma wygladac na skladana
   swiadomie, a nie na brakujaca. */
.brand-placeholder {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3.5rem;
  padding: .65rem .25rem;
  font-family: var(--wordmark);
  font-weight: 900;
  font-size: 1.05rem;
  letter-spacing: .06em;
  line-height: 1.15;
  text-align: center;
  text-decoration: none;
  color: var(--ink);
}

.relationship-label {
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* Logotypy dostaja wlasna jasna plyte w OBU motywach.
   Powod jest systemowy, nie kosmetyczny: marki dostarczaja logo przygotowane
   na jasne tlo - albo z bialym tlem, albo z ciemnym rysunkiem na przezroczystym.
   Na czerni #000000 pierwsze swieci prostokatem, drugie znika. Plyta rozwiazuje
   oba przypadki naraz i nie wymaga wariantu pliku per motyw ani filtrow, ktore
   psuja kolory marki. */
.patrons-strip img,
.partners-strip img,
.patron-slot img,
.patron-card img,
.patron-profile img {
  max-width: 100%;
  height: auto;
  background: #FFFFFF;
  padding: .5rem .75rem;
  border-radius: var(--radius-sm);
}

.patron-slot {
  padding-block: 1rem;
  border-inline: 0;
}

.patron-slot__label,
.patron-card__example,
.patron-profile__example {
  font-weight: 700;
}

.patron-slot__inner > div {
  flex: 1;
}

.patron-slot__inner p {
  margin: .25rem 0;
}

.patron-slot__link,
.patron-profile__outbound {
  display: inline-block;
  padding: .75rem 1rem;
  border: 1px solid currentColor;
  font-weight: 700;
}

.patrons-directory {
  display: grid;
  gap: 1rem;
  margin-block: 2rem;
}

.partners-directory {
  display: grid;
  gap: 1rem;
  margin-block: 3rem 2rem;
  padding: 1.5rem;
  border: 1px dashed var(--rule);
  background: var(--paper-2);
}

.partners-directory > header > :first-child {
  margin-top: 0;
}

.partner-card {
  border-style: dashed;
  background: transparent;
}

.patron-card {
  display: grid;
  grid-template-columns: minmax(150px, 220px) 1fr;
  gap: 1.5rem;
  align-items: center;
  padding: 1.25rem;
}

.patron-profile__terms {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-block: 1.5rem;
}

.patron-profile__terms div,
.patron-editorial-rule {
  padding: 1rem;
}

.patron-profile__terms dt {
  font-weight: 700;
}

.patron-profile__terms dd {
  margin: .4rem 0 0;
}

@media (max-width: 760px) {
  .patrons-strip__heading,
  .patron-slot__inner,
  .patron-card {
    display: grid;
  }

  .patron-profile__terms {
    grid-template-columns: 1fr;
  }
}