/**
 * 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) {

	/* Column gutters are supplied by horizontal padding on each
	   .ftps-grouped-callout below. This container used to cancel the two
	   outermost half-gutters with matching negative side margins, so that column
	   content sat flush with the section's edge. That technique needs the
	   surrounding context to have at least one --ftps-grouped-callout-col-gap of
	   slack to absorb the bleed, and the framework's own default is
	   --ftps-gutter-width: 0 (assets/css/src/_tokens.css) — so unless a theme
	   opts in, there is none, and the container overflowed its own box by 12px
	   on each side. Measured as a 12px horizontal scroll at every viewport from
	   37.5em up to the point where .ftps-grouped-callouts-inner reaches
	   --ftps-max-width-wide and its auto margins absorb it (#329).

	   The outer half-gutters are now simply left in place: the row's outer edges
	   sit one col-gap inside the section rather than flush with it. That cannot
	   push the page into horizontal scroll from any ambient padding, and unlike
	   overflow-x it cannot clip a focus ring or a shadow either. */
	.page-section-grouped-callouts .ftps-grouped-callouts-container {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		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);
	}
}