/**
 * Sections — composed page sections.
 *
 * @package FlorenStyle
 */

/* -------------------------------------------------------------------------
 * 1. Hero
 * ---------------------------------------------------------------------- */

.fs-hero {
	position: relative;
	display: flex;
	align-items: flex-end;
	/*
	 * svh accounts for mobile browser chrome, so the hero never overflows
	 * behind a collapsing address bar. vh is the fallback for older engines.
	 */
	min-block-size: 78vh;
	min-block-size: calc(100svh - var(--fs-header-height));
	max-block-size: 60rem;
	overflow: hidden;
	background-color: var(--fs-black);
	color: var(--fs-white);
}

.fs-hero__media {
	position: absolute;
	inset: 0;
	z-index: 1;
}

/*
 * Targets the descendant img rather than a class, so a full-bleed plate
 * always fills its container regardless of how the image was rendered.
 */
.fs-hero__media picture,
.fs-hero__media img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	background: none;
}

/*
 * A scrim, not a wash. Two gradients: one weighted to the base, one to the
 * side the text sits on. Together they guarantee contrast over a bright
 * photograph without flattening it into a grey panel.
 */
.fs-hero__scrim {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(to right, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.28) 45%, rgba(0, 0, 0, 0) 78%),
		linear-gradient(to top, rgba(0, 0, 0, 0.78) 0%, rgba(0, 0, 0, 0.52) 28%, rgba(0, 0, 0, 0.22) 58%, rgba(0, 0, 0, 0) 100%);
}

.fs-hero__content {
	position: relative;
	z-index: 2;
	inline-size: 100%;
	padding-block: var(--fs-space-3xl) var(--fs-space-2xl);
}

.fs-hero__inner {
	max-inline-size: 46rem;
}

.fs-hero__eyebrow {
	color: var(--fs-white);
	opacity: 0.92;
}

.fs-hero__title {
	font-size: var(--fs-step-6);
	font-weight: var(--fs-weight-light);
	line-height: var(--fs-leading-tight);
	letter-spacing: var(--fs-tracking-display);
	color: var(--fs-white);
	margin-bottom: var(--fs-space-m);
	text-shadow: 0 1px 32px rgba(0, 0, 0, 0.35);
}

.fs-hero__subtitle {
	font-size: var(--fs-step-1);
	font-weight: var(--fs-weight-light);
	line-height: var(--fs-leading-snug);
	color: rgba(255, 255, 255, 0.9);
	max-inline-size: 40ch;
	margin-bottom: var(--fs-space-l);
}

.fs-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--fs-space-s);
}

.fs-hero__actions .fs-button--solid {
	background-color: var(--fs-white);
	border-color: var(--fs-white);
	color: var(--fs-black);
}

.fs-hero__actions .fs-button--solid:hover,
.fs-hero__actions .fs-button--solid:focus-visible {
	color: var(--fs-white);
	border-color: var(--fs-accent);
}

.fs-hero__actions .fs-button--outline {
	color: var(--fs-white);
	border-color: rgba(255, 255, 255, 0.55);
}

.fs-hero__actions .fs-button--outline:hover,
.fs-hero__actions .fs-button--outline:focus-visible {
	border-color: var(--fs-accent);
	color: var(--fs-white);
}

.fs-hero__scroll {
	display: none;
	position: absolute;
	right: var(--fs-gutter);
	bottom: var(--fs-space-2xl);
	align-items: center;
	gap: var(--fs-space-s);
	font-size: var(--fs-step--2);
	font-weight: var(--fs-weight-bold);
	letter-spacing: var(--fs-tracking-eyebrow);
	text-transform: uppercase;
	text-decoration: none;
	color: rgba(255, 255, 255, 0.85);
	writing-mode: vertical-rl;
}

.fs-hero__scroll-line {
	inline-size: 1px;
	block-size: 3.5rem;
	background-color: rgba(255, 255, 255, 0.4);
	overflow: hidden;
}

/* A hairline that travels down the rule, drawing the eye onward. */
.fs-hero__scroll-line::after {
	content: "";
	display: block;
	inline-size: 100%;
	block-size: 40%;
	background-color: var(--fs-white);
	animation: fs-scroll-hint 2.4s var(--fs-ease-in-out) infinite;
}

@keyframes fs-scroll-hint {
	0% { transform: translateY(-100%); }
	100% { transform: translateY(250%); }
}

@media (prefers-reduced-motion: reduce) {
	.fs-hero__scroll-line::after {
		animation: none;
	}
}

/* -------------------------------------------------------------------------
 * 2. Introduction
 * ---------------------------------------------------------------------- */

.fs-intro__inner {
	max-inline-size: 62rem;
}

.fs-intro__title {
	font-size: var(--fs-step-4);
	font-weight: var(--fs-weight-light);
	line-height: var(--fs-leading-display);
	margin-bottom: var(--fs-space-l);
	text-wrap: balance;
}

.fs-intro__body {
	max-inline-size: var(--fs-measure);
	color: var(--fs-text-muted);
}

.fs-intro__body > * + * {
	margin-top: var(--fs-space-m);
}

.fs-intro__body .fs-button {
	margin-top: var(--fs-space-m);
}

/* -------------------------------------------------------------------------
 * 3. Craftsmanship story
 * ---------------------------------------------------------------------- */

.fs-craft__title {
	font-size: var(--fs-step-3);
	margin-bottom: var(--fs-space-m);
}

.fs-craft__disciplines {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(12rem, 100%), 1fr));
	gap: var(--fs-space-l);
	list-style: none;
	margin: 0;
	padding-top: var(--fs-space-l);
	border-top: 1px solid var(--fs-border);
}

.fs-craft__discipline-title {
	font-family: var(--fs-font-body);
	font-size: var(--fs-step--2);
	font-weight: var(--fs-weight-bold);
	letter-spacing: var(--fs-tracking-eyebrow);
	text-transform: uppercase;
	margin-bottom: var(--fs-space-2xs);
}

.fs-craft__discipline-text {
	font-size: var(--fs-step--1);
	line-height: var(--fs-leading-snug);
	color: var(--fs-text-muted);
}

/* In inverted sections the media reveal must clip with the dark surface. */
.fs-invert [data-fs-reveal="media"] .fs-media__frame::after {
	background-color: var(--fs-black);
}

/* -------------------------------------------------------------------------
 * 4. Collections
 * ---------------------------------------------------------------------- */

.fs-collections__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr));
	gap: var(--fs-grid-gap);
	list-style: none;
	margin: 0;
}

.fs-collections__item {
	display: flex;
}

.fs-collections__item .fs-card {
	inline-size: 100%;
}

/*
 * The opening piece spans two columns and two rows. Its frame drops the fixed
 * aspect ratio and stretches instead, so its height is governed by the two
 * ordinary rows beside it and every caption in the grid still lines up.
 */
.fs-collections__item--feature .fs-collection__media {
	display: flex;
	flex-direction: column;
	flex: 1;
}

.fs-collections__item--feature .fs-collection__media .fs-media__frame {
	flex: 1;
	aspect-ratio: auto;
	min-block-size: 18rem;
}

.fs-collection__body {
	padding-top: var(--fs-space-2xs);
}

.fs-collection__name {
	font-size: var(--fs-step-2);
	letter-spacing: var(--fs-tracking-title);
}

.fs-collections__footer {
	display: flex;
	justify-content: center;
	margin-top: clamp(2.5rem, 1.5rem + 3vw, 4.5rem);
}

/* Product categories */

.fs-categories {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr));
	gap: var(--fs-grid-gap);
	list-style: none;
	margin: 0 0 clamp(3rem, 2rem + 4vw, 6rem);
}

.fs-category__title {
	font-size: var(--fs-step-2);
	font-weight: var(--fs-weight-regular);
	margin-block: var(--fs-space-m) var(--fs-space-s);
	padding-bottom: var(--fs-space-s);
	border-bottom: 1px solid var(--fs-border);
}

.fs-category__items {
	list-style: none;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: var(--fs-space-3xs);
	font-size: var(--fs-step--1);
	color: var(--fs-text-muted);
}

.fs-collections__subheading {
	font-size: var(--fs-step-2);
	font-weight: var(--fs-weight-regular);
	margin-bottom: var(--fs-space-l);
	padding-bottom: var(--fs-space-s);
	border-bottom: 1px solid var(--fs-border);
}

/* Founder role line */

.fs-founder__role {
	font-size: var(--fs-step--1);
	font-weight: var(--fs-weight-bold);
	letter-spacing: var(--fs-tracking-eyebrow);
	text-transform: uppercase;
	color: var(--fs-accent);
	margin-top: calc(var(--fs-space-s) * -1);
	margin-bottom: var(--fs-space-m);
}

/* -------------------------------------------------------------------------
 * 5. Pillars
 * ---------------------------------------------------------------------- */

.fs-pillars__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr));
	gap: var(--fs-grid-gap);
	list-style: none;
	margin: 0;
}

/* -------------------------------------------------------------------------
 * 6. Manufacturing
 * ---------------------------------------------------------------------- */

.fs-manufacturing__plate {
	margin-block: clamp(2.5rem, 1.5rem + 3.5vw, 5rem);
}

/*
 * inline-size must be stated explicitly. With only aspect-ratio and a
 * max-block-size, capping the height also shrinks the width, and the plate
 * stops short of full bleed on wide screens.
 */
.fs-manufacturing__plate .fs-media__frame {
	inline-size: 100%;
	max-block-size: 46rem;
}

.fs-manufacturing__detail {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
	gap: var(--fs-grid-gap);
	padding-block-end: var(--fs-section-y);
}

.fs-manufacturing__subtitle {
	font-size: var(--fs-step-2);
	font-weight: var(--fs-weight-regular);
	margin-bottom: var(--fs-space-s);
}

/* -------------------------------------------------------------------------
 * 7. Founder
 * ---------------------------------------------------------------------- */

.fs-founder__title {
	font-size: var(--fs-step-3);
}

.fs-founder__quote {
	font-size: var(--fs-step-2);
	font-style: italic;
	border-left-color: var(--fs-accent);
	margin-block: var(--fs-space-l);
}

.fs-founder__portrait .fs-media__frame {
	inline-size: 100%;
	max-block-size: 42rem;
}

/* -------------------------------------------------------------------------
 * 8. Process
 * ---------------------------------------------------------------------- */

.fs-process__list {
	list-style: none;
	margin: 0;
	counter-reset: fs-process;
}

.fs-process__item + .fs-process__item {
	margin-top: clamp(3rem, 2rem + 5vw, 7rem);
}

.fs-process__number {
	display: block;
	font-family: var(--fs-font-display);
	font-size: var(--fs-step-3);
	font-weight: var(--fs-weight-light);
	letter-spacing: var(--fs-tracking-title);
	color: var(--fs-accent);
	line-height: 1;
	margin-bottom: var(--fs-space-xs);
}

.fs-process__title {
	font-size: var(--fs-step-3);
	margin-bottom: var(--fs-space-m);
}

/* -------------------------------------------------------------------------
 * 9. Projects mosaic
 * ---------------------------------------------------------------------- */

.fs-projects__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--fs-grid-gap);
	list-style: none;
	margin: 0;
}

.fs-project {
	position: relative;
	margin: 0;
	block-size: 100%;
	display: flex;
	flex-direction: column;
}

.fs-project__frame {
	flex: 1;
	aspect-ratio: 3 / 2;
}

.fs-projects__item--tall .fs-project__frame {
	aspect-ratio: 4 / 5;
}

.fs-projects__item--wide .fs-project__frame {
	aspect-ratio: 16 / 9;
}

.fs-project__frame img {
	transition: transform var(--fs-duration-slow) var(--fs-ease-out-expo);
}

.fs-project:hover .fs-project__frame img {
	transform: scale(1.04);
}

.fs-project__caption {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	margin-top: var(--fs-space-s);
}

.fs-project__title {
	font-family: var(--fs-font-display);
	font-size: var(--fs-step-1);
	font-weight: var(--fs-weight-regular);
	letter-spacing: var(--fs-tracking-title);
}

.fs-project__meta {
	font-size: var(--fs-step--2);
	letter-spacing: 0.04em;
	color: var(--fs-text-muted);
}

/* -------------------------------------------------------------------------
 * 10. Call to action
 * ---------------------------------------------------------------------- */

.fs-cta {
	position: relative;
	overflow: hidden;
	text-align: center;
	padding-block: clamp(5rem, 3rem + 9vw, 12rem);
}

.fs-cta__media {
	position: absolute;
	inset: 0;
	z-index: 1;
	/* The photograph is atmosphere here, not information. */
	opacity: 0.22;
}

.fs-cta__media picture,
.fs-cta__media img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	background: none;
}

.fs-cta .fs-container {
	position: relative;
	z-index: 2;
}

.fs-cta__inner {
	max-inline-size: 46rem;
	margin-inline: auto;
}

.fs-cta__inner .fs-eyebrow--ruled {
	justify-content: center;
}

.fs-cta__title {
	font-size: var(--fs-step-4);
	margin-bottom: var(--fs-space-m);
}

.fs-cta__text {
	font-size: var(--fs-step-1);
	font-weight: var(--fs-weight-light);
	line-height: var(--fs-leading-snug);
	color: var(--fs-text-muted);
	max-inline-size: 46ch;
	margin-inline: auto;
	margin-bottom: var(--fs-space-l);
}

.fs-cta__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--fs-space-l);
}

.fs-cta__phone {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	text-decoration: none;
	text-align: left;
}

.fs-cta__phone-label {
	font-size: var(--fs-step--2);
	letter-spacing: var(--fs-tracking-eyebrow);
	text-transform: uppercase;
	color: var(--fs-text-muted);
}

.fs-cta__phone-number {
	font-family: var(--fs-font-display);
	font-size: var(--fs-step-1);
	letter-spacing: var(--fs-tracking-title);
}

/* -------------------------------------------------------------------------
 * 11. Page hero (interior pages)
 * ---------------------------------------------------------------------- */

.fs-page-hero {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-block-size: clamp(22rem, 16rem + 24vw, 38rem);
	overflow: hidden;
	background-color: var(--fs-black);
	color: var(--fs-white);
}

.fs-page-hero__media {
	position: absolute;
	inset: 0;
	z-index: 1;
}

.fs-page-hero__media picture,
.fs-page-hero__media img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	background: none;
}

.fs-page-hero__scrim {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(to right, rgba(0, 0, 0, 0.62) 0%, rgba(0, 0, 0, 0.3) 50%, rgba(0, 0, 0, 0.05) 85%),
		linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.5) 45%, rgba(0, 0, 0, 0.22) 100%);
}

.fs-page-hero__content {
	position: relative;
	z-index: 2;
	inline-size: 100%;
	padding-block: var(--fs-space-2xl);
}

.fs-page-hero__eyebrow {
	color: rgba(255, 255, 255, 0.9);
}

.fs-page-hero__title {
	font-size: var(--fs-step-5);
	color: var(--fs-white);
	max-inline-size: 20ch;
	text-shadow: 0 1px 28px rgba(0, 0, 0, 0.4);
}

.fs-page-hero__intro {
	margin-top: var(--fs-space-m);
	font-size: var(--fs-step-1);
	font-weight: var(--fs-weight-light);
	line-height: var(--fs-leading-snug);
	color: rgba(255, 255, 255, 0.92);
	max-inline-size: 46ch;
	text-shadow: 0 1px 18px rgba(0, 0, 0, 0.45);
}

/* A plain header for templates with no hero photograph. */
.fs-page-header {
	padding-block: var(--fs-section-y-tight);
	border-bottom: 1px solid var(--fs-border);
}

.fs-page-header__title {
	font-size: var(--fs-step-4);
}

.fs-page-header__meta {
	margin-top: var(--fs-space-s);
	color: var(--fs-text-muted);
	font-size: var(--fs-step--1);
}