/*
 * Über uns — loaded only on that page template (inc/about-page.php).
 *
 * Every selector here addresses markup this theme writes itself, in
 * template-parts/about/. Mobile-first, single class names, no defensive
 * specificity: nothing else on the site uses these classes. `.about-*`
 * is deliberately NOT the prefix — the front page already owns it.
 *
 * The sheet loads render-blocking (fk2026_blocking_style_handles),
 * because the banner and the panel overlapping it are the first screen.
 */

/* ==================================================================
 * SECTION FRAME
 * ================================================================== */

/* Full-bleed band, content on the site's column. max() keeps the
   element edge to edge and pushes the padding out to the column edge,
   so no inner wrapper is needed. */
.aboutus-section {
	padding-block: clamp(3.5rem, 9vw, 6.5rem);
	padding-inline: max(var(--fk-space), (100% - var(--fk-max-width)) / 2);
	background: var(--fk-color-bg);
	color: var(--fk-color-body);
}

/* The theme's own greige, not a new near-white: bands alternate between
   paper, greige and the dark closing band across every page, and a
   fourth off-white nobody can tell apart is a token to keep in step for
   no gain. */
.aboutus-section--greige {
	background: var(--fk-color-greige);
}

.aboutus-head {
	max-width: 60rem;
}

/* Centred head: the eyebrow, the heading and the lead share one axis,
   and the block itself sits on the middle of the column. */
.aboutus-head--centered {
	margin-inline: auto;
	text-align: center;
}

.aboutus-lead {
	margin: 0;
	font-size: 1.0625rem;
	line-height: 1.75;
}

.aboutus-head--centered .aboutus-lead {
	max-width: 52rem;
	margin-inline: auto;
}

/* The section heading and eyebrow styles come from global.css; the
   serif weight, the tighter leading and the sage eyebrow are what makes
   them this theme's rather than the browser's. */
.aboutus-section .section-title {
	font-family: var(--fk-font-serif);
	font-weight: 500;
	font-size: clamp(1.875rem, 3.6vw, 2.75rem);
	line-height: 1.12;
	margin: 0 0 1.25rem;
	color: var(--fk-color-text);
}

.aboutus-section .section-eyebrow {
	margin: 0 0 0.75rem;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	/* Computed, not eyeballed: 5.6:1 on white, 5.2:1 on the greige band,
	   4.9:1 on the hero band — all past AA for body-size text. */
	color: var(--fk-color-sage-text);
}

/* A section with nothing but a heading and one paragraph does not need
   the full band height on top of its own centred measure. */
.aboutus-section--narrow {
	padding-block: clamp(3rem, 7.5vw, 5.5rem);
}

/* ==================================================================
 * HERO
 * ================================================================== */

/*
 * Banner, then a panel that climbs back over its lower edge. The band
 * behind it is a step deeper than the panel, so the panel still reads as
 * a lifted surface once it has left the image.
 *
 * The banner's height is set here rather than left to the file's own
 * proportions: a fixed box plus object-fit means the layout is decided
 * before the image arrives, so swapping the picture in the Customizer
 * can never move the page.
 *
 * No inline padding on the band itself — the banner is meant to touch
 * both edges and only the panel needs the column. Padding the section
 * and pulling the banner back out with negative margins was the first
 * attempt and it cannot work: a percentage in the child's margin
 * resolves against the PADDED parent, not the viewport, so the value
 * can never cancel the padding that produced it.
 */
.aboutus-hero {
	padding-bottom: clamp(2.5rem, 6vw, 5rem);
	/* One step deeper than the greige of the panel above it. That
	   difference is the whole reason the panel reads as lifted off the
	   band rather than cut out of it. */
	background: #f2f0ec;
}

/*
 * The band is a proportion of the viewport with a ceiling, not a fixed
 * height: 42vw is close to the 2.4:1 slice the design shows, and the
 * 40rem cap stops a 27" screen from opening on nothing but photograph.
 *
 * The cap used to be 30rem, and that was the bug — past about 1140px
 * wide the band stopped growing and the banner sat noticeably shorter
 * than the design. 42vw only ever applied on a laptop.
 */
.aboutus-hero__media {
	height: clamp(18rem, 42vw, 40rem);
}

.aboutus-hero__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/*
 * `position: relative` is what puts the panel over the banner, and it is
 * not optional. The negative margin moves the box either way, but paint
 * order would undo it: the backgrounds of in-flow blocks are painted
 * before inline content, and an <img> is replaced inline content. So an
 * unpositioned panel would have its background painted first and the
 * banner drawn straight over it — text floating on the photo, which is
 * not the design and is not readable either.
 */
.aboutus-hero__panel {
	position: relative;
	/* One declaration for both jobs: capped at its measure on a desktop,
	   and on a phone always a gutter narrower than the screen. */
	width: min(58rem, 100% - var(--fk-space) * 2);
	margin-inline: auto;
	margin-top: calc(clamp(2rem, 6vw, 5rem) * -1);
	padding: clamp(1.75rem, 4.5vw, 3.5rem) clamp(1.25rem, 4vw, 3.5rem);
	background: var(--fk-color-greige);
	text-align: center;
}

.aboutus-hero--plain .aboutus-hero__panel {
	margin-top: 0;
	padding-top: clamp(3.5rem, 9vw, 6rem);
}

/* `overflow-wrap: normal` undoes the theme's own heading rule, which
   sets break-word on every h1–h4. Right for a product title in a narrow
   card, wrong for a two-word page title with room to spare. */
.aboutus-hero__title {
	margin: 0 0 1.25rem;
	font-family: var(--fk-font-serif);
	font-weight: 500;
	font-size: clamp(2.25rem, 6vw, 4rem);
	line-height: 1.08;
	overflow-wrap: normal;
	word-break: normal;
	hyphens: manual;
	color: var(--fk-color-text);
}

.aboutus-hero__lead {
	max-width: 44rem;
	margin: 0 auto;
	font-size: 1.0625rem;
	line-height: 1.75;
	color: var(--fk-color-body);
}

/* ==================================================================
 * SPLIT: half copy, half image
 * ================================================================== */

/* Used twice, mirrored. There is deliberately no rule here for which
   side the picture takes: the partial emits the two children in the
   order they should be read, and the grid places them in that order. A
   CSS flip would make the reading order and the visual order disagree,
   and only one of the two is what a screen reader follows. */
.aboutus-split {
	display: grid;
	gap: clamp(2rem, 5vw, 4rem);
	align-items: center;
}

@media (min-width: 60em) {
	.aboutus-split {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}
}

/* aspect-ratio decides the box before the file loads, so the section
   below it never jumps once the lazy image arrives. */
.aboutus-split__image {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1;
	object-fit: cover;
	background: var(--fk-color-greige);
}

/*
 * The whole column shares one axis: eyebrow, heading and paragraph all
 * centred.
 *
 * The first version kept the eyebrow on the left edge, because that is
 * how it sat in the design drafts. On a phone the column is the screen,
 * and a lone left-aligned line above a centred block reads as a mistake
 * rather than as a deliberate offset — the offset only ever worked
 * beside a picture wide enough to give it an edge to sit on.
 */
.aboutus-split__copy {
	text-align: center;
}

/* ==================================================================
 * CLOSING SECTION
 * ================================================================== */

.aboutus-cta__action {
	margin: clamp(2rem, 4vw, 2.75rem) 0 0;
}

/*
 * The solid CTA itself comes from global.css — one button, defined once,
 * used by every section on the site that asks for something. Only the
 * shape is this page's: a full pill rather than the site's soft corner,
 * the same way the front page's closing section sets its own radius.
 *
 * Two classes beat one class plus an element, so this wins over
 * `a.button--solid` without needing !important or an id.
 */
.aboutus-cta .button--solid {
	border-radius: 999px;
	padding: 0.9375rem 2rem;
	font-size: 0.9375rem;
}

/*
 * Sage on hover — and the DARKER sage, not the one the brand uses for
 * surfaces. `--fk-color-sage-dark` (#6f7c68) carries white type at only
 * 4.41:1, which is a fail, and a button label is the last place to be
 * a tenth of a point short. `--fk-color-sage-text` (#5f6b59) is 5.62:1
 * and still unmistakably the brand's green.
 *
 * Only the colour is added here; the lift and the shadow stay the ones
 * global.css gives every solid button on the site, so this button moves
 * exactly like the others and merely changes colour doing it.
 */
.aboutus-cta .button--solid:hover,
.aboutus-cta .button--solid:focus-visible {
	background: var(--fk-color-sage-text);
	border-color: var(--fk-color-sage-text);
	color: #fff;
}

/* ==================================================================
 * VALUE CARDS
 * ================================================================== */

.aboutus-cards {
	display: grid;
	gap: 1.25rem;
	margin: clamp(2.5rem, 5vw, 3.5rem) 0 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 48em) {
	.aboutus-cards {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 1.5rem;
	}
}

.aboutus-card {
	position: relative;
	padding: clamp(1.5rem, 3vw, 2.25rem);
	border: 1px solid rgba(31, 31, 31, 0.08);
	border-radius: 0.5rem;
	background: var(--fk-color-bg);
	box-shadow: 0 1px 2px rgba(31, 31, 31, 0.04);
	transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.3, 1), border-color 0.35s ease;
}

/* The short rule above the title — the same mark that sits in front of
   an eyebrow elsewhere on the site, here doing the same job on a card.
   A border on a pseudo-element, so it costs no extra markup. */
.aboutus-card__title::before {
	content: "";
	display: block;
	width: 2.25rem;
	margin-bottom: 1.25rem;
	border-top: 1px solid rgba(31, 31, 31, 0.35);
}

/* The deep shadow lives on a pseudo-element and is faded in, rather
   than being animated on the card itself: a box-shadow transition
   repaints the blur every frame, an opacity transition is composited.
   `inset: -1px` and no background of its own — a z-index of -1 would
   vanish behind the card the moment the hover transform made a stacking
   context. */
.aboutus-card::after {
	content: "";
	position: absolute;
	inset: -1px;
	border-radius: inherit;
	box-shadow: 0 16px 36px rgba(31, 31, 31, 0.13);
	opacity: 0;
	transition: opacity 0.35s ease;
	pointer-events: none;
}

/* Two pixels, not six. These cards are not links, and a card that
   springs up under the cursor promises a click that never comes. */
.aboutus-card:hover {
	transform: translateY(-2px);
	border-color: rgba(111, 124, 104, 0.4);
}

.aboutus-card:hover::after {
	opacity: 1;
}

.aboutus-card__title {
	margin: 0 0 0.75rem;
	font-family: var(--fk-font-serif);
	font-weight: 500;
	font-size: 1.375rem;
	line-height: 1.25;
	color: var(--fk-color-text);
}

.aboutus-card__text {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.7;
	color: var(--fk-color-body);
}

/* ==================================================================
 * EDITOR CONTENT
 * ================================================================== */

/* Whatever is typed into the page itself lands under the sections.
   Pasted copy is where an unbreakable string usually enters a page — a
   URL, a long German compound — and any one of them can push a column
   wider than the screen. */
.aboutus-content {
	max-width: var(--fk-max-width);
	margin: 0 auto;
	padding: clamp(2.5rem, 6vw, 4rem) var(--fk-space);
	overflow-wrap: break-word;
}

/* ==================================================================
 * SCROLL REVEAL
 * ================================================================== */

/*
 * Sections rise into place as they enter the viewport — a scroll-driven
 * CSS animation, so there is no JavaScript, no scroll listener and no
 * observer. The browser runs it on the compositor.
 *
 * Wrapped twice on purpose. `@supports` because `animation-timeline` is
 * Chromium-only for now: elsewhere the rule is skipped and the page
 * simply appears, which is a perfectly good page. And
 * `prefers-reduced-motion: no-preference` because content that moves
 * while you are trying to read it is what that setting exists to stop.
 *
 * On the containers, never on the cards: a filled animation keeps
 * owning `transform` and would sit on top of the hover lift.
 *
 * The hero is left out. It is the largest element on the first screen,
 * and animating the thing a browser is trying to measure as the Largest
 * Contentful Paint reports a slower page than the one you built.
 */

/* Movement only, deliberately NO fade. An earlier version elsewhere in
   this theme faded from opacity 0, and Lighthouse measured the text
   below the fold at the start of its animation — a contrast failure on
   colours that pass comfortably. Any opacity under 1 lowers the ratio. */
@keyframes aboutus-rise {
	from {
		transform: translateY(1.5rem);
	}

	to {
		transform: none;
	}
}

@media (prefers-reduced-motion: no-preference) {
	@supports (animation-timeline: view()) {
		.aboutus-section .aboutus-head,
		.aboutus-section .aboutus-split,
		.aboutus-section .aboutus-cards {
			animation-name: aboutus-rise;
			animation-timing-function: linear;
			animation-fill-mode: both;
			/* `auto`, not a number of seconds: the range below drives
			   the animation, and the shorthand would quietly reset this
			   to 0s. */
			animation-duration: auto;
			animation-timeline: view();
			animation-range: entry 5% cover 22%;
		}
	}
}