/**
 * Renov Showroom Experience
 * --------------------------------------------------------------
 * Section "Bien plus qu'un showroom"
 *
 * Desktop : 4 cartes
 * Tablet  : 2 cartes
 * Mobile  : 1 carte
 */

.renov-el-showroom-experience {
	--renov-showroom-exp-accent: #ff5428;
	--renov-showroom-exp-dark: #071d35;
	--renov-showroom-exp-text: #5b6470;
	--renov-showroom-exp-soft: #fff3ed;
	--renov-showroom-exp-line: rgba(7, 29, 53, 0.08);
	--renov-showroom-exp-card: #ffffff;

	position: relative;
	width: 100%;

	overflow: hidden;

	background: #ffffff;
}

.renov-el-showroom-experience,
.renov-el-showroom-experience * {
	box-sizing: border-box;
}

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

.renov-el-showroom-experience__inner {
	position: relative;
	z-index: 2;

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

	margin-inline: auto;
	padding: 68px 38px 72px;
}

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

.renov-el-showroom-experience__header {
	position: relative;
	z-index: 4;

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

	max-width: 980px;

	margin: 0 auto 44px;

	text-align: center;
}

.renov-el-showroom-experience__kicker {
	display: flex;
	flex-direction: column;
	align-items: center;

	margin: 0;

	color: var(--renov-showroom-exp-accent);

	font-size: 13px;
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.renov-el-showroom-experience__kicker span {
	display: block;

	width: 56px;
	height: 3px;

	margin-top: 13px;

	border-radius: 999px;

	background: var(--renov-showroom-exp-accent);
}

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

.renov-el-showroom-experience__title {
	margin: 22px 0 0;

	color: var(--renov-showroom-exp-dark);

	font-size: clamp(2.4rem, 4vw, 4rem);
	font-weight: 800;
	line-height: 1.05;
	letter-spacing: -0.045em;
}

.renov-el-showroom-experience__title strong {
	color: var(--renov-showroom-exp-accent);
	font-weight: inherit;
}

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

.renov-el-showroom-experience__description {
	max-width: 860px;

	margin: 18px 0 0;

	color: var(--renov-showroom-exp-text);

	font-size: 16px;
	font-weight: 400;
	line-height: 1.65;
}

/* =========================================================
   DECORATIVE NOTES
   ========================================================= */

.renov-el-showroom-experience__note {
	position: absolute;
	z-index: 3;

	display: flex;
	flex-direction: column;

	max-width: 180px;

	color: #283c55;

	font-family:
		"Segoe Print",
		"Bradley Hand",
		"Comic Sans MS",
		cursive;

	font-size: 19px;
	font-weight: 500;
	line-height: 1.25;

	pointer-events: none;
}

.renov-el-showroom-experience__note span {
	display: block;

	width: 90px;
	height: 2px;

	margin-top: 8px;

	border-radius: 999px;

	background: var(--renov-showroom-exp-accent);
}

.renov-el-showroom-experience__note--left {
	top: 118px;
	left: 28px;

	transform: rotate(-5deg);
}

.renov-el-showroom-experience__note--right {
	top: 132px;
	right: 30px;

	align-items: flex-end;

	text-align: right;

	transform: rotate(4deg);
}

/* =========================================================
   DECORATIVE IMAGE
   ========================================================= */

.renov-el-showroom-experience__decorative {
	position: absolute;

	top: 105px;
	right: 110px;

	z-index: 1;

	width: min(330px, 24vw);

	opacity: 0.11;

	pointer-events: none;
}

.renov-el-showroom-experience__decorative-image {
	display: block;

	width: 100%;
	height: auto;

	object-fit: contain;
}

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

.renov-el-showroom-experience__grid {
	position: relative;
	z-index: 4;

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

	gap: 18px;

	width: 100%;
}

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

.renov-el-showroom-experience__card {
	position: relative;

	display: flex;
	flex-direction: column;

	min-width: 0;

	overflow: hidden;

	border: 1px solid var(--renov-showroom-exp-line);
	border-radius: 18px;

	background: var(--renov-showroom-exp-card);

	box-shadow:
		0 14px 34px rgba(7, 29, 53, 0.055),
		0 3px 12px rgba(7, 29, 53, 0.03);

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

.renov-el-showroom-experience__card:hover {
	transform: translateY(-6px);

	border-color: rgba(255, 84, 40, 0.16);

	box-shadow:
		0 22px 44px rgba(7, 29, 53, 0.09),
		0 6px 16px rgba(7, 29, 53, 0.04);
}

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

.renov-el-showroom-experience__image-wrap {
	position: relative;

	width: 100%;
	height: 180px;

	overflow: hidden;

	background: #f2f2f2;
}

.renov-el-showroom-experience__image {
	display: block;

	width: 100%;
	height: 100%;

	object-fit: cover;

	transition:
		transform 500ms cubic-bezier(
			0.22,
			1,
			0.36,
			1
		);
}

.renov-el-showroom-experience__card:hover
.renov-el-showroom-experience__image {
	transform: scale(1.055);
}

/* subtle image overlay */

.renov-el-showroom-experience__image-wrap::after {
	content: "";

	position: absolute;
	inset: 0;

	z-index: 1;

	background:
		linear-gradient(
			180deg,
			transparent 70%,
			rgba(7, 29, 53, 0.08) 100%
		);

	pointer-events: none;
}

/* =========================================================
   BODY
   ========================================================= */

.renov-el-showroom-experience__body {
	position: relative;

	display: flex;

	min-height: 170px;

	padding: 0 24px 24px;
}

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

.renov-el-showroom-experience__icon {
	position: absolute;

	top: -34px;
	left: 24px;

	z-index: 4;

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

	width: 66px;
	height: 66px;

	border: 5px solid #ffffff;
	border-radius: 50%;

	background:
		linear-gradient(
			145deg,
			#ff6d43 0%,
			var(--renov-showroom-exp-accent) 100%
		);

	color: #ffffff;

	box-shadow:
		0 8px 20px rgba(255, 84, 40, 0.20);

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

.renov-el-showroom-experience__icon i {
	font-size: 23px;
	line-height: 1;
}

.renov-el-showroom-experience__icon svg {
	display: block;

	width: 25px;
	height: 25px;

	fill: currentColor;
	color: currentColor;
}

.renov-el-showroom-experience__card:hover
.renov-el-showroom-experience__icon {
	transform: translateY(-3px) rotate(-2deg);

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

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

.renov-el-showroom-experience__content {
	display: flex;
	flex-direction: column;

	width: 100%;
	min-width: 0;

	padding-top: 38px;
}

.renov-el-showroom-experience__card-title {
	margin: 0;

	color: var(--renov-showroom-exp-dark);

	font-size: 19px;
	font-weight: 800;
	line-height: 1.25;
	letter-spacing: -0.025em;
}

.renov-el-showroom-experience__card-text {
	margin: 12px 0 0;

	color: var(--renov-showroom-exp-text);

	font-size: 13.5px;
	font-weight: 400;
	line-height: 1.6;
}

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

.renov-el-showroom-experience__link {
	display: inline-flex;
	align-items: center;

	gap: 8px;

	width: fit-content;

	margin-top: auto;
	padding-top: 10px;

	color: var(--renov-showroom-exp-dark);

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

	text-decoration: none;

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

.renov-el-showroom-experience__link svg {
	width: 17px;
	height: 17px;

	fill: none;
	stroke: var(--renov-showroom-exp-accent);
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;

	transition: transform 180ms ease;
}

.renov-el-showroom-experience__link:hover {
	color: var(--renov-showroom-exp-accent);
}

.renov-el-showroom-experience__link:hover svg {
	transform: translateX(4px);
}

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

.renov-el-showroom-experience__link:focus-visible {
	outline: 3px solid rgba(255, 84, 40, 0.28);
	outline-offset: 4px;

	border-radius: 4px;
}

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

@media (min-width: 1500px) {

	.renov-el-showroom-experience__inner {
		padding-inline: 48px;
	}

	.renov-el-showroom-experience__grid {
		gap: 22px;
	}

	.renov-el-showroom-experience__image-wrap {
		height: 225px;
	}

	.renov-el-showroom-experience__card-title {
		font-size: 20px;
	}

	.renov-el-showroom-experience__card-text {
		font-size: 14px;
	}
}

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

@media (max-width: 1250px) {

	.renov-el-showroom-experience__inner {
		padding-inline: 30px;
	}

	.renov-el-showroom-experience__note {
		font-size: 16px;
	}

	.renov-el-showroom-experience__note--left {
		left: 18px;
	}

	.renov-el-showroom-experience__note--right {
		right: 18px;
	}

	.renov-el-showroom-experience__grid {
		gap: 14px;
	}

	.renov-el-showroom-experience__body {
		padding-inline: 18px;
	}

	.renov-el-showroom-experience__icon {
		left: 18px;
	}

	.renov-el-showroom-experience__card-title {
		font-size: 17px;
	}

	.renov-el-showroom-experience__card-text {
		font-size: 12.5px;
	}
}

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

@media (max-width: 991px) {

	.renov-el-showroom-experience__inner {
		padding:
			56px
			24px
			60px;
	}

	.renov-el-showroom-experience__header {
		margin-bottom: 38px;
	}

	.renov-el-showroom-experience__title {
		font-size: clamp(2.3rem, 6vw, 3.4rem);
	}

	.renov-el-showroom-experience__description {
		max-width: 720px;

		font-size: 15px;
	}

	.renov-el-showroom-experience__note {
		display: none;
	}

	.renov-el-showroom-experience__decorative {
		top: 90px;
		right: -30px;

		width: 250px;

		opacity: 0.08;
	}

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

		gap: 20px;
	}

	.renov-el-showroom-experience__image-wrap {
		height: 230px;
	}

	.renov-el-showroom-experience__body {
		min-height: 180px;

		padding-inline: 22px;
	}

	.renov-el-showroom-experience__icon {
		left: 22px;
	}

	.renov-el-showroom-experience__card-title {
		font-size: 19px;
	}

	.renov-el-showroom-experience__card-text {
		font-size: 13.5px;
	}
}

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

@media (max-width: 650px) {

	.renov-el-showroom-experience__inner {
		padding:
			44px
			16px
			48px;
	}

	.renov-el-showroom-experience__header {
		margin-bottom: 30px;
	}

	.renov-el-showroom-experience__kicker {
		font-size: 11px;
	}

	.renov-el-showroom-experience__title {
		margin-top: 17px;

		font-size: clamp(2rem, 9vw, 2.7rem);
	}

	.renov-el-showroom-experience__description {
		margin-top: 14px;

		font-size: 14px;
		line-height: 1.6;
	}

	.renov-el-showroom-experience__decorative {
		display: none;
	}

	.renov-el-showroom-experience__grid {
		grid-template-columns: 1fr;

		gap: 18px;
	}

	.renov-el-showroom-experience__card {
		max-width: 520px;

		margin-inline: auto;
	}

	.renov-el-showroom-experience__image-wrap {
		height: 220px;
	}

	.renov-el-showroom-experience__body {
		min-height: 0;

		padding:
			0
			20px
			22px;
	}

	.renov-el-showroom-experience__icon {
		left: 20px;

		width: 60px;
		height: 60px;

		top: -30px;

		border-width: 4px;
	}

	.renov-el-showroom-experience__content {
		padding-top: 36px;
	}

	.renov-el-showroom-experience__card-title {
		font-size: 18px;
	}

	.renov-el-showroom-experience__card-text {
		font-size: 13px;
	}

	.renov-el-showroom-experience__link {
		margin-top: 18px;
		padding-top: 0;
	}
}

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

@media (max-width: 420px) {

	.renov-el-showroom-experience__inner {
		padding-inline: 12px;
	}

	.renov-el-showroom-experience__title {
		font-size: clamp(1.8rem, 9vw, 2.3rem);
	}

	.renov-el-showroom-experience__description {
		font-size: 13px;
	}

	.renov-el-showroom-experience__image-wrap {
		height: 190px;
	}

	.renov-el-showroom-experience__body {
		padding-inline: 16px;
	}

	.renov-el-showroom-experience__icon {
		left: 16px;

		width: 56px;
		height: 56px;
	}

	.renov-el-showroom-experience__card-title {
		font-size: 17px;
	}
}

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

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

	.renov-el-showroom-experience__card,
	.renov-el-showroom-experience__image,
	.renov-el-showroom-experience__icon,
	.renov-el-showroom-experience__link,
	.renov-el-showroom-experience__link svg {
		transition: none !important;
	}

	.renov-el-showroom-experience__card:hover,
	.renov-el-showroom-experience__card:hover
	.renov-el-showroom-experience__image,
	.renov-el-showroom-experience__card:hover
	.renov-el-showroom-experience__icon,
	.renov-el-showroom-experience__link:hover svg {
		transform: none;
	}
}