/**
 * Single Industry template.
 */

.jb-industry {
	/* Shared with case-study components reused in Featured Case Study. */
	--jb-cs-ink: var(--theme-palette-color-5, #270048);
	--jb-cs-purple: var(--theme-palette-color-1, #8900ff);
	--jb-cs-purple-soft: var(--theme-palette-color-2, #d7a9ff);
	--jb-cs-lime: var(--theme-palette-color-4, #d9ff00);
	--jb-cs-lime-soft: var(--theme-palette-color-11, #d9ff00);
	--jb-cs-surface: var(--theme-palette-color-8, #f8f8f8);
	--jb-cs-black: var(--theme-palette-color-10, #111);
	--jb-cs-white: var(--theme-palette-color-9, #fff);
	--jb-cs-radius: 1.25rem;
	--jb-cs-radius-sm: 0.85rem;

	--jb-ind-ink: var(--jb-cs-ink);
	--jb-ind-purple: var(--jb-cs-purple);
	--jb-ind-lime: var(--jb-cs-lime);
	--jb-ind-lime-soft: var(--jb-cs-lime-soft);
	--jb-ind-surface: var(--jb-cs-surface);
	--jb-ind-black: var(--jb-cs-black);
	--jb-ind-white: var(--jb-cs-white);
	--jb-ind-radius: 1.5rem;
	--jb-ind-radius-lg: 2rem;
	--jb-ind-gap: clamp(2.5rem, 6vw, 4.5rem);

	display: block;
	width: 100%;
	color: var(--jb-ind-ink);
}

.jb-industry__hero-img,
.jb-industry__feat-img,
.jb-industry__logo-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.jb-industry__prose {
	font-size: clamp(1rem, 1.5vw, 1.125rem);
	line-height: 1.65;
}

.jb-industry__prose > *:first-child {
	margin-top: 0;
}

.jb-industry__prose > *:last-child {
	margin-bottom: 0;
}

/* —— Hero —— */

.jb-industry__hero {
	padding: calc(clamp(2rem, 5vw, 3.5rem) + (var(--has-transparent-header, 0) * var(--header-height, 0px))) 0 var(--jb-ind-gap);
}

.jb-industry__eyebrow {
	margin: 0 0 0.75rem;
    font-size: clamp(0.85rem, 1.4vw, 1rem);
    font-weight: 400;
    font-family: 'Roboto Serif';
    font-style: italic;
    font-size: 1.2em;
    font-weight: 500;
    letter-spacing: normal;
}

.jb-industry__headline {
	margin: 0 0 clamp(1.5rem, 3vw, 2.25rem);
	color: var(--jb-ind-ink);
	font-size: clamp(2.25rem, 6.5vw, 4.5rem);
	font-weight: 800;
	line-height: 0.95;
	letter-spacing: -0.02em;
	text-transform: uppercase;
}

.jb-industry__headline-text {
	display: inline;
}

.jb-industry__headline-pill {
	margin-inline: 0.12em;
	vertical-align: middle;
}

.jb-industry__hero-media {
	margin: 0 0 clamp(1.75rem, 4vw, 2.75rem);
	overflow: hidden;
	border-radius: var(--jb-ind-radius-lg);
	aspect-ratio: 21 / 9;
	background: var(--jb-ind-surface);
}

.jb-industry__intro {
	max-width: 65rem;
	margin-inline: auto;
	text-align: center;
	text-wrap: pretty;
}

/* —— Features —— */

.jb-industry__features {
	position: relative;
	isolation: isolate;
	padding-block: clamp(2rem, 5vw, 3.5rem);
	color: var(--jb-ind-white);
}

/* Full-bleed band (~80% of section height) so gallery/list can overhang. */
.jb-industry__features::before {
	content: "";
	position: absolute;
	z-index: 0;
	left: 0;
	right: 0;
	top: 50%;
	height: 50%;
	transform: translateY(-50%);
	pointer-events: none;
	background-color: var(--jb-ind-black);
	background-image:
		linear-gradient(
			90deg,
			rgba(17, 17, 17, 0.45) 0%,
			rgba(17, 17, 17, 0.72) 55%,
			rgba(17, 17, 17, 0.88) 100%
		),
		var(--jb-ind-features-bg, none);
	background-size: cover;
	background-position: center;
}

.jb-industry__features-grid {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
	gap: clamp(1.25rem, 3vw, 2.5rem);
	align-items: center;
}

.jb-industry__features-grid--list-only {
	grid-template-columns: 1fr;
	max-width: 36rem;
	margin-inline: auto;
}

.jb-industry__features-gallery {
	--jb-ind-video-cover-scale: calc((9 / 16) / (9 / 16));
	--jb-ind-feat-gap: 0.75rem;

	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.85rem;
	align-items: start;

	max-width: 450px;
	margin: 0 auto;
}

.jb-industry__features-col {
	display: flex;
	flex-direction: column;
	gap: var(--jb-ind-feat-gap);
	min-width: 0;
}

.jb-industry__features-col:first-child {
	margin-top: -25%;
}

.jb-industry__features-col:nth-child(2) {
	margin-bottom: -25%;
}

.jb-industry__feat-item {
	position: relative;
	overflow: hidden;
	margin: 0;
	aspect-ratio: 9 / 16;
	border-radius: 20px;
	background: #2a2a2a;
}

/* With 4 items: corners (1 & 4) are square; 2 & 3 stay portrait. */
.jb-industry__features-gallery:has(.jb-industry__feat-item--4) .jb-industry__feat-item--1,
.jb-industry__features-gallery:has(.jb-industry__feat-item--4) .jb-industry__feat-item--4 {
	aspect-ratio: 1 / 1;
	--jb-ind-video-cover-scale: calc((1 / 1) / (9 / 16));
}

.jb-industry__feat-item--video {
	background: #111;
}

.jb-industry__feat-frame {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100%;
	height: 100%;
	border: 0;
	transform: translate(-50%, -50%) scale(var(--jb-ind-video-cover-scale, 1));
	transform-origin: center center;
	pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
	.jb-industry__feat-frame {
		visibility: hidden;
	}
}

.jb-industry__features-list {
	padding: clamp(1.25rem, 3vw, 2rem);
	border-radius: var(--jb-ind-radius);
	background: var(--jb-ind-black);
}

.jb-industry__features-title {
	margin: 0 0 1.25rem;
	color: var(--jb-ind-lime);
	font-size: 30px;
	font-weight: 800;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.jb-industry__checklist {
	display: grid;
	gap: 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.jb-industry__checklist-item {
	display: flex;
	align-items: flex-start;
	gap: 0.7rem;
	font-size: 21px;
	font-weight: 600;
	line-height: 1.35;
}

.jb-industry__check {
	display: inline-flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	margin-top: 0.15em;
	width: 30px;
	height: 30px;
}

.jb-industry__check img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.jb-industry__checklist-text {
	color: var(--jb-ind-white);
}

/* —— Outro + logos —— */

.jb-industry__outro {
	padding-block: clamp(1.75rem, 4vw, 2.75rem);
}

.jb-industry__outro-text > p {
	text-wrap: pretty;
	max-width: 52rem;
	margin-inline: auto;
	text-align: center;
	color: var(--jb-ind-ink);
}

.jb-industry__logos {
	padding-bottom: var(--jb-ind-gap);
	overflow: hidden;
}

.jb-industry__logo-marquee {
	display: flex;
	overflow: hidden;
	--jb-logo-gap: clamp(2.5rem, 5vw, 5rem);
	gap: var(--jb-logo-gap);
}

.jb-industry__logo-track {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: space-around;
	gap: var(--jb-logo-gap);
	min-width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
	animation: jb-industry-logo-marquee 32s linear infinite;
}

@keyframes jb-industry-logo-marquee {
	from {
		transform: translateX(0);
	}

	to {
		transform: translateX(calc(-100% - var(--jb-logo-gap)));
	}
}

@media (prefers-reduced-motion: reduce) {
	.jb-industry__logo-track {
		animation-play-state: paused;
	}
}

.jb-industry__logo-item {
	flex: 0 0 auto;
	width: clamp(5.5rem, 12vw, 7.5rem);
	height: 5rem;
}

.jb-industry__logo-img {
	object-fit: contain;
}

/* —— Featured case study —— */

.jb-industry__featured {
	padding-bottom: var(--jb-ind-gap);
}

.jb-industry__featured-stage {
	display: flex;
	flex-direction: column;
	gap: clamp(1.25rem, 3vw, 2rem);
	margin-bottom: clamp(2rem, 4vw, 3rem);
}

.jb-industry__featured-stage.has-media {
	flex-direction: row;
	align-items: flex-start;
	gap: clamp(1rem, 2.5vw, 1.75rem);
}

.jb-industry__featured-primary {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: clamp(1rem, 2.5vw, 1.75rem);
	min-width: 0;
}

.jb-industry__featured-body {
	display: flex;
	align-items: flex-start;
	gap: clamp(1rem, 2.5vw, 1.75rem);
}

.jb-industry__featured-aside {
	display: flex;
	flex: 0 0 clamp(12rem, 30%, 22rem);
	flex-direction: column;
	align-items: flex-end;
	gap: 0.85rem;
	min-width: 0;
	position: relative;
}

.jb-industry__featured-head {
	position: relative;
	z-index: 2;
}

.jb-industry__featured-badge {
    position: absolute;
    top: -20px;
    left: 0px;
    z-index: -1;
    display: block;
    width: 100px;
    height: 100px;
    pointer-events: none;
}

.jb-industry__featured-badge-svg {
	display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
    transform-origin: 50% 50%;
    animation: jb-industry-badge-spin 10s linear infinite;
    z-index: -1;
}

.jb-industry__featured-badge::after {
    content: "";
    width: 80px;
    height: 80px;
    position: absolute;
    bottom: -10px;
    right: -30px;
    border-top-left-radius: 50%;
    border-bottom-left-radius: 50%;
    border-top-right-radius: 50%;
    border-bottom-right-radius: 50%;
    background-clip: normal;
    background-color: #fff;
    filter: blur(5px);
}

.jb-industry__featured-badge-text {
	fill: var(--theme-palette-color-1, #8900ff);
	font-size: 22px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

@keyframes jb-industry-badge-spin {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}

@media (prefers-reduced-motion: reduce) {
	.jb-industry__featured-badge-svg {
		animation: none;
	}
}

.jb-industry__featured-eyebrow,
.jb-industry__featured-title {
	padding-left:clamp(2.5rem, 5vw, 3.5rem)
}

.jb-industry__featured-eyebrow {
	margin-bottom: 0;
}

.jb-industry__featured-eyebrow span {
	background: var(--jb-ind-lime);
	padding: 15px 25px;
	border-radius: 50px;
	font-weight: 600;
	color: var(--jb-ind-black);
	text-transform: uppercase;
	display: inline-block;
}

.jb-industry__featured-title {
	margin: 0;
	color: var(--jb-ind-black);
	font-size: clamp(5.5rem, 10vw, 12rem);
	font-weight: 400;
	line-height: 0.92;
	letter-spacing: -0.03em;
	text-transform: uppercase;
}

.jb-industry__featured-title-word:first-child {
	display: block;
}
.jb-industry__featured-title-word:first-child + .jb-industry__featured-title-word {
	margin-left: 25%;
}

.jb-industry__featured-media {
	position: relative;
	overflow: hidden;
	border-radius: var(--jb-ind-radius);
	background: var(--jb-ind-surface);
}

.jb-industry__featured-media .jb-case-study__media-item {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	border-radius: inherit;
}

.jb-industry__featured-media .jb-case-study__img,
.jb-industry__featured-media .jb-case-study__media-frame {
	border-radius: inherit;
}

.jb-industry__featured-media--1 {
	flex: 0 0 clamp(10rem, 42%, 18rem);
	aspect-ratio: 3 / 4;
	--jb-cs-video-cover-scale: calc((3 / 4) / (9 / 16));
	margin-left: -20%;
}

.jb-industry__featured-media--2 {
	width: 100%;
	aspect-ratio: 3 / 4;
	--jb-cs-video-cover-scale: calc((3 / 4) / (9 / 16));
}

.jb-industry__featured-media--3 {
    width: 62%;
    aspect-ratio: 4 / 5;
    z-index: 1;
    --jb-cs-video-cover-scale: calc((4 / 5) / (9 / 16));
    position: absolute;
    top: 70%;
    left: 70%;
}

.jb-industry__featured-overview-text {
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
	padding-top: 0.35rem;
	text-align: left;
	color: var(--jb-ind-ink);
	font-size: clamp(0.95rem, 1.3vw, 1.05rem);
}

.jb-industry__featured-stage:not(.has-media) .jb-industry__featured-overview-text {
	max-width: 46rem;
}

.jb-industry__featured-results {
	margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}

.jb-industry__featured-results .jb-case-study__stat-value {
	color: var(--jb-ind-lime);
}

.jb-industry__featured-gallery {
	position: relative;
	margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
	overflow: hidden;
	overflow: hidden;
}

.jb-industry__featured-gallery::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 32%;
	background: linear-gradient(180deg, transparent 0%, var(--jb-ind-white) 100%);
	pointer-events: none;
	z-index: 1;
}

.jb-industry__featured-cta {
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 0.85rem 1.5rem;
	text-align: center;
}

.jb-industry__featured-cta .button {
	--theme-button-background-initial-color: var(--jb-ind-purple);
	--theme-button-background-hover-color: var(--jb-ind-ink);
	--theme-button-text-initial-color: var(--jb-ind-white);
	--theme-button-text-hover-color: var(--jb-ind-white);
}

.jb-industry__featured-cta .button-lime {
	--theme-button-background-initial-color: var(--jb-ind-lime);
	--theme-button-background-hover-color: var(--jb-ind-lime-soft);
	--theme-button-text-initial-color: var(--jb-ind-ink);
	--theme-button-text-hover-color: var(--jb-ind-ink);
}

/* —— Form —— */

/* .jb-industry__form {
	padding-bottom: var(--jb-ind-gap);
} */

.jb-industry__form-heading {
	max-width: 768px;
	margin: 0 auto clamp(1.5rem, 3vw, 2.25rem);
	color: var(--jb-ind-ink);
	font-size: clamp(1.75rem, 4vw, 2.75rem);
	font-weight: 800;
	line-height: 1.05;
	letter-spacing: -0.02em;
	text-align: center;
	text-transform: uppercase;
}

.jb-industry__form-box {
	padding: clamp(1.5rem, 4vw, 2.75rem);
	border-radius: var(--jb-ind-radius-lg);
	background: var(--jb-ind-surface);
}

/* —— Responsive —— */

@media (max-width: 999px) {
	.jb-industry__headline {
		max-width: none;
	}

	.jb-industry__hero-media {
		aspect-ratio: 16 / 9;
	}

	.jb-industry__features-grid {
		grid-template-columns: 1fr;
	}

	.jb-industry__features-gallery {
		max-width: 28rem;
		margin-inline: auto;
	}

	.jb-industry__features-col:first-child,
	.jb-industry__features-col:nth-child(2) {
		margin-top: 0;
		margin-bottom: 0;
	}

	.jb-industry__featured-badge {
		left: -25px;;
	}

	.jb-industry__featured-stage.has-media {
		flex-direction: column;
	}

	.jb-industry__featured-aside {
		flex: none;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
		align-items: flex-start;
		width: 100%;
		gap: 1rem;
	}

	.jb-industry__featured-body {
		flex-direction: column;
		align-items: center;
	}

	.jb-industry__featured-media--1,
	.jb-industry__featured-media--2,
	.jb-industry__featured-media--3 {
		flex: none;
		width: min(100%, 20rem);
		margin-top: 0;
	}

	.jb-industry__featured-overview-text {
		max-width: none;
		width: 100%;
	}
}

@media (max-width: 689px) {
	.jb-industry__hero-media {
		aspect-ratio: 4 / 3;
	}

	.jb-industry__features-title {
		font-size: 24px;
	}

	.jb-industry__checklist {
		gap: 10px;
	}

	.jb-industry__checklist-item {
		font-size: 18px;
	}

	.jb-industry__check {
		width: 20px;
		height: 20px;
	}

	.jb-industry__features-gallery {
		grid-template-columns: 1fr 1fr;
		gap: 0.55rem;
	}

	.jb-industry__featured-title {
		padding-left: 2rem;
	}

	/* .jb-industry__featured-badge {
		width: 3.75rem;
		height: 3.75rem;
	} */

	.jb-industry__featured-aside {
		flex-direction: column;
		align-items: center;
	}

	.jb-industry__featured-media--1,
	.jb-industry__featured-media--2,
	.jb-industry__featured-media--3 {
		width: min(100%, 18rem);
	}

	.jb-industry__featured-media--3 {
		position: relative;
		width: 30%;
		top: auto;
		left: auto;
		margin-top: -20%;
		margin-right: -50%;
	}
}