/* =========================================================
   AWTI DEVICE HUB
   RESOURCES & LINKS
   FINAL MATCHING COLOUR
   Green → White → Blue
   ========================================================= */


/* =========================================================
   RESOURCES MAIN CARD
   ========================================================= */

.awti-device-resources,
.awti-resources,
.awti-resources-card {

	position: relative;

	margin: 20px 0;

	padding: 20px;

	border: 1px solid rgba(37, 99, 235, .16);

	border-left: 3px solid #16a34a;

	border-radius: 18px;

	background:
		linear-gradient(
			135deg,
			#ecfdf5 0%,
			#ffffff 48%,
			#eff6ff 100%
		) !important;

	box-shadow:
		0 8px 28px rgba(15, 23, 42, .06);

	color: #0f172a;

	overflow: hidden;
}


/* =========================================================
   TOP GRADIENT
   ========================================================= */

.awti-device-resources::before,
.awti-resources::before,
.awti-resources-card::before {

	content: "";

	position: absolute;

	top: 0;
	left: 0;
	right: 0;

	height: 3px;

	background:
		linear-gradient(
			90deg,
			#16a34a,
			#0d9488,
			#2563eb
		);
}


/* =========================================================
   EYEBROW
   ========================================================= */

.awti-device-resources .eyebrow,
.awti-resources .eyebrow,
.awti-resources-card .eyebrow {

	display: inline-block;

	margin-bottom: 4px;

	color: #2563eb;

	font-size: 11px;

	font-weight: 800;

	letter-spacing: .08em;

	text-transform: uppercase;
}


/* =========================================================
   TITLE
   ========================================================= */

.awti-device-resources h2,
.awti-resources h2,
.awti-resources-card h2 {

	margin: 3px 0 6px;

	color: #0f172a !important;

	font-size: 22px;

	line-height: 1.3;

	font-weight: 800;
}


/* =========================================================
   DESCRIPTION
   ========================================================= */

.awti-device-resources > p,
.awti-resources > p,
.awti-resources-card > p {

	margin: 0 0 15px;

	color: #64748b;

	font-size: 13px;

	line-height: 1.6;
}


/* =========================================================
   RESOURCE LINKS WRAPPER
   ========================================================= */

.awti-resource-links,
.awti-resources-links,
.awti-device-resource-links {

	display: flex;

	flex-wrap: wrap;

	align-items: center;

	gap: 10px;

	margin-top: 12px;
}


/* =========================================================
   RESOURCE LINK
   ========================================================= */

.awti-resource-links a,
.awti-resources-links a,
.awti-device-resource-links a {

	display: inline-flex;

	align-items: center;

	gap: 5px;

	padding: 9px 13px;

	border: 1px solid rgba(37, 99, 235, .16);

	border-radius: 10px;

	background:
		linear-gradient(
			135deg,
			#ecfdf5 0%,
			#ffffff 48%,
			#eff6ff 100%
		) !important;

	color: #2563eb !important;

	font-size: 12px;

	font-weight: 800;

	line-height: 1.3;

	text-decoration: none !important;

	box-shadow:
		0 4px 12px rgba(15, 23, 42, .035);

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


/* =========================================================
   LINK HOVER
   ========================================================= */

.awti-resource-links a:hover,
.awti-resources-links a:hover,
.awti-device-resource-links a:hover {

	transform: translateY(-2px);

	border-color: #16a34a;

	color: #15803d !important;

	box-shadow:
		0 7px 18px rgba(37, 99, 235, .10);

}


/* =========================================================
   RESOURCE ICON
   ========================================================= */

.awti-resource-links a::before,
.awti-resources-links a::before,
.awti-device-resource-links a::before {

	content: "↗";

	display: inline-flex;

	align-items: center;

	justify-content: center;

	width: 18px;

	height: 18px;

	border-radius: 50%;

	background:
		linear-gradient(
			135deg,
			#dcfce7,
			#dbeafe
		);

	color: #15803d;

	font-size: 11px;

	font-weight: 900;
}


/* =========================================================
   RESOURCE ITEM / BOX
   ========================================================= */

.awti-resource-item,
.awti-resource-card {

	padding: 13px;

	border: 1px solid rgba(37, 99, 235, .16);

	border-radius: 13px;

	background:
		linear-gradient(
			135deg,
			#ecfdf5 0%,
			#ffffff 48%,
			#eff6ff 100%
		) !important;

	box-shadow:
		0 4px 14px rgba(15, 23, 42, .035);
}


/* =========================================================
   RESOURCE ITEM TITLE
   ========================================================= */

.awti-resource-item strong,
.awti-resource-card strong {

	display: block;

	margin-bottom: 4px;

	color: #0f172a;

	font-size: 13px;

	font-weight: 800;
}


/* =========================================================
   RESOURCE ITEM DESCRIPTION
   ========================================================= */

.awti-resource-item span,
.awti-resource-card span {

	color: #64748b;

	font-size: 11px;

	line-height: 1.5;
}


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

@media (max-width: 700px) {

	.awti-device-resources,
	.awti-resources,
	.awti-resources-card {

		padding: 15px;

		border-radius: 15px;

	}


	.awti-device-resources h2,
	.awti-resources h2,
	.awti-resources-card h2 {

		font-size: 20px;

	}


	.awti-resource-links,
	.awti-resources-links,
	.awti-device-resource-links {

		flex-direction: column;

		align-items: stretch;

	}


	.awti-resource-links a,
	.awti-resources-links a,
	.awti-device-resource-links a {

		width: 100%;

		box-sizing: border-box;

	}

}