/*
 * Зелёный трёхочковый — front-end block.
 *
 * Layout follows the width of the block itself (container queries), so it behaves
 * the same inside an Elementor section and in the admin preview:
 *   wide     >= 1208px content (reference layout, two counters in a row)
 *   compact  688–1207px (two centered columns)
 *   mobile   < 688px (single centered column)
 * Every inner rule is scoped under .ugt to outrank Elementor Kit typography (.elementor-kit-N h2).
 * Type follows the site: Source Sans Pro for headings and text, Fira Sans Condensed for
 * interface labels and the split-flap digits (both are already loaded by the theme).
 * Spacing follows an 8px scale.
 */

.ugt {
	--ugt-ink: #1f1b20;
	--ugt-text: #4a4a4a;
	--ugt-muted: #727272;
	--ugt-sage: #5f7454;
	--ugt-sage-soft: #8a9b7e;
	--ugt-digit: #1e3a20;
	--ugt-line: #e2e3df;
	--ugt-divider: #cfcfcb;
	--ugt-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
	--ugt-ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);

	position: relative;
	overflow: hidden;
	container-type: inline-size;
	padding: 64px 16px;
	background: #eeeeec;
	color: var(--ugt-ink);
	font-family: "Source Sans Pro", -apple-system, "Segoe UI", Roboto, sans-serif;
	text-align: left;
}

/*
 * .ugt is a size container, so its intrinsic inline size is zero. Elementor's flex
 * containers then measure the widget at the wrong width and reserve extra height.
 * A definite width on the wrapping widget fixes the measurement.
 */
.elementor-widget:has(> .elementor-widget-container > .elementor-shortcode > .ugt) {
	width: 100%;
}

.ugt *,
.ugt *::before,
.ugt *::after {
	box-sizing: border-box;
}

.ugt .ugt__inner {
	--ugt-tile-w: 56px;
	--ugt-tile-h: 80px;
	--ugt-tile-fs: 54px;

	position: relative;
	z-index: 1;
	max-width: 1200px;
	margin: 0 auto;
}

.ugt .ugt__sr {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* ---------- decor ----------
 * Brush strokes and leaves sit under the content (.ugt__inner has z-index 1) and the opaque
 * card hides whatever slides under it, so the decor only shows in free areas: corners,
 * the empty sides of the header and the padding below the card. Positions are set per
 * block width so it never covers text.
 */

.ugt .ugt__decor {
	position: absolute;
	inset: 0;
	z-index: 0;
	color: var(--ugt-sage-soft);
	pointer-events: none;
}

.ugt .ugt__stroke {
	position: absolute;
	opacity: 0.75;
	clip-path: inset(0 100% 0 0);
	transition: clip-path 900ms var(--ugt-ease-out);
}

.ugt .ugt__stroke--r { transform: scaleX(-1); }

.ugt.is-in .ugt__stroke,
.ugt:not(.ugt--js) .ugt__stroke { clip-path: inset(0 0 0 0); }
.ugt.is-in .ugt__stroke--r { transition-delay: 150ms; }

.ugt .ugt__leaf {
	position: absolute;
	transform-origin: 50% 100%;
	animation: ugt-sway 7s var(--ugt-ease-in-out) infinite alternate;
}

.ugt .ugt__leaf--r { animation-delay: -3s; }

@keyframes ugt-sway {
	from { transform: rotate(-3deg); }
	to { transform: rotate(3deg); }
}

/* Mobile: small strokes cut by the screen edges, leaves in free corners. */
.ugt .ugt__stroke--l { top: -18px; left: -28px; width: 70px; }
.ugt .ugt__stroke--r { right: -30px; bottom: -26px; width: 110px; }
.ugt .ugt__leaf--l { bottom: 6px; left: 14px; width: 28px; }
.ugt .ugt__leaf--r { top: 12px; right: 14px; width: 26px; }

/* Narrow phones: the title spans almost the full width, keep the top corners small. */
@container (max-width: 419px) {
	.ugt .ugt__stroke--l { top: -30px; width: 54px; }
	.ugt .ugt__leaf--r { top: 6px; right: 10px; width: 22px; }
}

/* Tablet: beside the centered header and in the bottom corners. */
@container (min-width: 688px) {
	.ugt .ugt__stroke--l { top: -10px; left: -30px; width: 120px; }
	.ugt .ugt__stroke--r { right: -30px; bottom: -30px; width: 150px; }
	.ugt .ugt__leaf--l { bottom: 10px; left: 28px; width: 40px; }
	.ugt .ugt__leaf--r { top: 28px; right: 32px; width: 42px; }
}

/* Wide, narrow gutters: the empty left part of the header and the padding below the card. */
@container (min-width: 1208px) {
	.ugt .ugt__stroke--l { top: 12px; left: -24px; width: 150px; }
	.ugt .ugt__stroke--r { right: -24px; bottom: 8px; width: 150px; }
	.ugt .ugt__leaf--l { top: 40px; bottom: auto; left: 170px; width: 52px; }
	.ugt .ugt__leaf--r { top: auto; right: 48px; bottom: 6px; width: 44px; }
}

/* Wide, full gutters next to the 1200px content. */
@container (min-width: 1488px) {
	.ugt .ugt__stroke--l { top: 24px; left: -24px; width: 150px; }
	.ugt .ugt__leaf--l { top: 56%; bottom: auto; left: calc((100% - 1200px) / 4 - 36px); width: 72px; }
	.ugt .ugt__leaf--r { top: 18%; right: calc((100% - 1200px) / 4 - 36px); bottom: auto; width: 72px; }
}

/* ---------- head ---------- */

.ugt .ugt__head {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	margin: 0 0 32px;
	text-align: center;
}

.ugt .ugt__titles { max-width: 560px; }

.ugt .ugt__title {
	margin: 0 0 8px;
	padding: 0;
	color: var(--ugt-ink);
	font: 700 36px/1.1 "Source Sans Pro", sans-serif;
	letter-spacing: normal;
	text-transform: uppercase;
}

.ugt .ugt__lead {
	margin: 0 0 8px;
	color: var(--ugt-text);
	font: 600 19px/1.35 "Source Sans Pro", sans-serif;
	text-wrap: balance;
}

.ugt .ugt__sub {
	margin: 0;
	color: var(--ugt-muted);
	font: 400 16px/1.45 "Source Sans Pro", sans-serif;
	text-wrap: balance;
}

.ugt .ugt__brands {
	display: flex;
	align-items: center;
	gap: 14px;
}

.ugt .ugt__brands img {
	display: block;
	width: auto;
	max-width: none;
	height: 24px;
	margin: 0;
	border: 0;
	box-shadow: none;
}

.ugt .ugt__brands .ugt__ural {
	height: 26px;
	filter: brightness(0);
	opacity: 0.9;
}

.ugt .ugt__x {
	color: var(--ugt-ink);
	font-size: 18px;
	line-height: 1;
}

/* ---------- card ---------- */

.ugt .ugt__card {
	padding: 32px 24px 24px;
	background: #f7f7f5;
	border-radius: 16px;
	box-shadow: 0 1px 2px rgba(31, 27, 32, 0.05), 0 12px 32px rgba(31, 27, 32, 0.06);
}

.ugt .ugt__stats {
	display: grid;
	grid-template-columns: 1fr 1fr;
}

.ugt .ugt__stat {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	min-width: 0;
	padding: 0 24px;
}

.ugt .ugt__stat + .ugt__stat { border-left: 2px solid var(--ugt-divider); }

.ugt .ugt__stat-head {
	display: flex;
	align-items: center;
	gap: 16px;
}

.ugt .ugt__icon {
	display: block;
	flex: none;
	width: 56px;
	height: 56px;
	color: var(--ugt-sage);
}

.ugt .ugt__icon svg {
	display: block;
	width: 100%;
	height: 100%;
}

.ugt .ugt__label {
	color: var(--ugt-text);
	font: 600 18px/1.2 "Fira Sans Condensed", sans-serif;
	text-align: left;
	text-transform: uppercase;
}

.ugt .ugt__label small {
	display: block;
	margin-top: 8px;
	color: var(--ugt-muted);
	font: 400 14px/1.2 "Source Sans Pro", sans-serif;
	white-space: nowrap;
}

.ugt .ugt__stat-value {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
}

.ugt .ugt__unit {
	color: var(--ugt-text);
	font: 600 17px/1 "Fira Sans Condensed", sans-serif;
	white-space: nowrap;
}

.ugt .ugt__unit--caps { text-transform: uppercase; }

.ugt .ugt__nb { white-space: nowrap; }

.ugt sub {
	font-size: 0.7em;
	line-height: 0;
	vertical-align: -0.25em;
}

/* ---------- split-flap display ----------
 * A tile is a case with hinge pins and a bottom tab. Two static halves show the digit;
 * during a flip front.js adds two moving halves (flaps) that rotate around the split line.
 */

.ugt .ugt__tiles {
	display: flex;
	gap: 8px;
}

.ugt .ugt__tile {
	position: relative;
	display: block;
	width: var(--ugt-tile-w);
	height: var(--ugt-tile-h);
	border: 1px solid rgba(31, 27, 32, 0.05);
	border-radius: 7px;
	background: #e9e9e7;
	box-shadow: 0 1px 1px rgba(31, 27, 32, 0.08), 0 4px 10px rgba(31, 27, 32, 0.07);
	perspective: calc(var(--ugt-tile-h) * 4);
}

/* Hinge pins: half outside the case on both sides, at the split line. */
.ugt .ugt__tile::before {
	content: "";
	position: absolute;
	top: 50%;
	left: -4px;
	right: -4px;
	z-index: 3;
	height: 12px;
	margin-top: -6px;
	background:
		radial-gradient(ellipse 4px 6px at 0 50%, #b9bbb6 0 92%, transparent 100%) left center / 8px 12px no-repeat,
		radial-gradient(ellipse 4px 6px at 100% 50%, #b9bbb6 0 92%, transparent 100%) right center / 8px 12px no-repeat;
	pointer-events: none;
}

/* Bottom tab of the lower flap. */
.ugt .ugt__tile::after {
	content: "";
	position: absolute;
	bottom: -1px;
	left: 50%;
	z-index: 3;
	width: 12px;
	height: 3px;
	margin-left: -6px;
	border-radius: 2px 2px 0 0;
	background: #d3d4d0;
}

.ugt .ugt__half {
	position: absolute;
	right: 0;
	left: 0;
	display: block;
	height: 50%;
	overflow: hidden;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
}

/* Upper flap: lighter, shadowed lower edge (the split line). */
.ugt .ugt__half--top {
	top: 0;
	border-radius: 6px 6px 0 0;
	background: linear-gradient(180deg, #f3f3f1, #ebebe9);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), inset 0 -1px 0 rgba(31, 27, 32, 0.14);
	transform-origin: 50% 100%;
}

/* Lower flap: darker, highlight just under the split line. */
.ugt .ugt__half--bottom {
	bottom: 0;
	border-radius: 0 0 6px 6px;
	background: linear-gradient(180deg, #e7e7e5, #efefed);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85);
	transform-origin: 50% 0;
}

.ugt .ugt__half--flap {
	z-index: 2;
	will-change: transform;
}

.ugt .ugt__digit {
	position: absolute;
	right: 0;
	left: 0;
	display: grid;
	place-items: center;
	height: 200%;
	color: var(--ugt-digit);
	font: 700 var(--ugt-tile-fs)/1 "Fira Sans Condensed", sans-serif;
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.01em;
}

.ugt .ugt__half--top .ugt__digit { top: 0; }
.ugt .ugt__half--bottom .ugt__digit { bottom: 0; }

/* Darkens a flap while it is turned away from the light. */
.ugt .ugt__shade {
	position: absolute;
	inset: 0;
	display: block;
	background: #1f1b20;
	opacity: 0;
	pointer-events: none;
}

/* ---------- formula ---------- */

.ugt .ugt__explain {
	margin-top: 24px;
	padding-top: 24px;
	border-top: 1px solid var(--ugt-line);
	text-align: center;
}

.ugt .ugt__formula {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: center;
	gap: 4px 16px;
	margin: 0 0 8px;
	color: var(--ugt-text);
	font: 600 18px/1.3 "Fira Sans Condensed", sans-serif;
}

.ugt .ugt__formula b {
	margin-right: 4px;
	color: var(--ugt-digit);
	font-size: 22px;
	font-weight: 700;
}

.ugt .ugt__eq {
	color: var(--ugt-sage-soft);
	font-size: 22px;
	font-weight: 400;
}

.ugt .ugt__def {
	max-width: 720px;
	margin: 0 auto;
	color: var(--ugt-muted);
	font: 400 14.5px/1.5 "Source Sans Pro", sans-serif;
	text-wrap: balance;
}

/* ---------- entrance (only when JS is running) ---------- */

.ugt.ugt--js .ugt__reveal {
	opacity: 0;
	transform: translateY(12px);
	transition: opacity 500ms var(--ugt-ease-out), transform 500ms var(--ugt-ease-out);
}

.ugt.ugt--js.is-in .ugt__reveal {
	opacity: 1;
	transform: none;
}

.ugt.is-in .ugt__brands.ugt__reveal { transition-delay: 80ms; }
.ugt.is-in .ugt__card.ugt__reveal { transition-delay: 160ms; }

/* ---------- wide ---------- */

@container (min-width: 1208px) {
	.ugt .ugt__inner {
		--ugt-tile-w: 60px;
		--ugt-tile-h: 88px;
		--ugt-tile-fs: 58px;
	}

	.ugt[data-digits="4"] .ugt__inner,
	.ugt[data-digits="5"] .ugt__inner {
		--ugt-tile-w: 46px;
		--ugt-tile-h: 70px;
		--ugt-tile-fs: 46px;
	}

	.ugt .ugt__head {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
		gap: 24px;
	}

	.ugt .ugt__titles { grid-column: 2; }

	.ugt .ugt__brands {
		grid-column: 3;
		justify-self: end;
		padding-left: 24px;
		border-left: 1px solid var(--ugt-divider);
	}

	.ugt .ugt__stat {
		flex-direction: row;
		justify-content: space-between;
		gap: 16px;
		padding: 0 16px;
	}

	.ugt .ugt__stat-head {
		flex: none;
		gap: 12px;
	}

	.ugt .ugt__icon {
		width: 64px;
		height: 64px;
	}

	.ugt .ugt__stat-value {
		flex-direction: row;
		align-items: flex-end;
		gap: 12px;
	}

	/* Equal unit width keeps the digits at the same x in both columns. */
	.ugt .ugt__unit {
		width: 72px;
		padding-bottom: 12px;
	}
}

/* ---------- mobile ---------- */

@container (max-width: 687px) {
	.ugt .ugt__inner {
		--ugt-tile-w: 52px;
		--ugt-tile-h: 74px;
		--ugt-tile-fs: 50px;
	}

	.ugt .ugt__head { margin-bottom: 24px; }
	.ugt .ugt__title { font-size: 28px; }
	.ugt .ugt__lead { font-size: 16px; }
	.ugt .ugt__sub { font-size: 14px; }

	.ugt .ugt__card {
		padding: 24px 16px;
		border-radius: 14px;
	}

	.ugt .ugt__stats { grid-template-columns: 1fr; }
	.ugt .ugt__stat { padding: 0; }

	.ugt .ugt__stat + .ugt__stat {
		margin-top: 24px;
		padding-top: 24px;
		border-top: 1px solid var(--ugt-line);
		border-left: 0;
	}

	.ugt .ugt__icon {
		width: 48px;
		height: 48px;
	}

	.ugt .ugt__label { font-size: 16px; }
	.ugt .ugt__unit { font-size: 15px; }

	.ugt .ugt__formula {
		flex-direction: column;
		align-items: center;
		gap: 0;
		font-size: 16px;
	}

	.ugt .ugt__formula b { font-size: 20px; }

	.ugt .ugt__eq {
		font-size: 18px;
		line-height: 1.2;
	}
}

@container (max-width: 347px) {
	.ugt .ugt__inner {
		--ugt-tile-w: 44px;
		--ugt-tile-h: 64px;
		--ugt-tile-fs: 42px;
	}
}

@media (max-width: 719px) {
	.ugt { padding: 48px 16px; }
}

/* ---------- reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
	.ugt .ugt__stroke { transition: none; }

	.ugt .ugt__leaf { animation: none; }

	.ugt.ugt--js .ugt__reveal {
		transform: none;
		transition: opacity 300ms ease;
	}
}