/**
 * Módulo visual de membresía.
 *
 * @package Groowleck
 */

.membership-section {
	position: relative;
}

.membership-section__inner {
	display: grid;
	grid-template-columns: minmax(0, 1.35fr) minmax(16rem, 0.65fr);
	align-items: center;
	gap: var(--groowleck-space-12);
	padding-block: var(--groowleck-space-12);
	padding-inline: var(--groowleck-space-10);
	border: var(--groowleck-border-default);
	border-radius: var(--groowleck-radius-xl);
	background: var(--groowleck-color-primary-dark);
	color: var(--groowleck-color-white);
}

.membership-section__content {
	max-width: 44rem;
}

.membership-section__content h2 {
	margin-block: var(--groowleck-space-4);
	color: inherit;
}

.membership-section__content p {
	margin-block: 0 var(--groowleck-space-6);
	color: inherit;
}

.membership-section__benefits {
	display: grid;
	gap: var(--groowleck-space-4);
	margin: 0;
	padding: 0;
	list-style: none;
}

.membership-section__benefits li {
	position: relative;
	padding-inline-start: var(--groowleck-space-6);
}

.membership-section__benefits li::before {
	position: absolute;
	inset-block-start: 0.25em;
	inset-inline-start: 0;
	content: "✓";
	font-weight: var(--groowleck-font-weight-bold);
}

.membership-section--member .membership-section__badge {
	background: var(--groowleck-color-success);
}

@media (max-width: 52rem) {
	.membership-section__inner {
		grid-template-columns: minmax(0, 1fr);
		padding-inline: var(--groowleck-space-6);
	}
}


.membership-plans {
	padding-block: var(--groowleck-space-16);
}

.membership-plans__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
	gap: var(--groowleck-space-6);
}

.membership-plan {
	display: flex;
	height: 100%;
	flex-direction: column;
	padding: var(--groowleck-space-8);
}

.membership-plan--featured {
	border-width: 2px;
}

.membership-plan h3 {
	margin-block: var(--groowleck-space-4);
}

.membership-plan__price {
	font-size: var(--groowleck-font-size-xl);
	font-weight: var(--groowleck-font-weight-bold);
}

.membership-plan__price span {
	font-size: var(--groowleck-font-size-sm);
	font-weight: var(--groowleck-font-weight-normal);
}

.membership-plan__benefits {
	display: grid;
	gap: var(--groowleck-space-3);
	margin-block: var(--groowleck-space-6);
	padding: 0;
	list-style: none;
}

.membership-plan__benefits li::before {
	margin-inline-end: var(--groowleck-space-2);
	content: "✓";
}

.membership-plan .button {
	margin-block-start: auto;
}