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

@layer ftps-defaults {

.page-section-banner {

	/* ── Colors ────────────────────────────────────────────────────── */
	--ftps-banner-accent-color: var(--color-primary, #3a3a3a);
	--ftps-banner-text-color: inherit;

	/* ── Layout ─────────────────────────────────────────────────────── */
	--ftps-banner-image-padding-bottom: 10%;
	--ftps-radius-control: var(--border-radius, 3px);
	--ftps-radius-media: var(--border-radius-image, 10px);
	--ftps-banner-border-radius: var(--ftps-banner-radius-surface, var(--ftps-radius-control));
	--ftps-banner-inner-border-radius: var(--ftps-banner-radius-inner, var(--ftps-radius-media));
	--ftps-banner-inner-radius-top-left: var(--ftps-banner-inner-border-radius);
	--ftps-banner-inner-radius-top-right: var(--ftps-banner-inner-border-radius);
	--ftps-banner-inner-radius-bottom-right: var(--ftps-banner-inner-border-radius);
	--ftps-banner-inner-radius-bottom-left: var(--ftps-banner-inner-border-radius);
	--ftps-banner-max-width: 1200px;
	--ftps-banner-content-padding: var(--space-normal, 1rem);

	/* ── Two-column layout (≥ 45 em) ────────────────────────────────── */
	--ftps-banner-content-max-width: 70%;
	--ftps-banner-image-min-width: 70%;
}

} /* end @layer ftps-defaults */

/* The image container gets a background-image applied through css */
.ftps-banner-image {
	background-size: cover;
	padding-bottom: var(--ftps-banner-image-padding-bottom);
	position: relative;

	@media (min-width: 45em) {
		bottom: 0;
		min-width: var(--ftps-banner-image-min-width);
		padding-bottom: 0;
		position: absolute;
		right: 0;
		top: 0;
	}
}

.page-section-banner {
	border-radius: var(--ftps-banner-border-radius);
	overflow: hidden;
}

/* If this is the first section in an output position remove top corner radius via scoped token overrides. */
.ft-page-sections .page-section-banner:first-child {
	--ftps-banner-inner-radius-top-left: 0;
	--ftps-banner-inner-radius-top-right: 0;
}

/* If this is the first section in an output position remove the border on the top of the image. */
.ft-page-sections .page-section-banner:first-child img {
	border-top: none;
}

.page-section-banner .banner-inner {
	border-radius: var(--ftps-banner-inner-border-radius);
	border-top-left-radius: var(--ftps-banner-inner-radius-top-left);
	border-top-right-radius: var(--ftps-banner-inner-radius-top-right);
	border-bottom-right-radius: var(--ftps-banner-inner-radius-bottom-right);
	border-bottom-left-radius: var(--ftps-banner-inner-radius-bottom-left);
	display: flex;
	flex-direction: column-reverse;
	overflow: hidden;
	position: relative;

	@media (min-width: 45em) {
		background-color: var(--ftps-banner-accent-color);
		margin: 0 auto;
		max-width: var(--ftps-banner-max-width);
		position: relative;
	}
}



.ftps-banner-image::before {
	background: linear-gradient(to bottom, var(--ftps-banner-accent-color), transparent);
	bottom: 0;
	content: "";
	display: block;
	left: 0;
	position: absolute;
	right: 0;
	top: 0;
	z-index: 2;

	@media (min-width: 45em) {

		background: linear-gradient(to right, var(--ftps-banner-accent-color), var(--ftps-banner-accent-color) 16.6666%, transparent);
	}
}

.ftps-banner-image img {
	opacity: 0;
	position: absolute;
	z-index: -1;
}

/* Compatibility with ftm-shop-the-image wrappers/buttons when banner attachments
 * include related products (has-related-products + data-dialog-target). */
.ftps-banner-image .ft-shop-the-image {
	position: static;
}

.ftps-banner-image .shop-the-image-button {
	z-index: 4;
}

.ftps-banner-content {
	background-color: var(--ftps-banner-accent-color);
	position: relative;

	@media (min-width: 45em) {

		background-color: transparent;
		max-width: var(--ftps-banner-content-max-width);
		padding: var(--ftps-banner-content-padding);
		z-index: 2;
	}
}

.ftps-banner-content * {
	color: var(--ftps-banner-text-color);
}

/* Legacy render path only: rich-text content area inside .ftps-banner-content. */
.page-section-banner .banner-content {
	padding: 0 var(--ftps-banner-content-padding);
}