@import "@automattic/typography/styles/fonts";
@import "@automattic/typography/styles/variables";

.app-promo-card {
	background: var(--studio-white);
	border: 1px solid var(--studio-gray-5);
	border-radius: 5px; // stylelint-disable-line scales/radii

	padding: 20px;

	@media (min-width: 625px) {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: flex-start;
		padding: 48px 64px;
		gap: 14px;
	}
}

.app-promo-card__lhs {
	// Left-hand side.
	// Contains the WordPress/Jetpack icons and text.
	margin: initial;

	a.app-promo-card__link {
		color: var(--studio-jetpack-green-50);
	}
	a.app-promo-card__woo-link {
		color: var(--studio-woocommerce-purple);
	}
	a.app-promo-card__link:hover {
		text-decoration: underline;
		text-underline-offset: 2px;

		&.app-promo-card__jetpack-link {
			color: var(--studio-jetpack-green-60);
		}
	}
}

.app-promo-card__rhs {
	// Right-hand side.
	// Contains the QR code or App Store button.
	margin: auto 0;

	.app-promo-card__qr-code {
		height: auto;
		max-width: 114px;
		max-height: 114px;
	}
	.app-promo-card__store-badge {
		height: auto;
		max-width: 210px;
	}
}

.app-promo-card__icons {
	margin-bottom: 24px;
	max-height: 55px;

	.app-promo-card__woo-icon {
		height: 55px;
		border-radius: 12px; // stylelint-disable-line scales/radii
	}
}

.app-promo-card__title {
	// Headline
	margin: 0;
	margin-bottom: 10px;

	/* Xl/Serif */
	font-family: $brand-serif;
	font-style: normal;
	font-weight: 400;
	font-size: 32px;
	line-height: 40px;
	letter-spacing: -0.32px;

	color: var(--studio-gray-100);
}

.app-promo-card__message {
	// Details
	margin: 0;
	font-style: normal;
	font-weight: 400;
	font-size: 17px;
	line-height: 25px;

	color: var(--studio-gray-50);

	@media (max-width: 625px) {
		margin-bottom: 20px;
	}
}
