/* ==========================================================================
   INDUSTRIES PAGE (page-specific styles)
   ========================================================================== */

.industries-page {
	display: flex;
	flex-direction: column;
}

/* Hero
   ========================================================================== */

.industries-page__hero {
	position: relative;
	text-align: center;
	overflow: hidden;
	padding-bottom: 30px;
}

.industries-page__hero-visual {
	position: relative;
	display: flex;
	justify-content: center;
}

.industries-page__hero-img {
	width: 100%;
	max-width: 500px;
	height: auto;
	object-fit: contain;
}

.industries-page__title {
	font-family: var(--font-heading);
	font-size: var(--font-size-h2);
	font-weight: var(--font-weight-semibold);
	line-height: var(--line-height-tight);
	letter-spacing: -0.02em;
	color: var(--color-fg);
	max-width: 846px;
	margin: 17px auto 0;
	position: relative;
	z-index: 1;
}

.industries-page__subtitle {
	font-family: var(--font-body);
	font-size: var(--font-size-b1);
	font-weight: var(--font-weight-regular);
	line-height: var(--line-height-normal);
	letter-spacing: -0.02em;
	color: var(--color-fg);
	max-width: 332px;
	margin: var(--space-sm) auto 0;
	position: relative;
	z-index: 1;
}

.industries-page__hero-cta {
	margin-top: var(--space-md);
	position: relative;
	z-index: 1;
}

.industries-page__tabs-section {
	padding-top: 30px;
	padding-bottom: 30px;
}

.industries-page .cta-video {
	margin-top: 30px;
}

/* Tabbed Section — Layout
   Figma mobile: flex flex-col gap-8
   Note: Figma uses items-start but our web layout needs stretch (default)
   so tab-nav is constrained to container width and scrolls horizontally
   ========================================================================== */

.industries-page__tabs-layout {
	display: flex;
	flex-direction: column;
	gap: var(--space-sm);
	max-width: 1080px;
	margin-left: auto;
	margin-right: auto;
}

/* Tab Navigation wrapper — holds gradient overlay, inner pill-tab-nav scrolls */
.industries-page__tab-nav {
	position: relative;
	flex-shrink: 0;
	margin-left: -12px;
	margin-right: -12px;
}

.industries-page__tab-nav .pill-tab:first-child {
	margin-left: 12px;
}

.industries-page__tab-nav .pill-tab:last-child {
	margin-right: 12px;
}

/* Scroll indicators — gradient + chevron combined in each pseudo-element */
/* Right indicator (::after) */
.industries-page__tab-nav::after {
	content: "›";
	position: absolute;
	top: 0;
	right: 0;
	width: 50px;
	height: 100%;
	background: linear-gradient(to right, transparent 0%, var(--color-bg) 70%);
	display: flex;
	align-items: center;
	justify-content: flex-end;
	padding-right: 10px;
	font-size: 20px;
	font-weight: 700;
	color: var(--color-muted);
	pointer-events: none;
	z-index: 3;
	transition: opacity var(--transition-fast);
}

/* Left indicator (::before) */
.industries-page__tab-nav::before {
	content: "‹";
	position: absolute;
	top: 0;
	left: 0;
	width: 50px;
	height: 100%;
	background: linear-gradient(to left, transparent 0%, var(--color-bg) 70%);
	display: flex;
	align-items: center;
	justify-content: flex-start;
	padding-left: 10px;
	font-size: 20px;
	font-weight: 700;
	color: var(--color-muted);
	pointer-events: none;
	z-index: 3;
	transition: opacity var(--transition-fast);
}

/* Hide indicators at scroll boundaries (toggled via JS) */
.industries-page__tab-nav.is-scrolled-end::after {
	opacity: 0;
}

.industries-page__tab-nav.is-scrolled-start::before {
	opacity: 0;
}

/* Tab Buttons — pill-tab handles shared base (typography, active, transition, focus)
   Figma mobile: h-40 px-20 py-12, 18px font
   ========================================================================== */
.industries-page__tab {
	height: 40px;
	padding: 12px 20px;
	font-size: 18px;
}

/* Tab Panels
   ========================================================================== */

.industries-page__panels {
	width: 100%;
	flex-shrink: 0;
	min-height: 0;
}

.industries-page__panel {
	display: none;
}

/* Mobile: column layout
   Figma: flex flex-col gap-20 items-center overflow-clip p-24 shrink-0 w-full
   ========================================================================== */

.industries-page__panel--active {
	display: flex;
	flex-direction: column;
	gap: 20px;
	padding: var(--space-md);
	align-items: center;
	flex-shrink: 0;
}

/* Panel Content (text)
   Figma: flex flex-col items-start shrink-0 w-full
   ========================================================================== */

.industries-page__panel-content {
	flex-shrink: 0;
	width: 100%;
}

.industries-page__panel-text {
	font-family: var(--font-body);
	font-size: var(--font-size-b1);
	font-weight: var(--font-weight-regular);
	color: var(--color-fg);
	line-height: var(--line-height-normal);
	letter-spacing: -0.02em;
}

.industries-page__panel-text p {
	margin: 0 0 var(--space-sm);
}

.industries-page__panel-text p:last-child {
	margin-bottom: 0;
}

/* Panel Visual (image)
   Figma: aspect-[522/485] relative, icon absolutely positioned
   ========================================================================== */

.industries-page__panel-visual {
	position: relative;
	overflow: hidden;
	width: 270px;
	height: 270px;
}

/* Image — absolutely positioned, centered, ~89% of container (Figma: 5.72% top + 5.59% bottom = 88.69%)
   ========================================================================== */

.industries-page__panel-image {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 270px;
	height: 270px;
	object-fit: contain;
}

/* Mobile/Tablet container padding — Figma: 12px (our container default is 16px)
   ========================================================================== */

@media (max-width: 1023px) {
	.industries-page__tabs-section .container {
		padding-left: 12px;
		padding-right: 12px;
	}
}

/* Tablet (>=768px)
   ========================================================================== */

@media (min-width: 768px) {
	/* Hero */
	.industries-page__subtitle {
		max-width: 569px;
	}

	.industries-page__hero {
		padding-bottom: 40px;
	}

	.industries-page__tabs-section {
		padding-top: 40px;
		padding-bottom: 40px;
	}

	.industries-page .cta-video {
		margin-top: 40px;
	}

	.industries-page__hero-visual::after {
		content: "";
		position: absolute;
		inset: 0;
		background: linear-gradient(
			180deg,
			transparent 55%,
			var(--color-bg) 85%
		);
		pointer-events: none;
	}

	.industries-page__hero-visual {
		max-height: 577px;
		overflow: hidden;
	}

	.industries-page__hero-img {
		max-width: none;
	}

	.industries-page__title {
		margin-top: -140px;
	}

	/* Tabs Layout — sidebar + card side by side
	   Figma: flex gap-8 items-center
	   Sidebar is centered (items-center), card wrapper stretches (self-stretch) */
	.industries-page__tabs-layout {
		flex-direction: row;
		align-items: center;
	}

	/* Tab Nav — vertical sidebar
	   Figma: flex flex-col gap-8 items-start shrink-0 */
	.industries-page__tab-nav {
		flex-shrink: 0;
		width: 205px;
		margin-left: 0;
		margin-right: 0;
		padding-left: 0;
		padding-right: 0;
	}

	.industries-page__tab-nav::after,
	.industries-page__tab-nav::before {
		display: none;
	}

	.industries-page__tab-nav .pill-tab:first-child,
	.industries-page__tab-nav .pill-tab:last-child {
		margin-left: 0;
		margin-right: 0;
	}

	.industries-page__tab-nav .pill-tab-nav {
		flex-direction: column;
		overflow-x: visible;
	}

	/* Tabs — Figma tablet: px-40 py-24, 20px font, shrink-0 w-[205px]
	   NOT flex:1 — tabs have content-based height (padding + font) */
	.industries-page__tab {
		height: auto;
		flex-shrink: 0;
		width: 100%;
		padding: 24px 40px;
		font-size: 20px;
	}

	/* Panels container — Figma card wrapper: flex-1 self-stretch
	   self-stretch overrides parent's items-center so card fills full height */
	.industries-page__panels {
		flex: 1;
		min-width: 0;
		align-self: stretch;
		display: flex;
	}

	/* Panel — fills container height, column layout
	   Figma: flex flex-col gap-20 h-full items-center p-24 */
	.industries-page__panel--active {
		height: 100%;
		width: 100%;
		flex-direction: column;
	}

	/* Image container — fixed 200px at tablet */
	.industries-page__panel-visual {
		width: 200px;
		height: 200px;
		flex: none;
	}

	.industries-page__panel-content {
		flex: none;
	}

	/* Image — 200px at tablet */
	.industries-page__panel-image {
		width: 200px;
		height: 200px;
	}
}

/* Desktop (>=1024px)
   ========================================================================== */

@media (min-width: 1024px) {
	/* Hero */
	.industries-page__hero {
		padding-bottom: 50px;
	}

	.industries-page__tabs-section {
		padding-top: 50px;
		padding-bottom: 50px;
	}

	.industries-page .cta-video {
		margin-top: 50px;
	}

	.industries-page__hero-visual {
		max-height: 646px;
		overflow: hidden;
	}

	.industries-page__hero-visual::after {
		background: linear-gradient(
			180deg,
			transparent 55%,
			var(--color-bg) 85%
		);
	}

	.industries-page__hero-img {
		max-width: 720px;
	}

	/* Tab Nav — wider sidebar (Figma: 230px) */
	.industries-page__tab-nav {
		width: 230px;
	}

	/* Tabs — Figma desktop: font 24px */
	.industries-page__tab {
		font-size: var(--font-size-h4);
	}

	/* Panel — row layout (text left, image right)
	   Figma: flex gap-20 h-full items-center p-24 */
	.industries-page__panel--active {
		flex-direction: row;
		align-items: center;
	}

	/* Text area — 3/5 width, vertically center text, extra left spacing */
	.industries-page__panel-content {
		flex: 3;
		display: flex;
		align-items: center;
		padding-left: var(--space-md);
	}

	.industries-page__panel-text {
		font-size: 18px;
		line-height: 1.4;
	}

	/* Image area — 2/5 width, stretch to full card height */
	.industries-page__panel-visual {
		flex: 2;
		align-self: stretch;
		width: auto;
		height: auto;
	}

	/* Image — percentage-based at desktop */
	.industries-page__panel-image {
		width: auto;
		height: auto;
		max-width: 89%;
		max-height: 89%;
	}
}

/* Large Desktop (>=1280px)
   Figma desktop section: px-100
   ========================================================================== */

@media (min-width: 1280px) {
	.industries-page__tabs-section .container {
		padding-left: 100px;
		padding-right: 100px;
	}
}