/**
 * Membership placements (header, home, article, footer, menu).
 * Same accent as the primary button: deep green in light, signal green in dark.
 * The plan illustrations keep their light plate in both modes (self-contained imagery).
 */

:root {
	--mv-member-accent: var(--mv-brand-deep);
	--mv-member-ink: var(--mv-on-dark);
	--mv-member-soft: color-mix(in oklab, var(--mv-brand) 12%, transparent);
}

[data-theme="dark"] {
	--mv-member-accent: var(--mv-hero-accent);
	--mv-member-ink: var(--mv-bg);
	--mv-member-soft: color-mix(in oklab, var(--mv-hero-accent) 12%, transparent);
}

/* The logo's capsule-and-leaf V, cut out of the accent colour. */
.mv-member-line__medal,
.mv-action__medal {
	position: relative;
	display: inline-grid;
	flex: none;
	place-items: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--mv-member-accent);
}
.mv-member-line__medal::after,
.mv-action__medal::after {
	content: "";
	width: 64%;
	height: 64%;
	background: var(--mv-member-ink);
	-webkit-mask: var(--mv-emblem) center / contain no-repeat;
	mask: var(--mv-emblem) center / contain no-repeat;
}

/* Header action ---------------------------------------------------------- */
.mv-action--member .mv-action__medal { width: 24px; height: 24px; box-shadow: 0 0 0 3px var(--mv-member-soft); }
.mv-action--member .mv-action__label { color: var(--mv-member-accent); font-weight: 800; }
.mv-action--member[aria-current="page"] { background: var(--mv-member-soft); }
@media (max-width: 1023px) {
	.mv-header__actions .mv-action--member { display: none; }
}
/* One more action: let the column take its content instead of squeezing the labels together. */
@media (min-width: 1181px) {
	.mv-header__row { grid-template-columns: minmax(220px, 300px) minmax(420px, 1fr) auto; }
}

/* Shared card pieces ------------------------------------------------------ */
.mv-member__kicker {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	margin: 0 0 12px;
	color: var(--mv-member-accent);
	font-size: 0.8rem;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}
.mv-member__kicker .mv-member-line__medal { width: 24px; height: 24px; }
.mv-member__title {
	margin: 0 0 10px;
	font-family: var(--mv-font-heading);
	font-size: clamp(1.35rem, 1.1rem + 0.9vw, 1.9rem);
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 1.15;
	text-wrap: balance;
}
.mv-member__text { max-width: 58ch; margin: 0 0 18px; color: var(--mv-text-muted); font-size: 0.98rem; line-height: 1.6; }
.mv-member__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
.mv-member__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 52px;
	padding: 10px 24px;
	border-radius: var(--mv-radius-pill);
	background: var(--mv-member-accent);
	color: var(--mv-member-ink);
	box-shadow: 0 12px 26px color-mix(in oklab, var(--mv-member-accent) 28%, transparent);
	font-size: 0.98rem;
	font-weight: 800;
	text-decoration: none;
	transition: transform var(--mv-dur) var(--mv-ease), box-shadow var(--mv-dur) var(--mv-ease);
}
.mv-member__cta:hover { color: var(--mv-member-ink); transform: translateY(-1px); box-shadow: 0 16px 32px color-mix(in oklab, var(--mv-member-accent) 34%, transparent); }
.mv-member__note { display: inline-flex; align-items: center; gap: 6px; color: var(--mv-text-muted); font-size: 0.86rem; font-weight: 600; }
.mv-member__note .mv-icon { color: var(--mv-member-accent); }
.mv-member__plate {
	display: block;
	overflow: hidden;
	border: 1px solid var(--mv-border);
	border-radius: 18px;
	background: #fffdf9;
	box-shadow: var(--mv-shadow-sm);
}
.mv-member__plate img { display: block; width: 100%; height: 100%; object-fit: contain; transform: scale(1.14); }

/* End of article ------------------------------------------------------------ */
.mv-member--article {
	display: grid;
	grid-template-columns: 210px minmax(0, 1fr);
	align-items: center;
	gap: clamp(20px, 3vw, 36px);
	margin: clamp(36px, 4vw, 56px) 0;
	padding: clamp(20px, 3vw, 32px);
	border: 1px solid color-mix(in oklab, var(--mv-member-accent) 26%, var(--mv-border));
	border-radius: var(--mv-radius-lg);
	background:
		radial-gradient(120% 140% at 0% 0%, var(--mv-member-soft), transparent 60%),
		var(--mv-surface);
}
.mv-member__fan { position: relative; height: 190px; }
.mv-member__fan .mv-member__plate { position: absolute; width: 132px; height: 132px; }
.mv-member__fan .mv-member__plate:nth-child(1) { top: 0; right: 0; transform: rotate(7deg); }
.mv-member__fan .mv-member__plate:nth-child(2) { top: 28px; left: 34px; transform: rotate(-3deg); }
.mv-member__fan .mv-member__plate:nth-child(3) { bottom: 0; left: 0; transform: rotate(-9deg); }

/* Home band ------------------------------------------------------------------ */
.mv-member--home { padding-block: var(--mv-section-space); }
.mv-member--home .mv-shell { max-width: var(--mv-container); margin-inline: auto; padding-inline: var(--mv-gutter); }
.mv-member__panel {
	display: grid;
	grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
	align-items: center;
	gap: clamp(24px, 4vw, 64px);
	padding: clamp(24px, 4vw, 56px);
	border: 1px solid color-mix(in oklab, var(--mv-member-accent) 24%, var(--mv-border));
	border-radius: var(--mv-radius-xl);
	background:
		radial-gradient(90% 120% at 100% 0%, var(--mv-member-soft), transparent 62%),
		var(--mv-surface);
	box-shadow: var(--mv-shadow-sm);
}
.mv-member--home .mv-member__title { font-size: clamp(1.7rem, 1.2rem + 1.8vw, 2.8rem); }
.mv-member__plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.mv-member__plans a {
	display: grid;
	gap: 12px;
	height: 100%;
	padding: 12px;
	border: 1.5px solid var(--mv-border);
	border-radius: var(--mv-radius-md);
	background: var(--mv-surface-raised);
	color: var(--mv-text);
	text-decoration: none;
	transition: border-color var(--mv-dur) var(--mv-ease), transform var(--mv-dur) var(--mv-ease);
}
.mv-member__plans a:hover { border-color: var(--mv-member-accent); transform: translateY(-2px); }
.mv-member__plans a.is-featured { border-color: var(--mv-member-accent); box-shadow: 0 0 0 3px color-mix(in oklab, var(--mv-member-accent) 16%, transparent); }
.mv-member__plans .mv-member__plate { aspect-ratio: 1; box-shadow: none; }
.mv-member__plan { display: grid; gap: 2px; padding: 0 4px 4px; }
.mv-member__plan strong { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-family: var(--mv-font-heading); font-size: 1.05rem; font-weight: 800; }
.mv-member__plate { position: relative; }
.mv-member__plate em { position: absolute; top: 8px; left: 8px; padding: 3px 8px; border-radius: var(--mv-radius-pill); background: var(--mv-member-accent); color: var(--mv-member-ink); font-size: 0.62rem; font-style: normal; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; }
.mv-member__plan > span { color: var(--mv-text-muted); font-size: 0.86rem; }
.mv-member__plan b { color: var(--mv-text); font-size: 1.15rem; font-weight: 820; }
.mv-member__rec { display: none; color: var(--mv-member-accent); font-size: 0.7rem; font-weight: 800; letter-spacing: 0.03em; text-transform: uppercase; }

/* Footer line ------------------------------------------------------------------- */
.mv-member-line {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	margin-top: 18px;
	padding: 10px 16px 10px 10px;
	border: 1px solid var(--mv-footer-line);
	border-radius: var(--mv-radius-pill);
	color: var(--mv-footer-text);
	text-decoration: none;
}
.mv-member-line:hover { border-color: color-mix(in oklab, var(--mv-footer-text) 40%, transparent); color: var(--mv-footer-text); }
.mv-member-line > span:last-child { display: grid; gap: 1px; }
.mv-member-line strong { font-size: 0.86rem; }
.mv-member-line small { color: var(--mv-footer-muted); font-size: 0.74rem; }
.mv-footer .mv-member-line__medal { width: 34px; height: 34px; background: var(--mv-hero-accent, #0F0); }
:root:not([data-theme="dark"]) .mv-footer .mv-member-line__medal { background: oklch(0.72 0.17 150); }
.mv-footer .mv-member-line__medal::after { background: var(--mv-footer-deep); }

/* Mobile menu card ---------------------------------------------------------------- */
.mv-member-menu {
	display: grid;
	grid-template-columns: 40px minmax(0, 1fr) auto;
	align-items: center;
	gap: 12px;
	margin: 16px 0 0;
	padding: 12px 14px 12px 12px;
	border: 1px solid color-mix(in oklab, var(--mv-member-accent) 30%, var(--mv-border));
	border-radius: var(--mv-radius-md);
	background: var(--mv-member-soft);
	color: var(--mv-text);
	text-decoration: none;
}
.mv-member-menu .mv-member-line__medal { width: 40px; height: 40px; }
.mv-member-menu > span:nth-child(2) { display: grid; gap: 2px; }
.mv-member-menu strong { font-size: 0.98rem; }
.mv-member-menu small { color: var(--mv-text-muted); font-size: 0.8rem; }
.mv-member-menu > .mv-icon { color: var(--mv-member-accent); }

/* Responsive ---------------------------------------------------------------------- */
@media (max-width: 1023px) {
	.mv-member__panel { grid-template-columns: 1fr; }
}

@media (max-width: 699px) {
	.mv-member--article { grid-template-columns: 1fr; text-align: start; }
	.mv-member__fan { display: flex; flex-direction: row-reverse; justify-content: flex-end; height: auto; max-width: 300px; padding: 6px 0 0 4px; }
	.mv-member__fan .mv-member__plate { position: relative; inset: auto; flex: 0 0 34%; width: auto; height: auto; aspect-ratio: 1; }
	.mv-member__fan .mv-member__plate + .mv-member__plate { margin-inline-end: -4%; }
	.mv-member__fan .mv-member__plate:nth-child(1) { top: auto; right: auto; transform: rotate(6deg); }
	.mv-member__fan .mv-member__plate:nth-child(2) { top: auto; left: auto; transform: rotate(-2deg); }
	.mv-member__fan .mv-member__plate:nth-child(3) { bottom: auto; left: auto; transform: rotate(-7deg); }
	.mv-member__cta { width: 100%; }
	.mv-member__plans { gap: 8px; }
	.mv-member__plans a { padding: 8px; gap: 8px; }
	.mv-member__plan { padding: 0 2px 2px; }
	.mv-member__plan strong { font-size: 0.84rem; }
	.mv-member__plan b { font-size: 0.92rem; }
	.mv-member__plan > span { display: grid; font-size: 0.7rem; line-height: 1.25; }
	.mv-member__plate em { display: none; }
	.mv-member__rec { display: block; font-size: 0.6rem; }
	.mv-member__panel { padding: 20px 16px; }
	.mv-member__fan { margin: 10px 0 0 8px; }
}

/* Smallest phones: the three plans as rows, never squeezed side by side. */
@media (max-width: 399px) {
	.mv-member__plans { grid-template-columns: 1fr; }
	.mv-member__plans a { grid-template-columns: 64px minmax(0, 1fr); align-items: center; gap: 12px; }
	.mv-member__plans .mv-member__plate { width: 64px; height: 64px; }
	.mv-member__plan > span { display: block; font-size: 0.78rem; }
	.mv-member__plan strong { font-size: 0.95rem; }
}

@media (prefers-reduced-motion: reduce) {
	.mv-member__cta,
	.mv-member__plans a { transition: none; }
	.mv-member__cta:hover,
	.mv-member__plans a:hover { transform: none; }
}

@media print {
	.mv-member,
	.mv-member-line,
	.mv-member-menu,
	.mv-action--member { display: none !important; }
}