/* ===== Opinie: JEDEN komponent dla home i karty produktu (od 18.09; wczesniej kopia w front.css) ===== */
/* Figma 84:170: naglowek-manifest nad pasem (tokeny.css .mw-manifesto), pas kart na ecru z peekiem, bez strzalek: */
/* peek, chwyt (track-drag.js) i wolna tasma (reviews.js). Tomek 15.09 i 18.09. */
/* Scope .mw-widok na tagach z resetem (ul, p, a, button, h2): (0,2,0) bije reset (0,1,1). */

.mw-reviews {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--mw-s4);
	background: var(--mw-paper);
	/* hidden, nie clip: przy clip karty spoza ekranu doliczaly sie do szerokosci dokumentu */
	overflow: hidden;
}

/* pas kart na cala szerokosc, gutter w paddingu listy: karty urywaja sie na krawedzi okna (peek) */
.mw-widok .mw-reviews__list {
	display: flex;
	gap: var(--mw-tile-gap);
	/* zapas na cien: overflow-x auto wymusza overflow-y i przycinalby cien */
	padding-block: var(--mw-s3);
	padding-inline: var(--mw-page-pad);
	scroll-padding-inline: var(--mw-page-pad);
	min-inline-size: 0;
	/* gest poziomy na krancu pasa cofal strone w historii (Mac, dwa palce) */
	overscroll-behavior-x: contain;
}

/* karta biala (Tomek 30.09, wczesniej ecru z 01.09), trzyma ja cien jak reszte kadrow */
.mw-reviews__item {
	flex: 0 0 78%; /* desktop: auto w bloku >= 900 */
	scroll-snap-align: start;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	grid-template-rows: 1fr auto auto auto auto;
	grid-template-areas: "quote quote" "author stars" "product product" "stamp stamp" "reply reply";
	column-gap: var(--mw-s2);
	padding: var(--mw-s4);
	/* ramka, tlo, cien: utility „karta biala” w tokeny.css */
}
.mw-reviews__item:last-child {
	scroll-snap-align: end;
}

/* od 900: jedna wysokosc, szerokosc od dlugosci tekstu (klasa --s/--m/--l z szablonu); tasma plynie, snap by ja szarpal */
@media (width >= 900px) { /* bp:desktop */
	.mw-widok .mw-reviews__list {
		scroll-snap-type: none;
	}
	/* min-content = najdluzsza nielamliwa linia (nazwa produktu); cytat lamie sie do tej szerokosci (Tomek 17.09) */
	.mw-widok .mw-reviews__item {
		flex: 0 0 auto;
		inline-size: min-content;
	}
	.mw-widok .mw-reviews__item--s { min-inline-size: 18rem; }
	.mw-widok .mw-reviews__item--m { min-inline-size: 24rem; }
	.mw-widok .mw-reviews__item--l { min-inline-size: 28rem; }
	.mw-widok .mw-reviews__product {
		white-space: nowrap;
	}
}

/* gwiazdki: maska SVG, wypelnienie procentem z --mw-rating (ta sama technika co przy tytule karty) */
.mw-reviews__stars {
	--mw-rating: 0%;
	display: inline-block;
	inline-size: 80px;
	block-size: 14px;
	background: linear-gradient(90deg, var(--mw-ink) var(--mw-rating), var(--mw-line-2) var(--mw-rating));
	-webkit-mask: repeat-x left center / 16px 14px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l3 6.9 7.5.6-5.7 4.9 1.8 7.3L12 17.8 5.1 21.7l1.8-7.3L1.2 9.5l7.5-.6z'/%3E%3C/svg%3E");
	mask: repeat-x left center / 16px 14px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l3 6.9 7.5.6-5.7 4.9 1.8 7.3L12 17.8 5.1 21.7l1.8-7.3L1.2 9.5l7.5-.6z'/%3E%3C/svg%3E");
}
/* gwiazdki w rzedzie z autorem, po prawej; reszta podpisu pod spodem na calej szerokosci */
.mw-reviews__item > .mw-reviews__stars {
	grid-area: stars;
	align-self: start;
	margin-block: .3rem 0;
}

/* cytat: cudzyslow wysuniety przed kolumne tekstu; 16 (Tomek 01.10, bylo 18), lzejszy kolorem, nie waga */
.mw-reviews__quote {
	position: relative;
	margin: 0;
	color: var(--mw-ink-3);
	font-size: var(--mw-fs-base);
	line-height: var(--mw-lh-snug);
}
.mw-reviews__quote::before {
	content: "\201E";
	position: absolute;
	inset-inline-start: -.55em;
}
/* zamykajacy cudzyslow przy tekscie, nie przy cytacie: „Przeczytaj calosc" stoi po nim */
.mw-reviews__text::after {
	content: "\201D";
}
/* dluga opinia: 5 linii na kazdej szerokosci, home i karta (Tomek 09.10), „Przeczytaj calosc" na koncu ostatniej; reviews.js chowa przycisk, gdy nic nie jest uciete. clip-path zamiast overflow: wiszacy „ zostaje widoczny */
.mw-widok .mw-reviews__item:not(.is-open) .mw-reviews__quote {
	max-block-size: 5lh;
	clip-path: inset(0 0 0 -1em);
}
.mw-widok .mw-reviews__item:not(.is-open) .mw-reviews__more {
	position: absolute;
	inset-inline-end: 0;
	inset-block-end: 0;
	margin: 0;
	padding-inline-start: 2.5em;
	background: linear-gradient(90deg, transparent, var(--mw-paper) 2em);
}
.mw-widok .mw-reviews__item:not(.is-open) .mw-reviews__more::before {
	content: "… ";
	display: inline-block;
}
.mw-widok .mw-reviews__more {
	margin-inline-start: .25em;
	padding: 0;
	font: inherit;
	color: var(--mw-ink-3);
	text-decoration: underline;
}
.mw-widok .mw-reviews__more:hover {
	color: var(--mw-ink);
}

/* odpowiedz sklepu: akordeon z tokeny.css na szarym tle, zwinieta (MW-43) */
.mw-widok .mw-reviews__reply {
	border-bottom: 0;
	padding-inline: var(--mw-s3);
	background: var(--mw-surface-2);
	font-size: var(--mw-fs-base);
	line-height: var(--mw-lh-snug);
}
.mw-widok .mw-reviews__reply[open] {
	padding-block-end: var(--mw-s3);
}
.mw-widok .mw-reviews__reply .mw-reviews__date {
	margin-block-start: var(--mw-s2);
}

/* podpis przy dolnej krawedzi karty (wiersz cytatu 1fr); dzieci meta leza w siatce karty */
.mw-reviews__meta {
	display: contents;
}
.mw-widok .mw-reviews__quote { grid-area: quote; margin-block-end: var(--mw-s4); }
.mw-widok .mw-reviews__author { grid-area: author; margin: 0; }
.mw-widok .mw-reviews__product { grid-area: product; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* ostatni wiersz: „Zweryfikowany zakup” z lewej (jasniej, kontrast ~4,9:1), data przy prawej krawedzi */
.mw-widok .mw-reviews__stamp { grid-area: stamp; margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; column-gap: var(--mw-s2); }
.mw-widok .mw-reviews__stamp :is(.mw-reviews__date, .mw-reviews__verified) { display: inline; }
.mw-widok .mw-reviews__stamp .mw-reviews__date { margin-inline-start: auto; }
.mw-widok .mw-reviews__stamp .mw-reviews__verified { font-size: var(--mw-fs-xs); color: color-mix(in srgb, var(--mw-ink-3) 85%, var(--mw-paper)); }
.mw-widok .mw-reviews__reply { grid-area: reply; margin-block-start: var(--mw-s4); }
/* tekst czytany: min. 15, xs jest tylko dla wersalikow (zadanie 123) */
.mw-widok .mw-reviews__product,
.mw-widok .mw-reviews__date,
.mw-widok .mw-reviews__verified {
	display: block;
	font-size: var(--mw-fs-sm);
	color: var(--mw-ink-3);
	text-decoration: none;
}
.mw-widok .mw-reviews__product {
	font-size: var(--mw-fs-xs);
}
.mw-widok .mw-reviews__product:is(:hover, :focus-visible) {
	text-decoration: underline;
}
/* telefon: karta 78% pasa (baza, jak kadr kolekcji na home, Tomek 14.09), gest konczy sie na calej karcie */
@media (width < 900px) { /* bp:desktop */
	.mw-widok .mw-reviews__list {
		column-gap: var(--mw-s3);
		scroll-snap-type: x mandatory;
	}
	/* jeden gest = jedna karta: iOS z rozpedem przeskakiwal karty (Tomek 30.09) */
	.mw-reviews__item {
		scroll-snap-stop: always;
	}
	/* klony tasmy z desktopu po zwezeniu okna (reviews.js daje im inert) */
	.mw-widok .mw-reviews__item[inert] {
		display: none;
	}
}

@media (width >= 900px) and (hover: hover) { /* bp:desktop */
	.mw-widok .mw-reviews__list {
		cursor: grab;
	}
	.mw-widok .mw-reviews__list.is-drag {
		cursor: grabbing;
		user-select: none;
	}
}