/* ===========================================================================
   FS - INDUSTRY PAGES

   Loaded only on /industries/*. Everything reusable was reused: the hero is
   .fs-hero-banner, the process band is .fs-stack, the closing panel is
   .fs-cta, and cards/buttons/markers are the shared components. What is left
   here is the four things the system genuinely did not have - a problem card
   grid, unlinked numbered rows, a framed screenshot, and an accordion.

   Tokens only. No raw hex, no raw duration, no raw easing.
   Breakpoints match Ritovex's: 991 / 767 / 479.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   HERO

   The banner hero was built for a photograph; here it carries a UI capture.
   Two consequences handled below.
   --------------------------------------------------------------------------- */

/* The notch is a cut-out in the corner of a bleeding photograph. Against a
   framed screenshot it reads as a rendering fault, exactly as it does against
   the dashed placeholder it is already hidden for. */
.fs-ind-hero .fs-hero-banner__notch {
	display: none;
}

/* Screenshots are 1366x703. Forcing them into the banner's 4/3 frame with
   object-fit: cover would crop away a third of the interface - so the frame
   takes the image's own ratio instead. */
.fs-ind-hero__image {
	display: block;
	inline-size: 100%;
	block-size: auto;
	aspect-ratio: auto;
	padding: 0;
	border: 1px solid var(--fs-border);
	border-radius: var(--fs-radius-lg);
	box-shadow: var(--fs-shadow-lg);
	background: var(--fs-bg);
}

/* ---------------------------------------------------------------------------
   PROBLEM - three cards
   --------------------------------------------------------------------------- */

.fs-ind-cards {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--fs-space-md);
	margin-block-start: var(--fs-space-xl);
}

.fs-ind-cards .fs-card {
	block-size: 100%;
}

@media (max-width: 991px) {
	.fs-ind-cards {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ---------------------------------------------------------------------------
   WHAT WE BUILD - numbered rows

   Visually the homepage services list, but these rows are not links, so they
   deliberately do NOT reuse .fs-services__link: that class carries a
   hover-slide affordance, and putting a "this will navigate" cue on something
   inert is a small lie that costs a click.
   --------------------------------------------------------------------------- */

.fs-ind-rows {
	margin: var(--fs-space-xl) 0 0;
	padding: 0;
	list-style: none;
	border-block-start: 1px solid var(--fs-on-dark-border);
}

.fs-ind-row {
	display: grid;
	grid-template-columns: auto minmax(0, 4fr) minmax(0, 6fr);
	gap: var(--fs-space-lg);
	align-items: baseline;
	padding-block: var(--fs-space-lg);
	border-block-end: 1px solid var(--fs-on-dark-border);
}

.fs-ind-row__num {
	color: var(--fs-rose-lift);
}

.fs-ind-row__name {
	margin: 0;
	font-size: var(--fs-t-h4);
	line-height: var(--fs-lh-130);
	color: var(--fs-on-dark-ink);
}

.fs-ind-row__desc {
	margin: 0;
	color: var(--fs-on-dark-muted);
	line-height: var(--fs-lh-150);
}

@media (max-width: 767px) {
	.fs-ind-row {
		grid-template-columns: auto minmax(0, 1fr);
		gap: var(--fs-space-sm) var(--fs-space-md);
	}

	.fs-ind-row__desc {
		grid-column: 2;
	}
}

/* ---------------------------------------------------------------------------
   PRODUCT BAND
   --------------------------------------------------------------------------- */

.fs-ind-product__inner {
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	gap: var(--fs-space-xxl);
	align-items: center;
}

.fs-ind-points {
	display: grid;
	gap: var(--fs-space-sm);
	margin: 0;
	padding: var(--fs-space-lg);
	list-style: none;
	border: 1px solid var(--fs-on-dark-border);
	border-radius: var(--fs-radius-card);
	background: var(--fs-on-dark-05);
}

.fs-ind-points__item {
	display: flex;
	gap: var(--fs-space-sm);
	align-items: center;
	color: var(--fs-on-dark-ink);
}

/* The accent comes from the product indirection layer set by data-product on
   the section, so this band tints itself GymFlow rather than brand rose
   without naming a hue. */
.fs-ind-points__tick {
	flex: 0 0 auto;
	color: var(--fs-product-accent-lift, var(--fs-rose-lift));
}

@media (max-width: 991px) {
	.fs-ind-product__inner {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--fs-space-xl);
	}
}

/* ---------------------------------------------------------------------------
   WALKTHROUGH - the section standing in for case studies
   --------------------------------------------------------------------------- */

/* One frame, used by both the alternating rows and the strip. A UI capture
   needs a border to read as a window rather than as a picture bleeding into
   the page. */
.fs-ind-figure {
	margin: 0;
	overflow: hidden;
	border: 1px solid var(--fs-border);
	border-radius: var(--fs-radius-card);
	background: var(--fs-bg);
	box-shadow: var(--fs-shadow-md);
}

.fs-ind-figure__img {
	display: block;
	inline-size: 100%;
	block-size: auto;
}

.fs-ind-shots {
	display: grid;
	gap: var(--fs-space-xxl);
	margin-block-start: var(--fs-space-xl);
}

.fs-ind-shot {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	gap: var(--fs-space-xl);
	align-items: center;
}

/* Alternation is presentational only. DOM order stays caption-then-image at
   every width, so the reading and tab order never depend on the breakpoint. */
.fs-ind-shot__body {
	grid-column: 1;
	grid-row: 1;
}

.fs-ind-shot__media {
	grid-column: 2;
	grid-row: 1;
}

.fs-ind-shot--flip .fs-ind-shot__body {
	grid-column: 2;
}

.fs-ind-shot--flip .fs-ind-shot__media {
	grid-column: 1;
}

.fs-ind-shot__title {
	margin: 0 0 var(--fs-space-sm);
	font-size: var(--fs-t-h4);
	line-height: var(--fs-lh-130);
}

.fs-ind-shot__text {
	margin: 0;
	max-inline-size: 46ch;
	color: var(--fs-muted);
	line-height: var(--fs-lh-150);
}

.fs-ind-strip {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--fs-space-md);
	margin: var(--fs-space-xxl) 0 0;
	padding: 0;
	list-style: none;
}

.fs-ind-strip__caption {
	padding: var(--fs-space-xs) var(--fs-space-sm);
	color: var(--fs-muted);
	border-block-start: 1px solid var(--fs-border);
}

@media (max-width: 991px) {
	.fs-ind-shot,
	.fs-ind-shot--flip {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--fs-space-md);
	}

	.fs-ind-shot__body,
	.fs-ind-shot__media,
	.fs-ind-shot--flip .fs-ind-shot__body,
	.fs-ind-shot--flip .fs-ind-shot__media {
		grid-column: 1;
		grid-row: auto;
	}
}

@media (max-width: 767px) {
	.fs-ind-strip {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ---------------------------------------------------------------------------
   PRICING
   --------------------------------------------------------------------------- */

.fs-ind-price__panel {
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	gap: var(--fs-space-xl);
	align-items: center;
	padding: var(--fs-space-xl);
	border: 1px solid var(--fs-border);
	border-radius: var(--fs-radius-xl);
	background: var(--fs-bg-alt);
}

.fs-ind-price__figure {
	display: grid;
	place-content: center;
	gap: var(--fs-space-xs);
	min-block-size: 160px;
	padding: var(--fs-space-lg);
	text-align: center;
}

@media (max-width: 991px) {
	.fs-ind-price__panel {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 479px) {
	.fs-ind-price__panel {
		padding: var(--fs-space-lg) var(--fs-space-md);
	}
}

/* ---------------------------------------------------------------------------
   FAQ

   <details>/<summary>. No JavaScript, keyboard accessible for free, and
   findable by the browser's own in-page search even while collapsed - which a
   div-based accordion is not.
   --------------------------------------------------------------------------- */

.fs-ind-faq__inner {
	display: grid;
	grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
	gap: var(--fs-space-xxl);
	align-items: start;
}

.fs-ind-faq__head {
	position: sticky;
	inset-block-start: calc(var(--fs-sticky-offset) + var(--fs-space-md));
}

.fs-ind-faq__list {
	border-block-start: 1px solid var(--fs-border);
}

.fs-ind-faq__item {
	border-block-end: 1px solid var(--fs-border);
}

.fs-ind-faq__q {
	display: flex;
	gap: var(--fs-space-md);
	align-items: center;
	justify-content: space-between;
	padding-block: var(--fs-space-md);
	font-size: var(--fs-t-h5);
	font-weight: var(--fs-weight-medium);
	line-height: var(--fs-lh-130);
	cursor: pointer;
	list-style: none;
}

/* Both are required: the pseudo-element for WebKit, list-style for the rest. */
.fs-ind-faq__q::-webkit-details-marker {
	display: none;
}

.fs-ind-faq__q:hover {
	color: var(--fs-rose-ink);
}

.fs-ind-faq__sign {
	flex: 0 0 auto;
	color: var(--fs-rose-ink);
	transition: transform var(--fs-duration-swap) var(--fs-ease);
}

.fs-ind-faq__item[open] .fs-ind-faq__sign {
	transform: rotate(45deg);
}

.fs-ind-faq__a {
	padding-block-end: var(--fs-space-md);
}

.fs-ind-faq__a p {
	margin: 0;
	max-inline-size: 64ch;
	color: var(--fs-muted);
	line-height: var(--fs-lh-150);
}

.fs-ind-faq__a .fs-todo__note {
	text-align: start;
}

@media (max-width: 991px) {
	.fs-ind-faq__inner {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--fs-space-lg);
	}

	.fs-ind-faq__head {
		position: static;
	}
}

/* ---------------------------------------------------------------------------
   MISSING IMAGE FALLBACK
   --------------------------------------------------------------------------- */

.fs-ind-img--missing {
	display: grid;
	place-content: center;
	min-block-size: 200px;
	padding: var(--fs-space-lg);
	text-align: center;
}

/* ---------------------------------------------------------------------------
   REDUCED MOTION
   The only transitions declared in this file are the FAQ sign rotation and
   the summary colour change. Both are removed rather than shortened.
   --------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.fs-ind-faq__sign {
		transition: none;
	}
}
/* ---------------------------------------------------------------------------
   HERO — PHOTO VARIANT — .fs-ind-hero--photo

   Full-bleed atmosphere shot behind the type, scrimmed for contrast. Text
   colour is not set here: .fs-section--dark on the same element remaps
   --fs-ink/--fs-muted for every nested component (see tokens.css), so the
   marker, title, sub, proof line and buttons repaint themselves correctly
   without a single hardcoded colour in this block.
   --------------------------------------------------------------------------- */

.fs-ind-hero--photo {
	position: relative;
	display: flex;
	align-items: center;
	min-block-size: 100svh;
	padding-block: var(--fs-section-feature);
	overflow: hidden;
}

.fs-ind-hero__bg {
	position: absolute;
	inset: 0;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	object-position: center 35%;
	z-index: 0;
}

/* Two layers: a horizontal gradient so text sitting on the left reads even
   where the photo itself is bright, and a vertical one so the top and bottom
   edges never go fully flat against the frame. Strong enough to also settle
   the "atmosphere, not proof" call - the on-screen text and desk signage in
   the source photo are illustrative, not a real product screenshot, and the
   scrim keeps them from reading as one. */
.fs-ind-hero__scrim {
	position: absolute;
	inset: 0;
	z-index: 1;
	background:
		linear-gradient(90deg, rgba(10, 10, 14, 0.88) 0%, rgba(10, 10, 14, 0.66) 40%, rgba(10, 10, 14, 0.32) 68%, rgba(10, 10, 14, 0.14) 100%),
		linear-gradient(0deg, rgba(10, 10, 14, 0.5) 0%, rgba(10, 10, 14, 0) 32%);
}

.fs-ind-hero--photo .fs-hero-banner__inner {
	position: relative;
	z-index: 2;
	display: block;
}

.fs-ind-hero--photo .fs-hero-banner__type {
	max-inline-size: 640px;
}

@media (max-width: 1023px) {
	.fs-ind-hero--photo {
		min-block-size: 100svh;
	}

	.fs-ind-hero__scrim {
		background:
			linear-gradient(0deg, rgba(10, 10, 14, 0.6) 0%, rgba(10, 10, 14, 0.88) 60%, rgba(10, 10, 14, 0.94) 100%);
	}
}