/* =========================================================================
   px-info-section — Info sectie (Weetje / Quote)
   Figma component set "Info section"
   ========================================================================= */

/* --- Section wrapper --- */

.px-info-section {
	padding-block: var(--D3);
}

/* --- Card --- */

.px-info-section__card {
	position: relative;
	overflow: hidden;
	border-radius: var(--R12);
	padding: 50px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

/* --- Text content above decoration --- */

.px-info-section__title,
.px-info-section__body {
	position: relative;
	z-index: 1;
}

/* --- Decoration --- */

.px-info-section__deco {
	position: absolute;
	top: 0;
	right: 0;
	pointer-events: none;
	line-height: 0;
	z-index: 0;
}

.px-info-section__deco svg {
	display: block;
}

/* Weetje: lightbulb decoration */
.px-info-section--weetje .px-info-section__deco {
	top: -25px;
	right: -70px;
	color: var(--Rood-25);
}

.px-info-section--weetje .px-info-section__deco svg {
	width: 274px;
	height: auto;
}

/* Quote: quotation marks decoration */
.px-info-section--quote .px-info-section__deco {
	top: -15px;
	right: -20px;
	color: var(--Turquoise-50);
}

.px-info-section--quote .px-info-section__deco svg {
	width: 233px;
	height: auto;
}

/* --- Weetje variant colors --- */

.px-info-section--weetje .px-info-section__card {
	background-color: var(--Rood-10);
}

.px-info-section--weetje .px-info-section__title {
	margin: 0;
	font-size: var(--Font-Size-H4);
	font-weight: var(--px-weight-semibold);
	line-height: 1.3;
	letter-spacing: -0.02em;
	color: var(--Rood-130);
}

.px-info-section--weetje .px-info-section__body {
	font-size: var(--Font-Size-H5);
	font-weight: var(--px-weight-regular);
	line-height: 1.3;
	color: var(--Rood-130);
	max-width: 800px;
}

.px-info-section--weetje .px-info-section__body strong {
	font-weight: var(--px-weight-bold);
}

/* --- Quote variant colors --- */

.px-info-section--quote .px-info-section__card {
	background-color: var(--Turquoise-25);
}

.px-info-section--quote .px-info-section__body {
	font-size: var(--Font-Size-H5);
	font-weight: var(--px-weight-regular);
	line-height: 1.3;
	color: var(--Turquoise-130);
	max-width: 800px;
}

/* --- Body resets --- */

.px-info-section__body p {
	margin: 0;
}

/* =========================================================================
   Mobile — 768px
   ========================================================================= */

@media (max-width: 768px) {
	.px-info-section__card {
		padding: var(--D15);
	}

	/* Weetje deco: smaller on mobile */
	.px-info-section--weetje .px-info-section__deco {
		top: -10px;
		right: -40px;
	}

	.px-info-section--weetje .px-info-section__deco svg {
		width: 120px;
	}

	/* Quote deco: smaller on mobile */
	.px-info-section--quote .px-info-section__deco {
		top: -5px;
		right: -10px;
	}

	.px-info-section--quote .px-info-section__deco svg {
		width: 100px;
	}
}