/**
 * FairFlock About page — full-bleed hero + section stack.
 */

body.ff-about-page .ff-about-page,
.ff-about-page {
	width: 100% !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
	box-sizing: border-box;
}

body.ff-about-page:not(.home):not(.front-page) .wp-site-blocks > main.ff-about-page {
	padding-top: 0 !important;
}

body.ff-about-page .ff-about-page .wp-block-post-content,
.ff-about-page .wp-block-post-content,
.ff-about-page .wp-block-post-content.alignwide,
.ff-about-page .wp-block-post-content.alignfull {
	width: 100% !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

body.ff-about-page .ff-about-page .wp-block-post-content > *.alignfull,
.ff-about-page .wp-block-post-content > *.alignfull {
	width: 100% !important;
	max-width: none !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

/* —— Hero: edge-to-edge plane, brand first, content dead-center —— */
.ff-about-hero,
.wp-block-group.ff-about-hero {
	position: relative;
	isolation: isolate;
}

.ff-about-hero__cover,
.ff-about-hero .wp-block-cover.ff-about-hero__cover {
	min-height: min(88vh, 820px) !important;
	padding: 0 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	background-color: #0e1114;
}

/* Placeholder look when no media is set yet */
.ff-about-hero__cover:not(:has(.wp-block-cover__image-background)):not(:has(video)),
.ff-about-hero .wp-block-cover.ff-about-hero__cover:not(:has(.wp-block-cover__image-background)):not(:has(video)) {
	background:
		radial-gradient(ellipse 70% 55% at 50% 40%, color-mix(in srgb, var(--wp--preset--color--brand, #377530) 28%, transparent), transparent 68%),
		linear-gradient(155deg, #0e1114 0%, #172018 45%, #243028 100%);
}

.ff-about-hero__cover:not(:has(.wp-block-cover__image-background)):not(:has(video)) .wp-block-cover__background {
	background:
		radial-gradient(ellipse 70% 55% at 50% 40%, color-mix(in srgb, var(--wp--preset--color--brand, #377530) 22%, transparent), transparent 68%),
		linear-gradient(155deg, #0e1114 0%, #172018 45%, #243028 100%) !important;
	opacity: 1 !important;
}

/* With media: never paint an opaque overlay over the image — keep WP dimRatio */
.ff-about-hero__cover:has(.wp-block-cover__image-background) .wp-block-cover__background,
.ff-about-hero__cover:has(video) .wp-block-cover__background {
	background-image: none !important;
	/* Keep solid tint if Cover set a color; opacity comes from has-background-dim-* */
}

/* Dark overlay must stay ink in Light + Dark (palette contrast flips). */
.ff-about-hero__cover .wp-block-cover__background.has-contrast-background-color,
.ff-about-hero__cover .wp-block-cover__background.has-background-dim {
	background-color: #0e1114 !important;
}

/* Ensure editor-chosen hero image actually shows on the frontend */
.ff-about-hero__cover .wp-block-cover__image-background,
.ff-about-hero__cover img.wp-block-cover__image-background,
.ff-about-hero__cover video.wp-block-cover__video-background {
	position: absolute !important;
	inset: 0 !important;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	margin: 0 !important;
	object-fit: cover !important;
	object-position: center !important;
	z-index: 0 !important;
	pointer-events: none;
}

.ff-about-hero__cover .wp-block-cover__background {
	z-index: 1 !important;
}

.ff-about-hero__cover .wp-block-cover__inner-container {
	z-index: 2 !important;
	position: relative;
}

/*
 * Shrink the cover content to the reading measure and center that box
 * in the viewport — do NOT stretch to --ff-shell (that left-aligns copy).
 */
.ff-about-hero__cover .wp-block-cover__inner-container,
.ff-about-hero .wp-block-cover__inner-container {
	width: min(40rem, var(--ff-shell)) !important;
	max-width: min(40rem, var(--ff-shell)) !important;
	margin-inline: auto !important;
	padding-top: calc(var(--ff-header-clearance) + var(--wp--preset--spacing--40, 32px)) !important;
	padding-bottom: var(--wp--preset--spacing--60, 48px) !important;
	padding-left: var(--ff-gutter, 32px) !important;
	padding-right: var(--ff-gutter, 32px) !important;
	box-sizing: border-box;
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	justify-content: center !important;
	text-align: center !important;
}

.ff-about-hero__copy,
.ff-about-hero .ff-about-hero__copy,
.wp-block-group.ff-about-hero__copy {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 14px;
	width: 100% !important;
	max-width: 100% !important;
	margin: 0 !important;
	text-align: center !important;
}

/* Kill WP constrained / left-justification leftovers inside the hero */
.ff-about-hero .ff-about-hero__copy.is-layout-constrained > *,
.ff-about-hero .ff-about-hero__copy > *,
.ff-about-hero .wp-block-cover__inner-container > * {
	margin-left: auto !important;
	margin-right: auto !important;
	text-align: center !important;
}

.ff-about-hero__brand,
.ff-about-hero__title,
.ff-about-hero__lead,
.ff-about-hero .ff-about-hero__brand,
.ff-about-hero .ff-about-hero__title,
.ff-about-hero .ff-about-hero__lead,
.ff-about-hero .wp-block-heading,
.ff-about-hero p,
.ff-about-hero h1,
.ff-about-hero h2 {
	width: 100% !important;
	max-width: 100% !important;
	margin-left: auto !important;
	margin-right: auto !important;
	text-align: center !important;
}

.ff-about-hero__brand {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
	color: #fff !important;
}

.ff-about-hero__title,
.ff-about-hero .ff-about-hero__title {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
	font-size: clamp(1.25rem, 2.2vw, 1.65rem);
	font-weight: 400;
	letter-spacing: -0.02em;
	line-height: 1.3;
	color: color-mix(in srgb, #fff 86%, var(--wp--preset--color--brand, #377530));
}

.ff-about-hero__lead,
.ff-about-hero .ff-about-hero__lead {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
	font-size: 1.0625rem;
	line-height: 1.55;
	color: color-mix(in srgb, #fff 74%, transparent);
	max-width: 34rem !important;
}

.ff-about-hero__cta,
.ff-about-hero .ff-about-hero__cta,
.ff-about-hero .wp-block-buttons {
	display: flex !important;
	flex-wrap: wrap !important;
	justify-content: center !important;
	align-items: center !important;
	width: 100% !important;
	margin-top: 6px !important;
	margin-left: auto !important;
	margin-right: auto !important;
	gap: 10px;
}

.ff-about-hero .wp-block-button {
	margin: 0 !important;
}

.ff-about-hero__btn .wp-block-button__link,
.ff-about-hero__cta .wp-element-button,
.ff-about-hero .wp-block-button__link {
	min-height: 48px;
	padding: 12px 22px;
	border-radius: var(--wp--custom--radius--sm, 8px);
	background: var(--wp--preset--color--brand, #377530) !important;
	color: #fff !important;
	font-weight: 700;
	text-decoration: none;
	text-align: center !important;
}

.ff-about-hero__btn .wp-block-button__link:hover,
.ff-about-hero__cta .wp-element-button:hover,
.ff-about-hero .wp-block-button__link:hover {
	background: var(--wp--preset--color--brand-deep, #2a5c25) !important;
}

.ff-about-story .ff-media-split,
.ff-about-visit .ff-media-split,
.ff-about-values .ff-pattern-steps__shell,
.ff-about-cta .ff-end-box,
.ff-about-faq .ff-pattern-faq__shell {
	width: var(--ff-shell) !important;
	max-width: var(--ff-shell) !important;
	margin-inline: auto !important;
}

.ff-about-visit .ff-media-split--flip {
	grid-template-columns: 1.1fr 1fr;
}

.ff-about-values {
	background: color-mix(in srgb, var(--wp--preset--color--base, #f3f5f4) 65%, #fff);
}

@media (max-width: 720px) {
	.ff-about-hero__cover,
	.ff-about-hero .wp-block-cover.ff-about-hero__cover {
		min-height: min(78vh, 640px) !important;
	}
}