/* Keep header solid (not transparent) on industries index page */
body.post-type-archive-industry .site-header,
body:has(.industry-index) .site-header {
	background-color: #ffffff;
	box-shadow: 0 2px 12px rgb(0 0 0 / 0.08);
}

/* Industry archive page component (industry-card grid, bordered layout). */
.industry-index {
	--industry-index-dot-color: rgba(0, 0, 0, 0.08);
	--industry-index-dot-size: 1px;
	--industry-index-dot-spacing-x: 12px;
	--industry-index-dot-spacing-y: 10px;

	display: block;
	padding-top: 4rem;
	position: relative;
	width: 100%;
	overflow: hidden;
	isolation: isolate;
}

.industry-index::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background-image: radial-gradient(
		circle,
		var(--industry-index-dot-color) var(--industry-index-dot-size),
		transparent var(--industry-index-dot-size)
	);
	background-size: var(--industry-index-dot-spacing-x) var(--industry-index-dot-spacing-y);
	-webkit-mask-image: linear-gradient(to bottom, black 0%, black 60%, transparent 100%);
	mask-image: linear-gradient(to bottom, black 0%, black 60%, transparent 100%);
}

.industry-index__container {
	position: relative;
	z-index: 1;
}

.industry-index__breadcrumb {
	padding-block: var(--spacing-4);
	color: #666666;
	font-size: 0.8125rem;
	font-style: normal;
	line-height: normal;
}

.industry-index__header {
	align-items: flex-end;
	display: flex;
	gap: 1rem;
	justify-content: space-between;
	margin: 0 0 1.25rem;
	padding-block: var(--spacing-8) var(--spacing-6);
	position: relative;
}

.industry-index__header-main {
	display: block;
	max-width: 52rem;
}

.industry-index__title {
	color: #000;
	display: block;
	font-family: var(--font-heading-family);
	font-size: 2.25rem;
	font-weight: 600;
	line-height: 100%;
	margin: 0;
	max-width: 15em;
	position: relative;
}

.industry-index__intro {
	color: #666;
	font-family: var(--font-body-family);
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.6;
	margin: 1.0625rem 0 0;
	max-width: 56.8125rem;
}

.industry-index__grid-wrap {
	border: 1px solid transparent;
	border-top-color: #D9D9D9;
	border-radius: 0.6875rem;
	clip-path: var(--industry-index-frame-clip, none);
	margin: 0 0 5rem;
	overflow: hidden;
	position: relative;
}

.industry-index__grid-wrap:has(.industry-index__grid.is-clip-ready) {
	border-color: #D9D9D9;
}

.industry-index__grid-wrap:has(.industry-index__grid.is-spotlight-active) {
	clip-path: none;
}

/* Shared full-section image layer: shows the hovered card's hero image
 * "expanding" across the whole grid, matching the Figma hover spec. Hidden
 * (opacity 0) until JS activates a card; degrades gracefully with no JS. */
.industry-index__spotlight {
	background-color: #000;
	border-radius: 0.6875rem; /* 11px, matches the grid's own outer corners */
	inset: 0;
	opacity: 0;
	overflow: hidden;
	pointer-events: none;
	position: absolute;
	transition: opacity 0.45s ease;
	z-index: 0;
}

.industry-index__spotlight.is-visible {
	opacity: 1;
}

.industry-index__spotlight-image {
	block-size: 100%;
	display: block;
	inline-size: 100%;
	object-fit: cover;
}

.industry-index__grid {
	display: grid;
	grid-template-columns: repeat(1, 1fr);
	gap: 0px;
	list-style: none;
	margin: 0 0 5rem;
	padding: 0;
	position: relative;
	width: 100%;
	z-index: 1;
}

.industry-index__grid-item {
	min-width: 0;
	border: 1px solid #D9D9D9;
	background-color: #D9D9D9;
	position: relative;
}

.industry-index .industry-index__grid .industry-index__grid-item .industry-card .industry-card__description {
	color: #666666;
	line-height: 1.625rem;
	transition: none;
}

.industry-index .industry-card--image-empty .industry-card__link:hover,
.industry-index .industry-card--image-empty .industry-card__link:focus-visible {
	background-color: transparent;
}

/* Everything below (real gap, spotlight hover, dim/highlight states) only
 * applies to the "Image Variation" — the default bordered/gutter grid above
 * stays exactly as it always was.
 *
 * The shared background-color is the gutter colour behind every real card
 * (also what makes the card's own border-radius reveal small diamond-shaped
 * slivers of gutter at internal 4-way intersections). CSS Grid paints a
 * container's own background across every column track of every generated
 * row, even columns left empty by an incomplete last row (e.g. 5 cards in a
 * 3-column grid leaves the 3rd cell of row 2 empty) — `script.js` clips that
 * unused trailing area away at runtime via `clip-path` on this element. */
.industry-index__grid--image {
	gap: 1px;
	margin: 0;
	background-color: transparent;
	border-radius: 0.6875rem; /* 11px, matches the corner cards' own radius so the gutter never shows past their curve */
	overflow: hidden;
	transition: clip-path 0.2s ease;
}

/* The gutter colour only paints once script.js has measured the real cards
 * and applied its clip-path (`is-clip-ready`) — otherwise, on page load, the
 * background would flash at full (unclipped) size for a moment before JS
 * runs, showing the old phantom-box bug briefly on every refresh. No
 * transition here so that first paint is instant, not a lingering fade. */
.industry-index__grid--image.is-clip-ready {
	background-color: #D9D9D9;
}

/* Let the spotlight image show through the gap once a card is hovered,
 * instead of the resting grey gutter colour. */
.industry-index__grid--image.is-spotlight-active {
	background-color: transparent;
	transition: background-color 0.3s ease, clip-path 0.2s ease;
}

/* A real gap (not a shared touching border) between every card is what
 * Figma actually shows: each card keeps its own full 4-corner radius (set on
 * .industry-card) with the section background/spotlight image visible in
 * the gap, instead of a bordered "gutter" cell. */
.industry-index__grid--image .industry-index__grid-item {
	border: 0;
	background-color: transparent;
	isolation: isolate;
	transition: opacity 0.3s ease;
}

.industry-index__grid--image .industry-index__grid-item::before {
	background-color: #D9D9D9;
	border-radius: inherit;
	content: '';
	inset: -1px;
	pointer-events: none;
	position: absolute;
	z-index: -1;
}

.industry-index__grid--image.is-spotlight-active .industry-index__grid-item::before {
	background-color: transparent;
}

.industry-index__grid--image:not(.is-clip-ready) .industry-index__grid-item::after {
	border-radius: inherit;
	content: '';
	inset: 0;
	pointer-events: none;
	position: absolute;
}

@media (width < 640px) {
	.industry-index__grid--image:not(.is-clip-ready) .industry-index__grid-item::after {
		border-inline-end: 1px solid #D9D9D9;
	}
}

@media (640px <= width < 768px) {
	.industry-index__grid--image:not(.is-clip-ready) .industry-index__grid-item:nth-child(2n)::after {
		border-inline-end: 1px solid #D9D9D9;
	}
}

@media (width >= 768px) {
	.industry-index__grid--image:not(.is-clip-ready) .industry-index__grid-item:nth-child(3n)::after {
		border-inline-end: 1px solid #D9D9D9;
	}
}


/* Dim every card once a card with an image is being hovered/focused, so the
 * shared spotlight image reads as if it expanded to fill the section; the
 * active card itself stays fully opaque and swaps to its own highlight
 * colour (set inline as --spotlight-color) instead of showing the image. */
.industry-index__grid--image.is-spotlight-active .industry-index__grid-item:not(.is-active) {
	opacity: 0.5;
}

.industry-index__grid--image.is-spotlight-active .industry-index__grid-item.is-active {
	opacity: 1;
}

.industry-index__grid--image .industry-index__grid-item.is-active .industry-card,
.industry-index__grid--image .industry-index__grid-item.is-active .industry-card--image .industry-card__overlay {
	background: var(--spotlight-color, var(--color-primary, #0f9ed5));
}

.industry-index__grid--image .industry-index__grid-item.is-active .industry-card__title,
.industry-index__grid--image .industry-index__grid-item.is-active .industry-card--image .industry-card__title {
	color: #000;
}

.industry-index__grid--image .industry-index__grid-item.is-active .industry-card__mark,
.industry-index__grid--image .industry-index__grid-item.is-active .industry-card--image .industry-card__mark {
	background-color: #000;
}

/* Non-active cards that carry their own hero image would otherwise show
 * that image AND the shared spotlight image at once; hide the card's own
 * image and flatten its scrim to solid black so only the spotlight image
 * (expanded across the section) reads as the visible background. */
.industry-index__grid--image.is-spotlight-active .industry-index__grid-item:not(.is-active) .industry-card--image .industry-card__media--bg {
	opacity: 0;
}

.industry-index__grid--image.is-spotlight-active .industry-index__grid-item:not(.is-active) .industry-card--image:not(.industry-card--image-empty) .industry-card__overlay {
	background: #000;
}

.industry-index__grid--image.is-spotlight-active .industry-index__grid-item:not(.is-active) .industry-card {
	background-color: #000;
}

.industry-index__grid--image.is-spotlight-active .industry-index__grid-item:not(.is-active) .industry-card .industry-card__title {
	color: #fff;
}

.industry-index__grid--image.is-spotlight-active .industry-index__grid-item:not(.is-active) .industry-card .industry-card__mark {
	background-color: rgba(255, 255, 255, 0.9);
}

.industry-index__grid--image.is-spotlight-active .industry-index__grid-item:not(.is-active) .industry-card .industry-card__description {
	color: #CCCCCC;
}

@media (prefers-reduced-motion: reduce) {
	.industry-index__spotlight,
	.industry-index__grid--image,
	.industry-index__grid--image .industry-index__grid-item {
		transition: none;
	}
}

/* border-radius on an item clips its own background-color at that corner,
 * hiding the grey that would otherwise bleed through the card's border-radius
 * (matches Components/partners/style.css exactly). No overflow:hidden needed
 * — the child card is unaffected. Top-left/bottom-right are column-count
 * independent; the other two corners are set per breakpoint below. */
.industry-index__grid-item:first-child {
	border-top-left-radius: 0.6875rem; /* 11px */
}

.industry-index__grid-item:last-child {
	border-bottom-right-radius: 0.6875rem; /* 11px */
}

.industry-index__empty {
	color: #6b6b6b;
	font-size: 0.9375rem;
	font-style: italic;
	margin: 0;
}

@media (width < 640px) {
	/* 1-column mobile corner clipping: both top corners for first item, both bottom corners for last item */
	.industry-index__grid-item:first-child {
		border-top-left-radius: 0.6875rem;
		border-top-right-radius: 0.6875rem;
	}

	.industry-index__grid-item:last-child {
		border-bottom-left-radius: 0.6875rem;
		border-bottom-right-radius: 0.6875rem;
	}
}

@media (width >= 640px) {
	.industry-index__title {
		font-size: 2.5rem;
	}

	.industry-index__intro {
		font-size: 1rem;
	}
}

@media (640px <= width < 768px) {
	.industry-index__grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.industry-index__grid-item:first-child {
		border-top-left-radius: 0.6875rem;
		border-top-right-radius: 0;
	}

	.industry-index__grid-item:nth-child(2) {
		border-top-right-radius: 0.6875rem;
	}

	.industry-index__grid-item:nth-child(2n+1):nth-last-child(-n+2) {
		border-bottom-left-radius: 0.6875rem;
	}

	.industry-index__grid-item:nth-child(2n):nth-last-child(-n+2),
	.industry-index__grid-item:last-child {
		border-bottom-right-radius: 0.6875rem;
	}
}

@media (width >= 768px) {
	.industry-index {
		padding-top: 6rem;
	}

	.industry-index__header {
		margin: 0 0 1.5rem;
	}

	.industry-index__title {
		font-size: 3rem;
		line-height: 4rem;
	}

	.industry-index__grid {
		grid-template-columns: repeat(3, 1fr);
	}

	.industry-index__grid-item:first-child {
		border-top-left-radius: 0.6875rem;
		border-top-right-radius: 0;
	}

	.industry-index__grid-item:nth-child(3) {
		border-top-right-radius: 0.6875rem;
	}

	.industry-index__grid-item:nth-child(3n+1):nth-last-child(-n+3) {
		border-bottom-left-radius: 0.6875rem;
	}

	.industry-index__grid-item:nth-child(3n):nth-last-child(-n+3),
	.industry-index__grid-item:last-child {
		border-bottom-right-radius: 0.6875rem;
	}
}

@media (width >= 1024px) {
	.industry-index {
		padding-top: 7rem;
	}

	.industry-index__header {
		margin: 0 0 1.75rem;
	}

	.industry-index__title {
		font-size: 3.5rem;
	}
}

@media (width >= 1280px) {
	.industry-index__header {
		margin: 0 0 2rem;
	}

	.industry-index__title {
		font-size: 4rem;
	}
}