/**
 * Storefront — Testimonial Summary widget.
 *
 * Nilai ditranskrip dari `stfr-testimonial-summary-design.html`. Reset
 * pakai `.stfr-sum *` (bukan daftar tag+class) — pelajaran standar di
 * plugin ini: selector class+tag lebih spesifik dari 1-class komponen,
 * jadi reset model itu selalu menang terlepas urutan di file.
 */

.stfr-sum {
	--stfr-sum-p-d: var( --p-d, #1D3B32 );
	--stfr-sum-a: var( --a, #D4B038 );
	--stfr-sum-n7: var( --n7, #4A5550 );
	--stfr-sum-n5: var( --n5, #8A9490 );
	--stfr-sum-n2: var( --n2, #D8DEDB );
	--stfr-sum-n1: var( --n1, #F4F6F5 );

	container-type: inline-size;
	width: 100%;
	font-family: 'Inter Tight', system-ui, sans-serif;
	font-weight: 400;
	color: var( --stfr-sum-n7 );
	line-height: 1.6;
}

.stfr-sum * {
	box-sizing: border-box;
}

.stfr-sum-in {
	display: grid;
	grid-template-columns: auto minmax( 0, 1fr );
	column-gap: 40px;
	row-gap: 28px;
	align-items: center;
}

.stfr-sum--top .stfr-sum-in {
	grid-template-columns: 1fr;
	row-gap: 20px;
}

.stfr-sum-avg {
	text-align: center;
}

.stfr-sum--avg-left .stfr-sum-avg {
	text-align: left;
}

.stfr-sum-avg b {
	display: block;
	font-family: 'Gilda Display', serif;
	font-weight: 400;
	font-size: 56px;
	line-height: 1;
	color: var( --stfr-sum-p-d );
}

.stfr-sum-st {
	color: var( --stfr-sum-a );
	letter-spacing: 3px;
	font-size: 16px;
	margin-top: 6px;
	line-height: 1.3;
}

.stfr-sum-st i {
	font-style: normal;
	opacity: .28;
}

.stfr-sum-avg small {
	display: block;
	color: var( --stfr-sum-n5 );
	font-size: 13px;
	margin-top: 2px;
}

.stfr-sum-bars {
	display: grid;
	gap: 7px;
	min-width: 0;
}

.stfr-sum-row {
	display: grid;
	grid-template-columns: 34px minmax( 0, 1fr ) 28px;
	gap: 10px;
	align-items: center;
	font-size: 13px;
	color: var( --stfr-sum-n7 );
}

.stfr-sum-bar {
	display: block;
	height: 7px;
	border-radius: 99px;
	background: var( --stfr-sum-n1 );
	overflow: hidden;
}

.stfr-sum-bar u {
	display: block;
	height: 100%;
	width: 0;
	background: var( --stfr-sum-a );
	border-radius: 99px;
	text-decoration: none;
	transition: width .8s cubic-bezier( .22, .8, .24, 1 );
}

.stfr-sum-row .c {
	text-align: right;
	color: var( --stfr-sum-n5 );
}

.stfr-sum .sr {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect( 0 0 0 0 );
	white-space: nowrap;
}

@container ( max-width: 420px ) {
	.stfr-sum-in {
		grid-template-columns: 1fr;
		row-gap: 20px;
	}
}

/* Fallback browser tanpa container query (spec §2.4). */
@media ( max-width: 480px ) {
	.stfr-sum-in {
		grid-template-columns: 1fr;
		row-gap: 20px;
	}
}

/* Varian "Tampilkan kartu" (opsional, default OFF). */
.stfr-sum.card {
	background: #fff;
	border: 1px solid var( --stfr-sum-n2 );
	border-radius: 22px;
	padding: 24px 32px;
}

@media ( prefers-reduced-motion: reduce ) {
	.stfr-sum-bar u {
		transition: none;
	}
}