/* =========================================================
   INCOUNTRY DISTRIBUTION
   TP-LINK PROMOTIONAL CAMPAIGNS
   ========================================================= */


.ic-tplink-promos {
	position: relative;
	overflow: hidden;
	padding:
		clamp(64px, 7vw, 105px)
		0;
	background:
		radial-gradient(
			circle at 7% 12%,
			rgba(38, 198, 218, 0.10),
			transparent 28%
		),
		radial-gradient(
			circle at 93% 84%,
			rgba(82, 76, 255, 0.09),
			transparent 25%
		),
		linear-gradient(
			180deg,
			#f8fbff 0%,
			#ffffff 50%,
			#f6f8fc 100%
		);
}


.ic-tplink-promos::before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	height: 1px;
	background:
		linear-gradient(
			90deg,
			transparent,
			rgba(30, 196, 218, 0.42),
			rgba(89, 80, 255, 0.35),
			transparent
		);
}


/* =========================================================
   HEADING
   ========================================================= */

.ic-tplink-promos__heading {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 32px;
	margin-bottom:
		clamp(28px, 4vw, 48px);
}


.ic-tplink-promos__heading > div {
	max-width: 760px;
}


.ic-tplink-promos__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 12px;
	color: #1599b4;
	font-size: 10px;
	font-weight: 850;
	letter-spacing: 0.13em;
	text-transform: uppercase;
}


.ic-tplink-promos__eyebrow::before {
	content: "";
	width: 28px;
	height: 2px;
	background:
		linear-gradient(
			90deg,
			#00bcd4,
			#655cff
		);
	border-radius: 20px;
}


.ic-tplink-promos__heading h2 {
	max-width: 760px;
	margin: 0;
	color: #161a22;
	font-size:
		clamp(34px, 4vw, 58px);
	font-weight: 790;
	line-height: 0.98;
	letter-spacing: -0.045em;
}


.ic-tplink-promos__heading h2 strong {
	color: #159bb6;
	font-weight: inherit;
}


.ic-tplink-promos__heading p {
	max-width: 650px;
	margin: 18px 0 0;
	color: #68717c;
	font-size: 15px;
	line-height: 1.7;
}


.ic-tplink-promos__shop {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	min-height: 46px;
	padding: 0 18px;
	flex: 0 0 auto;
	color: #fff !important;
	background:
		linear-gradient(
			135deg,
			#159eb8,
			#3a77e8 55%,
			#6c59f4
		);
	border-radius: 13px;
	box-shadow:
		0 11px 30px rgba(47, 110, 210, 0.18);
	font-size: 11.5px;
	font-weight: 800;
	text-decoration: none !important;
	transition:
		transform 220ms ease,
		box-shadow 220ms ease;
}


.ic-tplink-promos__shop:hover {
	color: #fff !important;
	transform: translateY(-2px);
	box-shadow:
		0 16px 38px rgba(47, 110, 210, 0.26);
}


.ic-tplink-promos__shop span {
	font-size: 16px;
}


/* =========================================================
   CAMPAIGN GRID
   ========================================================= */

.ic-tplink-promos__grid {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns:
		repeat(2, minmax(0, 1fr));
	align-items: start;
	gap:
		clamp(18px, 2.4vw, 34px);
}


/* =========================================================
   PROMO CARD
   ========================================================= */

.ic-tplink-promo-card {
	position: relative;
	display: block;
	overflow: hidden;
	color: inherit;
	background: #fff;
	border:
		1px solid
		rgba(35, 55, 85, 0.10);
	border-radius:
		clamp(20px, 2vw, 28px);
	box-shadow:
		0 22px 60px rgba(31, 44, 77, 0.10),
		0 1px 0 rgba(255, 255, 255, 0.95) inset;
	text-decoration: none !important;
	transition:
		transform 280ms ease,
		box-shadow 280ms ease,
		border-color 280ms ease;
}


.ic-tplink-promo-card:hover {
	color: inherit;
	border-color:
		rgba(25, 169, 196, 0.22);
	transform: translateY(-5px);
	box-shadow:
		0 30px 78px rgba(31, 44, 77, 0.15),
		0 1px 0 rgba(255, 255, 255, 0.95) inset;
}


/* =========================================================
   IMAGE AREA
   ========================================================= */

.ic-tplink-promo-card__image {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	padding:
		clamp(10px, 1.2vw, 16px);
	background:
		radial-gradient(
			circle at 82% 12%,
			rgba(0, 188, 212, 0.10),
			transparent 24%
		),
		linear-gradient(
			145deg,
			#0e1117,
			#151b25 60%,
			#11141a
		);
}


.ic-tplink-promo-card__image::after {
	content: "";
	position: absolute;
	inset: auto 0 0;
	height: 28%;
	pointer-events: none;
	background:
		linear-gradient(
			180deg,
			transparent,
			rgba(9, 13, 19, 0.08)
		);
}


.ic-tplink-promo-card__image img {
	position: relative;
	z-index: 2;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center;
	border-radius:
		clamp(12px, 1.2vw, 18px);
	transition:
		transform 420ms ease;
}


.ic-tplink-promo-card:hover
.ic-tplink-promo-card__image img {
	transform: scale(1.015);
}


/* =========================================================
   CARD FOOTER
   ========================================================= */

.ic-tplink-promo-card__footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 22px;
	padding:
		clamp(20px, 2vw, 28px);
	background:
		linear-gradient(
			180deg,
			#ffffff,
			#fbfcfe
		);
}


.ic-tplink-promo-card__footer > div {
	display: flex;
	flex-direction: column;
	gap: 5px;
	min-width: 0;
}


.ic-tplink-promo-card__footer span {
	color: #159bb6;
	font-size: 9.5px;
	font-weight: 850;
	letter-spacing: 0.10em;
	text-transform: uppercase;
}


.ic-tplink-promo-card__footer strong {
	color: #171b23;
	font-size:
		clamp(17px, 1.6vw, 23px);
	font-weight: 780;
	line-height: 1.15;
	letter-spacing: -0.025em;
}


.ic-tplink-promo-card__arrow {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: 45px;
	height: 45px;
	flex: 0 0 45px;
	color: #fff !important;
	background:
		linear-gradient(
			135deg,
			#10a4be,
			#4774ed,
			#745bf1
		);
	border-radius: 13px;
	box-shadow:
		0 9px 22px rgba(50, 112, 218, 0.17);
	font-size: 17px !important;
	font-weight: 700 !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	transition:
		transform 220ms ease;
}


.ic-tplink-promo-card:hover
.ic-tplink-promo-card__arrow {
	transform:
		translate(2px, -2px);
}


/* =========================================================
   INDIVIDUAL CARD ACCENTS
   ========================================================= */

.ic-tplink-promo-card--general::before,
.ic-tplink-promo-card--deco::before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	z-index: 5;
	height: 4px;
}


.ic-tplink-promo-card--general::before {
	background:
		linear-gradient(
			90deg,
			#00b9d8,
			#2867dd,
			#ff4c25
		);
}


.ic-tplink-promo-card--deco::before {
	background:
		linear-gradient(
			90deg,
			#ff4a26,
			#ff7a00,
			#00bedc
		);
}


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

@media (max-width: 991px) {

	.ic-tplink-promos {
		padding:
			62px 0;
	}


	.ic-tplink-promos__heading {
		align-items: flex-start;
		flex-direction: column;
		gap: 20px;
	}


	.ic-tplink-promos__shop {
		min-height: 43px;
	}


	.ic-tplink-promos__grid {
		gap: 18px;
	}

}


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

@media (max-width: 767px) {

	.ic-tplink-promos {
		padding:
			48px 0 54px;
	}


	.ic-tplink-promos__heading {
		margin-bottom: 24px;
	}


	.ic-tplink-promos__heading h2 {
		font-size:
			clamp(33px, 10vw, 46px);
	}


	.ic-tplink-promos__heading p {
		margin-top: 14px;
		font-size: 13.5px;
		line-height: 1.65;
	}


	.ic-tplink-promos__grid {
		grid-template-columns: 1fr;
		gap: 18px;
	}


	.ic-tplink-promo-card {
		border-radius: 21px;
	}


	.ic-tplink-promo-card__image {
		aspect-ratio: 4 / 5;
		padding: 9px;
	}


	.ic-tplink-promo-card__footer {
		padding: 19px 18px;
	}


	.ic-tplink-promo-card__footer strong {
		font-size: 17px;
	}


	.ic-tplink-promo-card__arrow {
		width: 40px;
		height: 40px;
		flex-basis: 40px;
		border-radius: 11px;
	}

}


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

@media (max-width: 390px) {

	.ic-tplink-promos__heading h2 {
		font-size: 32px;
	}


	.ic-tplink-promo-card__footer {
		gap: 14px;
	}


	.ic-tplink-promo-card__footer strong {
		font-size: 16px;
	}

}