/*
 * SCQG Member Directory
 *
 * Structural values (breakpoint, padding, font sizes, stripe/hover colours,
 * link colour) are ported from the original member-list-table stylesheet at
 * scquiltersguild.com/member-list/, read directly from source. Header
 * gold/text colour use the brand tokens given for this plugin, which differ
 * slightly from the original (#e9c84c / #333333) intentionally.
 */

.scqg-member-list {
	--scqg-gold: #e8b14a;
	--scqg-cobalt: #1f2f6b;
	--scqg-stripe: #f6f6f6;
	--scqg-hover: #a0dfe1;
	--scqg-link: #4c40dc;
	--scqg-text: #333333;

	container-type: inline-size;
	container-name: scqg-member-directory;
	max-width: 100%;
}

.scqg-member-list .scqg-member-table-wrap {
	width: 100%;
	max-width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	margin-bottom: 1.5em;
}

.scqg-member-list .scqg-member-table {
	width: 100%;
	table-layout: auto;
	border-collapse: collapse;
	color: var(--scqg-text);
}

.scqg-member-list .scqg-member-table th,
.scqg-member-list .scqg-member-table td {
	font-size: 0.8em;
	padding: 0.5rem;
	text-align: left;
	vertical-align: top;
	overflow-wrap: break-word;
	-webkit-hyphens: auto;
	-ms-hyphens: auto;
	hyphens: auto;
}

/* Wide screens: original bumps cell text back up to 1em past 1440px. */
@container scqg-member-directory (min-width: 1440px) {
	.scqg-member-list .scqg-member-table th,
	.scqg-member-list .scqg-member-table td {
		font-size: 1em;
	}
}

.scqg-member-list .scqg-member-table__header th {
	background: var(--scqg-gold);
	color: var(--scqg-cobalt);
	font-weight: bold;
}

.scqg-member-list .scqg-member-table__row:nth-child(odd) {
	background: var(--scqg-stripe);
}

.scqg-member-list .scqg-member-table__row:hover {
	background: var(--scqg-hover);
}

.scqg-member-list .scqg-member-table__name {
	font-weight: bold;
}

.scqg-member-list .scqg-member-table a {
	color: var(--scqg-link);
	text-decoration: underline;
	word-break: break-all;
}

/* Pagination */

.scqg-member-pagination {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.75em;
	margin: 1em 0;
}

.scqg-member-pagination__links {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35em;
	align-items: center;
}

.scqg-member-pagination__links a,
.scqg-member-pagination__links span {
	display: inline-block;
	padding: 0.3em 0.65em;
	border-radius: 3px;
}

.scqg-member-pagination__page,
.scqg-member-pagination__prev,
.scqg-member-pagination__next {
	border: 1px solid #ddd;
	text-decoration: none;
}

.scqg-member-pagination__current {
	background: #333;
	color: #fff;
}

.scqg-members-restricted,
.scqg-members-none {
	padding: 1em;
}

/*
 * Below 768px of ACTUAL AVAILABLE WIDTH (not viewport — a container query,
 * so this reacts correctly whether the shortcode sits in a full-width page
 * template or a narrow Divi module column), drop the table in favour of
 * stacked cards.
 * Header row hides entirely; each <tr> becomes a flush, full-width card with
 * no border, radius, shadow, or gap. The same odd/even stripe and hover
 * rules above keep applying — there's no separate mobile stripe color in
 * the original.
 */
@container scqg-member-directory (max-width: 767px) {
	.scqg-member-list .scqg-member-table-wrap {
		overflow-x: visible;
	}

	.scqg-member-list .scqg-member-table__header {
		display: none;
	}

	.scqg-member-list .scqg-member-table,
	.scqg-member-list .scqg-member-table tbody,
	.scqg-member-list .scqg-member-table td {
		display: block;
		width: 100%;
	}

	.scqg-member-list .scqg-member-table__row {
		display: block;
		width: 100%;
		padding: 0.5rem;
	}

	.scqg-member-list .scqg-member-table td {
		padding: 0;
		font-size: 1em;
	}

	.scqg-member-list .scqg-member-table td:empty {
		display: none;
	}

	.scqg-member-list .scqg-member-table__name {
		font-size: 1.1em;
	}
}