/* =========================================================================
   px-newsletter — Nieuwsbrief aanmeldblok
   ========================================================================= */

.px-newsletter {
	/* Module-scoped tokens (named magic numbers) */
	--px-nl-visual-w: clamp(13.75rem, 11.893rem + 7.619vw, 18.75rem); /* 220px → 300px, fluide breedte van het beeld (i.p.v. vaste sprong op de mobiel-breakpoint) */
	--px-nl-visual-overhang: 72px;    /* hoeveel de foto (het hoofd) boven de kaart uitsteekt — vgl. Figma ~80px */
	--px-nl-content-offset: calc(var(--px-nl-visual-w) + var(--D2));
	/* Verhouding van de decoratieve foto. De aangeleverde asset is een
	   uitgesneden PNG met transparante achtergrond (kind + oranje blob al in
	   het beeld verwerkt, 296×375). We tonen die 1-op-1; het beeld draagt zijn
	   eigen vorm, dus GEEN CSS-blobmask of extra blob eronder. */
	--px-nl-visual-ratio: 296 / 375;
	--px-nl-heart: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2038%2056'%3E%3Cpath%20d='M15.1132%2030.257L14.7822%2029.999C11.5092%2027.583%209.52622%2024.895%208.83222%2021.937C8.50622%2020.833%208.58022%2019.226%209.05222%2017.114C9.38422%2015.649%2010.1122%2014.195%2011.2372%2012.751C12.6172%2011.11%2014.5642%2010.637%2017.0772%2011.331C18.1292%2011.693%2018.9462%2012.177%2019.5292%2012.785C20.2162%2013.477%2020.8062%2014.49%2021.3012%2015.824C22.7632%2013.659%2024.1652%2012.365%2025.5072%2011.941C26.3152%2011.6%2027.1412%2011.436%2027.9832%2011.448C28.8252%2011.464%2029.5742%2011.74%2030.2302%2012.275C30.9382%2012.986%2031.3612%2013.625%2031.4992%2014.191C31.7402%2014.854%2031.8772%2015.641%2031.9092%2016.552C31.8792%2018.239%2031.7322%2019.527%2031.4702%2020.416C31.2082%2021.54%2030.8292%2022.663%2030.3352%2023.786C29.5832%2025.51%2028.5282%2027.091%2027.1692%2028.528C25.7572%2030.028%2023.6792%2031.751%2020.9372%2033.698C18.5582%2032.58%2016.8702%2031.654%2015.8722%2030.92C14.8402%2030.217%2013.4832%2028.987%2011.8012%2027.23L12.8612%2026.814C14.6672%2028.502%2016.0112%2029.648%2016.8922%2030.251C17.7772%2030.897%2019.0822%2031.626%2020.8062%2032.436L22.0742%2031.57C25.2062%2029.518%2027.8192%2026.467%2029.9132%2022.418C30.6042%2021.052%2030.9612%2019.77%2030.9842%2018.573C31.0582%2016.484%2030.8872%2014.989%2030.4732%2014.089C30.1462%2013.244%2029.5592%2012.716%2028.7102%2012.503C28.5892%2012.426%2028.1302%2012.411%2027.3322%2012.457C26.6682%2012.546%2026.0132%2012.757%2025.3672%2013.09C24.3242%2013.703%2023.6222%2014.317%2023.2622%2014.93C23.1062%2015.129%2022.8842%2015.5%2022.5952%2016.041C22.5132%2016.135%2022.1772%2016.931%2021.5852%2018.43C21.4672%2018.619%2021.3982%2018.694%2021.3802%2018.656C21.2992%2018.653%2021.2172%2018.54%2021.1322%2018.318C20.8522%2017.478%2020.5702%2016.761%2020.2872%2016.167C20.0592%2015.689%2019.7792%2015.213%2019.4472%2014.739C18.6502%2013.689%2017.8962%2013.019%2017.1852%2012.729C16.3672%2012.332%2015.5002%2012.194%2014.5842%2012.317C13.6892%2012.417%2012.8322%2012.915%2012.0142%2013.813C11.1052%2014.985%2010.4922%2016.248%2010.1772%2017.602C9.83622%2019.078%209.75921%2020.289%209.94822%2021.234C10.1692%2023.411%2012.1042%2026.186%2015.7542%2029.559L15.1132%2030.257Z'%20fill='black'/%3E%3Cpath%20d='M10.3976%2015.345L10.4996%2015.344C11.0916%2015.365%2011.7336%2015.119%2012.4246%2014.606C13.6546%2013.705%2014.7296%2012.763%2015.6496%2011.781L17.2026%2011.809C15.4086%2013.45%2012.8876%2015.583%209.64062%2018.21L10.3976%2015.345Z'%20fill='black'/%3E%3Cpath%20d='M9.46875%2018.4389L9.65475%2018.3489C10.9827%2017.7369%2012.5967%2016.6969%2014.4977%2015.2299C16.0557%2014.0829%2017.0508%2013.1039%2017.4818%2012.2939L18.7818%2013.3289C16.0298%2015.1279%2013.6667%2016.8529%2011.6927%2018.5069C10.9877%2019.1159%2010.4927%2019.6249%2010.2087%2020.0319C9.95975%2020.3319%209.74775%2020.7949%209.57375%2021.4189L9.46875%2018.4389Z'%20fill='black'/%3E%3Cpath%20d='M9.65625%2021.99L10.1562%2021.591C13.4932%2018.91%2015.6713%2017.106%2016.6903%2016.179C17.9093%2015.078%2018.7163%2014.199%2019.1123%2013.541L20.3263%2015.759C20.0493%2015.575%2019.6622%2015.587%2019.1632%2015.794C18.6873%2015.998%2018.0363%2016.407%2017.2103%2017.022C15.4743%2018.336%2013.8583%2019.662%2012.3623%2020.998C11.2613%2021.97%2010.4583%2022.799%209.95125%2023.488L9.65625%2021.99Z'%20fill='black'/%3E%3Cpath%20d='M10.4062%2023.746L10.5972%2023.61C11.2792%2023.13%2011.9752%2022.604%2012.6852%2022.032C15.7822%2019.446%2017.3642%2018.141%2017.4312%2018.118C18.2172%2017.505%2018.8542%2017.064%2019.3422%2016.797C19.7102%2016.57%2020.2422%2016.351%2020.9382%2016.141L21.4822%2017.263C20.9262%2017.272%2020.4623%2017.382%2020.0883%2017.593C19.6153%2017.813%2018.9363%2018.261%2018.0513%2018.939C14.7893%2021.534%2012.4662%2023.613%2011.0822%2025.175L10.4062%2023.746Z'%20fill='black'/%3E%3Cpath%20d='M11.6562%2025.354L12.1523%2024.947C15.2493%2022.482%2020.1693%2018.203%2026.9132%2012.11L29.0103%2012.165L24.1613%2016.255C18.2993%2021.032%2015.3103%2023.498%2015.1933%2023.652C14.2233%2024.504%2013.5513%2025.154%2013.1783%2025.604C12.8323%2026.003%2012.5523%2026.422%2012.3393%2026.863L11.6562%2025.354Z'%20fill='black'/%3E%3Cpath%20d='M12.8047%2027.211L13.7267%2026.427C20.8107%2020.502%2025.9837%2015.801%2029.2467%2012.323L30.2997%2013.253C25.1677%2017.578%2021.7337%2020.551%2019.9957%2022.173C18.1107%2023.891%2016.1107%2025.927%2013.9967%2028.28L12.8047%2027.211Z'%20fill='black'/%3E%3Cpath%20d='M13.8906%2028.559L14.0126%2028.493C14.4106%2028.459%2017.6676%2025.815%2023.7846%2020.559C27.6716%2017.221%2030.0096%2015.02%2030.7966%2013.955L31.2366%2015.538C27.1226%2018.787%2024.1856%2021.208%2022.4266%2022.802C20.6136%2024.402%2018.1926%2026.77%2015.1636%2029.908L13.8906%2028.559Z'%20fill='black'/%3E%3Cpath%20d='M15.6797%2029.905L19.0297%2026.911L21.4387%2024.758C24.6077%2021.925%2027.9087%2018.99%2031.3437%2015.952L31.2277%2017.369C27.4657%2020.526%2024.7947%2022.857%2023.2167%2024.363C21.5847%2025.883%2019.4387%2028.089%2016.7807%2030.983L15.6797%2029.905Z'%20fill='black'/%3E%3Cpath%20d='M17.3281%2030.795L17.8781%2030.37C20.2511%2028.557%2022.3191%2026.862%2024.0831%2025.285C25.6421%2023.906%2028.1001%2021.52%2031.4561%2018.129L30.8421%2020.661C28.2181%2022.637%2026.2181%2024.252%2024.8441%2025.504C23.4811%2026.71%2021.3731%2028.782%2018.5221%2031.722L17.3281%2030.795Z'%20fill='black'/%3E%3Cpath%20d='M19.0156%2032.117L19.3706%2031.848C20.8736%2030.727%2022.3386%2029.525%2023.7666%2028.242C25.0076%2027.138%2027.2496%2024.985%2030.4926%2021.782L28.7876%2025.563C27.2636%2026.547%2026.0446%2027.461%2025.1316%2028.305C24.2446%2029.086%2022.7636%2030.611%2020.6876%2032.879L19.0156%2032.117Z'%20fill='black'/%3E%3Cpath%20d='M27.9801%2049.005L29.6311%2051.656C28.1591%2050.642%2027.0021%2049.711%2026.1591%2048.864C25.6541%2048.435%2023.7981%2046.383%2020.5901%2042.708C20.0201%2042.096%2019.5321%2041.631%2019.1241%2041.315C18.8081%2041.032%2018.3511%2040.792%2017.7551%2040.593C15.8381%2040.282%2014.8031%2040.067%2014.6511%2039.95C14.0131%2039.748%2013.2641%2039.386%2012.4041%2038.866C10.3301%2037.489%208.44513%2035.802%206.75013%2033.807C4.80213%2031.641%203.17113%2029.099%201.85713%2026.18C0.620126%2022.95%200.177125%2020.238%200.530125%2018.043C1.04413%2013.8%202.63113%2010.106%205.29213%206.95998C6.16313%205.86098%207.42013%204.73698%209.06113%203.59098C10.1841%202.72598%2012.1291%201.84998%2014.8961%200.963982C19.7321%20-0.213018%2023.5111%20-0.312018%2026.2321%200.665982C29.1291%201.64398%2031.9631%204.08898%2034.7321%208.00098C36.0091%209.95198%2036.8451%2012.233%2037.2401%2014.843C37.3651%2015.257%2037.4201%2016.598%2037.4031%2018.867C37.3131%2020.711%2037.0571%2022.504%2036.6331%2024.245C35.9451%2026.945%2035.1001%2029.07%2034.0981%2030.62C33.5251%2031.677%2031.8091%2033.781%2028.9501%2036.933C28.3231%2037.829%2027.9531%2038.426%2027.8401%2038.725C27.1411%2040.109%2026.8151%2041.571%2026.8641%2043.111C26.9051%2044.131%2027.1651%2045.147%2027.6451%2046.158C27.7011%2046.415%2028.1891%2047.159%2029.1111%2048.39C30.5191%2050.103%2032.9311%2052.256%2036.3451%2054.847C35.8231%2055.094%2035.3001%2055.32%2034.7761%2055.526C33.0791%2056.204%2031.5991%2056.155%2030.3361%2055.377C29.7691%2055.062%2029.1511%2054.642%2028.4831%2054.117C24.9131%2051.187%2022.6911%2049.407%2021.8161%2048.777L18.6881%2046.554C17.6731%2045.884%2016.7641%2045.367%2015.9601%2045.002C13.1421%2043.979%2011.7461%2043.419%2011.7721%2043.323C10.4881%2042.531%209.45913%2041.715%208.68613%2040.873C5.37813%2037.537%202.85413%2033.873%201.11413%2029.881C-0.0528742%2026.566%20-0.302875%2023.412%200.363125%2020.418C0.607125%2019.035%201.03113%2017.392%201.63413%2015.489L1.50613%2024.038C1.52213%2025.23%201.75413%2026.53%202.20313%2027.941C3.06013%2030.664%205.42213%2034.249%209.29013%2038.695C11.5361%2041.133%2013.5621%2042.465%2015.3671%2042.691C16.7701%2043.028%2018.0231%2042.277%2019.1241%2040.438L20.4621%2041.567C19.3711%2042.601%2018.6361%2043.234%2018.2571%2043.465C23.2761%2048.12%2027.9051%2051.672%2032.1431%2054.122C29.8591%2052.474%2028.0701%2050.723%2026.7751%2048.868C25.7571%2047.324%2025.1901%2045.657%2025.0731%2043.867C24.9941%2043.573%2025.0401%2042.689%2025.2111%2041.216C25.4151%2040.036%2025.7981%2038.9%2026.3601%2037.81C26.6571%2037.22%2027.0971%2036.525%2027.6791%2035.725C30.9631%2031.838%2032.8931%2029.319%2033.4691%2028.169C34.5981%2026.257%2035.3591%2024.113%2035.7541%2021.738C36.0041%2020.162%2036.0141%2018.527%2035.7851%2016.835C35.3651%2014.71%2035.0251%2013.428%2034.7651%2012.99C33.7201%2010.326%2032.1441%207.95198%2030.0371%205.86698C27.9301%203.78398%2025.5131%202.49598%2022.7851%202.00498C22.3481%201.81598%2020.9771%201.82298%2018.6701%202.02698C16.8061%202.32898%2015.0031%202.94098%2013.2611%203.86398L11.9921%204.59698C11.1601%205.11898%2010.3721%205.69898%209.62713%206.33698C8.31813%207.43498%207.11313%208.80398%206.01113%2010.443C5.12713%2011.789%204.41913%2013.199%203.88813%2014.671C3.69713%2015.032%203.40513%2016.142%203.01113%2018.001C2.88713%2018.745%202.81113%2019.485%202.78413%2020.221C2.69413%2024.971%204.59613%2029.543%208.49013%2033.936C10.1151%2035.866%2011.8601%2037.399%2013.7261%2038.534C14.4211%2039.143%2016.2011%2039.57%2019.0671%2039.817C19.5431%2039.935%2020.0211%2040.177%2020.5001%2040.544C20.9821%2040.928%2021.4631%2041.407%2021.9431%2041.979C23.9501%2044.597%2025.1811%2046.14%2025.6361%2046.607C26.0521%2047.09%2026.8331%2047.889%2027.9801%2049.005Z'%20fill='black'/%3E%3C/svg%3E");

	padding-block: var(--D3);
	/* ruimte boven de kaart voor het uitstekende blob + hart */
	padding-top: calc(var(--D3) + var(--D2));
}

/* --- Card --- */

.px-newsletter__card {
	display: flex;
	align-items: center;
	gap: var(--D2);
	background-color: var(--Oranje-10);
	border-radius: var(--R12);
	padding: var(--D2);
	position: relative;
	overflow: visible;
}

/* Alleen ruimte reserveren wanneer er daadwerkelijk een beeld is */
.px-newsletter__card:has(.px-newsletter__visual) {
	min-block-size: 317px;
}

/* --- Visual (uitgesneden foto + hart-decoratie) --- */

.px-newsletter__visual {
	position: absolute;
	inset-inline-start: var(--D2);
	inset-block-start: calc(-1 * var(--px-nl-visual-overhang));
	width: var(--px-nl-visual-w);
	aspect-ratio: var(--px-nl-visual-ratio);
	pointer-events: none;
	z-index: 1;
}

/* Hart-in-tekstballon, links bovenaan, steekt boven de foto uit */
.px-newsletter__visual::after {
	content: "";
	position: absolute;
	inset-block-start: calc(-1 * var(--D15));
	inset-inline-start: var(--D025, 0.25rem);
	width: 14%;
	aspect-ratio: 38 / 56;
	background-color: var(--Rood-100);
	-webkit-mask-image: var(--px-nl-heart);
	        mask-image: var(--px-nl-heart);
	-webkit-mask-repeat: no-repeat;
	        mask-repeat: no-repeat;
	-webkit-mask-position: center;
	        mask-position: center;
	-webkit-mask-size: contain;
	        mask-size: contain;
	z-index: 2;
}

/* De foto is een uitgesneden PNG met transparante achtergrond die zijn eigen
   organische vorm (en oranje blob) al bevat. We tonen die volledig binnen de
   ouder — GEEN cover-crop (die zou het hoofd bovenaan afsnijden) en GEEN
   blobmask (het beeld is al gevormd). object-fit: contain garandeert dat het
   hele kind zichtbaar blijft, ook als de verhouding iets afwijkt. */
.px-newsletter__photo {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
	object-fit: contain;
	object-position: center;
	z-index: 1;
}

/* --- Content (text + form) --- */

.px-newsletter__content {
	display: flex;
	flex-direction: column;
	gap: var(--D1);
	flex: 1;
	min-width: 0;
	max-width: 628px;
	margin-inline-start: 0;
	position: relative;
	z-index: 1;
}

/* Schuif de content opzij wanneer er een beeld-blob aanwezig is */
.px-newsletter__card:has(.px-newsletter__visual) .px-newsletter__content {
	margin-inline-start: var(--px-nl-content-offset);
}

.px-newsletter__text {
	display: flex;
	flex-direction: column;
	gap: var(--D075);
}

.px-newsletter__title {
	font-family: var(--Font-Family-Primary);
	font-size: var(--Font-Size-H4);
	font-weight: var(--px-weight-bold);
	line-height: 1.3;
	letter-spacing: -0.02em;
	color: var(--Oranje-130);
	margin: 0;
}

.px-newsletter__subtitle {
	font-size: var(--Font-Size-Body);
	font-weight: var(--px-weight-regular);
	line-height: 1.5;
	color: var(--Oranje-130);
	margin: 0;
}

/* --- Form --- */

.px-newsletter__form-row {
	display: flex;
	align-items: flex-end;
	gap: var(--D1);
}

.px-newsletter__field {
	display: flex;
	flex-direction: column;
	gap: var(--D05);
	flex: 1;
	max-width: 460px;
}

.px-newsletter__field > .px-email-hint:empty {
	display: none;
}

.px-newsletter__label {
	font-family: var(--Font-Family-Primary);
	font-size: var(--Font-Size-Labels);
	font-weight: var(--px-weight-medium);
	line-height: 1.5;
	color: var(--Antraciet-100);
}

.px-newsletter__input {
	font-family: var(--Font-Family-Primary);
	font-size: var(--Font-Size-Body);
	font-weight: var(--px-weight-regular);
	line-height: 1.5;
	color: var(--Antraciet-100);
	background-color: var(--Wit);
	border: 2px solid var(--Oranje-25);
	border-radius: var(--R8);
	padding: var(--D1);
	width: 100%;
	height: 60px;
	outline: none;
	transition: border-color 0.2s ease;
}

.px-newsletter__input::placeholder {
	color: var(--Antraciet-50);
}

.px-newsletter__input:focus {
	border-color: var(--Oranje-100);
}

.px-newsletter__submit {
	flex-shrink: 0;
	height: 60px;
}

/* --- Responsive: Mobile --- */

@media (max-width: 768px) {
	.px-newsletter__card {
		flex-direction: column;
		align-items: center;
		padding: var(--D1);
		padding-top: 0;
	}

	.px-newsletter__card:has(.px-newsletter__visual) {
		min-block-size: auto;
	}

	.px-newsletter__visual {
		position: relative;
		inset-inline-start: auto;
		inset-block-start: auto;
		/* width: geen override — volgt de fluide --px-nl-visual-w token hierboven */
		margin-block-start: calc(-1 * var(--D15));
		margin-block-end: var(--D1);
		align-self: center;
	}

	.px-newsletter__content,
	.px-newsletter__card:has(.px-newsletter__visual) .px-newsletter__content {
		margin-inline-start: 0;
		width: 100%;
	}

	.px-newsletter__form-row {
		flex-direction: column;
		align-items: stretch;
	}

	.px-newsletter__field {
		max-width: 100%;
	}

	.px-newsletter__submit {
		width: 100%;
		justify-content: center;
	}
}