/* Artmark Industry Tiles widget — dark photo tiles with a notched top-right
   corner, a light arrow chip in that corner and the title + description sitting
   over the bottom of the photo.

   Namespaced .am-itile so it cannot touch the older .am-ind-card widget.
   Colors/typography are overridable via widget controls. */

.am-itiles {
	width: 100%;
	background-color: #ffffff;
}

.am-itiles__inner {
	width: 100%;
	margin: 0 auto;
}

.am-itiles__title {
	margin: 0 0 44px;
	font-size: 40px;
	font-weight: 400;
	line-height: 1.35;
	letter-spacing: -0.01em;
	color: #020713;
}

/* Eyebrow chip on its own line above the heading row; the chip carries the
   space below it (Eyebrow → Space Below). */
.am-itiles__eyebrow {
	display: block;
}

/* Centred by default: with a heading of two or three lines, bottom-aligning
   the button left it stranded against the last line with a block of empty
   space above it. Button Vertical Alignment overrides this. */
.am-itiles__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 40px;
	margin-bottom: 44px;
}

.am-itiles__head .am-itiles__title {
	margin-bottom: 0;
	min-width: 0;
}

/* The button is a flex item beside the heading and would otherwise shrink to
   fit, wrapping its label onto two lines. Hold it at its natural width and let
   the heading give way instead — Heading Max Width is the control for that. */
.am-itiles__head .am-btn {
	flex: 0 0 auto;
}

/* ---------------------------------------------------------------- */
/* Grid                                                              */
/* ---------------------------------------------------------------- */

/* Flexbox rather than CSS grid: a short final row then centres itself,
   which `grid-template-columns` cannot do. */
.am-itiles__grid {
	--am-it-cols: 3;
	--am-it-gap: 24px;
	--am-it-rowgap: 28px;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	column-gap: var(--am-it-gap);
	row-gap: var(--am-it-rowgap);
}

.am-itiles__grid--left {
	justify-content: flex-start;
}

.am-itile {
	--am-it-notch: 28px;
	--am-it-bg: #0a1220;
	position: relative;
	flex: 0 0 calc((100% - (var(--am-it-cols) - 1) * var(--am-it-gap)) / var(--am-it-cols));
	max-width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: 497px;
	padding: 28px;
	background-color: var(--am-it-bg);
	color: inherit;
	text-decoration: none;
	overflow: hidden;
	clip-path: polygon(
		0 0,
		calc(100% - var(--am-it-notch)) 0,
		100% var(--am-it-notch),
		100% 100%,
		0 100%
	);
	transition: transform 0.25s ease;
}

.am-itile--wide {
	flex: 0 0 calc(
		(100% - (var(--am-it-cols) - 1) * var(--am-it-gap)) / var(--am-it-cols) * 2 + var(--am-it-gap)
	);
}

.am-itile--full {
	flex: 0 0 100%;
}

a.am-itile:hover {
	transform: translateY(-3px);
}

/* --- photo --- */

.am-itile__img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s ease;
}

a.am-itile:hover .am-itile__img {
	transform: scale(1.04);
}

.am-itile__fade {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background-image: linear-gradient(
		to bottom,
		transparent var(--am-it-fade-start, 30%),
		var(--am-it-bg) var(--am-it-fade-end, 85%),
		var(--am-it-bg) 100%
	);
}

/* --- arrow chip, tucked into the notch --- */

.am-itile__arrow {
	--am-it-arrow-notch: 10px;
	position: absolute;
	top: 37px;
	right: 29px;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	background-color: #d6eafb;
	color: #0a1220;
	clip-path: polygon(
		0 0,
		100% 0,
		100% calc(100% - var(--am-it-arrow-notch)),
		calc(100% - var(--am-it-arrow-notch)) 100%,
		0 100%
	);
	transition: transform 0.2s ease, background-color 0.2s ease;
}

a.am-itile:hover .am-itile__arrow {
	transform: translateX(3px);
}

.am-itile__arrow svg,
.am-itile__arrow img {
	display: block;
	width: 20px;
	height: 20px;
	object-fit: contain;
}

/* --- body --- */

.am-itile__body {
	position: relative;
	z-index: 2;
}

.am-itile__ctitle {
	margin: 0 0 12px;
	font-size: 24px;
	font-weight: 400;
	line-height: 1.25;
	letter-spacing: -0.01em;
	color: #ffffff;
}

.am-itile__desc {
	margin: 0;
	font-size: 15px;
	line-height: 22px;
	color: #b9bec6;
}

/* ---------------------------------------------------------------- */
/* Responsive                                                        */
/* ---------------------------------------------------------------- */

@media (max-width: 1024px) {
	.am-itiles__grid {
		--am-it-cols: 2;
	}

	.am-itiles__title {
		font-size: 32px;
	}

	.am-itile {
		min-height: 420px;
	}
}

@media (max-width: 767px) {
	.am-itiles__head {
		flex-direction: column;
		align-items: flex-start;
		gap: 20px;
	}

	.am-itiles__grid {
		--am-it-cols: 1;
	}

	.am-itiles__title {
		font-size: 27px;
	}

	.am-itile {
		--am-it-notch: 20px;
		min-height: 340px;
		padding: 22px;
	}

	.am-itile__arrow {
		top: 24px;
		right: 22px;
		width: 44px;
		height: 44px;
	}

	.am-itile__ctitle {
		font-size: 21px;
	}
}