/* ==========================================================================
   Automora Counter - icon chip + count-up number + label
   Defaults = Figma stat "98% Client Satisfactions" (home1 3:239 / about 6:5344).
   ========================================================================== */

.am-counter {
	--am-ctr-icon: 22.5px; --am-ctr-chip: 60px; --am-ctr-icon-gap: 21px; --am-ctr-label-gap: 15px;
	--am-ctr-align: flex-start; --am-ctr-text: left;
	display: flex; flex-direction: column; align-items: var(--am-ctr-align); gap: var(--am-ctr-icon-gap);
	text-align: var(--am-ctr-text); color: var(--am-w-text);
}
.am-counter--left { flex-direction: row; align-items: center; justify-content: var(--am-ctr-align); }
.am-counter--left .am-counter__body { align-items: flex-start; text-align: left; }

.am-counter__icon { display: inline-flex; flex: none; align-items: center; justify-content: center; color: var(--am-w-orange); line-height: 1; }
.am-counter__icon img, .am-counter__icon svg { display: block; width: var(--am-ctr-icon); height: var(--am-ctr-icon); object-fit: contain; }
.am-counter__icon i { font-size: var(--am-ctr-icon); }
.am-counter__icon--chip {
	width: var(--am-ctr-chip); height: var(--am-ctr-chip); border-radius: 50%;
	background-color: var(--am-w-bg, #120707); box-shadow: inset 0 4px 10px #574747;
}

.am-counter__body { display: flex; flex-direction: column; align-items: var(--am-ctr-align); gap: var(--am-ctr-label-gap); min-width: 0; }
.am-counter__number {
	margin: 0; font-family: var(--am-w-head); font-size: clamp(52px, 5.75vw, 82.5px); font-weight: 500; line-height: .9;
	letter-spacing: -0.06em; text-transform: capitalize; color: #F9F9F9;
	font-variant-numeric: tabular-nums; font-variation-settings: "wdth" 100; white-space: nowrap;
}
.am-counter__visual { display: inline-flex; align-items: baseline; }
.am-counter__label {
	margin: 0; font-family: var(--am-w-head); font-size: 18px; font-weight: 500; line-height: 1.3;
	letter-spacing: -0.05em; color: #605E5E; font-variation-settings: "wdth" 100;
}

/* Optional vertical divider in a row of stats (sits in the middle of the container gap). */
.am-counter-divider-yes { position: relative; }
.am-counter-divider-yes::after {
	content: ""; position: absolute; top: 50%; right: calc(var(--column-gap, 40px) / -2);
	width: 1px; height: min(130px, 100%); background: var(--am-ctr-divider, rgba(255, 255, 255, .1));
	transform: translateY(-50%); pointer-events: none;
}

@media (max-width: 767px) {
	.am-counter__label { font-size: 16px; }
	.am-counter-divider-yes::after { display: none; }
}
