/**
 * HLxHub — Mobile Performance Review
 *
 * File:
 * assets/css/single-mobile/review/performance-review.css
 *
 * Purpose:
 * Premium Performance & Speed review section.
 */


/* ================================================================
   ROOT
================================================================ */

.hlx-performance-review {
	--hlx-performance-text: #162743;
	--hlx-performance-muted: #667085;
	--hlx-performance-soft: #f6f8fb;
	--hlx-performance-border: rgba(22, 39, 67, 0.09);
	--hlx-performance-accent: #1769ff;
	--hlx-performance-accent-soft: rgba(23, 105, 255, 0.08);
	--hlx-performance-green: #20bf6b;
	--hlx-performance-orange: #ff8a00;

	position: relative;
	width: 100%;

	margin: 95px 0;
	padding: 1px 0;

	color: var(--hlx-performance-text);

	overflow: hidden;
}


/* ================================================================
   BACKGROUND GLOW
================================================================ */

.hlx-performance-review::before {
	content: "";

	position: absolute;

	width: 500px;
	height: 500px;

	top: 40px;
	right: -250px;

	background: radial-gradient(
		circle,
		rgba(23, 105, 255, 0.075) 0%,
		rgba(23, 105, 255, 0.025) 38%,
		transparent 72%
	);

	border-radius: 50%;

	pointer-events: none;
}


.hlx-performance-review::after {
	content: "";

	position: absolute;

	width: 360px;
	height: 360px;

	bottom: -180px;
	left: -170px;

	background: radial-gradient(
		circle,
		rgba(32, 191, 107, 0.055) 0%,
		transparent 70%
	);

	border-radius: 50%;

	pointer-events: none;
}


/* ================================================================
   CONTAINER
================================================================ */

.hlx-performance-review__container {
	position: relative;
	z-index: 1;

	width: min(1240px, calc(100% - 40px));

	margin: 0 auto;
}


/* ================================================================
   HEADER
================================================================ */

.hlx-performance-review__header {
	max-width: 850px;

	margin: 0 0 36px;
}


.hlx-performance-review__eyebrow {
	display: inline-flex;
	align-items: center;

	gap: 10px;

	margin: 0 0 14px;

	font-size: 12px;
	font-weight: 800;
	line-height: 1;

	letter-spacing: 0.14em;
	text-transform: uppercase;

	color: var(--hlx-performance-accent);
}


.hlx-performance-review__eyebrow-line {
	display: block;

	width: 30px;
	height: 2px;

	flex: 0 0 30px;

	background: var(--hlx-performance-accent);

	border-radius: 999px;
}


.hlx-performance-review__title {
	max-width: 850px;

	margin: 0 0 16px !important;
	padding: 0 !important;

	font-size: clamp(30px, 4vw, 48px);
	font-weight: 800;
	line-height: 1.1;

	letter-spacing: -0.035em;

	color: var(--hlx-performance-text);
}


.hlx-performance-review__intro {
	max-width: 780px;

	margin: 0 !important;
	padding: 0 !important;

	font-size: 16px;
	line-height: 1.8;

	color: var(--hlx-performance-muted);
}


/* ================================================================
   QUICK PERFORMANCE SPECS
================================================================ */

.hlx-performance-review__specs {
	display: grid;

	grid-template-columns: repeat(4, minmax(0, 1fr));

	gap: 14px;

	margin: 0 0 30px;
	padding: 0;
}


.hlx-performance-review__spec {
	display: flex;
	align-items: center;

	gap: 13px;

	min-width: 0;

	padding: 17px 18px;

	background: rgba(255, 255, 255, 0.82);

	border: 1px solid var(--hlx-performance-border);
	border-radius: 18px;

	box-shadow:
		0 10px 30px rgba(22, 39, 67, 0.045),
		inset 0 1px 0 rgba(255, 255, 255, 0.9);

	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);

	transition:
		transform 0.25s ease,
		box-shadow 0.25s ease,
		border-color 0.25s ease;
}


.hlx-performance-review__spec:hover {
	transform: translateY(-3px);

	border-color: rgba(23, 105, 255, 0.17);

	box-shadow:
		0 17px 36px rgba(22, 39, 67, 0.08),
		inset 0 1px 0 rgba(255, 255, 255, 0.95);
}


.hlx-performance-review__spec-icon {
	display: grid;
	place-items: center;

	flex: 0 0 42px;

	width: 42px;
	height: 42px;

	background: var(--hlx-performance-accent-soft);

	border-radius: 13px;
}


.hlx-performance-review__spec-icon svg {
	width: 21px;
	height: 21px;

	stroke: var(--hlx-performance-accent);
	stroke-width: 1.7;

	stroke-linecap: round;
	stroke-linejoin: round;
}


.hlx-performance-review__spec > div:last-child {
	min-width: 0;
}


.hlx-performance-review__spec-label {
	display: block;

	margin: 0 0 4px !important;
	padding: 0 !important;

	font-size: 11px;
	font-weight: 700;
	line-height: 1.2;

	letter-spacing: 0.06em;
	text-transform: uppercase;

	color: #8a94a6;
}


.hlx-performance-review__spec strong {
	display: block;

	margin: 0;
	padding: 0;

	font-size: 14px;
	font-weight: 750;
	line-height: 1.35;

	color: var(--hlx-performance-text);

	overflow-wrap: anywhere;
	word-break: break-word;
}


/* ================================================================
   MAIN GRID
================================================================ */

.hlx-performance-review__grid {
	display: grid;

	grid-template-columns:
		minmax(0, 1.5fr)
		minmax(300px, 0.8fr);

	gap: 28px;

	align-items: start;
}


/* ================================================================
   MAIN CONTENT
================================================================ */

.hlx-performance-review__content {
	min-width: 0;

	margin: 0;
	padding: 8px 0;
}


/* ================================================================
   PERFORMANCE ARTICLE
================================================================ */

.hlx-performance-review__article {
	position: relative;

	display: grid;

	grid-template-columns:
		48px
		minmax(0, 1fr);

	gap: 20px;

	margin: 0 0 34px;
	padding: 0 0 34px;
}


.hlx-performance-review__article:last-child {
	margin-bottom: 0;
	padding-bottom: 0;
}


.hlx-performance-review__article:not(:last-child)::after {
	content: "";

	position: absolute;

	left: 23px;
	top: 51px;
	bottom: 0;

	width: 1px;

	background: linear-gradient(
		to bottom,
		rgba(23, 105, 255, 0.20),
		rgba(23, 105, 255, 0.03)
	);
}


.hlx-performance-review__article-number {
	position: relative;
	z-index: 2;

	display: grid;
	place-items: center;

	width: 48px;
	height: 48px;

	background: #ffffff;

	border: 1px solid rgba(23, 105, 255, 0.15);
	border-radius: 15px;

	font-size: 12px;
	font-weight: 800;
	line-height: 1;

	color: var(--hlx-performance-accent);

	box-shadow:
		0 8px 22px rgba(23, 105, 255, 0.08);
}


.hlx-performance-review__article-body {
	min-width: 0;

	margin: 0;
	padding: 2px 0 0;
}


.hlx-performance-review__article-body h3 {
	margin: 0 0 9px !important;
	padding: 0 !important;

	font-size: 21px;
	font-weight: 800;
	line-height: 1.3;

	letter-spacing: -0.015em;

	color: var(--hlx-performance-text);
}


.hlx-performance-review__article-body p {
	margin: 0 !important;
	padding: 0 !important;

	font-size: 15px;
	line-height: 1.85;

	color: var(--hlx-performance-muted);
}


/* ================================================================
   SIDEBAR
================================================================ */

.hlx-performance-review__aside {
	min-width: 0;

	margin: 0;
	padding: 0;
}


/* ================================================================
   HIGHLIGHT CARD
================================================================ */

.hlx-performance-review__highlight-card {
	position: relative;

	margin: 0;
	padding: 26px;

	background:
		linear-gradient(
			145deg,
			rgba(255, 255, 255, 0.98),
			rgba(247, 250, 255, 0.92)
		);

	border: 1px solid rgba(23, 105, 255, 0.10);
	border-radius: 25px;

	box-shadow:
		0 22px 55px rgba(22, 39, 67, 0.09),
		0 4px 12px rgba(22, 39, 67, 0.035);

	overflow: hidden;
}


.hlx-performance-review__highlight-card::before {
	content: "";

	position: absolute;

	top: -100px;
	right: -90px;

	width: 230px;
	height: 230px;

	background: radial-gradient(
		circle,
		rgba(23, 105, 255, 0.12),
		transparent 70%
	);

	border-radius: 50%;

	pointer-events: none;
}


/* ================================================================
   HIGHLIGHT HEADER
================================================================ */

.hlx-performance-review__highlight-top {
	position: relative;
	z-index: 1;

	display: flex;
	align-items: center;

	gap: 14px;

	margin: 0;
	padding: 0 0 22px;

	border-bottom: 1px solid var(--hlx-performance-border);
}


.hlx-performance-review__highlight-icon {
	display: grid;
	place-items: center;

	flex: 0 0 48px;

	width: 48px;
	height: 48px;

	background: var(--hlx-performance-accent);

	border-radius: 15px;

	box-shadow:
		0 10px 24px rgba(23, 105, 255, 0.22);
}


.hlx-performance-review__highlight-icon svg {
	width: 22px;
	height: 22px;

	stroke: #ffffff;
	stroke-width: 1.6;

	stroke-linecap: round;
	stroke-linejoin: round;
}


.hlx-performance-review__highlight-top > div:last-child {
	min-width: 0;
}


.hlx-performance-review__highlight-top span {
	display: block;

	margin: 0 0 4px !important;
	padding: 0 !important;

	font-size: 10px;
	font-weight: 750;
	line-height: 1.3;

	letter-spacing: 0.08em;
	text-transform: uppercase;

	color: #8993a5;
}


.hlx-performance-review__highlight-top strong {
	display: block;

	margin: 0;
	padding: 0;

	font-size: 17px;
	font-weight: 800;
	line-height: 1.3;

	color: var(--hlx-performance-text);
}


/* ================================================================
   HIGHLIGHTS LIST
================================================================ */

.hlx-performance-review__highlights {
	position: relative;
	z-index: 1;

	display: grid;

	gap: 15px;

	list-style: none !important;

	margin: 0 !important;
	padding: 20px 0 !important;
}


.hlx-performance-review__highlights li {
	display: flex;
	align-items: flex-start;

	gap: 11px;

	margin: 0 !important;
	padding: 0 !important;

	font-size: 13px;
	line-height: 1.65;

	color: #526078;

	list-style: none !important;
}


.hlx-performance-review__check {
	display: grid;
	place-items: center;

	flex: 0 0 20px;

	width: 20px;
	height: 20px;

	margin-top: 1px;

	background: rgba(32, 191, 107, 0.10);

	border-radius: 50%;
}


.hlx-performance-review__check svg {
	width: 12px;
	height: 12px;

	stroke: var(--hlx-performance-green);
	stroke-width: 2.4;

	stroke-linecap: round;
	stroke-linejoin: round;
}


/* ================================================================
   PERFORMANCE DETAILS
================================================================ */

.hlx-performance-review__details {
	position: relative;
	z-index: 1;

	display: grid;

	grid-template-columns:
		repeat(2, minmax(0, 1fr));

	gap: 10px;

	margin: 0;
	padding: 18px 0 0;

	border-top: 1px solid var(--hlx-performance-border);
}


.hlx-performance-review__details > div {
	min-width: 0;

	padding: 13px 14px;

	background: rgba(246, 248, 251, 0.75);

	border: 1px solid rgba(22, 39, 67, 0.055);
	border-radius: 14px;
}


.hlx-performance-review__details span {
	display: block;

	margin: 0 0 5px !important;
	padding: 0 !important;

	font-size: 10px;
	font-weight: 700;
	line-height: 1.3;

	text-transform: uppercase;
	letter-spacing: 0.07em;

	color: #929bad;
}


.hlx-performance-review__details strong {
	display: block;

	margin: 0;
	padding: 0;

	font-size: 12px;
	font-weight: 750;
	line-height: 1.35;

	color: var(--hlx-performance-text);

	overflow-wrap: anywhere;
	word-break: break-word;
}


/* ================================================================
   HLxHub TAKE
================================================================ */

.hlx-performance-review__verdict {
	display: grid;

	grid-template-columns:
		48px
		minmax(0, 1fr);

	gap: 18px;

	margin: 40px 0 0;
	padding: 24px 26px;

	background:
		linear-gradient(
			110deg,
			rgba(23, 105, 255, 0.055),
			rgba(255, 255, 255, 0.88)
		);

	border: 1px solid rgba(23, 105, 255, 0.10);
	border-radius: 21px;
}


.hlx-performance-review__verdict-mark {
	display: grid;
	place-items: center;

	width: 48px;
	height: 48px;

	background: #ffffff;

	border: 1px solid rgba(23, 105, 255, 0.13);
	border-radius: 14px;

	box-shadow:
		0 8px 20px rgba(23, 105, 255, 0.07);
}


.hlx-performance-review__verdict-mark svg {
	width: 20px;
	height: 20px;

	stroke: var(--hlx-performance-accent);
	stroke-width: 2;

	stroke-linecap: round;
	stroke-linejoin: round;
}


.hlx-performance-review__verdict-content {
	min-width: 0;

	margin: 0;
	padding: 0;
}


.hlx-performance-review__verdict-label {
	display: block;

	margin: 0 0 6px !important;
	padding: 0 !important;

	font-size: 11px;
	font-weight: 800;
	line-height: 1.3;

	letter-spacing: 0.09em;
	text-transform: uppercase;

	color: var(--hlx-performance-accent);
}


.hlx-performance-review__verdict-content p {
	margin: 0 !important;
	padding: 0 !important;

	font-size: 14px;
	line-height: 1.75;

	color: #59667d;
}


/* ================================================================
   TABLET
================================================================ */

@media (max-width: 1024px) {

	.hlx-performance-review {
		margin-top: 75px;
		margin-bottom: 75px;
	}

	.hlx-performance-review__container {
		width: min(920px, calc(100% - 32px));
	}

	.hlx-performance-review__specs {
		grid-template-columns:
			repeat(2, minmax(0, 1fr));
	}

	.hlx-performance-review__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.hlx-performance-review__aside {
		width: 100%;
		max-width: 680px;
	}

}


/* ================================================================
   MOBILE
================================================================ */

@media (max-width: 640px) {

	.hlx-performance-review {
		margin-top: 60px;
		margin-bottom: 60px;
	}

	.hlx-performance-review__container {
		width: calc(100% - 24px);
	}

	.hlx-performance-review__header {
		margin-bottom: 27px;
	}

	.hlx-performance-review__eyebrow {
		gap: 8px;

		margin-bottom: 12px;

		font-size: 10px;
		letter-spacing: 0.11em;
	}

	.hlx-performance-review__eyebrow-line {
		width: 23px;
		flex-basis: 23px;
	}

	.hlx-performance-review__title {
		font-size: clamp(27px, 8vw, 36px);
		line-height: 1.12;
		letter-spacing: -0.03em;
	}

	.hlx-performance-review__intro {
		font-size: 14px;
		line-height: 1.75;
	}


	/* QUICK SPECS */

	.hlx-performance-review__specs {
		grid-template-columns:
			repeat(2, minmax(0, 1fr));

		gap: 9px;

		margin-bottom: 25px;
	}

	.hlx-performance-review__spec {
		gap: 9px;

		padding: 13px 12px;

		border-radius: 15px;
	}

	.hlx-performance-review__spec-icon {
		flex-basis: 35px;

		width: 35px;
		height: 35px;

		border-radius: 10px;
	}

	.hlx-performance-review__spec-icon svg {
		width: 17px;
		height: 17px;
	}

	.hlx-performance-review__spec-label {
		font-size: 9px;
	}

	.hlx-performance-review__spec strong {
		font-size: 11px;
	}


	/* ARTICLES */

	.hlx-performance-review__article {
		grid-template-columns:
			38px
			minmax(0, 1fr);

		gap: 13px;

		margin-bottom: 26px;
		padding-bottom: 26px;
	}

	.hlx-performance-review__article:not(:last-child)::after {
		left: 18px;
		top: 42px;
	}

	.hlx-performance-review__article-number {
		width: 38px;
		height: 38px;

		border-radius: 12px;

		font-size: 10px;
	}

	.hlx-performance-review__article-body {
		padding-top: 1px;
	}

	.hlx-performance-review__article-body h3 {
		margin-bottom: 7px !important;

		font-size: 18px;
		line-height: 1.3;
	}

	.hlx-performance-review__article-body p {
		font-size: 13px;
		line-height: 1.75;
	}


	/* HIGHLIGHT CARD */

	.hlx-performance-review__highlight-card {
		padding: 20px;

		border-radius: 20px;
	}

	.hlx-performance-review__highlight-icon {
		flex-basis: 42px;

		width: 42px;
		height: 42px;

		border-radius: 13px;
	}

	.hlx-performance-review__highlight-icon svg {
		width: 19px;
		height: 19px;
	}

	.hlx-performance-review__highlight-top strong {
		font-size: 15px;
	}

	.hlx-performance-review__highlights li {
		font-size: 12px;
	}


	/* DETAILS */

	.hlx-performance-review__details {
		grid-template-columns: 1fr;
	}


	/* VERDICT */

	.hlx-performance-review__verdict {
		grid-template-columns:
			40px
			minmax(0, 1fr);

		gap: 13px;

		margin-top: 30px;
		padding: 18px;

		border-radius: 18px;
	}

	.hlx-performance-review__verdict-mark {
		width: 40px;
		height: 40px;

		border-radius: 12px;
	}

	.hlx-performance-review__verdict-mark svg {
		width: 17px;
		height: 17px;
	}

	.hlx-performance-review__verdict-content p {
		font-size: 12px;
		line-height: 1.7;
	}

}


/* ================================================================
   SMALL MOBILE
================================================================ */

@media (max-width: 390px) {

	.hlx-performance-review {
		margin-top: 50px;
		margin-bottom: 50px;
	}

	.hlx-performance-review__container {
		width: calc(100% - 18px);
	}

	.hlx-performance-review__specs {
		grid-template-columns: 1fr;
	}

	.hlx-performance-review__spec {
		padding: 12px 13px;
	}

	.hlx-performance-review__title {
		font-size: 27px;
	}

	.hlx-performance-review__highlight-card {
		padding: 17px;
	}

}


/* ================================================================
   REDUCED MOTION
================================================================ */

@media (prefers-reduced-motion: reduce) {

	.hlx-performance-review *,
	.hlx-performance-review *::before,
	.hlx-performance-review *::after {

		scroll-behavior: auto !important;

		transition: none !important;

		animation: none !important;
	}

}