/*
  Showy Hair — plakietka opinii z Booksy (strona główna + podgląd w zapleczu, jako /zaplecze/opinia.css).
  Znaczniki buduje js/opinia.js (ShowyOpinie.karta). Wzór: pionowa plakietka z Booksy, 2:3 z zaokrąglonymi
  rogami (projekt z Canvy), zdjęcie w tle, u góry kto i za co ocenia, duży cytat, logo booksy na dole po prawej,
  w naszym stylu: Montserrat, paleta achromatyczna, bez cieni.

  Plik samodzielny: zaplecze NIE ładuje showy.css i ma własne --ink/--line, dlatego kolory są tu wpisane
  na stałe (plakietka ma wyglądać wszędzie tak samo), a fonty biorą zmienną strony z wartością zapasową.
  Wszystkie selektory zaczynają się od .opinia — nic nie wycieka do zaplecza.

  Szerokość ustala kontekst (landing: taśma, zaplecze: ~170 px). W środku wszystko jest w cqi
  (1cqi = 1% szerokości plakietki), więc mała plakietka w zapleczu łamie tekst tak samo jak ta na stronie.
  Wartość w px przed każdą cqi to zapas dla przeglądarek bez jednostek kontenera (liczona dla ~300 px).
*/

/* Domyślne ustawienia w :where() — zerowa waga, każda reguła kontekstu (choćby samo .opinia) je nadpisze. */
:where(.opinia) {
  width: 300px; max-width: 100%;
  align-self: start;            /* rozciągnięta w wierszu flex/grid straciłaby proporcje 2:3 */
}

.opinia {
  position: relative; isolation: isolate; overflow: hidden;
  box-sizing: border-box; display: flex; flex-direction: column;
  aspect-ratio: 2 / 3; min-height: 0;
  container-type: inline-size;
  /* 6% szerokości / 4% wysokości = okrągły róg przy 2:3 (cqi nie działa na samym kontenerze) */
  margin: 0; padding: 0; border: 0; border-radius: 6% / 4%;
  background: #141414; color: #FFFFFF;
  font-family: var(--sans, "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif);
  font-weight: 300; font-style: normal; text-align: left;
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
}
.opinia *, .opinia *::before, .opinia *::after { box-sizing: border-box; }

/* zdjęcie w kolorze (jak na reszcie strony), kadrowane do plakietki */
.opinia .opinia__tlo {
  position: absolute; inset: 0; z-index: -2;
  display: block; width: 100%; height: 100%; max-width: none;
  object-fit: cover; object-position: 50% 50%;
}
/* Ciemny gradient nad zdjęciem: mocniej przy nagłówku i logo, w środku tyle, żeby duży biały cytat
   miał kontrast ≥ 4,5:1 nawet na białym zdjęciu, a kolory zdjęcia wciąż były widać. */
.opinia:not(.opinia--bez-zdjecia)::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg,
    rgba(10, 10, 10, 0.86) 0%, rgba(10, 10, 10, 0.64) 24%,
    rgba(10, 10, 10, 0.60) 50%, rgba(10, 10, 10, 0.66) 76%, rgba(10, 10, 10, 0.88) 100%);
}

/* --- nagłówek: „Katarzyna R. ocenia Showy Hair na ★★★★★ za Odbudowa molekularna” ------------- */

.opinia .opinia__naglowek {
  flex: none; margin: 0 0 18px; margin: 0 0 6cqi; padding: 24px 24px 0; padding: 8cqi 8cqi 0;
  font-size: 12.5px; font-size: 4.2cqi; font-weight: 300; line-height: 1.5; letter-spacing: 0.01em;
  color: rgba(255, 255, 255, 0.84); text-wrap: pretty; overflow-wrap: break-word;
}
.opinia .opinia__kto, .opinia .opinia__usluga { font-weight: 500; color: #FFFFFF; }
.opinia .opinia__gwiazdki { color: #FFFFFF; letter-spacing: 0.12em; white-space: nowrap; }

/* --- cytat: wyśrodkowany w pionie między nagłówkiem a stopką, przycięty z „…” ---------------------- */

/* Liczby wierszy dobrane tak, żeby cytat zmieścił się pod nagłówkiem nawet w 4 wierszach; gdyby
   i tak zabrakło miejsca, cytat się kurczy (flex) i overflow go przycina — nigdy nie wychodzi poza kartę.
   Rozmiary pod Montserrat: ok. 0,77 dawnych (Cormorant jest węższy) — mieści się tyle samo tekstu co wcześniej. */
.opinia .opinia__cytat {
  flex: 0 1 auto; min-height: 0; margin: auto 0; padding: 0 24px; padding: 0 8cqi;
  font-family: var(--serif, "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif);
  font-weight: 500; font-style: normal; color: #FFFFFF;
  quotes: none; overflow-wrap: break-word; text-wrap: pretty;
  display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden;
}
.opinia.opinia--s .opinia__cytat  { font-size: 22px; font-size: 7.4cqi; line-height: 1.14; -webkit-line-clamp: 9;  line-clamp: 9; }
.opinia.opinia--m .opinia__cytat  { font-size: 18px; font-size: 6.1cqi; line-height: 1.18; -webkit-line-clamp: 11; line-clamp: 11; }
.opinia.opinia--l .opinia__cytat  { font-size: 15px; font-size: 5.1cqi; line-height: 1.24; -webkit-line-clamp: 13; line-clamp: 13; }
.opinia.opinia--xl .opinia__cytat { font-size: 13px; font-size: 4.3cqi; line-height: 1.28; -webkit-line-clamp: 15; line-clamp: 15; }

/* --- stopka: samo białe logo booksy, na dole po prawej --------------------------------------------- */

.opinia .opinia__stopka {
  flex: none; display: flex; justify-content: flex-end; align-items: flex-end;
  margin: 18px 0 0; margin: 6cqi 0 0; padding: 0 24px 21px; padding: 0 8cqi 7cqi;
}
.opinia .opinia__booksy { display: block; width: 66px; width: 22cqi; color: #FFFFFF; line-height: 0; }
.opinia .opinia__booksy svg { display: block; width: 100%; height: auto; aspect-ratio: 70 / 16; }