/* ============================================================
   FTW Member Cards — member-cards.css  v1.2.0
   Brand: Navy #1B2F5B | Red #C8102E
   ============================================================ */

/* ── Tokens on wrapper ──────────────────────────────────────── */
.ftw-mc-wrapper {
	--mc-navy:     #1B2F5B;
	--mc-red:      #C8102E;
	--mc-white:    #ffffff;
	--mc-gray-100: #f5f6f8;
	--mc-gray-200: #e2e6ec;
	--mc-gray-500: #7a8494;
	--mc-radius:   8px;
	--mc-shadow:   0 2px 12px rgba(27,47,91,.08);
	--mc-ease:     0.18s cubic-bezier(.4,0,.2,1);
	--mc-columns:  3;

	max-width: 1200px;
	margin: 0 auto;
	padding: 0 24px 56px;
	font-family: 'Helvetica Neue', Arial, sans-serif;
}

/* ── Optional heading ───────────────────────────────────────── */
.ftw-mc-heading {
	font-family: 'Georgia', serif;
	font-size: clamp(1.5rem, 3vw, 2rem);
	font-weight: 700;
	color: var(--mc-navy);
	text-align: center;
	margin: 0 0 8px;
	line-height: 1.2;
	border: none;
	padding: 0;
}

.ftw-mc-heading::after {
	content: '';
	display: block;
	width: 48px;
	height: 3px;
	background: var(--mc-red);
	margin: 12px auto 36px;
	border-radius: 2px;
}

/* ── Grid ───────────────────────────────────────────────────────
   The column count is set via five explicit selectors rather than
   relying on CSS custom property inheritance in grid-template-columns,
   which has inconsistent support across themes and browsers.
   ─────────────────────────────────────────────────────────────── */
.ftw-mc-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr); /* default — overridden below */
	gap: 0;
	border: 1px solid var(--mc-gray-200);
	border-radius: var(--mc-radius);
	overflow: hidden;
	box-shadow: var(--mc-shadow);
	background: var(--mc-white);
	width: 100%;
	box-sizing: border-box;
}

/* Column count overrides — matched by inline style attribute */
.ftw-mc-wrapper[style*="--mc-columns: 2"] .ftw-mc-grid { grid-template-columns: repeat(2, 1fr); }
.ftw-mc-wrapper[style*="--mc-columns: 3"] .ftw-mc-grid { grid-template-columns: repeat(3, 1fr); }
.ftw-mc-wrapper[style*="--mc-columns: 4"] .ftw-mc-grid { grid-template-columns: repeat(4, 1fr); }
.ftw-mc-wrapper[style*="--mc-columns: 5"] .ftw-mc-grid { grid-template-columns: repeat(5, 1fr); }
.ftw-mc-wrapper[style*="--mc-columns: 6"] .ftw-mc-grid { grid-template-columns: repeat(6, 1fr); }

/* ── Card ───────────────────────────────────────────────────── */
.ftw-mc-card {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	padding: 20px 24px 22px;
	border-right: 1px solid var(--mc-gray-200);
	border-bottom: 1px solid var(--mc-gray-200);
	transition: background var(--mc-ease);
	box-sizing: border-box;
	min-width: 0; /* prevent grid blowout */
}

.ftw-mc-card:hover {
	background: var(--mc-gray-100);
}

/* ── Right border: remove from last card in each row ────────────
   One rule per column count — CSS nth-child can't use variables.
   ─────────────────────────────────────────────────────────────── */

/* 2-col */
.ftw-mc-wrapper[style*="--mc-columns: 2"] .ftw-mc-card:nth-child(2n)  { border-right: none; }

/* 3-col (default) */
.ftw-mc-card:nth-child(3n),
.ftw-mc-wrapper[style*="--mc-columns: 3"] .ftw-mc-card:nth-child(3n)  { border-right: none; }

/* 4-col */
.ftw-mc-wrapper[style*="--mc-columns: 4"] .ftw-mc-card:nth-child(3n)  { border-right: 1px solid var(--mc-gray-200); }
.ftw-mc-wrapper[style*="--mc-columns: 4"] .ftw-mc-card:nth-child(4n)  { border-right: none; }

/* 5-col */
.ftw-mc-wrapper[style*="--mc-columns: 5"] .ftw-mc-card:nth-child(3n)  { border-right: 1px solid var(--mc-gray-200); }
.ftw-mc-wrapper[style*="--mc-columns: 5"] .ftw-mc-card:nth-child(5n)  { border-right: none; }

/* 6-col */
.ftw-mc-wrapper[style*="--mc-columns: 6"] .ftw-mc-card:nth-child(3n)  { border-right: 1px solid var(--mc-gray-200); }
.ftw-mc-wrapper[style*="--mc-columns: 6"] .ftw-mc-card:nth-child(6n)  { border-right: none; }

/* ── Bottom border: remove from every card in the true last row ─
   Strategy: remove from all cards, then restore for everyone
   that has a sibling after it. This works for any grid width
   without knowing the total item count in advance.
   ─────────────────────────────────────────────────────────────── */

/* Remove bottom border from all */
.ftw-mc-card { border-bottom: 1px solid var(--mc-gray-200); }

/* Last row: no bottom border — last card and up to 5 siblings before it */
.ftw-mc-card:last-child                                          { border-bottom: none; }
.ftw-mc-card:last-child ~ .ftw-mc-card                          { border-bottom: none; } /* never matches, safety */

/* Per-column-count last-row detection */
/* 2-col: last 2 */
.ftw-mc-wrapper[style*="--mc-columns: 2"] .ftw-mc-card:nth-last-child(-n+2) { border-bottom: none; }
.ftw-mc-wrapper[style*="--mc-columns: 2"] .ftw-mc-card:nth-last-child(n+3)  { border-bottom: 1px solid var(--mc-gray-200); }

/* 3-col: last 3 */
.ftw-mc-card:nth-last-child(-n+3),
.ftw-mc-wrapper[style*="--mc-columns: 3"] .ftw-mc-card:nth-last-child(-n+3) { border-bottom: none; }
.ftw-mc-card:nth-last-child(n+4),
.ftw-mc-wrapper[style*="--mc-columns: 3"] .ftw-mc-card:nth-last-child(n+4)  { border-bottom: 1px solid var(--mc-gray-200); }

/* 4-col: last 4 */
.ftw-mc-wrapper[style*="--mc-columns: 4"] .ftw-mc-card:nth-last-child(-n+4) { border-bottom: none; }
.ftw-mc-wrapper[style*="--mc-columns: 4"] .ftw-mc-card:nth-last-child(n+5)  { border-bottom: 1px solid var(--mc-gray-200); }

/* 5-col: last 5 */
.ftw-mc-wrapper[style*="--mc-columns: 5"] .ftw-mc-card:nth-last-child(-n+5) { border-bottom: none; }
.ftw-mc-wrapper[style*="--mc-columns: 5"] .ftw-mc-card:nth-last-child(n+6)  { border-bottom: 1px solid var(--mc-gray-200); }

/* 6-col: last 6 */
.ftw-mc-wrapper[style*="--mc-columns: 6"] .ftw-mc-card:nth-last-child(-n+6) { border-bottom: none; }
.ftw-mc-wrapper[style*="--mc-columns: 6"] .ftw-mc-card:nth-last-child(n+7)  { border-bottom: 1px solid var(--mc-gray-200); }

/* ── Role label ─────────────────────────────────────────────── */
.ftw-mc-card__role {
	display: block;
	font-family: 'Helvetica Neue', Arial, sans-serif;
	font-size: 0.67rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--mc-red);
	margin-bottom: 6px;
	line-height: 1;
}

/* ── Name ───────────────────────────────────────────────────── */
.ftw-mc-card__name {
	display: block;
	font-family: 'Georgia', serif;
	font-size: 1.05rem;
	font-weight: 700;
	color: var(--mc-navy);
	line-height: 1.25;
	margin: 0 0 5px;
}

/* ── Company ────────────────────────────────────────────────── */
.ftw-mc-card__company {
	display: block;
	font-family: 'Helvetica Neue', Arial, sans-serif;
	font-size: 0.825rem;
	color: var(--mc-gray-500);
	line-height: 1.4;
	margin: 0;
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 900px) {
	/* Cap at 2 columns on tablet */
	.ftw-mc-wrapper[style*="--mc-columns: 3"] .ftw-mc-grid,
	.ftw-mc-wrapper[style*="--mc-columns: 4"] .ftw-mc-grid,
	.ftw-mc-wrapper[style*="--mc-columns: 5"] .ftw-mc-grid,
	.ftw-mc-wrapper[style*="--mc-columns: 6"] .ftw-mc-grid { grid-template-columns: repeat(2, 1fr); }

	/* Right border: 2-col rules */
	.ftw-mc-card:nth-child(3n)  { border-right: 1px solid var(--mc-gray-200); }
	.ftw-mc-card:nth-child(2n)  { border-right: none; }

	/* Bottom border: last 2 */
	.ftw-mc-card:nth-last-child(-n+2) { border-bottom: none; }
	.ftw-mc-card:nth-last-child(n+3)  { border-bottom: 1px solid var(--mc-gray-200); }
}

@media (max-width: 540px) {
	.ftw-mc-wrapper { padding: 0 16px 40px; }

	.ftw-mc-grid { grid-template-columns: 1fr !important; }

	.ftw-mc-card {
		padding: 14px 16px;
		border-right: none !important;
		border-bottom: 1px solid var(--mc-gray-200) !important;
	}

	.ftw-mc-card:last-child { border-bottom: none !important; }

	/* Reset all last-row rules — single column, last item only */
	.ftw-mc-card:nth-last-child(-n+6) { border-bottom: 1px solid var(--mc-gray-200); }
	.ftw-mc-card:last-child           { border-bottom: none !important; }
}