/* Zmienna z kolorem motywu kafelków */
:root {
  --opinie-accent: #ff6a00;
}

/* Kontener siatki */
.opinie-grid {
  display: grid;
  grid-template-columns: 1fr; /* mobile: jedna kolumna */
  gap: 16px;
}

/* Desktop: trzy kolumny */
@media (min-width: 992px) {
  .opinie-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Pojedyncza karta opinii */
.opinia-card {
  background: transparent; /* wymagane: przezroczyste tło */
  border: 2px solid var(--opinie-accent); /* pomarańczowa ramka */
  border-radius: 12px; /* lekkie zaokrąglenie rogów */
  padding: 30px;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
  color: #ffffff; /* treść i autor — białe */
}

/* Ikona cytatu na górze */
.opinia-icon {
  line-height: 0; /* usuwa zbędne odstępy */
}

/* Treść opinii (szanuje HTML z edytora) */
.opinia-content p:last-child {
  margin-bottom: 0;
}

/* Autor na dole */
.opinia-author {
  margin-top: auto; /* spycha autora na dół kafelka */
  font-weight: 600;
  opacity: 0.95;
}

/* Wrapper przycisku „Zobacz więcej opinii” */
.opinie-load-more-wrap {
  margin-top: 16px;
  text-align: center;
}

/* Sam przycisk: używamy klas motywu („button”, „wp-element-button”) – tu tylko drobne dopasowanie odstępów */
.opinie-load-more {
  min-width: 240px;
  background-color: #ff6a00;
  font-size: 12px !important;
}

.opinie-load-more:hover {
  background-color: #ffffff;
  color: #ff6a00;
}