/* Artmark Division Cards — structural layout. Colors/typography come from widget controls. */

.am-divisions {
	width: 100%;
}

.am-divisions__inner {
	max-width: none;
	margin: 0 auto;
}

/* Heading — tracked tighter, as in the Figma (Typography → Letter Spacing overrides it). */
.am-divisions__title {
	margin: 0 0 56px;
	font-size: 58px;
	font-weight: 400;
	line-height: 1.1;
	letter-spacing: -0.02em;
}

/* Grid */
.am-divisions__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
}

/* Card */
.am-div-card {
	position: relative;
	flex: 1 1 0;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	min-height: 580px;
	background-color: #020713;
	background-size: cover;
	background-position: center;
	text-decoration: none;
	overflow: hidden;
	transition: transform 0.25s ease;
}

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

/* Image layer (zooms on hover) */
.am-div-card__bg {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	transition: transform var(--am-dz-dur, 0.7s) ease;
	will-change: transform;
}

.am-div-card:hover .am-div-card__bg {
	transform: scale(var(--am-dz, 1.06));
}

.am-div-card__shade {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 1;
}

/* Tag chips */
.am-div-card__tags {
	position: relative;
	z-index: 2;
	display: flex;
	flex-wrap: wrap;
	align-content: flex-start;
}

.am-div-card__tag {
	display: inline-flex;
	align-items: center;
	font-size: 11px;
	line-height: 15px;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	white-space: nowrap;
}

/* Content */
.am-div-card__content {
	position: relative;
	z-index: 2;
}

.am-div-card__title {
	margin: 0 0 14px;
	font-size: 38px;
	font-weight: 400;
	line-height: 1;
	letter-spacing: -0.01em;
}

.am-div-card__desc {
	margin: 0;
	font-size: 16px;
	line-height: 24px;
}

/* Arrow tile. Default ("corner", the Figma): pinned to the card's bottom-right
   corner, flush with the edges, with the text block padded so the
   description never runs under it. "flow": in the content flow below the
   description, as before. --am-arrow is the Tile Size control's value. */
.am-div-card__arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-top: 32px;
	transition: transform 0.2s ease, background-color 0.25s ease, color 0.25s ease;
}

.am-arrowpos-corner .am-div-card__arrow {
	position: absolute;
	right: 0;
	bottom: 0;
	margin: 0;
	z-index: 3;
}

.am-arrowpos-corner .am-div-card__content {
	padding-right: calc(var(--am-arrow, 52px) + 24px);
}

a.am-div-card:hover .am-div-card__arrow {
	transform: translateX(3px);
}

.am-arrowpos-corner a.am-div-card:hover .am-div-card__arrow {
	transform: none;
}

.am-div-card__arrow img {
	object-fit: contain;
	display: block;
}

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

@media (max-width: 1024px) {
	.am-divisions__title {
		font-size: 42px;
	}

	.am-div-card__title {
		font-size: 32px;
	}
}

/* 767px, not 640px: this has to line up with Elementor's own mobile
   breakpoint. At 640 the band from 641–767 got Elementor's mobile control
   values (card height, padding, chip padding) while the type here stayed at
   its desktop size, which is what made the card look cramped and mismatched
   just above phone width. */
@media (max-width: 767px) {
	.am-divisions__title {
		font-size: 32px;
	}

	.am-div-card__title {
		font-size: 26px;
		margin-bottom: 10px;
	}

	.am-div-card__desc {
		font-size: 15px;
		line-height: 22px;
	}

	/* The chips are the real problem on a phone. `white-space: nowrap` means a
	   long label like "GLOBAL MANUFACTURING" cannot share a row with anything,
	   so every chip takes a line of its own and four of them swallow the top
	   half of the card. Letting the text wrap and tightening the chip lets two
	   sit side by side instead. */
	.am-div-card__tag {
		font-size: 11px;
		line-height: 15px;
		white-space: normal;
	}

	.am-div-card__arrow {
		margin-top: 20px;
	}
}