@import '../variables';

.sensei-home {
	&__sensei-pro-ad {
		display: flex;
		flex-direction: column;
		margin-bottom: 20px;
		font-size: 18px;
		line-height: 1.5;
		background-color: #26212e;
		padding: 14px 12px;

		@media (min-width: $break-medium) {
			flex-direction: row;
			padding: 48px 64px;
		}

		p {
			font-size: 18px;
			margin-top: 0;
		}

		&__column {
			@media (min-width: $break-medium) {
				width: 50%;
			}
		}

		&__content {
			color: $white;

			@media (min-width: $break-medium) {
				padding: 48px;
			}

			ul {
				margin-top: 24px;
				margin-bottom: 0;
				line-height: 140%;
			}

			li {
				margin: 4px 0 0 0;

				~ li {
					margin-top: 13px;
				}

				&:before {
					content: url(../../icons/checked-white.svg);
					margin-right: 10px;
				}
			}
		}

		&__header {
			display: flex;
			align-items: center;
			margin-bottom: 8px;
		}

		&__description {
			max-width: 420px;
			font-size: 13px;
			font-weight: 400;
		}

		&__title {
			margin: 0;
			line-height: 1.3;
			color: $white;
			font-weight: 400;
			font-size: 24px;
			font-family: Inter, sans-serif;
		}

		&__price {
			color: $gray-10;
			font-size: 12px;
			font-weight: 500;
			margin-top: 24px;

			&__title {
				color: $white;
				font-weight: 700;
				font-size: 32px;
				margin-bottom: 0;
				margin-top: 0;
			}

			p {
				margin-top: 8px;
				margin-bottom: 0px;
			}
		}

		&__button {
			font-size: 14px;
			font-weight: 500;
			min-height: 40px;
			margin-top: 24px;

			&.is-primary {
				margin-right: 18px;
			}

			&.is-primary, &.is-secondary {
				width: 142px;

				@media (max-width: $break-medium) {
					width: 100%
				}
			}

			&.is-secondary {
				--wp-admin-theme-color: #{$gray-10};
				box-shadow: inset 0 0 0 1px var(--wp-admin-theme-color);
			}
		}

		&__card {
			background-color: $white;
			margin-top: 48px;

			&--image {
				width: 100%;
			}

			&--quote {
				max-width: 335px;
				font-family: Inter, sans-serif;
				font-weight: 400;
				font-size: 20px;
				color: #000;
				margin: 31px 0 13px 35px;
				padding-left: 19px;
				background: url(../../images/sensei-pro-ad-quote.png) 0 0 no-repeat;
			}

			&--author {
				font-weight: 400;
				font-size: 13px;
				color: #000;
				margin: 13px 0 0 54px;
				min-height: 50px;
			}

			&--stars {
				margin-left: 16px;
			}
		}
	}
}
