/**
 * The promo card in the bottom left corner, ported from the new site
 * (zenegy-website-next: `Promo` and `.promo` in globals.css).
 *
 * A white card with a line, a muted line and a button, and the report's cover
 * standing in it and rising past the top edge, with a round close button on
 * the corner. The whole card is a link; the close button lies over it.
 *
 * It starts invisible and is opened by assets/js/promo.js, so without
 * JavaScript it never shows: it could not be closed for good.
 */

.zen-promo {
	position: fixed;
	bottom: 1rem;
	left: 1rem;
	z-index: 30;
	width: min(27.5rem, calc(100vw - 2rem));
	visibility: hidden;
	opacity: 0;
	translate: 0 1.5rem;
	transition:
		opacity 260ms ease,
		translate 460ms cubic-bezier(.2, .8, .2, 1),
		visibility 0s linear 460ms;
}

.zen-promo[data-state="open"] {
	visibility: visible;
	opacity: 1;
	translate: 0 0;
	transition-delay: 0s;
}

.zen-promo__card {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	gap: .625rem;
	padding: .875rem 7.25rem .875rem 1rem;
	border-radius: 1rem;
	background: #fff;
	box-shadow: 0 18px 44px -18px rgba(18, 12, 43, .35), 0 0 0 1px rgba(18, 12, 43, .1);
}

.zen-promo__title {
	margin: 0;
	font-size: 15px;
	line-height: 1.3;
	color: #111;
	text-wrap: pretty;
}

/* Too little room for the second line on a phone. */
.zen-promo__muted {
	display: none;
	margin: 0;
	font-size: 15px;
	line-height: 1.3;
	color: #707070;
	text-wrap: pretty;
}

.zen-promo__btn {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	padding: .625rem 1rem;
	border-radius: 10px;
	background: #120c2b;
	color: #fff;
	font-size: 14px;
	line-height: 1;
	text-decoration: none;
	transition: background-color 200ms ease;
}

.zen-promo__btn:hover,
.zen-promo__btn:focus-visible {
	background: #241a4d;
	color: #fff;
}

/* The whole card leads where the button does. */
.zen-promo__btn::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 1rem;
}

.zen-promo__btn svg { flex: none; }

/* The cover stands in the card: cut off by its foot, taller than the card. */
.zen-promo__cover {
	position: absolute;
	top: -.75rem;
	right: 1rem;
	bottom: 0;
	width: 5.25rem;
	clip-path: inset(-2rem -2rem 0 -2rem);
	pointer-events: none;
}

.zen-promo__cover img {
	width: 100%;
	height: 100%;
	border-radius: 6px 6px 0 0;
	object-fit: cover;
	object-position: top;
	box-shadow: 0 10px 28px -8px rgba(18, 12, 43, .5);
}

.zen-promo__close {
	position: absolute;
	top: -.75rem;
	right: -.75rem;
	z-index: 10;
	display: grid;
	place-items: center;
	width: 2rem;
	height: 2rem;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: #fff;
	color: #120c2b;
	cursor: pointer;
	box-shadow: 0 10px 28px -12px rgba(18, 12, 43, .45), 0 0 0 1px rgba(18, 12, 43, .1);
	transition: background-color 200ms ease;
}

.zen-promo__close:hover { background: #f2f2f2; }

/* On a phone the support bubble sits in the opposite corner and the card is
   nearly the width of the screen, so it rises above the bubble. */
@media (max-width: 639px) {
	.zen-promo { bottom: calc(5rem + env(safe-area-inset-bottom, 0px)); }
}

@media (min-width: 640px) {
	.zen-promo {
		bottom: 1.25rem;
		left: 1.25rem;
		width: min(34rem, calc(100vw - 2.5rem));
	}

	.zen-promo__card {
		gap: .875rem;
		padding: 1.25rem 9.5rem 1.25rem 1.25rem;
	}

	.zen-promo__title,
	.zen-promo__muted { font-size: 16px; }
	.zen-promo__muted { display: block; }

	.zen-promo__cover {
		top: -1.25rem;
		right: 1.25rem;
		width: 7rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.zen-promo {
		translate: none;
		transition: opacity 200ms ease, visibility 0s linear 200ms;
	}
}

/* Not on paper: a fixed card would print on every sheet. */
@media print {
	.zen-promo { display: none; }
}