/* Opinie klientów.
   Korzysta ze zmiennych motywu Arpi, ale ma własne wartości awaryjne,
   więc wygląda sensownie także pod innym motywem. */

.ao-sekcja{
  --ao-tlo:var(--runo, #131A0E);
  --ao-kresa:var(--kresa, #2C3720);
  --ao-tekst:var(--pyl, #EAE7DB);
  --ao-cichy:var(--zolw, #99A386);
  --ao-akcent:var(--akcent, #B4D02A);
  --ao-mono:var(--mono, ui-monospace, Consolas, monospace);
  background:var(--ao-tlo);
  color:var(--ao-tekst);
}

.ao-naglowek{
  display:flex;flex-wrap:wrap;gap:1.5rem 3rem;
  align-items:flex-end;justify-content:space-between;
}
.ao-podpis{color:var(--ao-cichy);font-size:.9375rem;margin:.5rem 0 0;max-width:46ch}

.ao-srednia{display:flex;align-items:center;gap:1rem}
.ao-srednia__l{
  font-family:var(--display, sans-serif);font-weight:800;
  font-size:3.6rem;line-height:1;color:var(--ao-akcent);
}
.ao-srednia__o{display:grid;gap:.3rem}
.ao-srednia__o span{
  font-family:var(--ao-mono);font-size:.8125rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ao-cichy);
}

.ao-gwiazdki{display:inline-flex;gap:2px}
.ao-gwiazdki svg{width:17px;height:17px}
.ao-gwiazdka--pelna{fill:var(--ao-akcent)}
.ao-gwiazdka--pusta{fill:var(--ao-kresa)}

.ao-lista{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));
  gap:1.25rem;margin-top:clamp(2rem,4vw,3rem);
}

.ao-karta{
  border:1px solid var(--ao-kresa);padding:1.5rem;
  display:flex;flex-direction:column;gap:.9rem;
  background:rgba(0,0,0,.18);
}
/* Karta ze zdjęciami zaczyna się od zdjęć - to one mają rzucać się w oczy. */
.ao-karta--ze-zdjeciami{padding-top:1.25rem}

.ao-zdjecia{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center}
.ao-zdjecia a{display:block;line-height:0}
.ao-zdjecie{
  width:76px;height:76px;object-fit:cover;display:block;
  border:1px solid var(--ao-kresa);
  transition:transform 200ms ease,border-color 200ms ease;
}
.ao-zdjecia a:hover .ao-zdjecie{transform:scale(1.04);border-color:var(--ao-akcent)}
.ao-wiecej{
  width:76px;height:76px;display:grid;place-items:center;
  border:1px dashed var(--ao-kresa);color:var(--ao-cichy);
  font-family:var(--ao-mono);font-size:.9rem;
}
.ao-zdjecia__etykieta{
  font-family:var(--ao-mono);font-size:.6875rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ao-akcent);margin:-.35rem 0 0;
}

.ao-tresc{
  margin:0;font-size:1.0625rem;line-height:1.6;
  border-left:2px solid var(--ao-kresa);padding-left:1.1rem;
  text-wrap:pretty;
}

.ao-stopka{
  display:flex;flex-wrap:wrap;gap:.35rem .9rem;align-items:baseline;
  margin-top:auto;padding-top:.5rem;
}
.ao-autor{font-weight:600}
.ao-kiedy,.ao-zrodlo{
  font-family:var(--ao-mono);font-size:.75rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ao-cichy);
}
.ao-zrodlo{text-decoration:none;border-bottom:1px solid var(--ao-kresa)}
.ao-zrodlo:hover{color:var(--ao-akcent);border-color:var(--ao-akcent)}

@media (max-width:520px){
  .ao-srednia__l{font-size:2.8rem}
  .ao-zdjecie,.ao-wiecej{width:64px;height:64px}
}