/*
 * Adult OT — welcome campaign popup (WEB-PROMO-01).
 *
 * Linked only on the Home, and only while the campaign is on (templates/adultot/vip-welcome.php).
 * Every rule is under the .aot-promo prefix, so nothing of MyAAC or of the rest of the theme is
 * touched.
 *
 * The image is shown WHOLE at every size: its width is the largest that fits both the viewport's
 * width and its height at the image's own ratio, and its height follows from that ratio. Nothing
 * is cropped (no object-fit: cover) and nothing scrolls sideways.
 *
 * No animation and no transition: the popup simply appears, which also respects
 * prefers-reduced-motion by construction.
 */

.aot-promo {
	/* The UA's modal dialog centres itself (inset: 0; margin: auto); only its box is reset. */
	margin: auto;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--aot-text);
	max-width: none;
	max-height: none;
	overflow: visible;
}

.aot-promo::backdrop {
	background: rgba(5, 6, 7, .82);
}

.aot-promo__frame {
	--aot-promo-margin: 24px;
	position: relative;
	/* The smallest of: the image's own width, the viewport's width, the viewport's height turned
	   into a width at the image's ratio (1122 / 1402) -- the largest size at which all of it
	   fits. The vh line is the fallback for browsers without dvh. */
	width: min(1122px, calc(100vw - 2 * var(--aot-promo-margin)), calc((100vh - 2 * var(--aot-promo-margin)) * 1122 / 1402));
	width: min(1122px, calc(100vw - 2 * var(--aot-promo-margin)), calc((100dvh - 2 * var(--aot-promo-margin)) * 1122 / 1402));
}

.aot-promo__link {
	display: block;
	line-height: 0;
	border: 1px solid var(--aot-border-accent);
	border-radius: var(--aot-radius-md);
	box-shadow: var(--aot-shadow-lg);
	overflow: hidden;
}

.aot-promo__link:focus-visible {
	outline: 2px solid var(--aot-bronze-hi);
	outline-offset: 3px;
}

.aot-promo__image {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1122 / 1402;
	object-fit: contain;
}

.aot-promo__close {
	position: absolute;
	top: 8px;
	right: 8px;
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 1px solid var(--aot-bronze-strong);
	border-radius: 50%;
	background: rgba(14, 16, 18, .88);
	color: var(--aot-text);
	font: 600 28px/1 var(--aot-font-ui);
	cursor: pointer;
	box-shadow: var(--aot-shadow-sm);
}

.aot-promo__close:hover {
	border-color: var(--aot-bronze-hi);
	color: #FFFFFF;
}

.aot-promo__close:focus-visible {
	outline: 2px solid var(--aot-bronze-hi);
	outline-offset: 2px;
}

/* While it is open the page behind does not scroll; the scrollbar's width is kept as padding so
   nothing on the page moves sideways (js/vip-welcome-popup.js measures it). */
html.aot-promo-open {
	overflow: hidden;
	padding-right: var(--aot-promo-gutter, 0px);
}

@media (max-width: 640px) {
	.aot-promo__frame {
		--aot-promo-margin: 12px;
	}

	.aot-promo__close {
		top: 6px;
		right: 6px;
	}
}