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

.am-hero {
	position: relative;
	display: flex;
	width: 100%;
	min-height: 85vh;
	overflow: hidden;
}

/* The image/video covers the hero, so a screen of a different shape crops it:
   very wide screens lose the top and bottom, phones lose the sides. The
   Background > Image Focus control sets --am-hero-focus (per breakpoint) to
   choose which part stays in view (default: Top, so faces survive). */
.am-hero__fallback {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: var(--am-hero-focus, center top);
}

.am-hero__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: var(--am-hero-focus, center top);
}

.am-hero__overlay {
	position: absolute;
	inset: 0;
}

.am-hero__inner {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: flex-end;
	width: 100%;
	max-width: none; /* full width; edges = 32px section padding (designer spec) */
	margin: 0 auto;
}

/* Split layout — paragraph without cards: badge sits on its own row, then
   heading (left) and paragraph (right) start on the same top line. */
.am-hero__inner--split {
	flex-direction: column;
	align-items: stretch !important; /* structural: Vertical Position maps to justify-content in this mode */
	justify-content: flex-end;
	row-gap: 0 !important; /* badge-to-heading spacing comes only from the badge "Space Below" control */
}

.am-hero__row {
	display: flex;
	align-items: flex-start;
	width: 100%;
}

/* `auto` = defer to the parent's align-items, which differs between the two
   hero layouts. The Vertical Position control overrides it from the wrapper. */
.am-hero__left {
	width: 55%;
	flex-shrink: 0;
	align-self: var(--am-hero-leftva, auto);
}

/* Same contract as the heading column: `auto` defers to the parent, the
   Column Vertical Position control overrides it from the wrapper. */
.am-hero__right {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	gap: 16px;
	align-self: var(--am-hero-rightva, auto);
}

/* Badge */
.am-hero__badge {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	font-size: 14px;
	font-weight: 500;
	line-height: 16px;
	border: 0.5px solid rgba(255, 255, 255, 0.5);
}

.am-hero__badge-icon {
	display: inline-flex;
	font-size: 14px;
}

.am-hero__badge-icon svg,
.am-hero__badge-icon img {
	display: block;
	width: 14px;
	height: 14px;
	fill: currentColor;
	object-fit: contain;
}

/* Heading */
.am-hero__title {
	margin: 0;
	font-size: 62px;
	font-weight: 400;
	line-height: 1.13;
	letter-spacing: -0.01em;
}

/* Optional tagline under the heading. Inside .am-hero__left, so it follows the
   Heading Alignment control without needing one of its own. */
.am-hero__sub {
	display: block;
	margin: 22px 0 0;
	font-size: 30px;
	font-weight: 400;
	line-height: 1.32;
	letter-spacing: -0.01em;
	color: #ffffff;
}

/* The render already omits the element entirely when the field is empty, so
   the hero is byte-identical to before. This is the belt-and-braces case: if
   an empty one ever reaches the DOM it collapses instead of contributing its
   margin and line box. */
.am-hero__sub:empty {
	display: none;
	margin: 0;
}

/* Cards */
.am-hero__cards {
	display: flex;
}

.am-hero__card {
	flex: 1 1 0;
	display: block;
	text-decoration: none;
	transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.25s ease;
}

.am-hero__card-title,
.am-hero__card-sub,
.am-hero__card-desc {
	transition: color 0.25s ease;
}

a.am-hero__card:hover {
	transform: translateY(-2px);
	box-shadow: 0 12px 28px rgba(0, 0, 0, 0.25);
}

/* Icon + hover arrow share one fixed slot (sized to the larger of the two)
   so the heading width never changes on hover */
.am-hero__card-media {
	display: inline-grid;
	flex-shrink: 0;
}

.am-hero__card-media > * {
	grid-area: 1 / 1;
	justify-self: center;
	align-self: center;
}

.am-hero__card-arrow {
	display: inline-flex;
	visibility: hidden;
	align-items: center;
	justify-content: center;
}

.am-hero__card-arrow svg,
.am-hero__card-arrow img {
	display: block;
}

.am-hero__card--swap:hover .am-hero__card-icon {
	visibility: hidden;
}

.am-hero__card--swap:hover .am-hero__card-arrow {
	visibility: visible;
}

.am-hero__card-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
}

.am-hero__card-icon {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.am-hero__card-icon svg {
	fill: currentColor;
}

.am-hero__card-title {
	margin: 0 0 2px;
	font-size: 22px;
	font-weight: 700;
	line-height: 1;
}

.am-hero__card-sub {
	margin: 0 0 12px;
	font-size: 18px;
	font-weight: 400;
	line-height: 1.2;
}

.am-hero__card-desc {
	margin: 0;
	font-size: 12px;
	line-height: 18px;
}

/* Note */
.am-hero__note {
	font-size: 16px;
	line-height: 24px;
}

/* Paragraph (division page heroes) */
.am-hero__para {
	margin: 0;
	font-size: 16px;
	line-height: 24px;
}

/* Buttons (division page heroes) */
.am-hero__btns {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
}

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

@media (max-width: 1024px) {
	.am-hero__inner {
		flex-direction: column;
		align-items: stretch !important;
		justify-content: flex-end;
	}

	.am-hero__row {
		flex-direction: column;
		align-items: stretch;
	}

	/* Stacked, the flex axis has flipped: a desktop `center` would centre the
	   column horizontally and shrink it to its content. Redefining the property
	   on the element beats the inherited value from the wrapper without needing
	   !important, whatever specificity Elementor generated it at. */
	.am-hero__left {
		width: 100% !important;
		--am-hero-leftva: auto;
	}

	.am-hero__right {
		--am-hero-rightva: auto;
	}

	.am-hero__title {
		font-size: 44px;
	}

	.am-hero__sub {
		font-size: 24px;
	}
}

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

	.am-hero__card {
		min-width: 0 !important;
	}

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

	.am-hero__sub {
		font-size: 19px;
	}

	/* Video off on mobile unless explicitly enabled — fallback image shows instead */
	.am-hero__video {
		display: none;
	}

	.am-hero-mobilevideo-yes .am-hero__video {
		display: block;
	}
}