/**
 * Grouped Callouts — default design tokens.
 *
 * These are the plugin-level defaults for --ftps-grouped-callout-* properties.
 * Override any of them in your theme's page-sections-tokens.css file.
 */

@layer ftps-defaults {

.page-section-grouped-callouts {

	/* ── Container ──────────────────────────────────────────────────── */
	--ftps-grouped-callouts-margin: var(--space-normal, 1rem);
	--ftps-grouped-callout-gap: var(--space-large, 1.5rem);
	--ftps-grouped-callout-col-gap: var(--space-small, 0.75rem);

	/* ── Image ───────────────────────────────────────────────────────── */
	--ftps-grouped-callout-image-padding: var(--space-normal, 1rem);
	--ftps-grouped-callout-image-width: 37%;
	--ftps-grouped-callout-image-max-width-sm: 240px;
	--ftps-grouped-callout-image-max-width-md: 270px;
	--ftps-grouped-callout-image-border-radius: 50%;

	/* ── Typography ─────────────────────────────────────────────────── */
	--ftps-grouped-callout-title-font-size: 0.8387em;
	--ftps-grouped-callout-title-line-height: 1.3461;

	/* ── Column grid ────────────────────────────────────────────────── */
	--ftps-grouped-callout-col-max-width: 50%;
	--ftps-grouped-callout-col-width-desktop: 25%;
}

} /* end @layer ftps-defaults */

/* ── Grouped callouts block styles ─────────────────────────────────────────── */

.page-section-grouped-callouts .ftps-grouped-callouts-container {
	margin: var(--ftps-grouped-callouts-margin) 0;
}

.page-section-grouped-callouts .ftps-grouped-callout + .ftps-grouped-callout {
	margin-top: var(--ftps-grouped-callout-gap);
}

.page-section-grouped-callouts .ftps-grouped-callout-inner {
	align-items: center;
	display: flex;
}

.page-section-grouped-callouts .ftps-grouped-callout-image {
	padding-right: var(--ftps-grouped-callout-image-padding);
	width: var(--ftps-grouped-callout-image-width);
}

.page-section-grouped-callouts .ftps-grouped-callout-image img {
	border: 0;
	border-radius: var(--ftps-grouped-callout-image-border-radius);
}

.page-section-grouped-callouts .ftps-grouped-callout-title {
	font-size: var(--ftps-grouped-callout-title-font-size);
	line-height: var(--ftps-grouped-callout-title-line-height);
}

.page-section-grouped-callouts .ftps-grouped-callout-title h3 {
	margin: 0;
}

.page-section-grouped-callouts .ftps-grouped-callout-title a {
	color: inherit;
}

.page-section-grouped-callouts .ftps-grouped-callout .ft-actions {
	margin: 0;
}

@media (min-width: 37.5em) {

	.page-section-grouped-callouts .ftps-grouped-callouts-container {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		margin-left: calc(-1 * var(--ftps-grouped-callout-col-gap));
		margin-right: calc(-1 * var(--ftps-grouped-callout-col-gap));
		margin-top: calc(-1 * var(--ftps-grouped-callout-gap));
	}

	.page-section-grouped-callouts .ftps-grouped-callout {
		margin-top: var(--ftps-grouped-callout-gap);
		max-width: var(--ftps-grouped-callout-col-max-width);
		padding: 0 var(--ftps-grouped-callout-col-gap);
	}

	.page-section-grouped-callouts .ftps-grouped-callout + .ftps-grouped-callout {
		margin-top: var(--ftps-grouped-callout-gap);
	}

	.page-section-grouped-callouts .ftps-grouped-callout-inner {
		flex-direction: column;
		justify-content: center;
	}

	.page-section-grouped-callouts .ftps-grouped-callout-image {
		max-width: var(--ftps-grouped-callout-image-max-width-sm);
		padding-right: 0;
		width: auto;
	}

	.page-section-grouped-callouts .ftps-grouped-callout-content {
		text-align: center;
	}

	.page-section-grouped-callouts .ftps-grouped-callout-title {
		font-size: inherit;
		line-height: inherit;
		margin-top: var(--ftps-grouped-callouts-margin);
	}
}

@media (min-width: 48.5em) {

	.page-section-grouped-callouts .ftps-grouped-callout-image {
		max-width: var(--ftps-grouped-callout-image-max-width-md);
	}
}

@media (min-width: 64em) {

	.page-section-grouped-callouts .ftps-grouped-callouts-inner {
		margin: 0 auto;
		max-width: var(--ftps-max-width-wide);
	}

	.page-section-grouped-callouts .ftps-grouped-callout {
		width: var(--ftps-grouped-callout-col-width-desktop);
	}
}