/* CTA banner — Figma. A blue rounded banner with a text column and two buttons. Buttons come from
   the shared buttons.css, recoloured for the blue background. Tokens only; mobile-first. */

.ppc-cta-banner {
	background: var(--ppc-color-surface-light);
	padding-top: var(--ppc-section-pad-y);
	padding-bottom: 3rem;
	padding-inline: var(--ppc-section-inset-x);
}

.ppc-cta-banner__banner {
	position: relative;
	overflow: hidden;
	max-width: var(--ppc-container-width);
	margin-inline: auto;
	display: flex;
	flex-direction: column;
	gap: 2.5rem;
	padding: 2.5rem;
	border-radius: 40px;
	/* Figma pattern fill: white stars at 16% blended with overlay onto the blue (see tokens.css). */
	background: var(--ppc-texture-scheme5) repeat left top / 54.95px 109.9px, var(--ppc-color-scheme5-bg);
	background-blend-mode: overlay, normal;
	color: var(--ppc-color-scheme5-text);
	box-shadow:
		0 0 4px rgba(0, 0, 0, 0.16),
		inset -3px -3px 4px rgba(0, 0, 0, 0.25),
		inset 3px 3px 3px rgba(255, 255, 255, 0.25);
}

/* Mobile: the 2.5rem padding eats too much of the narrow banner. */
@media (max-width: 40rem) {
	.ppc-cta-banner__banner {
		gap: 2rem;
		padding: 1.5rem;
	}
}

@media (min-width: 60rem) {
	.ppc-cta-banner__banner {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		gap: 3rem;
		padding: 2.5rem 4rem 2.5rem 3rem;
	}
}

/* Text column */
.ppc-cta-banner__content {
	max-width: var(--ppc-measure);
}

.ppc-cta-banner__eyebrow {
	margin: 0 0 1rem;
	font-family: var(--ppc-font-open-sans);
	font-weight: var(--ppc-font-weight-semibold);
	font-size: var(--ppc-font-size-tagline);
	line-height: var(--ppc-line-height-tagline);
	color: var(--ppc-color-scheme5-text);
}

.ppc-cta-banner__title {
	margin: 0;
	font-family: var(--ppc-font-heading);
	font-weight: var(--ppc-font-weight-bold);
	font-size: var(--ppc-font-size-h2);
	line-height: var(--ppc-line-height-heading);
	letter-spacing: var(--ppc-letter-spacing-heading);
	color: var(--ppc-color-scheme5-text);
}

.ppc-cta-banner__rating {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-top: 2rem;
	font-family: var(--ppc-font-sans);
	font-size: 0.875rem;
	color: var(--ppc-color-scheme5-text);
	text-shadow: 0 2px 3px rgba(0, 0, 0, 0.2);
}

.ppc-cta-banner__rating-label {
	font-weight: var(--ppc-font-weight-semibold);
}

.ppc-cta-banner__rating-logo {
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: var(--ppc-color-success);
}

/* Buttons */
.ppc-cta-banner__actions {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 1.5rem;
	flex-shrink: 0;
}

@media (min-width: 60rem) {
	.ppc-cta-banner__actions {
		align-items: center;
	}
}

/* Primary uses the shared white maincta variant (ppc-button__maincta--white in buttons.css). */

/* Secondary: the shared textlink in the lightest blue for the blue background. */
.ppc-cta-banner__secondary.ppc-button__textlink {
	color: var(--ppc-color-picton-blue-lightest);
}