/* ═══════════════════ MEMBERSHIPS PAGE STYLES ═══════════════════ */

/* ---- Membership Operations ---- */
.mship-operations {
	padding-block: calc(130 * var(--sp));
}

.mship-operations__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 24px;
	margin-block-start: calc(54 * var(--sp));
}

.mship-operations__card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding: 24px;
	border-radius: 8px;
	background: #fff;
	box-shadow: var(--shadow-card);
	transition: transform .25s ease, box-shadow .25s ease;
}

.mship-operations__card:hover {
	transform: translateY(-2px);
	box-shadow: var(--shadow-section);
}

.mship-operations__icon-box {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin-block-end: 20px;
	border-radius: 10px;
	background: var(--gold-gradient-btn);
	color: var(--text-white);
}

.mship-operations__icon {
	width: 45px;
	height: 45px;
}

.mship-operations__card-title {
	min-height: 68px;
	margin-block-end: 10px;
	color: var(--text-dark);
}

.mship-operations__card-desc {
	color: var(--text-muted);
	padding-bottom:10px;
}

.mship-operations__card-desc p {
	margin-block-end: 0;
}

.mship-operations__card-desc ul {
	margin: 0;
	padding-inline-start: 18px;
}

.mship-operations__card-desc li + li {
	margin-block-start: 6px;
}

.mship-operations__card-desc strong {
	color: var(--text-dark);
}

/* ---- Section 3: Loyalty Rewards ---- */
.mship-loyalty {
	position: relative;
	padding-block: calc(130 * var(--sp));
	background: var(--bg-dark);
}

.mship-loyalty__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 30px;
	margin-block-start: calc(54 * var(--sp));
}

.mship-loyalty__card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding: calc(42 * var(--sp)) 34px;
	border-radius: var(--radius-lg);
}

.mship-loyalty__icon-box {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	margin-block-end: 24px;
	border-radius: 12px;
	background: var(--gold-gradient-btn);
	color: var(--bg-dark);
	box-shadow: var(--shadow-gold-sm);
}

.mship-loyalty__card-title {
	margin-block-end: 12px;
	color: var(--text-white);
}

.mship-loyalty__card-text {
	color: var(--text-white-75);
}

/* ---- Section 4: Rewards That Add Up (Value / Checklist) ---- */
.mship-value {
	position: relative;
	overflow: hidden;
	padding-block: calc(130 * var(--sp));
}

.mship-value__watermark {
	inset-block-start: 20px;
	inset-inline-start: -40px;
	font-size: calc(220 * var(--fs));
}

.mship-value__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: calc(60 * var(--sp));
	align-items: center;
}

.mship-value__checklist {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px 24px;
}

.mship-value__item {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 20px 24px;
	border-radius: var(--radius-md);
	background: #fff;
	box-shadow: var(--shadow-card);
	transition: transform .25s ease, box-shadow .25s ease;
}

.mship-value__item:hover {
	transform: translateY(-2px);
	box-shadow: var(--shadow-section);
}

.mship-value__tick {
	position: relative;
	flex: 0 0 24px;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: var(--gold-gradient-btn);
	display: flex;
	align-items: center;
	justify-content: center;
}

.mship-value__tick::before {
	content: "";
	width: 8px;
	height: 4px;
	border-inline-start: 1.5px solid var(--bg-dark);
	border-block-end: 1.5px solid var(--bg-dark);
	transform: rotate(-45deg);
	margin-block-start: -1px;
}

.mship-value__text {
	color: var(--bg-dark);
	font-weight: 500;
}

/* ---- Section 5: CTA ---- */
.mship-cta {
	padding-block: calc(100 * var(--sp)) calc(130 * var(--sp));
	background: var(--bg-dark);
}

/* ═══════════════════ RESPONSIVE ═══════════════════ */
@media (max-width: 1199.98px) {
	.mship-operations,
	.mship-loyalty,
	.mship-value {
		padding-block: calc(100 * var(--sp));
	}

	.mship-cta {
		padding-block: calc(80 * var(--sp)) calc(100 * var(--sp));
	}

	.mship-value__grid {
		gap: calc(40 * var(--sp));
	}
}

@media (max-width: 991.98px) {
	.mship-loyalty__grid {
		grid-template-columns: minmax(0, 1fr);
		max-width: 480px;
		margin-inline: auto;
	}

	.mship-value__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.mship-value__checklist {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 767.98px) {
	.mship-operations,
	.mship-loyalty,
	.mship-value {
		padding-block: calc(70 * var(--sp));
	}

	.mship-cta {
		padding-block: calc(60 * var(--sp)) calc(80 * var(--sp));
	}

	.mship-value__checklist {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 575.98px) {
	.mship-operations__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.mship-loyalty__card {
		padding: 32px 24px;
	}

	.mship-value__item {
		padding: 16px 18px;
	}
}