@import '@wordpress/base-styles/breakpoints';
@import '@wordpress/base-styles/mixins';
@import '@wordpress/base-styles/variables';

.hosting-plan-section {
	padding-block: 32px;

	.page-section__header-title {
		@include heading-x-large;
		text-align: center;
	}

	&.page-section-wrapper {
		@include break-medium {
			padding: 40px 0;
		}
	}
}

.hosting-plan-section__banner {
	max-width: 1000px;
	margin-inline: auto;
	margin-block-end: 32px;
}

.hosting-plan-section__content {
	display: grid;
	grid-template-columns: 1fr;
	gap: 32px;

	&:has( .hosting-plan-section__aside ) {
		@include break-wide {
			grid-template-columns: 2fr 1fr;

			.hosting-plan-section__main {
				grid-template-columns: 1fr 1fr;
			}
		}

		@include break-huge {
			.hosting-plan-section__main {
				grid-template-columns: 400px 1fr;
			}
		}
	}
}

.hosting-plan-section__main {
	border-radius: 8px;
	background-color: var( --color-primary-0 );
	padding: 8px;
	max-width: 100%;
	overflow: hidden;

	display: grid;
	grid-template-columns: 1fr;
	gap: 16px;

	@include break-mobile {
		padding: 32px;
	}

	@include break-large {
		grid-template-columns: 1fr 1fr;
	}

	@include break-huge {
		grid-template-columns: 400px 2fr;
	}
}

.hosting-plan-section__card {
	border-radius: 8px;
	box-shadow: 0 3px 1px 0 #0000000a;
	padding: 16px;
	background-color: var( --color-surface );
	max-width: 100%;
	overflow: hidden;

	@include break-medium {
		padding: 32px;
	}
}

.hosting-plan-section__details {
	@include break-wide {
		margin-inline-start: 32px;
	}
}

.hosting-plan-section__aside {
	border-radius: 8px;
	border: 1px solid var( --color-neutral-5 );
	padding: 24px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 16px;

	@include break-mobile {
		padding: 32px;
		gap: 32px;
	}
}

.hosting-plan-section__details-heading,
.hosting-plan-section__aside-heading {
	@include heading-x-large;
}

.hosting-plan-section__details-content,
.hosting-plan-section__aside-content {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin-block: 16px;

	> * {
		@include body-medium;
		margin: 0;
		padding: 0;
	}
}

.hosting-plan-section__details-subheading {
	@include body-medium;
	margin-block-start: 8px;
	color: var( --color-neutral-60 );
}

.hosting-plan-section__aside-footer {
	> * {
		width: 100%;
	}
}

.hosting-plan-section__aside-button.hosting-plan-section__aside-button.hosting-plan-section__aside-button {
	justify-content: center;
}
