/* =========================================================================
   Page "Expertise" — Figma "adverweb_expertise_editable" (1615×1028).
   Cards 369×283: gradient #071A34→#030B18, 2px #008CFF, 4 per row,
   ~25px apart horizontally and 89px vertically.
   ========================================================================= */

.aw-expertise {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding-block: 40px 72px;
	/* THOSE.png: 1920px over the 1615px frame, offset (-11, -28) */
	background:
		url('../images/expertise-bg.jpg') -0.7% -28px / 118.9% auto no-repeat,
		linear-gradient(135deg, #02040a 0%, #030916 55%, #001b3d 100%);
}
/* Blurred #008CFF frame on the right + soft blue block + bottom light line */
.aw-expertise__glow {
	position: absolute;
	inset: 0.1% 2.19% 16.63% 55.31%;
	border: 2px solid #008cff;
	filter: blur(5px);
	z-index: -1;
	pointer-events: none;
}
.aw-expertise__glow::before {
	content: "";
	position: absolute;
	inset: 22% -7% -8% 15%;
	background: #006eff;
	opacity: 0.08;
	filter: blur(7px);
}
.aw-expertise__glow::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -21%;
	height: 3px;
	background: linear-gradient(90deg, rgba(22, 135, 255, 0) 0%, rgba(22, 135, 255, 0.9) 50%, rgba(22, 135, 255, 0) 100%);
	filter: blur(7px);
}

.aw-expertise .aw-container { padding-inline: 20px; }

.aw-expertise__title {
	color: #fff;
	font-size: clamp(2rem, 4vw, 64px);
	line-height: 1.2;
	font-weight: 700;
	margin: 0 0 clamp(20px, 2.6vw, 42px);
}
.aw-expertise__title em { font-style: normal; color: #1e90ff; }

.aw-expertise__intro p {
	color: #fff;
	font-size: clamp(1rem, 1.31vw, 21px);
	line-height: 1.19;
	text-align: justify;
	margin: 0 0 22px;
}

.aw-expertise__grid {
	list-style: none;
	margin: clamp(32px, 3.4vw, 54px) 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr;
	gap: 24px;
}

.aw-service__link {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	min-height: 283px;
	padding: 10px 24px 22px 24px;
	border: 2px solid #008cff;
	border-radius: 8px;
	background: linear-gradient(135deg, #071a34 0%, #030b18 100%);
	overflow: hidden;
	transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
/* folded top-right corner (25% × 32%, #087DFF at 16%) */
.aw-service__link::before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	width: 25%;
	height: 31.9%;
	background: #087dff;
	opacity: 0.16;
	clip-path: polygon(0 0, 100% 0, 100% 100%);
	transition: opacity 0.3s ease;
}
.aw-service__link:hover {
	transform: translateY(-6px);
	border-color: #3aa8ff;
	box-shadow: 0 0 0 1px rgba(0, 140, 255, 0.4), 0 18px 40px rgba(0, 110, 255, 0.35);
}
.aw-service__link:hover::before { opacity: 0.4; }

.aw-service__head { display: flex; align-items: center; gap: 12px; min-height: 60px; }
.aw-service__head img { width: 54px; height: 54px; object-fit: contain; transition: transform 0.3s ease; }
.aw-service__link:hover .aw-service__head img { transform: scale(1.08) rotate(-4deg); }
.aw-service__num { color: #6aa8dc; font-size: 22px; line-height: 27px; font-weight: 700; }

.aw-service__title {
	color: #fff;
	font-size: 20px;
	line-height: 24px;
	font-weight: 700;
	text-transform: uppercase;
	margin: 18px 0 14px;
}
.aw-service__text {
	color: #d6e2ef;
	font-size: 15px;
	line-height: 18px;
	text-align: justify;
	margin: 0 0 18px;
}
.aw-service__more {
	margin-top: auto;
	color: #00bfff;
	font-size: 15px;
	line-height: 18px;
	font-weight: 700;
	transition: letter-spacing 0.2s ease, color 0.2s ease;
}
.aw-service__more::after { content: " →"; opacity: 0; transition: opacity 0.2s ease; }
.aw-service__link:hover .aw-service__more { color: #fff; }
.aw-service__link:hover .aw-service__more::after { opacity: 1; }

/* the Figma writes "Influence Digitale" in title case */
.aw-service:last-child .aw-service__title { text-transform: none; }

@media (min-width: 640px) {
	.aw-expertise__grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1024px) {
	.aw-expertise { padding-block: clamp(32px, 2.5vw, 41px) 72px; }
	.aw-expertise .aw-container { padding-inline: 2.7%; }
}
/* 4 cards per row only once each card can be ~280px wide */
@media (min-width: 1280px) {
	.aw-expertise__grid {
		grid-template-columns: repeat(4, minmax(0, 369px));
		justify-content: space-between;
		gap: clamp(40px, 5.6vw, 89px) 24px;
	}
}