/* ============================================================
   Pladinum CTA Banner — pl-cta.css v1.2
   v1.1: dark-variant subheading token remap, legacy --pl-* refs -> --pld-*
   v1.2: subheading centered (margin-inline auto + text-align center, scoped to __text)
   Scoped under .pl-cta. Uses existing --pl-* design tokens.
   Layout fix baked in (icon/text/button flex behaviour).
   ============================================================ */

/* Full-width by default: the Elementor widget wrapper stretches
   so the banner always spans its column/container. */
.elementor-widget-pladinum_cta,
.elementor-widget-pladinum_cta .elementor-widget-container {
	width: 100%;
}

.pl-cta {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 24px;
	width: 100%;
	padding: 32px;
	border-radius: var(--pld-radius-lg, 24px);
	box-shadow: 0 0 1px 0 rgba(0, 0, 0, .15);
	position: relative;
	overflow: visible;
}

/* ---------- Variants ---------- */
.pl-cta--light {
	background-color: var(--pld-white, #fff);
}
.pl-cta--light .pl-cta__heading { color: var(--pld-heading-color, var(--pld-black, #000)); }

.pl-cta--dark {
	background-color: #000;
	/* v1.1: remap Global text tokens so .pld-body / .pld-content-sub /
	   .pld-body-sm inside the dark banner adapt (Global's dark group
	   does not set --pld-bodytext-color; the old --pl-sub-ondark token
	   does not exist and silently fell back). */
	--pld-heading-color:  var(--pld-heading-on-dark, #fff);
	--pld-subtext-color:  var(--pld-subheading-on-dark, rgba(255,255,255,.8));
	--pld-bodytext-color: var(--pld-subheading-on-dark, rgba(255,255,255,.8));
	--pld-finetext-color: var(--pld-fineprint-on-dark, rgba(166,166,166,.6));
}
.pl-cta--dark .pl-cta__heading { color: var(--pld-heading-on-dark, #fff); }
.pl-cta--dark .pl-cta__body    { color: var(--pld-subheading-on-dark, rgba(255,255,255,.8)); }

/* ---------- Icon (fixed, never grows/shrinks) ---------- */
.pl-cta__icon {
	flex: 0 0 auto;
	display: flex;
	font-size: 40px;
	line-height: 1;
	color: #5E5E5E;
}
.pl-cta__icon i  { display: block; }
.pl-cta__icon svg { width: 40px; height: 40px; display: block; fill: currentColor; }

/* icon vertical alignment within the row */
.pl-cta--icon-top    .pl-cta__icon { align-self: flex-start; }
.pl-cta--icon-middle .pl-cta__icon { align-self: center; }
.pl-cta--icon-bottom .pl-cta__icon { align-self: flex-end; }

/* ---------- Text block (the only flexible child) ---------- */
.pl-cta__text {
	flex: 1 1 auto;
	min-width: 0;            /* key line: lets text shrink/wrap instead of overflowing */
	display: flex;
	flex-direction: column;
	gap: 8px;                /* overridden by the responsive Gap control */
}
.pl-cta__heading {
	margin: 0;
	text-wrap: balance;
	word-break: break-word;
}
.pl-cta__body {
	margin: 0;
	max-width: 80%;
}

/* optional: balance subheading line lengths (toggle in panel) */
.pl-cta--balance .pl-cta__body {
	text-wrap: balance;
}

/* ---------- Button (fixed, never squashes) ---------- */
.pl-cta__btn {
	flex: 0 0 auto;
	min-width: 0;
	white-space: nowrap;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	overflow: hidden;
	position: relative;
}

/* pure-CSS chevron ">" — matches site button system, no font dependency */
.pl-cta__btn .pl-cta__chev {
	display: inline-block;
	width: 8px;
	height: 8px;
	border-top: 2px solid currentColor;
	border-right: 2px solid currentColor;
	transform: rotate(45deg);
	flex-shrink: 0;
}

/* hover: chevron slides up-right, fades, reappears from bottom-left */
.pl-cta__btn:hover .pl-cta__chev,
.pl-cta__btn:focus-visible .pl-cta__chev {
	animation: pl-cta-chev 0.55s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
@keyframes pl-cta-chev {
	0%   { transform: rotate(45deg) translate(0, 0);     opacity: 1; }
	40%  { transform: rotate(45deg) translate(6px, -6px); opacity: 0; }
	41%  { transform: rotate(45deg) translate(-6px, 6px); opacity: 0; }
	100% { transform: rotate(45deg) translate(0, 0);     opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
	.pl-cta__btn:hover .pl-cta__chev,
	.pl-cta__btn:focus-visible .pl-cta__chev { animation: none; }
}

/* ============================================================
   Responsive — tablet & mobile: stack, centered
   ============================================================ */
@media (max-width: 1366px) {
	.pl-cta {
		flex-direction: column;
		align-items: center;
		text-align: center;
		gap: 18px;
	}
	.pl-cta__icon {
		align-self: center;
		margin-left: auto;
		margin-right: auto;
	}
	.pl-cta__text { align-items: center; }
	.pl-cta__body { margin-left: auto; margin-right: auto; }

	.pl-cta--btn-full .pl-cta__btn {
		width: 100%;
		justify-content: center;
	}
	.pl-cta--btn-auto .pl-cta__btn {
		width: auto;
	}
}

@media (max-width: 600px) {
	.pl-cta { padding: 24px 20px; }
	.pl-cta__heading { font-size: 1.75rem; }
}

/* CTA uses Global .pld-body for typography; CTA only controls layout here */
.pl-cta .pl-cta__text .pld-body {
	max-width: 80%;
	margin-inline: auto;   /* v1.2: center the 80% block in the text column */
	text-align: center;    /* v1.2: center wrapped lines within it */
}