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

@layer ftps-defaults {

.page-section-hero {

	/* ── Layout ─────────────────────────────────────────────────────── */
	--ftps-hero-inner-max-width: 1200px;
	--ftps-hero-content-padding-right: var(--space-xlarge, 2.5rem);
	--ftps-hero-content-max-width: 43%;
	--ftps-hero-content-text-align: center;

	/* ── Title (eyebrow / label) ────────────────────────────────────── */
	--ftps-hero-title-transform: uppercase;
	--ftps-hero-title-font-size: var(--label-medium-size, 2.625rem);
	--ftps-hero-title-font-family: var(--label-medium-font, serif), var(--ftm-display-fallbacks);
	--ftps-hero-title-font-weight: var(--label-medium-weight, 400);
	--ftps-hero-title-line-height: var(--label-medium-line-height, 1.2);
	--ftps-hero-title-letter-spacing: var(--label-medium-letter-spacing, normal);

	/* ── Body text ───────────────────────────────────────────────────── */
	--ftps-hero-body-font-size: var(--body-large-size, 1.125rem);
	--ftps-hero-body-font-family: var(--body-large-font, sans-serif);
	--ftps-hero-body-font-weight: var(--body-large-weight, 400);
	--ftps-hero-body-line-height: var(--body-large-line-height, 1.5);
	--ftps-hero-body-letter-spacing: var(--body-large-letter-spacing, normal);

	/* ── Heading (h2 in hero-text, wide breakpoint) ─────────────────── */
	--ftps-hero-heading-font-size: var(--display-large-size, 2.625rem);
	--ftps-hero-heading-font-family: var(--display-large-font, serif), var(--ftm-display-fallbacks);
	--ftps-hero-heading-font-weight: var(--display-large-weight, 400);
	--ftps-hero-heading-line-height: var(--display-large-line-height, 1.2);
	--ftps-hero-heading-letter-spacing: var(--display-large-letter-spacing, normal);

	/* ── Spacing ────────────────────────────────────────────────────── */
	--ftps-hero-spacing-xs: var(--space-xsmall, 0.5rem);
	--ftps-hero-spacing-normal: var(--space-normal, 1rem);
	--ftps-hero-actions-menu-gutter: 0;
}

} /* end @layer ftps-defaults */

/*
 * Full-bleed breakout. The native block render also sets this inline (render.php),
 * but the block editor preview and the legacy ft_page_section_output render path do
 * not — without it the section stays at content-column width, so the scheme
 * background painted on .page-section-inner shows tablet/mobile gutters instead of
 * spanning the viewport. Declaring it here (this stylesheet loads in both the editor
 * and the front end) makes every context match, and is a harmless no-op where the
 * inline style already applies. Mirrors the modern ftm/page-section _hero.css.
 */
.page-section.page-section-hero {
	margin: 0;
	width: 100vw;
	margin-left: calc(-50vw + 50%);
}

/* The image container gets a background-image applied through css */
.ftps-hero-image {
	background-size: cover;

	@media(min-width: 48.5em){
		align-self: flex-start;
	}
}

/*
 * On desktop the image column defines the hero's height. An inline <img> reserves
 * line-box descender space beneath it, leaving an ~8px gap at the bottom of the
 * image container through which the section background-color bleeds. Making the
 * image a block element collapses that line box so the image reaches the bottom
 * of its container. Mobile stacks differently and is handled separately.
 */
@media(min-width: 48.5em){
	
	.ftps-hero-image .ftps-hero-img,
	.ftps-hero-image img {
		display: block;
	}
}

/*
 * When .ftps-hero-image is a <figure> (block-editor wp:image context), critical.css
 * applies `figure { margin: var(--space-large) 0 }` which adds 24 px top/bottom margin
 * and makes the hero section 48 px taller than the legacy PHP render (which uses a <div>
 * for the image container instead of a <figure>).  Reset it here so the two renders
 * remain height-identical.
 */
figure.ftps-hero-image {
	margin: 0;
}


.ftps-hero-content {
	text-align: var(--ftps-hero-content-text-align);

	@media(min-width: 48.5em){
		text-align: initial;
		padding-right: var(--ftps-hero-content-padding-right);
		max-width: var(--ftps-hero-content-max-width);	
	}
}

.page-section-hero .ftps-hero-title,
.page-section-hero .ftps-hero-title h2 {
	text-transform: var(--ftps-hero-title-transform);
	font-size: var(--ftps-hero-title-font-size);
	font-family: var(--ftps-hero-title-font-family);
	line-height: var(--ftps-hero-title-line-height);
	letter-spacing: var(--ftps-hero-title-letter-spacing);
	font-weight: var(--ftps-hero-title-font-weight);
	margin: var(--ftps-hero-spacing-xs) 0;

	@media(min-width: 45em){
		margin-top: var(--ftps-hero-spacing-normal);

	}

}

.page-section-hero .ftps-hero-text h2,
.page-section-hero h2.ftps-hero-text,
.page-section-hero .entry-content .ftps-hero-text h2,
.page-section-hero .ftps-section-text h2,
.page-section-hero .ftps-section-text .wp-block-heading {
	margin: var(--ftps-hero-spacing-xs) 0;
	font-size: var(--ftps-hero-heading-font-size);
	font-family: var(--ftps-hero-heading-font-family);
	line-height: var(--ftps-hero-heading-line-height);
	letter-spacing: var(--ftps-hero-heading-letter-spacing);
	font-weight: var(--ftps-hero-heading-font-weight);

}

.page-section-hero .ftps-hero-text p, 
.page-section-hero .entry-content .ftps-hero-text p {
	font-size: var(--ftps-hero-body-font-size);
	font-family: var(--ftps-hero-body-font-family);
	line-height: var(--ftps-hero-body-line-height);
	letter-spacing: var(--ftps-hero-body-letter-spacing);
	font-weight: var(--ftps-hero-body-font-weight);
	margin: var(--ftps-hero-spacing-xs) 0;	
	
}

.page-section-hero .ftps-hero-inner {

	@media(min-width: 48.5em){
		display: flex;
		flex-direction: row-reverse;
		align-items: center;
		justify-content: space-between;
		max-width: var(--ftps-hero-inner-max-width);
		margin: 0 auto;
	}
}

.page-section-hero .menu.actions {
    margin: var(--ftps-hero-actions-menu-gutter);
	padding-inline-start: 0;
}