/*
 * The call to action ([esellbox_cta], includes/cta.php) in its three shapes. Loaded only where one is.
 *
 *   full     the night card: copy, two buttons, points, the phone number -- and beside it three of the
 *            product's moments floating over a big cube
 *   inline   a light card for the middle of an article
 *   compact  a small card for the article's side column
 */

.esb-cta-box {
	--cta-gap: clamp(18px, 2.5vw, 28px);
	position: relative;
	isolation: isolate;
	margin-block: 2.25rem;
}

/* ---------------------------------------------------------------- full */

.esb-cta-box--full {
	display: grid;
	grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
	gap: var(--cta-gap);
	align-items: center;
	padding: clamp(24px, 4vw, 44px);
	overflow: hidden;
	border-radius: var(--esb-radius-l);
	background:
		radial-gradient(70% 90% at 100% 0%, rgb(47 157 128 / 0.42), transparent 70%),
		radial-gradient(60% 80% at 0% 100%, rgb(37 99 214 / 0.32), transparent 70%),
		var(--esb-night);
	color: var(--esb-on-night-2);
	box-shadow: var(--esb-shadow-l);
}
.esb-cta-box--full .esb-cta-box__copy { display: grid; gap: 12px; }
.esb-cta-box__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	justify-self: start;
	margin: 0;
	padding: 4px 12px;
	border-radius: var(--esb-radius-pill);
	background: rgb(127 216 184 / 0.14);
	color: var(--esb-green-glow);
	font-size: var(--esb-text-tiny);
	font-weight: 700;
}
.esb-cta-box--full .esb-cta-box__title {
	margin: 0;
	color: var(--esb-on-night);
	font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.75rem);
	font-weight: 800;
	line-height: 1.5;
}
.esb-cta-box--full .esb-cta-box__text { margin: 0; font-size: var(--esb-text-card); line-height: 1.95; }
.esb-cta-box__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-block-start: 6px; }
.esb-cta-box--full .esb-btn.esb-btn--ghost { border-color: rgb(255 255 255 / 0.24); background: rgb(255 255 255 / 0.05); color: var(--esb-on-night); box-shadow: none; }
.esb-cta-box--full .esb-btn.esb-btn--ghost:hover { border-color: #3ad37a; color: #fff; background: rgb(58 211 122 / 0.12); }
.esb-cta-box__wa .esb-icon { inline-size: 18px; block-size: 18px; color: #3ad37a; }
.esb-cta-box__points { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 8px 0 0; padding: 0; list-style: none; }
.esb-cta-box__points li { display: inline-flex; align-items: center; gap: 7px; font-size: var(--esb-text-small); }
.esb-cta-box__points .esb-icon { inline-size: 17px; block-size: 17px; color: var(--esb-green-glow); }
.esb-cta-box__call { margin: 4px 0 0; font-size: var(--esb-text-small); }
.esb-cta-box .esb-cta-box__call a { color: var(--esb-on-night); font-weight: 700; text-decoration: none; }
.esb-cta-box .esb-cta-box__call a:hover { color: var(--esb-green-glow); }

.esb-cta-box__visual { position: relative; display: grid; place-items: center; min-block-size: 250px; }
.esb-cta-box__cube {
	position: absolute;
	inset: 6% 12%;
	color: rgb(255 255 255 / 0.12);
	transform: rotate(-8deg);
}
.esb-cta-box__cube .esb-cube { inline-size: 100%; block-size: 100%; }
.esb-cta-box__moments { position: relative; display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; inline-size: min(100%, 300px); }
.esb-cta-box__moments li {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 11px 14px;
	border: 1px solid rgb(255 255 255 / 0.12);
	border-radius: var(--esb-radius-m);
	background: rgb(255 255 255 / 0.94);
	box-shadow: 0 18px 30px -18px rgb(0 0 0 / 0.6);
}
.esb-cta-box__moments li:nth-child(2) { margin-inline-start: 28px; }
.esb-cta-box__moments li:nth-child(3) { margin-inline-start: 8px; }
.esb-cta-box__moments .esb-tile { --tile: 36px; border-radius: 10px; }
.esb-cta-box__moments span { display: grid; gap: 1px; }
.esb-cta-box__moments strong { color: var(--esb-ink); font-size: 0.8125rem; font-weight: 700; line-height: 1.6; }
.esb-cta-box__moments small { color: var(--esb-ink-3); font-size: 0.75rem; line-height: 1.6; }
.esb-cta-box__visual--image img { inline-size: 240px; border-radius: 30px; box-shadow: 0 30px 50px -20px rgb(0 0 0 / 0.6); }

@media (max-width: 860px) {
	.esb-cta-box--full { grid-template-columns: 1fr; }
	.esb-cta-box__visual { display: none; }
}
@media (max-width: 520px) {
	.esb-cta-box--full .esb-cta-box__actions .esb-btn { inline-size: 100%; }
}

/* ---------------------------------------------------------------- inline */

.esb-cta-box--inline {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	gap: 16px 18px;
	align-items: center;
	padding: 20px 22px;
	border: 1px solid rgb(14 110 88 / 0.18);
	border-radius: var(--esb-radius-m);
	background:
		radial-gradient(60% 120% at 100% 0%, rgb(14 110 88 / 0.1), transparent 70%),
		linear-gradient(90deg, var(--esb-green-wash), #fff);
}
.esb-cta-box__mark {
	display: grid;
	place-items: center;
	inline-size: 48px;
	block-size: 48px;
	border-radius: 14px;
	background: #fff;
	box-shadow: inset 0 0 0 1px rgb(14 110 88 / 0.18);
	color: var(--esb-green);
}
.esb-cta-box__mark .esb-cube { inline-size: 28px; block-size: 28px; }
.esb-cta-box--inline .esb-cta-box__copy { display: grid; gap: 2px; }
.esb-cta-box--inline .esb-cta-box__title,
.esb-cta-box--compact .esb-cta-box__title { margin: 0; color: var(--esb-ink); font-size: 1rem; font-weight: 700; line-height: 1.7; }
.esb-cta-box--inline .esb-cta-box__text,
.esb-cta-box--compact .esb-cta-box__text { margin: 0; color: var(--esb-ink-2); font-size: var(--esb-text-small); line-height: 1.85; }
.esb-cta-box--inline .esb-cta-box__actions { margin: 0; flex-wrap: nowrap; }
.esb-cta-box--inline .esb-btn { min-block-size: 42px; padding: 8px 16px; font-size: 0.875rem; }
@media (max-width: 760px) {
	.esb-cta-box--inline { grid-template-columns: auto minmax(0, 1fr); }
	.esb-cta-box--inline .esb-cta-box__actions { grid-column: 1 / -1; flex-wrap: wrap; }
}
@media (max-width: 520px) {
	.esb-cta-box--inline .esb-cta-box__actions .esb-btn { flex: 1 1 100%; }
}

/* ---------------------------------------------------------------- compact */

.esb-cta-box--compact {
	display: grid;
	gap: 10px;
	margin: 0;
	padding: 18px;
	border: 1px solid var(--esb-line);
	border-radius: var(--esb-radius-m);
	background: linear-gradient(180deg, var(--esb-green-wash), #fff);
}
.esb-cta-box--compact .esb-cta-box__mark { inline-size: 40px; block-size: 40px; border-radius: 12px; }
.esb-cta-box--compact .esb-cta-box__mark .esb-cube { inline-size: 24px; block-size: 24px; }
.esb-cta-box--compact .esb-cta-box__actions { display: grid; gap: 8px; margin: 4px 0 0; }
.esb-cta-box--compact .esb-btn { inline-size: 100%; min-block-size: 42px; font-size: 0.875rem; }