/**
 * GIAC Memberships — pricing cards.
 * Scoped to .giac-mem so the host theme is untouched.
 */

.giac-mem {
	--gm-cream: #FBF6EC;
	--gm-card: #FFFCF7;
	--gm-line: #E9DCC6;
	--gm-line-soft: #F0E6D5;
	--gm-maroon: #5E1618;
	--gm-maroon-deep: #46100F;
	--gm-orange: #C25D22;
	--gm-gold: #C08A4A;
	--gm-gold-soft: #D9B87C;
	--gm-check: #C4571F;
	--gm-ink: #2E2924;
	--gm-muted: #6E6257;
	--gm-serif: "EB Garamond", Georgia, "Times New Roman", serif;
	--gm-sans: "Jost", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

	container-type: inline-size;
	box-sizing: border-box;
	background: transparent;
	color: var(--gm-ink);
	padding: clamp(40px, 6vw, 76px) clamp(16px, 4vw, 40px);
	font-size: 16px;
	line-height: 1.6;
}

.giac-mem *,
.giac-mem *::before,
.giac-mem *::after {
	box-sizing: border-box;
}

.giac-mem--notice {
	background: #FBF1E7;
	border: 1px solid var(--gm-line);
	padding: 16px 20px;
}

.giac-mem--bg-cream {
	background: var(--gm-cream);
}

/* ---------- heading ---------- */

.gm-head {
	text-align: center;
	max-width: 720px;
	margin: 0 auto clamp(26px, 4vw, 40px);
}

.gm-eyebrow {
	font-family: var(--gm-sans);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: .3em;
	text-transform: uppercase;
	color: var(--gm-orange);
	margin: 0 0 10px;
}

.gm-title {
	font-family: var(--gm-serif);
	font-weight: 500;
	font-size: clamp(34px, 6vw, 62px);
	line-height: 1.05;
	color: var(--gm-maroon);
	margin: 0;
	letter-spacing: -.01em;
}

.gm-rule {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	margin: 14px auto 16px;
	max-width: 220px;
}

.gm-rule::before,
.gm-rule::after {
	content: "";
	flex: 1;
	height: 1px;
	background: var(--gm-line);
}

.gm-rule i {
	width: 7px;
	height: 7px;
	background: var(--gm-gold);
	transform: rotate(45deg);
	display: block;
}

.gm-sub {
	font-size: clamp(15px, 1.6vw, 17px);
	color: var(--gm-muted);
	margin: 0;
}

/* ---------- individual / family switch ---------- */

.gm-switch {
	display: flex;
	justify-content: center;
	gap: 0;
	width: fit-content;
	margin: 0 auto clamp(30px, 4vw, 44px);
	border: 1px solid var(--gm-line);
	border-radius: 999px;
	background: var(--gm-card);
	padding: 4px;
	box-shadow: 0 1px 2px rgba(70, 40, 20, .05);
}

.gm-switch__btn {
	font-family: var(--gm-sans);
	font-size: 12.5px;
	font-weight: 500;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--gm-maroon);
	background: transparent;
	border: 0;
	border-radius: 999px;
	padding: 12px 34px;
	cursor: pointer;
	white-space: nowrap;
	transition: background .2s, color .2s;
}

.gm-switch__btn:hover {
	color: var(--gm-maroon-deep);
}

.gm-switch__btn[aria-selected="true"] {
	background: var(--gm-maroon);
	color: #fff;
}

/* ---------- grid ---------- */

.gm-grid {
	display: grid;
	gap: 22px;
	align-items: stretch;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	max-width: 1400px;
	margin: 0 auto;
}

.gm-grid[data-count="1"] { grid-template-columns: minmax(0, 360px); justify-content: center; }
.gm-grid[data-count="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 760px; }
.gm-grid[data-count="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 1100px; }

/* ---------- card ---------- */

.gm-card {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--gm-card);
	border: 1px solid var(--gm-line);
	border-radius: 12px;
	box-shadow: 0 2px 10px rgba(94, 60, 30, .05);
}

.gm-card.is-featured {
	border-color: var(--gm-maroon);
	box-shadow: 0 14px 34px rgba(70, 20, 18, .18);
}

.gm-card__head {
	text-align: center;
	padding: 34px 22px 22px;
	border-radius: 11px 11px 0 0;
}

.gm-card.is-featured .gm-card__head {
	position: relative;
	overflow: hidden;
	background:
		radial-gradient(115% 78% at 50% -8%, rgba(255, 222, 184, .17), transparent 62%),
		linear-gradient(168deg, #74211F 0%, #63191A 38%, #4E1213 74%, #3F0D0E 100%);
	border-bottom: 1px solid rgba(207, 164, 102, .55);
}

/* Faint woven texture so the panel reads as cloth rather than flat ink. */
.gm-card.is-featured .gm-card__head::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	opacity: .34;
	background-image:
		repeating-linear-gradient(45deg, rgba(255, 255, 255, .028) 0 1px, transparent 1px 7px),
		repeating-linear-gradient(-45deg, rgba(0, 0, 0, .04) 0 1px, transparent 1px 9px);
}

.gm-card.is-featured .gm-card__head > * {
	position: relative;
}

.gm-icon {
	display: grid;
	place-items: center;
	width: 62px;
	height: 62px;
	margin: 0 auto 14px;
	border: 1px solid var(--gm-gold);
	border-radius: 50%;
	color: var(--gm-gold);
}

.gm-card.is-featured .gm-icon {
	border-color: rgba(226, 190, 140, .6);
	color: #E4C08A;
}

.gm-icon__svg {
	width: 28px;
	height: 28px;
}

.gm-card__name {
	font-family: var(--gm-serif);
	font-weight: 500;
	font-size: clamp(26px, 2.4vw, 32px);
	line-height: 1.15;
	color: var(--gm-maroon);
	margin: 0;
}

.gm-card.is-featured .gm-card__name {
	color: #fff;
}

/* diamond sitting on the head / body boundary */

.gm-notch {
	position: relative;
	display: block;
	height: 1px;
	margin: 0 24px;
	background: var(--gm-line);
}

.gm-card.is-featured .gm-notch {
	background: transparent;
	margin: 0;
}

.gm-notch::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 9px;
	height: 9px;
	background: var(--gm-gold);
	transform: translate(-50%, -50%) rotate(45deg);
}

.gm-card.is-featured .gm-notch::after {
	background: var(--gm-gold-soft);
	width: 11px;
	height: 11px;
	top: -1px;
	box-shadow: 0 0 0 4px var(--gm-card);
}

/* ---------- badge ---------- */

.gm-badge {
	position: absolute;
	top: -15px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin: 0;
	white-space: nowrap;
	background: var(--gm-orange);
	color: #fff;
	font-family: var(--gm-sans);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: .16em;
	text-transform: uppercase;
	padding: 8px 20px;
	border-radius: 999px;
	box-shadow: 0 4px 12px rgba(160, 70, 20, .3);
	max-width: calc(100% - 24px);
}

.gm-badge__star {
	width: 13px;
	height: 13px;
	flex: 0 0 13px;
}

/* Small outline tag under the price, e.g. "Founders Discount". */
.gm-tag {
	display: inline-flex;
	align-self: center;
	align-items: center;
	margin: 16px 0 0;
	padding: 4px 13px;
	border: 1px solid currentColor;
	border-radius: 999px;
	background: transparent;
	color: var(--gm-orange);
	font-family: var(--gm-sans);
	font-size: 10px;
	font-weight: 500;
	letter-spacing: .16em;
	line-height: 1.6;
	text-transform: uppercase;
	white-space: nowrap;
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Headroom for badges lives on the row, so badged and unbadged cards keep
   their tops aligned. */
.gm-grid.has-badges {
	padding-top: 15px;
}

/* ---------- body ---------- */

.gm-card__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	padding: 26px 24px 28px;
	text-align: center;
}

.gm-price {
	margin: 0;
	font-family: var(--gm-serif);
	color: var(--gm-ink);
	line-height: 1;
}

.gm-price__amount {
	font-size: clamp(38px, 3.4vw, 46px);
	font-weight: 500;
	letter-spacing: -.01em;
}

.gm-price__per {
	font-family: var(--gm-sans);
	font-size: 14px;
	color: var(--gm-muted);
	letter-spacing: .02em;
}

.gm-card__tagline {
	font-size: 14.5px;
	color: var(--gm-muted);
	margin: 12px 0 0;
}

.gm-features {
	list-style: none;
	margin: 22px 0 24px;
	padding: 22px 0 0;
	border-top: 1px solid var(--gm-line-soft);
	text-align: left;
	display: grid;
	gap: 11px;
}

.gm-features li {
	display: flex;
	align-items: flex-start;
	gap: 11px;
	margin: 0;
	font-size: 14.5px;
	color: var(--gm-ink);
	line-height: 1.45;
}

.gm-check {
	width: 17px;
	height: 17px;
	flex: 0 0 17px;
	margin-top: 2px;
	color: var(--gm-check);
}

.gm-cta {
	display: block;
	margin-top: auto;
	text-align: center;
	text-decoration: none;
	font-family: var(--gm-sans);
	font-size: 12.5px;
	font-weight: 500;
	letter-spacing: .16em;
	text-transform: uppercase;
	padding: 16px 20px;
	border-radius: 6px;
	border: 1px solid var(--gm-maroon);
	color: var(--gm-maroon);
	background: transparent;
	transition: background .2s, color .2s, border-color .2s;
}

.gm-cta:hover,
.gm-cta:focus {
	background: var(--gm-maroon);
	color: #fff;
}

.gm-card.is-featured .gm-cta {
	background: linear-gradient(180deg, #5E1618 0%, #4A1011 100%);
	border-color: #47100F;
	color: #fff;
	box-shadow: 0 2px 6px rgba(70, 16, 15, .28);
}

.gm-card.is-featured .gm-cta:hover,
.gm-card.is-featured .gm-cta:focus {
	background: var(--gm-maroon-deep);
	border-color: var(--gm-maroon-deep);
}

.gm-card__note {
	font-family: var(--gm-sans);
	font-size: 11.5px;
	color: var(--gm-muted);
	margin: 12px 0 0;
}

.giac-mem :focus-visible {
	outline: 2px solid var(--gm-gold);
	outline-offset: 3px;
}

.giac-mem [hidden] {
	display: none !important;
}

/* ---------- responsive ---------- */

/*
 * Breakpoints are container-based: the block is often placed inside a theme's
 * constrained content column, where viewport media queries would lie about how
 * much room the cards actually have.
 */

/* Lift the featured card only when cards sit side by side. */
@container (min-width: 1080px) {
	.gm-card.is-featured {
		margin-top: -16px;
		margin-bottom: -16px;
	}

}

@container (max-width: 1079px) {
	.gm-grid,
	.gm-grid[data-count="3"],
	.gm-grid[data-count="4"] {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		max-width: 720px;
	}
}

@container (max-width: 620px) {
	.gm-grid,
	.gm-grid[data-count="1"],
	.gm-grid[data-count="2"],
	.gm-grid[data-count="3"],
	.gm-grid[data-count="4"] {
		grid-template-columns: minmax(0, 1fr);
		max-width: 420px;
	}

	.gm-switch {
		width: 100%;
		max-width: 420px;
	}

	.gm-switch__btn {
		flex: 1;
		padding: 12px 10px;
		letter-spacing: .12em;
	}

	.gm-card__head {
		padding: 28px 20px 18px;
	}

	.gm-card__body {
		padding: 24px 20px 26px;
	}

	/* ---------- optional horizontal scroll (opt-in per block) ---------- */

	/*
	 * Setting overflow on one axis forces the other to compute to auto, so the
	 * scroller carries top padding for the badge that sits above the card edge;
	 * without it the badge would be clipped.
	 */
	.giac-mem--mobile-scroll .gm-grid {
		display: flex;
		max-width: none;
		gap: 14px;
		padding-top: 24px;
		padding-bottom: 8px;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scrollbar-width: thin;
		-webkit-overflow-scrolling: touch;
	}

	.giac-mem--mobile-scroll .gm-grid > .gm-card {
		flex: 0 0 82%;
		max-width: 330px;
		scroll-snap-align: center;
	}

	/* The lift would be clipped by the scroller. */
	.giac-mem--mobile-scroll .gm-card.is-featured {
		margin-top: 0;
		margin-bottom: 0;
	}
}

/* Fallback for browsers without container queries. */
@supports not (container-type: inline-size) {
	@media (min-width: 1181px) {
		.gm-card.is-featured {
			margin-top: -16px;
			margin-bottom: -16px;
		}

	}

	@media (max-width: 1180px) {
		.gm-grid,
		.gm-grid[data-count="3"],
		.gm-grid[data-count="4"] {
			grid-template-columns: repeat(2, minmax(0, 1fr));
			max-width: 720px;
		}
	}

	@media (max-width: 640px) {
		.gm-grid,
		.gm-grid[data-count="1"],
		.gm-grid[data-count="2"],
		.gm-grid[data-count="3"],
		.gm-grid[data-count="4"] {
			grid-template-columns: minmax(0, 1fr);
			max-width: 420px;
		}

		.gm-switch { width: 100%; max-width: 420px; }
		.gm-switch__btn { flex: 1; padding: 12px 10px; letter-spacing: .12em; }
		.gm-card__head { padding: 28px 20px 18px; }
		.gm-card__body { padding: 24px 20px 26px; }

		/* ---------- optional horizontal scroll (opt-in per block) ---------- */

		/*
		 * Setting overflow on one axis forces the other to compute to auto, so the
		 * scroller carries top padding for the badge that sits above the card edge;
		 * without it the badge would be clipped.
		 */
		.giac-mem--mobile-scroll .gm-grid {
			display: flex;
			max-width: none;
			gap: 14px;
			padding-top: 24px;
			padding-bottom: 8px;
			overflow-x: auto;
			scroll-snap-type: x mandatory;
			scrollbar-width: thin;
			-webkit-overflow-scrolling: touch;
		}

		.giac-mem--mobile-scroll .gm-grid > .gm-card {
			flex: 0 0 82%;
			max-width: 330px;
			scroll-snap-align: center;
		}

		/* The lift would be clipped by the scroller. */
		.giac-mem--mobile-scroll .gm-card.is-featured {
			margin-top: 0;
			margin-bottom: 0;
		}
	}
}

@media (max-width: 640px) {
	.giac-mem {
		padding-left: 16px;
		padding-right: 16px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.giac-mem * {
		transition: none !important;
	}
}