/**
 * CTA bij blogartikelen, in twee varianten uit dezelfde markup:
 *
 * - .psc-cta--sticky  desktop vanaf 1440px, in de rechtermarge naast het artikel
 * - .psc-cta--inline  daaronder, als blok in de artikeltekst
 *
 * De twee varianten sluiten elkaar via media queries uit, zodat er altijd
 * precies één zichtbaar is. De verborgen variant staat op display:none en valt
 * daarmee ook uit de accessibility tree; schermlezers krijgen de CTA dus nooit
 * dubbel aangeboden.
 *
 * Kleuren volgen waar mogelijk de Avada-variabelen van de huisstijl, met harde
 * fallbacks.
 */

/* ------------------------------------------------------------------ kaart */

.psc-cta__inner {
	box-sizing: border-box;
	padding: 24px 22px;
	border: 1px solid var(--sep_color, #e0dede);
	border-radius: 3px;
	background-color: #f4f4f4;
	font-family: var(--body_typography-font-family, "Open Sans", Arial, Helvetica, sans-serif);
}

.psc-cta__title {
	margin: 0 0 10px;
	color: #000000;
	font-family: inherit;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.35;
	letter-spacing: 0;
	text-transform: none;
}

.psc-cta__text {
	margin: 0 0 18px;
	color: var(--body_typography-color, #383838);
	font-size: 14px;
	line-height: 1.6;
}

.psc-cta__button {
	display: block;
	padding: 12px 18px;
	border-radius: 3px;
	background-color: var(--awb-color4, #f0932b);
	color: #ffffff;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.3;
	text-align: center;
	text-decoration: none;
	transition: background-color 0.2s ease;
}

.psc-cta__button:hover,
.psc-cta__button:focus-visible {
	background-color: var(--awb-color5, #d98222);
	color: #ffffff;
	text-decoration: none;
}

.psc-cta__button:focus-visible {
	outline: 2px solid var(--awb-color6, #557290);
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	.psc-cta__button {
		transition: none;
	}
}

/* ----------------------------------------------- variant: inline (mobiel) */

.psc-cta--inline {
	display: block;
	clear: both;
	margin: 32px 0;
}

.psc-cta--inline .psc-cta__title {
	font-size: 19px;
}

.psc-cta--inline .psc-cta__text {
	font-size: 15px;
}

/* Vanaf wat meer ruimte hoeft de knop niet over de volle breedte. */
@media (min-width: 480px) {
	.psc-cta--inline .psc-cta__inner {
		padding: 26px 26px 28px;
	}

	.psc-cta--inline .psc-cta__button {
		display: inline-block;
		padding: 12px 24px;
	}
}

/* ---------------------------------------------- variant: sticky (desktop) */

.psc-cta--sticky {
	display: none;
}

/*
 * Breekpunt: de vrije ruimte rechts van de gecentreerde artikelkolom van 800px
 * is (viewport / 2 - 400px). Voor een kaart van 260px met 32px tussenruimte en
 * 24px marge tot de schermrand is minimaal 1432px nodig; 1440px is het eerste
 * veilige punt.
 */
@media (min-width: 1440px) {
	/* Containing block voor de absoluut gepositioneerde CTA. */
	.psc-has-sticky-cta #main > .fusion-row {
		position: relative;
	}

	.psc-cta--sticky {
		/* Halve breedte van de 800px brede, gecentreerde artikelkolom. */
		--psc-article-half: 400px;
		--psc-cta-gap: 32px;
		--psc-cta-width: 260px;

		display: block;
		position: absolute;
		/*
		 * --psc-cta-start wordt door cta.js op de rij gezet en is de afstand
		 * tot de bovenkant van de featured image. Zonder JavaScript begint de
		 * CTA bovenaan de rij; de sticky werking blijft dan gewoon intact.
		 */
		top: var(--psc-cta-start, 0px);
		bottom: 0;
		left: calc(50% + var(--psc-article-half) + var(--psc-cta-gap));
		width: var(--psc-cta-width);
	}

	/*
	 * De <aside> loopt door tot onderaan de rij en is het containing block voor
	 * de sticky kaart. Die stopt daardoor vanzelf onderaan het artikel en komt
	 * nooit in de footer. De offset houdt de vaste navigatie (--nav_height) vrij.
	 */
	.psc-cta--sticky .psc-cta__inner {
		position: sticky;
		top: calc(var(--nav_height, 80px) + 32px);
	}

	/* Op desktop blijft de inline variant verborgen. */
	.psc-cta--inline {
		display: none;
	}
}