/* Artmark Materials Grid widget — cream section holding a white panel:
   captioned photo on the left, numbered material grid on the right.
   Colors/typography are overridable via widget controls. */

.am-mat {
	width: 100%;
	background-color: #faf5ee;
}

.am-mat__panel {
	display: flex;
	align-items: stretch;
	width: 100%;
	margin: 0 auto;
	background-color: #ffffff;
	overflow: hidden;
}

/* ---------------------------------------------------------------- */
/* Media                                                             */
/* ---------------------------------------------------------------- */

.am-mat__media {
	--am-mat-notch: 28px;
	position: relative;
	flex: 0 0 40%;
	max-width: 40%;
	min-width: 0;
	min-height: 438px;
	background-color: #0d1726;
	overflow: hidden;
	/* Top-left corner cut, per the Figma frame. */
	clip-path: polygon(
		var(--am-mat-notch) 0,
		100% 0,
		100% 100%,
		0 100%,
		0 var(--am-mat-notch)
	);
}

/* Corner Notch Color: when the control is set, the clip-path above is
   switched off and this triangle paints the cut corner in that color. */
.am-mat__media::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	z-index: 3;
	width: var(--am-mat-notch);
	height: var(--am-mat-notch);
	background-color: var(--am-mat-notch-bg, transparent);
	clip-path: polygon(0 0, 100% 0, 0 100%);
	pointer-events: none;
}

.am-mat__media img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Figma: linear gradient, #020713 at 20% opacity to #020713 at 85%.
   Each stop is a separate custom property so the controls can set them
   independently instead of cross-referencing one another. */
.am-mat__shade {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background-image: linear-gradient(
		to bottom,
		var(--am-mat-shade-a, rgba(2, 7, 19, 0.2)) var(--am-mat-shade-a-pos, 0%),
		var(--am-mat-shade-b, rgba(2, 7, 19, 0.85)) var(--am-mat-shade-b-pos, 100%)
	);
}

.am-mat__overlay {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 2;
	padding: 36px;
}

.am-mat__kicker {
	display: block;
	margin-bottom: 16px;
	font-size: 11px;
	font-weight: 500;
	line-height: 16px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: #c5d8e6;
}

.am-mat__title {
	margin: 0;
	font-size: 34px;
	font-weight: 400;
	line-height: 1.35;
	letter-spacing: -0.01em;
	color: #ffffff;
}

/* ---------------------------------------------------------------- */
/* Content                                                           */
/* ---------------------------------------------------------------- */

.am-mat__content {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 48px;
}

.am-mat__grid {
	--am-mat-cols: 3;
	display: grid;
	grid-template-columns: repeat(var(--am-mat-cols), minmax(0, 1fr));
	column-gap: 0;
	row-gap: 0;
}

.am-mat__item {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding: 28px 16px 28px 0;
	border-top: 1px solid #e8e2d8;
	text-decoration: none;
	color: inherit;
}

a.am-mat__item:hover .am-mat__label {
	opacity: 0.7;
}

.am-mat__num {
	display: block;
	margin-bottom: 15px;
	font-size: 11px;
	font-weight: 400;
	line-height: 14px;
	letter-spacing: 0.22em;
	color: #b5afa3;
}

.am-mat__label {
	display: block;
	font-size: 19px;
	font-weight: 400;
	line-height: 26px;
	letter-spacing: -0.01em;
	color: #020713;
	transition: opacity 0.2s ease;
}

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

@media (max-width: 1024px) {
	.am-mat__panel {
		flex-direction: column;
	}

	.am-mat__media {
		flex: 0 0 auto !important;
		max-width: 100% !important;
		width: 100%;
		min-height: 340px;
	}

	.am-mat__content {
		padding: 32px;
	}

	.am-mat__grid {
		--am-mat-cols: 2;
	}

	.am-mat__title {
		font-size: 28px;
	}
}

@media (max-width: 767px) {
	.am-mat__media {
		--am-mat-notch: 18px;
		min-height: 260px;
	}

	.am-mat__overlay {
		padding: 24px;
	}

	.am-mat__title {
		font-size: 23px;
	}

	.am-mat__content {
		padding: 24px 20px;
	}

	.am-mat__grid {
		--am-mat-cols: 1;
	}

	.am-mat__item {
		padding: 20px 0;
	}
}

/* ---------------------------------------------------------------- */
/* Grouped lists layout (Materials -> Layout -> Grouped lists)       */
/* ---------------------------------------------------------------- */

/* Figma "Broad Material Selection for Rubber & Plastic Components": the
   materials sit in bordered cards, one per family, each a small tracked title
   over "01 — EPDM" lines, and the cards run the panel's height beside the
   photo. Class names differ from the grid's on purpose, so neither layout's
   controls can restyle the other. */
.am-mat__groups {
	--am-mat-gcols: 2;
	display: grid;
	grid-template-columns: repeat(var(--am-mat-gcols), minmax(0, 1fr));
	gap: 24px;
	align-items: stretch;
}

.am-mat-gstretch-yes .am-mat__groups {
	flex: 1 1 auto;
}

.am-mat__group {
	display: flex;
	flex-direction: column;
	min-width: 0;
	padding: 24px;
	border: 1px solid #e8e2d8;
}

.am-mat__gtitle {
	display: block;
	margin-bottom: 15px;
	font-size: 13px;
	font-weight: 400;
	line-height: 13px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: #b0a895;
}

.am-mat__glist {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.am-mat__gitem {
	margin: 0;
	font-size: 19px;
	font-weight: 400;
	line-height: 26px;
	letter-spacing: -0.01em;
	color: #020713;
}

.am-mat__gitem a,
.am-mat__gitem a:hover,
.am-mat__gitem a:focus {
	color: inherit;
	text-decoration: none;
	transition: opacity 0.2s ease;
}

.am-mat__gitem a:hover {
	opacity: 0.7;
}

@media (max-width: 767px) {
	.am-mat__groups {
		--am-mat-gcols: 1;
		gap: 16px;
	}

	.am-mat__group {
		padding: 20px;
	}

	.am-mat__gitem {
		font-size: 17px;
		line-height: 24px;
	}
}