/*
 * Compact table skin for the team-showcase plugin's native
 * [show-team ... layout='table'] output. Only targets
 * .tshowcase-box-table (a class the plugin hardcodes onto its <table> for
 * layout='table' specifically) so this never touches layout='grid', which
 * is what every currently-published page on the site uses.
 *
 * Recommended shortcode to get this look:
 * [show-team orderby='lastname' ids='...' url='active' layout='table'
 *   style='img-square' display='photo,name,position,telephone,social']
 *
 * team-table.js merges the plugin's separate Telephone + Links("social")
 * columns into one icon-only "Contact" column (vCard + phone) on the far
 * right, and the header row is hidden below — both driven by the same
 * .tshowcase-box-table scope.
 */

.tshowcase-box-table thead {
	display: none;
}

.tshowcase-box-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 13px;
}

.tshowcase-box-table th,
.tshowcase-box-table td {
	border: none !important;
	border-bottom: 1px solid #e5e5e5 !important;
}

.tshowcase-box-table thead th {
	text-align: left;
	font-size: 11px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #767a8a;
	padding: 0 14px 10px 0;
}

.tshowcase-box-table tbody tr:last-child td {
	border-bottom: none !important;
}

.tshowcase-box-table tbody tr:hover {
	background: #f7f7f9;
}

.tshowcase-box-table td {
	padding: 8px 14px 8px 0;
	vertical-align: middle;
	color: #4b4f5e;
}

.tshowcase-box-table td.tshowcase-table-image {
	width: 1%;
	padding-right: 14px !important;
}

.tshowcase-box-table td.tshowcase-table-image > div {
	display: block;
	width: 75px;
	height: 75px;
}

.tshowcase-box-table td.tshowcase-table-image img {
	display: block;
	width: 75px !important;
	height: 75px !important;
	object-fit: cover;
	max-width: none !important;
}

.tshowcase-box-table tbody tr {
	cursor: pointer;
}

/* First text column (Name, when display starts photo,name,...) */
.tshowcase-box-table tbody tr td:nth-child(2) a {
	color: #121f48;
	text-decoration: none;
}

.tshowcase-box-table tbody tr td:nth-child(2) a:hover {
	text-decoration: underline;
}

.tshowcase-box-table td a {
	color: inherit;
}

/* The site's global styling bolds/uppercases/colors .tshowcase-single-position
   everywhere (matches the blue "SHAREHOLDER" caps look used elsewhere on
   the site) — override it inside the compact table only, leave that
   global rule untouched everywhere else. */
.tshowcase-box-table .tshowcase-single-position {
	font-weight: normal !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	color: #4b4f5e !important;
}

/* Merged Contact column (vCard + phone icons), built by team-table.js.
   Flex lives on the inner wrapper div, not the <td> itself — display:flex
   directly on a table cell takes it out of table layout (breaks row
   height/border alignment with the other cells). */
.tshowcase-box-table td.tshowcase-table-contact {
	white-space: nowrap;
	text-align: right;
}

.tshowcase-box-table .tshowcase-contact-icons {
	display: flex !important;
	align-items: center !important;
	justify-content: flex-end !important;
	gap: 8px !important;
}

/* !important throughout: the plugin's own global.css sets padding/color
   on .fas/.fab icons and loads after this stylesheet in some template
   contexts, which was silently flattening the circle without it. */
.tshowcase-box-table td.tshowcase-table-contact a {
	box-sizing: border-box !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 32px !important;
	height: 32px !important;
	padding: 0 !important;
	margin: 0 !important;
	border: 1px solid #d5d5d9 !important;
	border-radius: 50% !important;
	color: #767a8a !important;
	text-decoration: none !important;
	line-height: 1 !important;
}

.tshowcase-box-table td.tshowcase-table-contact a i {
	font-size: 14px !important;
	padding: 0 !important;
	margin: 0 !important;
	color: inherit !important;
}

.tshowcase-box-table td.tshowcase-table-contact a:hover {
	background: #121f48 !important;
	border-color: #121f48 !important;
	color: #fff !important;
}

@media (max-width: 640px) {
	.ts-responsive-wrap {
		overflow-x: auto;
	}
}

/* Below 480px only — everything from 480px up keeps the normal table row
   layout untouched. Under 480px the table stops being a table (rows/cells
   break out of table layout entirely) and becomes one centered card per
   person: photo, then name, then contact icons, with a single divider
   line per card instead of a border on every cell.

   !important is used throughout this block, and centering is forced with
   both flex alignment AND margin:auto/text-align as a fallback — some
   existing site/theme CSS was fighting plain flex centering here. */
@media (max-width: 479px) {
	.tshowcase-box-table td:has(.tshowcase-single-position) {
		display: none !important;
	}

	.tshowcase-box-table,
	.tshowcase-box-table tbody {
		display: block !important;
		width: 100% !important;
	}

	.tshowcase-box-table tr {
		display: flex !important;
		flex-direction: column !important;
		align-items: center !important;
		text-align: center !important;
		border-bottom: 1px solid #e5e5e5 !important;
		padding: 16px 0 !important;
	}

	.tshowcase-box-table tr:last-child {
		border-bottom: none !important;
	}

	.tshowcase-box-table td {
		display: block !important;
		border: none !important;
		padding: 0 !important;
		width: 100% !important;
		text-align: center !important;
	}

	.tshowcase-box-table td.tshowcase-table-image {
		margin: 0 auto 8px !important;
	}

	.tshowcase-box-table td.tshowcase-table-image > div {
		margin: 0 auto !important;
	}

	.tshowcase-box-table tbody tr td:nth-child(2) {
		margin-bottom: 8px !important;
	}

	.tshowcase-box-table td.tshowcase-table-contact {
		text-align: center !important;
	}

	.tshowcase-box-table .tshowcase-contact-icons {
		display: flex !important;
		justify-content: center !important;
		margin: 0 auto !important;
	}
}