/* About Us layout. WordPress and Polylang remain the source of page content. */

body:not(.wp-admin) .wp-block-post-content:has(.fsra-about-us-mission-vision-goals) {
	/* Page colors. */
	--fsra-about-bg: var(--fsra-page-bg, #E7ECF2);
	--fsra-about-surface: var(--fsra-page-surface, #FFFFFF);
	--fsra-about-ink: var(--fsra-page-text, #071A33);
	--fsra-about-muted: #46536A;
	--fsra-about-line: rgba(7, 26, 51, 0.14);
	/* Shared section width and spacing. */
	--fsra-about-gutter: max(1.25rem, env(safe-area-inset-left));
	--fsra-about-shell: max(var(--fsra-about-gutter), 5vw, (100% - 1400px) / 2);
	--fsra-about-band: clamp(3rem, 4.75vw, 5rem);
	--fsra-about-gap: clamp(2rem, 4.5vw, 5rem);
	--fsra-about-radius: clamp(0.4rem, 0.7vw, 0.75rem);

	width: 100%;
	max-width: none !important;
	margin-inline: 0 !important;
	overflow: clip;
	background: var(--fsra-about-bg);
	color: var(--fsra-about-ink);
}

/* The page template's reading column would otherwise cap these full-bleed bands. */
body:not(.wp-admin) .fsra-page-main:has(.fsra-about-us-mission-vision-goals) {
	width: 100%;
	max-width: none;
	margin: 0 !important;
	padding: 0 !important;
}

/* The editable content supplies its own H1. */
body:not(.wp-admin) .fsra-page-main:has(.fsra-about-us-mission-vision-goals) > .wp-block-post-title,
body:not(.wp-admin) .fsra-page-main:has(.fsra-about-us-mission-vision-goals) > .wp-block-post-featured-image {
	display: none;
}

body:not(.wp-admin) .wp-block-post-content:has(.fsra-about-us-mission-vision-goals) :is(h1, h2, p) {
	overflow-wrap: break-word;
}

/* --------------------------------------------------------------------------
 * Bands
 * ----------------------------------------------------------------------- */

/* Intro and story sections. */
body:not(.wp-admin) :is(main, #wp--skip-link--target) .wp-block-post-content:has(.fsra-about-us-mission-vision-goals) > :is(
	.fsra-section__inner,
	.fsra-about-us-mission-vision-goals,
	.fsra-about-us-najbolja-praksa,
	.fsra-about-us-entuzijazam,
	.fsra-about-us-prijateljstvo
) {
	position: relative;
	margin: 0 !important;
	padding: var(--fsra-about-band) var(--fsra-about-shell) !important;
	border: 0 !important;
	background: var(--fsra-about-bg) !important;
}

/* Alternate section backgrounds. */
body:not(.wp-admin) :is(main, #wp--skip-link--target) .wp-block-post-content:has(.fsra-about-us-mission-vision-goals) > :is(
	.fsra-about-us-najbolja-praksa,
	.fsra-about-us-prijateljstvo
) {
	background: var(--fsra-about-surface) !important;
}

/* --------------------------------------------------------------------------
 * Intro: title and lead on the narrow track, the team photograph on the wide one
 * ----------------------------------------------------------------------- */

body:not(.wp-admin) .wp-block-post-content:has(.fsra-about-us-mission-vision-goals) > .fsra-section__inner:first-child {
	display: grid;
	grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr);
	gap: var(--fsra-about-gap);
	align-items: center;
	padding-top: clamp(3.25rem, 5.5vw, 5.5rem) !important;
	padding-bottom: clamp(3rem, 5vw, 5.5rem) !important;
}

/* Remove the block editor content-width limit. */
body:not(.wp-admin) .fsra-about-intro__copy {
	position: relative;
	min-width: 0;
	max-width: none !important;
	margin-inline: 0 !important;
}

/* Divider between the intro copy and image. */
body:not(.wp-admin) .fsra-about-intro__copy::after {
	content: "";
	position: absolute;
	top: 0.45rem;
	bottom: 0.45rem;
	right: calc(var(--fsra-about-gap) / -2 - 1px);
	width: 2px;
	border-radius: 2px;
	background: linear-gradient(180deg, #AF0000, rgba(13, 79, 130, 0.55) 55%, transparent);
}

body:not(.wp-admin) .fsra-about-intro__copy::before {
	content: "";
	display: block;
	width: clamp(4.5rem, 8vw, 7rem);
	height: 0.3rem;
	margin-bottom: clamp(1.25rem, 2vw, 1.75rem);
	background: linear-gradient(90deg, #AF0000, #0AA7D9);
}

body:not(.wp-admin) .fsra-about-intro__copy h1 {
	margin: 0 0 clamp(1rem, 1.6vw, 1.5rem) !important;
	color: var(--fsra-about-ink) !important;
	font-size: clamp(2.5rem, 4.4vw, 4.5rem) !important;
	font-weight: 700 !important;
	line-height: 1.02;
	letter-spacing: -0.035em;
	text-align: left !important;
	text-wrap: balance;
}

body:not(.wp-admin) :is(main, #wp--skip-link--target) .fsra-about-intro__copy p {
	max-width: 34rem;
	margin: 0 !important;
	color: var(--fsra-about-muted) !important;
	font-size: clamp(1.05rem, 1.2vw, 1.2rem) !important;
	line-height: 1.75;
	text-align: left !important;
	text-wrap: pretty;
}

/* Capped at the source width so the picture is only ever scaled down. */
body:not(.wp-admin) .fsra-about-intro__media {
	position: relative;
	width: 100%;
	max-width: 980px !important;
	margin: 0 !important;
	overflow: hidden;
	border-radius: var(--fsra-about-radius);
	background: var(--fsra-about-bg);
	box-shadow: 0 1.25rem 3rem -2rem rgba(7, 26, 51, 0.45);
}

/* No forced ratio: a group portrait must not lose the people at its edges. */
body:not(.wp-admin) .fsra-about-intro__media img {
	display: block;
	width: 100%;
	max-width: 100%;
	height: auto;
	object-fit: cover;
}

/* --------------------------------------------------------------------------
 * Mission / Vision / Goals: three cards
 * ----------------------------------------------------------------------- */

body:not(.wp-admin) .fsra-about-us-mission-vision-goals > .wp-block-columns {
	display: grid !important;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	grid-auto-rows: 1fr;
	gap: clamp(1rem, 1.6vw, 1.5rem) !important;
	width: 100%;
	max-width: none !important;
	margin: 0 !important;
}

body:not(.wp-admin) .fsra-about-us-mission-vision-goals > .wp-block-columns > .wp-block-column {
	position: relative;
	/* Override inline top alignment so all cards have equal height. */
	align-self: stretch !important;
	min-width: 0;
	padding: clamp(3.25rem, 4.5vw, 4rem) clamp(1.75rem, 2.4vw, 2.35rem) clamp(1.75rem, 2.4vw, 2.35rem) !important;
	border: 1px solid var(--fsra-about-line);
	border-radius: 0.35rem;
	background: var(--fsra-about-surface);
	box-shadow: 0 1rem 2.5rem -1.85rem rgba(7, 26, 51, 0.5);
}

/* sections.css supplies the rail itself; it only needs placing in the card. */
body:not(.wp-admin) .fsra-about-us-mission-vision-goals > .wp-block-columns > .wp-block-column::before {
	position: absolute;
	top: clamp(1.75rem, 2.4vw, 2.35rem) !important;
	left: clamp(1.75rem, 2.4vw, 2.35rem);
}

/* Keep headings inside legacy icon wrappers and hide empty wrappers. */
body:not(.wp-admin) .fsra-about-us-mission-vision-goals .fsra-about-us__icon-placeholder {
	display: contents !important;
}

body:not(.wp-admin) .fsra-about-us-mission-vision-goals .fsra-about-us__icon-placeholder:not(:has(:is(h1, h2, h3, h4, h5, h6))) {
	display: none !important;
}

body:not(.wp-admin) .fsra-about-us-mission-vision-goals .wp-block-column h2 {
	margin: 0 0 0.85rem !important;
	color: var(--fsra-about-ink) !important;
	font-size: clamp(1.1rem, 1.35vw, 1.3rem) !important;
	font-weight: 700 !important;
	line-height: 1.2;
	letter-spacing: 0.09em;
	text-align: left !important;
}

body:not(.wp-admin) :is(main, #wp--skip-link--target) .fsra-about-us-mission-vision-goals .wp-block-column p {
	margin: 0 !important;
	color: var(--fsra-about-muted) !important;
	font-size: clamp(0.98rem, 1.05vw, 1.05rem) !important;
	line-height: 1.7;
	text-align: left !important;
	text-wrap: pretty;
}

/* --------------------------------------------------------------------------
 * Story rows: photograph on the wide track, copy on the narrow one
 * ----------------------------------------------------------------------- */

body:not(.wp-admin) :is(
	.fsra-about-us-najbolja-praksa,
	.fsra-about-us-entuzijazam,
	.fsra-about-us-prijateljstvo
) > .wp-block-columns {
	display: flex !important;
	flex-wrap: nowrap;
	gap: var(--fsra-about-gap);
	align-items: center;
	width: 100%;
	max-width: none !important;
	margin: 0 !important;
}

/* Preserve alternating order and override inline column widths. */
body:not(.wp-admin) :is(
	.fsra-about-us-najbolja-praksa,
	.fsra-about-us-entuzijazam,
	.fsra-about-us-prijateljstvo
) > .wp-block-columns > .wp-block-column {
	flex: 0.85 1 0 !important;
	min-width: 0;
}

body:not(.wp-admin) :is(
	.fsra-about-us-najbolja-praksa,
	.fsra-about-us-entuzijazam,
	.fsra-about-us-prijateljstvo
) > .wp-block-columns > .wp-block-column:has(.wp-block-image) {
	flex: 1.2 1 0 !important;
}

body:not(.wp-admin) :is(
	.fsra-about-us-najbolja-praksa,
	.fsra-about-us-entuzijazam,
	.fsra-about-us-prijateljstvo
) h2 {
	margin: 0 0 clamp(0.9rem, 1.4vw, 1.25rem) !important;
	color: var(--fsra-about-ink) !important;
	font-size: clamp(1.85rem, 2.5vw, 2.9rem) !important;
	font-weight: 700 !important;
	line-height: 1.08;
	letter-spacing: -0.03em;
	text-wrap: balance;
}

body:not(.wp-admin) :is(main, #wp--skip-link--target) :is(
	.fsra-about-us-najbolja-praksa,
	.fsra-about-us-entuzijazam,
	.fsra-about-us-prijateljstvo
) p {
	max-width: 60ch;
	margin: 0 !important;
	color: var(--fsra-about-muted) !important;
	font-size: clamp(1.02rem, 1.1vw, 1.1rem) !important;
	line-height: 1.8;
	text-wrap: pretty;
}

/* Do not italicize full story paragraphs. */
body:not(.wp-admin) :is(
	.fsra-about-us-najbolja-praksa,
	.fsra-about-us-entuzijazam,
	.fsra-about-us-prijateljstvo
) p em {
	font-style: normal;
}

/* Do not upscale story images beyond 980px. */
body:not(.wp-admin) :is(
	.fsra-about-us-najbolja-praksa,
	.fsra-about-us-entuzijazam,
	.fsra-about-us-prijateljstvo
) .wp-block-image {
	position: relative;
	width: 100%;
	max-width: 980px;
	margin: 0 auto !important;
	overflow: hidden;
	border-radius: var(--fsra-about-radius);
	background: var(--fsra-about-bg);
	box-shadow: 0 1.25rem 3rem -2rem rgba(7, 26, 51, 0.4);
}

/* No forced ratio: the native 2:1-ish frames keep every subject intact. */
body:not(.wp-admin) :is(
	.fsra-about-us-najbolja-praksa,
	.fsra-about-us-entuzijazam,
	.fsra-about-us-prijateljstvo
) .wp-block-image img {
	display: block;
	width: 100%;
	max-width: 100%;
	height: auto;
	object-fit: cover;
}

/* --------------------------------------------------------------------------
 * Entrance effects
 * ----------------------------------------------------------------------- */

@media (scripting: enabled) {
	body:not(.wp-admin) .wp-block-post-content:has(.fsra-about-us-mission-vision-goals) .fsra-editorial-reveal.fsra-reveal {
		opacity: 1;
		transform: none;
		transition: none;
		will-change: auto;
	}

	body:not(.wp-admin) .wp-block-post-content:has(.fsra-about-us-mission-vision-goals) :is(
		.fsra-about-card-reveal.fsra-reveal,
		.fsra-about-intro__media.fsra-reveal
	) {
		opacity: 0;
		transform: translate3d(0, 1.5rem, 0) scale(0.985);
		transition:
			opacity 640ms cubic-bezier(0.22, 1, 0.36, 1),
			transform 820ms cubic-bezier(0.22, 1, 0.36, 1);
		will-change: opacity, transform;
	}

	body:not(.wp-admin) .wp-block-post-content:has(.fsra-about-us-mission-vision-goals) .fsra-about-card-reveal.fsra-reveal:nth-child(2) {
		transition-delay: 120ms;
	}

	body:not(.wp-admin) .wp-block-post-content:has(.fsra-about-us-mission-vision-goals) .fsra-about-card-reveal.fsra-reveal:nth-child(3) {
		transition-delay: 240ms;
	}

	/* fsra-showcase.js adds the direction classes. */
	body:not(.wp-admin) .wp-block-post-content:has(.fsra-about-us-mission-vision-goals) .fsra-about-row-reveal.fsra-reveal {
		--fsra-about-row-x: -2.5rem;
		opacity: 0;
		transform: translate3d(var(--fsra-about-row-x), 0.65rem, 0);
		transition:
			opacity 700ms cubic-bezier(0.22, 1, 0.36, 1),
			transform 940ms cubic-bezier(0.22, 1, 0.36, 1);
		will-change: opacity, transform;
	}

	body:not(.wp-admin) .wp-block-post-content:has(.fsra-about-us-mission-vision-goals) .fsra-about-row-reveal--from-right.fsra-reveal {
		--fsra-about-row-x: 2.5rem;
	}

	body:not(.wp-admin) .wp-block-post-content:has(.fsra-about-us-mission-vision-goals) .fsra-about-row-reveal--copy.fsra-reveal {
		transition-delay: 130ms;
	}

	body:not(.wp-admin) .wp-block-post-content:has(.fsra-about-us-mission-vision-goals) :is(
		.fsra-about-card-reveal.fsra-reveal,
		.fsra-about-intro__media.fsra-reveal,
		.fsra-about-row-reveal.fsra-reveal
	).is-visible {
		opacity: 1;
		transform: none;
		will-change: auto;
	}
}

/* Reduce sideways movement on narrow screens. */
@media (scripting: enabled) and (max-width: 1023px) {
	body:not(.wp-admin) .wp-block-post-content:has(.fsra-about-us-mission-vision-goals) .fsra-about-row-reveal.fsra-reveal {
		--fsra-about-row-x: -1rem;
	}

	body:not(.wp-admin) .wp-block-post-content:has(.fsra-about-us-mission-vision-goals) .fsra-about-row-reveal--from-right.fsra-reveal {
		--fsra-about-row-x: 1rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	body:not(.wp-admin) .wp-block-post-content:has(.fsra-about-us-mission-vision-goals) :is(
		.fsra-about-card-reveal.fsra-reveal,
		.fsra-about-intro__media.fsra-reveal,
		.fsra-about-row-reveal.fsra-reveal
	) {
		opacity: 1;
		transform: none;
		transition: none;
		will-change: auto;
	}
}

/* --------------------------------------------------------------------------
 * Scroll-linked image movement
 * ----------------------------------------------------------------------- */

@property --fsra-about-drift {
	syntax: "<percentage>";
	inherits: true;
	initial-value: 0%;
}

@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		body:not(.wp-admin) :is(
			.fsra-about-intro__media,
			.fsra-about-us-najbolja-praksa .wp-block-image,
			.fsra-about-us-entuzijazam .wp-block-image,
			.fsra-about-us-prijateljstvo .wp-block-image
		) {
			animation: fsra-about-image-drift linear both;
			animation-timeline: view();
			animation-range: entry 6% exit 94%;
		}

		body:not(.wp-admin) :is(
			.fsra-about-intro__media,
			.fsra-about-us-najbolja-praksa .wp-block-image,
			.fsra-about-us-entuzijazam .wp-block-image,
			.fsra-about-us-prijateljstvo .wp-block-image
		) img {
			/* Prevent empty edges while the image moves. */
			transform: scale(1.07) translateY(var(--fsra-about-drift, 0%));
		}
	}
}

@keyframes fsra-about-image-drift {
	from {
		--fsra-about-drift: 2.6%;
	}

	to {
		--fsra-about-drift: -2.6%;
	}
}

/* --------------------------------------------------------------------------
 * Tablet
 * ----------------------------------------------------------------------- */

@media (max-width: 1180px) {
	body:not(.wp-admin) .wp-block-post-content:has(.fsra-about-us-mission-vision-goals) {
		--fsra-about-band: clamp(3rem, 5.5vw, 4.75rem);
		--fsra-about-gap: clamp(1.75rem, 3.5vw, 3.25rem);
	}

	body:not(.wp-admin) .wp-block-post-content:has(.fsra-about-us-mission-vision-goals) > .fsra-section__inner:first-child {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
	}
}

/* Single column below this width: a two-up would leave both tracks too narrow. */
@media (max-width: 1023px) {
	body:not(.wp-admin) .wp-block-post-content:has(.fsra-about-us-mission-vision-goals) > .fsra-section__inner:first-child {
		grid-template-columns: minmax(0, 1fr);
		gap: clamp(1.75rem, 4vw, 2.5rem);
	}

	body:not(.wp-admin) .fsra-about-intro__copy p {
		max-width: 64ch;
	}

	/* Stacked: there is no gutter left for the rail to divide. */
	body:not(.wp-admin) .fsra-about-intro__copy::after {
		display: none;
	}

	body:not(.wp-admin) .fsra-about-us-mission-vision-goals > .wp-block-columns {
		grid-template-columns: minmax(0, 1fr);
		grid-auto-rows: auto;
	}

	body:not(.wp-admin) .fsra-about-us-mission-vision-goals .wp-block-column p {
		max-width: 68ch;
	}

	/* Core pins .wp-block-columns to nowrap above 782px, hence !important. */
	body:not(.wp-admin) :is(
		.fsra-about-us-najbolja-praksa,
		.fsra-about-us-entuzijazam,
		.fsra-about-us-prijateljstvo
	) > .wp-block-columns {
		flex-wrap: wrap !important;
		gap: clamp(1.5rem, 4vw, 2.5rem);
	}

	/*
	 * The image column is listed explicitly: without it the wide-track rule
	 * above still wins on specificity and shrinks the photograph to nothing.
	 */
	body:not(.wp-admin) :is(
		.fsra-about-us-najbolja-praksa,
		.fsra-about-us-entuzijazam,
		.fsra-about-us-prijateljstvo
	) > .wp-block-columns > .wp-block-column,
	body:not(.wp-admin) :is(
		.fsra-about-us-najbolja-praksa,
		.fsra-about-us-entuzijazam,
		.fsra-about-us-prijateljstvo
	) > .wp-block-columns > .wp-block-column:has(.wp-block-image) {
		flex: 1 1 100% !important;
	}

	/* One scan pattern on every row once they stack: picture, then its story. */
	body:not(.wp-admin) :is(
		.fsra-about-us-najbolja-praksa,
		.fsra-about-us-entuzijazam,
		.fsra-about-us-prijateljstvo
	) > .wp-block-columns > .wp-block-column:has(.wp-block-image) {
		order: -1;
	}

	body:not(.wp-admin) :is(
		.fsra-about-us-najbolja-praksa,
		.fsra-about-us-entuzijazam,
		.fsra-about-us-prijateljstvo
	) p {
		max-width: 68ch;
	}
}

/* --------------------------------------------------------------------------
 * Mobile
 * ----------------------------------------------------------------------- */

@media (max-width: 640px) {
	body:not(.wp-admin) .wp-block-post-content:has(.fsra-about-us-mission-vision-goals) {
		--fsra-about-band: clamp(2.75rem, 9vw, 3.75rem);
		--fsra-about-gap: 1.5rem;
	}

	body:not(.wp-admin) .wp-block-post-content:has(.fsra-about-us-mission-vision-goals) > .fsra-section__inner:first-child {
		padding-top: clamp(2.75rem, 10vw, 4rem) !important;
		padding-bottom: clamp(2.75rem, 9vw, 3.75rem) !important;
	}

	body:not(.wp-admin) .fsra-about-intro__copy h1 {
		font-size: clamp(2.1rem, 8.5vw, 3rem) !important;
	}

	body:not(.wp-admin) .fsra-about-intro__copy p {
		font-size: 1.02rem !important;
		line-height: 1.7;
	}

	body:not(.wp-admin) .fsra-about-us-mission-vision-goals .wp-block-column h2 {
		font-size: 1.05rem !important;
	}

	body:not(.wp-admin) :is(
		.fsra-about-us-najbolja-praksa,
		.fsra-about-us-entuzijazam,
		.fsra-about-us-prijateljstvo
	) h2 {
		font-size: clamp(1.6rem, 6.5vw, 2.15rem) !important;
	}

	body:not(.wp-admin) :is(
		.fsra-about-us-najbolja-praksa,
		.fsra-about-us-entuzijazam,
		.fsra-about-us-prijateljstvo
	) p {
		font-size: 1.02rem !important;
		line-height: 1.75;
	}
}