/**
 * Renov Commercial Team
 * --------------------------------------------------------------
 * Section "Notre équipe commerciale"
 *
 * Desktop : 4 colonnes
 * Tablet  : 2 colonnes
 * Mobile  : 1 colonne
 */

.renov-el-commercial-team {
	--renov-team-bg: #ffffff;
	--renov-team-dark: #1A1D3E !important;
	--renov-team-accent: #ff5428;
	--renov-team-text: #263449;
	--renov-team-line: #dedede;

	position: relative;
	width: 100%;
	background: var(--renov-team-bg);
}

.renov-el-commercial-team,
.renov-el-commercial-team * {
	box-sizing: border-box;
}

/* =========================================================
   INNER
   ========================================================= */

.renov-el-commercial-team__inner {
	position: relative;

	width: 100%;
	max-width: 1600px;

	margin-inline: auto;
	padding: 38px 30px 34px;
}

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

.renov-el-commercial-team__header {
	display: flex;
	flex-direction: column;
	align-items: center;

	margin-bottom: 48px;

	text-align: center;
}

.renov-el-commercial-team__title {
	margin: 0;

	color: #1A1D3E !important;

	font-size: clamp(2rem, 3vw, 3rem);
	font-weight: 800;
	line-height: 1.08;
	letter-spacing: -0.035em;
}

.renov-el-commercial-team__title-line {
	display: block;

	width: 56px;
	height: 4px;

	margin-top: 22px;

	border-radius: 999px;

	background: var(--renov-team-accent);
}

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

.renov-el-commercial-team__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));

	width: 100%;
}

/* =========================================================
   MEMBER
   ========================================================= */

.renov-el-commercial-team__member {
	position: relative;

	display: flex;
	flex-direction: column;
	align-items: center;

	min-width: 0;

	padding: 0 32px 8px;

	text-align: center;
}

/* vertical separators */

.renov-el-commercial-team__member:not(:last-child)::after {
	content: "";

	position: absolute;
	top: 30px;
	right: 0;
	bottom: 0;

	width: 1px;

	background: var(--renov-team-line);
}

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

.renov-el-commercial-team__icon {
	position: relative;

	display: inline-flex;
	align-items: center;
	justify-content: center;

	flex: 0 0 auto;

	width: 64px;
	height: 64px;

	margin-bottom: 18px;

	border-radius: 8px;

	background:
		linear-gradient(
			145deg,
			#ff6b42 0%,
			var(--renov-team-accent) 100%
		);

	color: #ffffff;

	box-shadow:
		0 8px 18px rgba(255, 84, 40, 0.15);

	transition:
		transform 220ms ease,
		box-shadow 220ms ease;
}

/* small subtle light */

.renov-el-commercial-team__icon::before {
	content: "";

	position: absolute;
	inset: 1px;

	border-radius: 7px;

	background:
		linear-gradient(
			145deg,
			rgba(255, 255, 255, 0.14),
			transparent 50%
		);

	pointer-events: none;
}

.renov-el-commercial-team__icon i {
	position: relative;
	z-index: 1;

	font-size: 27px;
	line-height: 1;
}

.renov-el-commercial-team__icon svg {
	position: relative;
	z-index: 1;

	display: block;

	width: 29px;
	height: 29px;

	fill: currentColor;
	color: currentColor;
}

/* animation on member hover */

.renov-el-commercial-team__member:hover
.renov-el-commercial-team__icon {
	transform: translateY(-4px);

	box-shadow:
		0 12px 24px rgba(255, 84, 40, 0.22);
}

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

.renov-el-commercial-team__content {
	display: flex;
	flex-direction: column;
	align-items: center;

	width: 100%;
	min-width: 0;
}

/* name */

.renov-el-commercial-team__name {
	margin: 0;

	color: var(--renov-team-dark);

	font-size: 21px;
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: -0.02em;
}

/* service */

.renov-el-commercial-team__service {
	margin: 8px 0 0;

	color: var(--renov-team-text);

	font-size: 14px;
	font-weight: 600;
	line-height: 1.3;
	text-transform: uppercase;
}

/* =========================================================
   CONTACT
   ========================================================= */

.renov-el-commercial-team__contact {
	display: flex;
	flex-direction: column;
	align-items: center;

	gap: 4px;

	width: 100%;

	margin-top: 20px;
}

.renov-el-commercial-team__phone,
.renov-el-commercial-team__email {
	display: inline-block;

	max-width: 100%;

	color: var(--renov-team-text);

	font-size: 16px;
	font-weight: 400;
	line-height: 1.4;

	text-decoration: none;

	transition:
		color 180ms ease,
		transform 180ms ease;
}

.renov-el-commercial-team__email {
	overflow-wrap: anywhere;
}

.renov-el-commercial-team__phone:hover,
.renov-el-commercial-team__email:hover {
	color: var(--renov-team-accent);
}

/* =========================================================
   FOCUS
   ========================================================= */

.renov-el-commercial-team__phone:focus-visible,
.renov-el-commercial-team__email:focus-visible {
	outline: 2px solid rgba(255, 84, 40, 0.35);
	outline-offset: 4px;

	border-radius: 3px;
}

/* =========================================================
   LARGE DESKTOP
   ========================================================= */

@media (min-width: 1500px) {

	.renov-el-commercial-team__inner {
		padding-inline: 42px;
	}

	.renov-el-commercial-team__member {
		padding-inline: 42px;
	}

	.renov-el-commercial-team__icon {
		width: 66px;
		height: 66px;
	}

	.renov-el-commercial-team__name {
		font-size: 22px;
	}

	.renov-el-commercial-team__phone,
	.renov-el-commercial-team__email {
		font-size: 17px;
	}
}

/* =========================================================
   LAPTOP
   ========================================================= */

@media (max-width: 1200px) {

	.renov-el-commercial-team__member {
		padding-inline: 22px;
	}

	.renov-el-commercial-team__name {
		font-size: 19px;
	}

	.renov-el-commercial-team__service {
		font-size: 13px;
	}

	.renov-el-commercial-team__phone,
	.renov-el-commercial-team__email {
		font-size: 14px;
	}
}

/* =========================================================
   TABLET
   2 x 2
   ========================================================= */

@media (max-width: 900px) {

	.renov-el-commercial-team__inner {
		padding:
			34px
			24px
			28px;
	}

	.renov-el-commercial-team__header {
		margin-bottom: 40px;
	}

	.renov-el-commercial-team__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));

		row-gap: 0;
	}

	.renov-el-commercial-team__member {
		padding:
			30px
			26px
			34px;
	}

	/* remove desktop separators */

	.renov-el-commercial-team__member:not(:last-child)::after {
		display: none;
	}

	/* vertical separator between columns */

	.renov-el-commercial-team__member:nth-child(odd)::after {
		content: "";

		position: absolute;
		top: 24px;
		right: 0;
		bottom: 24px;

		display: block;

		width: 1px;

		background: var(--renov-team-line);
	}

	/* horizontal separator first row */

	.renov-el-commercial-team__member:nth-child(-n + 2)::before {
		content: "";

		position: absolute;
		right: 24px;
		bottom: 0;
		left: 24px;

		height: 1px;

		background: var(--renov-team-line);
	}

	.renov-el-commercial-team__icon {
		width: 60px;
		height: 60px;
	}

	.renov-el-commercial-team__name {
		font-size: 19px;
	}

	.renov-el-commercial-team__phone,
	.renov-el-commercial-team__email {
		font-size: 14px;
	}
}

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

@media (max-width: 600px) {

	.renov-el-commercial-team__inner {
		padding:
			30px
			18px
			20px;
	}

	.renov-el-commercial-team__header {
		margin-bottom: 24px;
	}

	.renov-el-commercial-team__title {
		font-size: clamp(1.8rem, 8vw, 2.3rem);
	}

	.renov-el-commercial-team__title-line {
		width: 48px;
		height: 3px;

		margin-top: 15px;
	}

	.renov-el-commercial-team__grid {
		display: block;
	}

	.renov-el-commercial-team__member {
		display: grid;
		grid-template-columns: 58px minmax(0, 1fr);
		align-items: center;

		column-gap: 18px;

		padding:
			24px
			4px;
		
		text-align: left;
	}

	/* remove tablet separators */

	.renov-el-commercial-team__member:nth-child(odd)::after,
	.renov-el-commercial-team__member:nth-child(-n + 2)::before {
		display: none;
	}

	/* horizontal separators */

	.renov-el-commercial-team__member:not(:last-child)::before {
		content: "";

		position: absolute;
		right: 0;
		bottom: 0;
		left: 0;

		display: block;

		height: 1px;

		background: var(--renov-team-line);
	}

	.renov-el-commercial-team__icon {
		grid-column: 1;

		width: 56px;
		height: 56px;

		margin: 0;

		border-radius: 8px;
	}

	.renov-el-commercial-team__icon i {
		font-size: 24px;
	}

	.renov-el-commercial-team__icon svg {
		width: 26px;
		height: 26px;
	}

	.renov-el-commercial-team__content {
		grid-column: 2;

		align-items: flex-start;

		text-align: left;
	}

	.renov-el-commercial-team__name {
		font-size: 18px;
	}

	.renov-el-commercial-team__service {
		margin-top: 4px;

		font-size: 12px;
	}

	.renov-el-commercial-team__contact {
		align-items: flex-start;

		gap: 2px;

		margin-top: 10px;
	}

	.renov-el-commercial-team__phone,
	.renov-el-commercial-team__email {
		font-size: 14px;
	}
}

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

@media (max-width: 380px) {

	.renov-el-commercial-team__inner {
		padding-inline: 14px;
	}

	.renov-el-commercial-team__member {
		grid-template-columns: 50px minmax(0, 1fr);

		column-gap: 14px;
	}

	.renov-el-commercial-team__icon {
		width: 48px;
		height: 48px;
	}

	.renov-el-commercial-team__icon i {
		font-size: 21px;
	}

	.renov-el-commercial-team__icon svg {
		width: 23px;
		height: 23px;
	}

	.renov-el-commercial-team__name {
		font-size: 16px;
	}

	.renov-el-commercial-team__service {
		font-size: 11px;
	}

	.renov-el-commercial-team__phone,
	.renov-el-commercial-team__email {
		font-size: 12px;
	}
}

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

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

	.renov-el-commercial-team__icon,
	.renov-el-commercial-team__phone,
	.renov-el-commercial-team__email {
		transition: none !important;
	}

	.renov-el-commercial-team__member:hover
	.renov-el-commercial-team__icon {
		transform: none;
	}
}