/**
 * Call Band widget.
 */

.msd-band {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding: clamp(24px, 3vw, 32px);
	border-radius: 20px;
	background-color: var(--msd-red, #9d2020);
	color: var(--msd-white, #fff);
}

.msd-band__copy {
	display: flex;
	flex-direction: column;
	gap: 6px;
	max-width: 460px;
}

.msd-band__title {
	font-family: var(--msd-font-heading, "Bricolage Grotesque", system-ui, sans-serif);
	font-size: clamp(20px, 2.2vw, 26px);
	font-weight: 800;
	line-height: 1.15;
}

.msd-band__text {
	font-size: 15.5px;
	line-height: 1.5;
}

.msd-band__buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.msd-band .msd-band__button {
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 54px;
	padding: 0 24px 0 18px;
	border-radius: 999px;
	font-size: 16px;
	font-weight: 700;
	text-decoration: none;
	transition: background-color 0.2s;
}

.msd-band .msd-band__button--call {
	background-color: var(--msd-espresso, #281616);
	color: var(--msd-white, #fff);
}

.msd-band .msd-band__button--call:hover {
	background-color: var(--msd-espresso-hover, #3e2323);
	color: var(--msd-white, #fff);
}

.msd-band__button--call .msd-icon {
	font-size: 22px;
}

.msd-band .msd-band__button--wa {
	background-color: var(--msd-white, #fff);
	color: var(--msd-ink, #1e2a30);
}

.msd-band .msd-band__button--wa:hover {
	background-color: var(--msd-cream, #f7f4ee);
	color: var(--msd-ink, #1e2a30);
}

.msd-band__button--wa .msd-icon {
	color: var(--msd-green, #15803d);
	font-size: 20px;
}

@media (prefers-reduced-motion: reduce) {

	.msd-band .msd-band__button {
		transition: none;
	}
}