/* Artmark ISO Banner widget — certificate photo on one side, a white panel
   with the certifier logo, a two-line heading, a paragraph and a dark
   notched button on the other. The panel's outer top corner is cut. The
   card is a query container, so it stacks (photo on top) whenever it is
   narrow. Colours, sizes and spacing are widget controls; these are the
   design defaults. */

.am-iso {
	width: 100%;
}

.am-iso__inner {
	width: 100%;
	max-width: none;
	margin: 0 auto;
}

.am-iso__card {
	display: flex;
	align-items: stretch;
	min-height: 480px;
	border: 0 solid transparent;
	clip-path: polygon(
		0 0,
		calc(100% - var(--am-iso-notch, 44px)) 0,
		100% var(--am-iso-notch, 44px),
		100% 100%,
		0 100%
	);
}

/* Photo on the right: the panel moves left and its outer corner is the top-left one. */
.am-iso-img-right .am-iso__card {
	flex-direction: row-reverse;
	clip-path: polygon(
		var(--am-iso-notch, 44px) 0,
		100% 0,
		100% 100%,
		0 100%,
		0 var(--am-iso-notch, 44px)
	);
}

.am-iso__media {
	position: relative;
	flex: 0 0 45%;
	max-width: 45%;
	min-width: 0;
	overflow: hidden;
	background-color: #0e1a21;
	/* The photo's outer bottom corner is cut, showing the section behind. */
	clip-path: polygon(
		0 0,
		100% 0,
		100% 100%,
		var(--am-iso-inotch, 32px) 100%,
		0 calc(100% - var(--am-iso-inotch, 32px))
	);
}

.am-iso-img-right .am-iso__media {
	clip-path: polygon(
		0 0,
		100% 0,
		100% calc(100% - var(--am-iso-inotch, 32px)),
		calc(100% - var(--am-iso-inotch, 32px)) 100%,
		0 100%
	);
}

/* Photo overlay: a colour from the control, transparent by default. */
.am-iso__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background-color: transparent;
	pointer-events: none;
}

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

.am-iso__body {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	padding: 56px 64px;
	background-color: #ffffff;
	text-align: left;
}

.am-iso__logo {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 88px;
	height: 88px;
	margin-bottom: 28px;
	border: 0 solid transparent;
}

.am-iso__logo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.am-iso__title {
	margin: 0 0 24px;
	font-size: 36px;
	font-weight: 500;
	line-height: 1.15;
	letter-spacing: -0.01em;
	color: #0b0f1a;
}

/* The second line: lighter, smaller, its own line. */
.am-iso__sub {
	display: block;
	margin-top: 4px;
	font-size: 20px;
	font-weight: 400;
	line-height: 1.3;
	letter-spacing: 0;
	color: #3b4252;
}

.am-iso__text {
	margin: 0 0 28px;
	max-width: 640px;
	font-size: 15px;
	line-height: 1.65;
	color: #4b5160;
}

/* The button: every state pinned here, so a theme's link and button colours
   cannot bleed in. Colours ride the widget's custom properties. */
.am-iso a.am-iso__btn,
.am-iso a.am-iso__btn:visited {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	padding: 15px 20px;
	border: 0 solid transparent;
	border-radius: 0;
	box-shadow: none;
	background-color: var(--am-iso-bb, #060b17);
	color: var(--am-iso-bc, #ffffff);
	font-size: 14px;
	font-weight: 500;
	line-height: 18px;
	text-decoration: none;
	clip-path: polygon(
		0 0,
		100% 0,
		100% calc(100% - var(--am-iso-bnotch, 8px)),
		calc(100% - var(--am-iso-bnotch, 8px)) 100%,
		0 100%
	);
	transition: background-color 0.2s ease, color 0.2s ease;
}

.am-iso a.am-iso__btn:hover,
.am-iso a.am-iso__btn:focus,
.am-iso a.am-iso__btn:active {
	background-color: var(--am-iso-bhb, #0081e4);
	color: var(--am-iso-bhc, #ffffff);
	text-decoration: none;
	box-shadow: none;
}

/* clip-path would cut an outline off, so focus is drawn inside. */
.am-iso a.am-iso__btn:focus-visible {
	outline: none;
	box-shadow: inset 0 0 0 2px #b4ddff;
}

.am-iso__btn-ico {
	display: inline-flex;
	flex-shrink: 0;
	width: 16px;
	height: 16px;
	transition: transform 0.2s ease;
}

.am-iso__btn-ico svg,
.am-iso__btn-ico img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.am-iso a.am-iso__btn:hover .am-iso__btn-ico {
	transform: translateX(3px);
}

/* Phones: photo on top at its own height, panel below. !important beats
   the per-element width and min-height the controls print. Media queries
   only, not a container query: inside Elementor's flex-column containers
   Chromium sizes a container-type element at its intrinsic width when it
   works out the flex item's height, which left this widget twice as tall as
   its content (632px of white under the card on the Our Advantage page). */
@media (max-width: 767px) {
	.am-iso__card,
	.am-iso-img-right .am-iso__card {
		flex-direction: column !important;
		min-height: 0 !important;
	}

	.am-iso__media,
	.am-iso-img-right .am-iso__media {
		flex: 0 0 auto !important;
		max-width: none !important;
		width: 100%;
		height: var(--am-iso-imgh, 240px);
		clip-path: none;
	}

	.am-iso__body {
		padding: 28px 24px;
	}

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

	.am-iso__sub {
		font-size: 17px;
	}
}

@media (max-width: 1024px) and (min-width: 768px) {
	.am-iso__title {
		font-size: 32px;
	}

	.am-iso__sub {
		font-size: 18px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.am-iso a.am-iso__btn,
	.am-iso__btn-ico {
		transition: none;
	}

	.am-iso a.am-iso__btn:hover .am-iso__btn-ico {
		transform: none;
	}
}