/*
 * MARK: pricing tables
 */
.pricing-tables {
	display: grid;
	grid-template-rows: auto;
	grid-template-columns: auto;
	gap: 1.5rem;
	margin: 1.5rem 0;

	&.columns-2 {
		@media (min-width: 769px) {
			grid-template-columns: repeat(2, 1fr);
		}
	}

	&.columns-3 {
		@media (min-width: 769px) {
			grid-template-columns: repeat(4, 1fr);
		}
		@media (min-width: 993px) {
			grid-template-columns: repeat(3, 1fr);
		}

		@media (min-width: 769px) and (max-width: 992px) {
			.pricing-column:nth-child(1) {
				grid-column: 1 / 3;
			}

			.pricing-column:nth-child(2) {
				grid-column: 3 / 5;
			}

			.pricing-column:nth-child(3) {
				grid-row: 2 / 3;
				grid-column: 2 / 4;
			}
		}
	}

	&.columns-4 {
		@media (min-width: 769px) {
			grid-template-columns: repeat(2, 1fr);
		}
		@media (min-width: 993px) {
			grid-template-columns: repeat(4, 1fr);
		}
	}

	.pricing-column {
		border-top: 10px solid var(--column-color);
		background-color: #f5f5f5;
		box-shadow: 0 1px 10px 3px rgb(0, 0, 0, 0.075), 0 1px 2px 0 rgb(0, 0, 0, 0.1);
	}

	/* header */
	.pricing-header {
		text-align: center;
		position: relative;
		z-index: 1;
		padding: 1em 0 1.5rem;

		.price-header-title {
			color: var(--column-color);
			font-weight: 700;
			position: relative;
			z-index: 4;
			margin: 1rem 0;
			padding: 0 1.5rem;
		}

		.price-header-description {
			position: relative;
			z-index: 4;
			margin: 0.5rem 0;
			padding: 0 1.5rem;
		}

		.price-header-price {
			color: var(--column-color);
			line-height: 1;
			font-weight: 700;
			position: relative;
			z-index: 4;
			margin: 0.5rem 0 1rem;
			padding: 0 1.5rem;

			.price-suffix {
				font-size: 1.25rem;
				font-weight: 400;
			}
		}

		.price-cta-button {
			position: relative;
			z-index: 4;
			margin: 1rem 0;
			padding: 0 1.5rem;

			a {
				color: #fff;
				font-weight: 600;
				text-decoration: none;
				background-color: var(--column-color);
				box-shadow: 0 2px 4px 1px rgb(0, 0, 0, 0.1);
				display: block;
				position: relative;
				z-index: 4;
				margin: auto;
				padding: 1rem;
				max-width: 300px;

				em {
					color: #fff;
					font-style: normal;
					position: relative;
					z-index: 6;
				}

				&::after {
					content: "";
					background-color: rgb(0, 0, 0, 0);
					position: absolute;
					top: 0;
					left: 0;
					z-index: 5;
					width: 100%;
					height: 100%;
					transition: background 0.3s ease;
				}
			}

			a:hover::after {
				background-color: rgb(0, 0, 0, 0.1);
				transition: background 0.15s ease;
			}
		}

		.price-header-image {
			position: absolute;
			top: 0;
			left: 0;
			z-index: 2;
			width: 100%;
			height: 100%;
			object-fit: cover;
			object-position: center;
		}

		&:has(.price-header-image)::after {
			content: "";
			background: linear-gradient(180deg, rgb(0, 0, 0, 0.55) 30%, rgb(0, 0, 0, 0.15) 100%);
			position: absolute;
			top: 0;
			left: 0;
			z-index: 3;
			width: 100%;
			height: 100%;
		}

		&:has(.price-header-image) .price-header-title,
		&:has(.price-header-image) .price-header-description,
		&:has(.price-header-image) .price-header-price {
			color: #fff;
		}

		&:has(.price-header-image) .price-cta-button a {
			box-shadow: inset 0 0 0 1px #fff, 0 2px 4px 1px rgb(0, 0, 0, 0.1);
		}
	}


	.pricing-body .pricing-section {
		text-align: center;

		.subsection-header {
			font-weight: 600;
			background-color: #e7e7e7;
			padding: 1rem 1.5rem;

			.subsection-note {
				color: #656565;
				font-weight: 400;
				display: block;
				margin-top: 0.25rem;
			}
		}

		.pricing-subsection {
			border-bottom: 1px solid #e9e9e9;
			padding: 0.75rem 1.5rem;

			&:nth-child(2) {
				padding-top: 1.5rem;
			}

			&:last-child {
				border-style: none;
				padding-bottom: 1.5rem;
			}

			.subsection-title {
				line-height: 27px;
			}

			.subsection-icon {
				overflow: hidden;
				margin-top: -9px;
				height: 36px;
			}

			.subsection-note {
				color: #656565;
				margin-top: 0.25rem;
			}
		}
	}
}