/*
 * 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;
	}
}

/* At or below 480px — stays a TABLE.
   480px, not 479px, deliberately: the team-showcase plugin's own table.css
   uses 'only screen and (max-width: 480px)' to break the table into blocks,
   and that bound is inclusive. Anything narrower here leaves a dead zone at
   exactly 480px where the plugin stacks but this override does not.

   Below 480px — stays a TABLE (no stacked cards). The row becomes a grid so
   the three cells can be repositioned without leaving column alignment
   behind: photo holds the far-left column and spans both text rows, the
   name sits in the second column, and the position drops directly
   underneath the name instead of taking its own column. A contact column,
   if the shortcode ever supplies telephone/social again, keeps the far
   right and spans both rows too — when it is absent that third track
   collapses to zero width.

   Grid rather than plain table-cell rules because CSS cannot move a <td>
   into a different <td>; placing the cells on an explicit grid is the only
   way to stack name over position without changing the markup.

   Everything from 480px up is untouched and still renders as a normal
   table row with position in its own column. */
@media (max-width: 480px) {
	.tshowcase-box-table,
	.tshowcase-box-table tbody {
		display: block !important;
		width: 100% !important;
	}

	.tshowcase-box-table tr {
		display: grid !important;
		grid-template-columns: auto minmax(0, 1fr) auto !important;
		grid-template-rows: auto auto !important;
		column-gap: 12px !important;
		align-content: center !important;
		border-bottom: 1px solid #e5e5e5 !important;
		padding: 12px 0 !important;
	}

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

	.tshowcase-box-table td {
		border: none !important;
		padding: 0 !important;
		width: auto !important;
		text-align: left !important;
	}

	/* Far-left column, full height of the row. */
	.tshowcase-box-table td.tshowcase-table-image {
		grid-column: 1 !important;
		grid-row: 1 / span 2 !important;
		align-self: center !important;
		margin: 0 !important;
	}

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

	/* Name: second column, top row, pushed down against the position so the
	   two read as one stacked pair rather than sitting at opposite ends of
	   the taller photo. */
	.tshowcase-box-table tbody tr td:nth-child(2) {
		grid-column: 2 !important;
		grid-row: 1 !important;
		align-self: end !important;
		margin: 0 !important;
		line-height: 1.3 !important;
	}

	/* Position: directly under the name, same column. */
	.tshowcase-box-table td:has(.tshowcase-single-position) {
		display: block !important;
		grid-column: 2 !important;
		grid-row: 2 !important;
		align-self: start !important;
		margin: 2px 0 0 !important;
	}

	.tshowcase-box-table .tshowcase-single-position {
		font-size: 12px !important;
		line-height: 1.3 !important;
		color: #767a8a !important;
	}

	/* Contact icons (only present when the shortcode includes
	   telephone/social) keep the far right and span both text rows. */
	.tshowcase-box-table td.tshowcase-table-contact {
		grid-column: 3 !important;
		grid-row: 1 / span 2 !important;
		align-self: center !important;
		text-align: right !important;
	}

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