/* ==========================================================================
   Team Showcase — grid, hover overlay, badges, social icons
   Colors are set as CSS variables at the top so they're easy to match
   to TheBuiltVersion's palette without hunting through the file.
   ========================================================================== */

.tsw-grid {
	--tsw-overlay-bg: #163a68;   /* dark blue overlay, matches reference screenshot */
	--tsw-badge-bg: #eef1f5;
	--tsw-badge-color: #163a68;
	--tsw-icon-bg: #0a66c2;      /* LinkedIn blue */
	--tsw-text-dark: #1a1a1a;
	--tsw-text-muted: #6b7280;
	--tsw-gap: 24px;

	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: var(--tsw-gap);
	margin: 0 0 32px;
	padding: 0;
	list-style: none;
}

.tsw-columns-2 { grid-template-columns: repeat(2, 1fr); }
.tsw-columns-3 { grid-template-columns: repeat(3, 1fr); }
.tsw-columns-4 { grid-template-columns: repeat(4, 1fr); }
.tsw-columns-5 { grid-template-columns: repeat(5, 1fr); }
.tsw-columns-6 { grid-template-columns: repeat(6, 1fr); }

@media (max-width: 1024px) {
	.tsw-grid { grid-template-columns: repeat(3, 1fr) !important; }
}
@media (max-width: 700px) {
	.tsw-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 420px) {
	.tsw-grid { grid-template-columns: 1fr !important; }
}

/* -- Card ---------------------------------------------------------------- */
.tsw-card {
	position: relative;
	overflow: visible;
	transition: opacity .25s ease, transform .25s ease;
	/* Makes `cqw` units below resolve against THIS element's own width —
	   what lets the LinkedIn hover animation be pure CSS (see far below),
	   with no JavaScript involved in computing its position at all. */
	container-type: inline-size;
}
.tsw-card.tsw-hidden {
	display: none;
}

/* -- Photo + hover overlay ------------------------------------------------
   The photo box height is set with the classic "padding-top percentage"
   technique rather than the newer `aspect-ratio` property. aspect-ratio
   can fail to establish a real height in some nested grid/flex contexts
   (seen in practice inside WPBakery/page-builder wrapper markup), which
   silently collapses this box to ~0 height.
   padding-top has no such edge cases: percentage padding is always
   resolved against the element's own width, in every container type.
   ------------------------------------------------------------------------ */
.tsw-photo-wrap {
	position: relative;
	overflow: hidden;
	background: #dcdfe3;
	width: 100%;
	height: 0;
	padding-top: 133.333%; /* 4:3 height-to-width ratio, i.e. a 3:4 portrait box */
}

/* !important here is deliberate: many WordPress themes ship a global
   reset like `img { height: auto; max-width: 100%; }` which otherwise
   overrides this and stops the photo filling its box — leaving the
   wrapper's own background color showing through as an empty gap below
   the image. This guarantees our sizing wins regardless of theme resets. */
.tsw-photo,
.tsw-photo-placeholder {
	position: absolute !important;
	inset: 0 !important;
	display: block !important;
	width: 100% !important;
	height: 100% !important;
	max-width: 100% !important;
	max-height: none !important;
	object-fit: cover !important;
	filter: grayscale(100%);
	transition: transform .4s ease, filter .4s ease;
}

.tsw-photo-placeholder {
	background: #cfd3d8;
}

.tsw-card:hover .tsw-photo {
	transform: scale(1.04);
}

/* Overlay panel: fades/slides in on hover, sits on top of the same photo.
   Bio starts at the TOP (not vertically centered), and the social-icon
   row is pinned to the bottom-right corner regardless of bio length —
   this fixed corner slot doubles as the landing spot the LinkedIn icon
   animates into (see JS + .tsw-socials-static .tsw-social-linkedin below). */
.tsw-overlay {
	position: absolute;
	inset: 0;
	background: var(--tsw-overlay-bg);
	color: #fff;
	opacity: 0;
	transform: translateY(8px);
	transition: opacity .3s ease, transform .3s ease;
	pointer-events: none;
}

.tsw-card:hover .tsw-overlay,
.tsw-card:focus-within .tsw-overlay {
	opacity: .96;
	transform: translateY(0);
	pointer-events: auto;
}

.tsw-overlay-inner {
	position: absolute;
	inset: 0;
	padding: 18px;
}

.tsw-overlay-bio {
	margin: 0 44px 0 0;
	font-size: 13px;
	line-height: 1.5;
	color: #f0f3f7;
	max-height: 100%;
	overflow: auto;
}

.tsw-overlay-bio p {
	margin: 0 0 12px;
}

.tsw-overlay-bio p:last-child {
	margin-bottom: 0;
}

/* Pinned bottom-right, independent of bio length — also serves as the
   fixed landing position the LinkedIn icon flies into (JS-driven). */
.tsw-socials-overlay {
	position: absolute;
	right: 14px;
	bottom: 14px;
	margin: 0;
}

/* -- Info block below the photo (always visible) --------------------------
   Fixed height (rather than growing with content) is what makes the
   LinkedIn hover animation computable in pure CSS below: with a known,
   constant info-block height, the vertical distance from the icon's
   resting spot up to the overlay's corner is always the same fixed
   number, regardless of how long any given person's name/title is.
   152px comfortably fits a single-line name, a two-line title, and the
   category badge; longer combinations may extend past this height on
   rare, unusually long entries — a deliberate, visible trade-off for a
   layout with genuinely zero JavaScript involved in the hover effect.
   ------------------------------------------------------------------------ */
.tsw-info {
	position: relative;
	height: 152px;
	padding-top: 14px;
	text-align: left;
}

.tsw-name {
	margin: 0 0 2px;
	font-size: 17px;
	font-weight: 700;
	color: var(--tsw-text-dark);
}

.tsw-title {
	margin: 0 0 8px;
	font-size: 14px;
	color: var(--tsw-text-muted);
}

.tsw-badge {
	display: inline-block;
	margin: 0 0 10px;
	padding: 3px 10px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .03em;
	text-transform: uppercase;
	color: var(--tsw-badge-color);
	background: var(--tsw-badge-bg);
	border-radius: 3px;
}

/* -- Social icons ---------------------------------------------------------
   Only rendered at all when a URL is filled in for that member (handled in
   PHP), so on the front end an empty field simply never produces an icon.
   ------------------------------------------------------------------------ */
.tsw-socials {
	display: flex;
	gap: 8px;
	margin-top: 4px;
}

/* Anchored to the bottom of the (fixed-height) info block rather than
   flowing after the name/title/badge text — this is what makes the
   icon's resting position independent of text length, which the pure
   CSS hover-animation math below depends on. */
.tsw-socials-static {
	position: absolute;
	left: 0;
	bottom: 14px;
	margin-top: 0;
}

.tsw-social-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 3px;
	font-size: 12px;
	font-weight: 700;
	text-decoration: none;
	background: var(--tsw-icon-bg);
	color: #fff;
	line-height: 1;
	transition: opacity .2s ease, transform .15s ease;
}
.tsw-social-icon:hover {
	opacity: .8;
}

/* Real logo image (e.g. the LinkedIn badge) — no extra colored box, the
   image already carries its own branding/color. */
.tsw-social-icon.tsw-has-icon {
	background: transparent;
	padding: 0;
}
.tsw-social-icon.tsw-has-icon img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	border-radius: 3px;
	display: block;
}
.tsw-social-icon.tsw-has-icon:hover {
	opacity: 1;
	transform: scale(1.08);
}

.tsw-social-twitter   { background: #000; }
.tsw-social-facebook  { background: #1877f2; }
.tsw-social-instagram { background: linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888); }
.tsw-social-email     { background: #444; }

.tsw-socials-overlay .tsw-social-icon {
	background: rgba(255,255,255,.15);
}
.tsw-socials-overlay .tsw-social-icon:hover {
	background: rgba(255,255,255,.3);
	opacity: 1;
}

.tsw-socials-overlay .tsw-social-icon.tsw-has-icon,
.tsw-socials-overlay .tsw-social-icon.tsw-has-icon:hover {
	background: transparent;
}

/* -- LinkedIn "fly to corner" hover animation ------------------------------
   Pure CSS, no JavaScript. Only the LinkedIn icon moves — name/title/
   designation never do.

   How the math works: both the icon's resting spot (in .tsw-socials-static)
   and its landing spot (the invisible target in .tsw-socials-overlay) are
   anchored the same way — left/right + bottom, 14px in from the edges of
   their own fixed-size boxes. That means the vertical distance between
   them is always exactly the info block's own fixed height (152px, see
   .tsw-info above) — a constant, not something that depends on content or
   needs measuring. The horizontal distance depends on the card's width,
   which is exactly what CSS container query units (`cqw`) are for: 1cqw
   is 1% of .tsw-card's own inline size (see `container-type` on .tsw-card
   above), so "the full card width minus the icon's own inset" is just
   `calc(100cqw - 42px)` — no getBoundingClientRect, no ResizeObserver, no
   race condition possible, since the browser recalculates it natively as
   part of normal layout, the same way it recalculates any other CSS value.

   The overlay's own copy of the icon is kept invisible (opacity: 0) and
   used purely as a landing-position anchor.
   ------------------------------------------------------------------------ */
.tsw-socials-overlay .tsw-social-linkedin {
	opacity: 0;
	pointer-events: none;
}

.tsw-socials-static .tsw-social-linkedin {
	position: relative;
	z-index: 5;
	transition: transform .4s cubic-bezier(.22, .68, 0, 1);
}

.tsw-card:hover .tsw-socials-static .tsw-social-linkedin,
.tsw-card:focus-within .tsw-socials-static .tsw-social-linkedin {
	transform: translate( calc(100cqw - 42px), -152px );
}

/* -- Fallback for browsers without container query support ----------------
   `cqw` units (used just above) need a fairly modern browser — roughly
   2023 onward (Chrome/Edge 105+, Firefox 110+, Safari 16+). This block
   only runs on anything OLDER than that, via @supports, and estimates the
   same translate distance using ordinary @media breakpoints instead.

   IMPORTANT CAVEAT: a @media query only knows the browser's *viewport*
   width — it has no way to know the *card's actual rendered* width, which
   also depends on your theme's content-area width, any sidebar, and
   WPBakery row/column settings on that specific page. The pixel values
   below assume a fairly typical ~1140px-wide content area with no
   sidebar; they'll be close but not necessarily exact on every page or
   every theme. If you need this pixel-perfect for old-browser visitors
   specifically, open the page in DevTools at each width below, hover a
   card, read the real computed translate() value the browser is already
   showing (Styles panel → the matching .tsw-card:hover rule), and swap
   the numbers here for those exact ones from your site.
   ------------------------------------------------------------------------ */
@supports not (container-type: inline-size) {

	/* Above ~1024px: whichever column count the shortcode itself is set
	   to (columns="2" through columns="6"), assuming a ~1140px content
	   area with no sidebar. */
	.tsw-columns-2 .tsw-card:hover .tsw-socials-static .tsw-social-linkedin,
	.tsw-columns-2 .tsw-card:focus-within .tsw-socials-static .tsw-social-linkedin {
		transform: translate( 516px, -152px );
	}
	.tsw-columns-3 .tsw-card:hover .tsw-socials-static .tsw-social-linkedin,
	.tsw-columns-3 .tsw-card:focus-within .tsw-socials-static .tsw-social-linkedin {
		transform: translate( 322px, -152px );
	}
	.tsw-columns-4 .tsw-card:hover .tsw-socials-static .tsw-social-linkedin,
	.tsw-columns-4 .tsw-card:focus-within .tsw-socials-static .tsw-social-linkedin {
		transform: translate( 225px, -152px );
	}
	.tsw-columns-5 .tsw-card:hover .tsw-socials-static .tsw-social-linkedin,
	.tsw-columns-5 .tsw-card:focus-within .tsw-socials-static .tsw-social-linkedin {
		transform: translate( 167px, -152px );
	}
	.tsw-columns-6 .tsw-card:hover .tsw-socials-static .tsw-social-linkedin,
	.tsw-columns-6 .tsw-card:focus-within .tsw-socials-static .tsw-social-linkedin {
		transform: translate( 128px, -152px );
	}

	/* 701px–1024px: the grid itself is force-forced to 3 columns here
	   (see the existing .tsw-grid rule higher up), regardless of the
	   shortcode's own columns="" attribute, so this range needs its own
	   estimate rather than reusing the .tsw-columns-N ones above. */
	@media (min-width: 701px) and (max-width: 1024px) {
		.tsw-card:hover .tsw-socials-static .tsw-social-linkedin,
		.tsw-card:focus-within .tsw-socials-static .tsw-social-linkedin {
			transform: translate( 263px, -152px ) !important;
		}
	}

	/* 681px–700px: grid is force-forced to 2 columns here. Below 681px
	   the mobile "always expanded" card takes over entirely and this
	   hover animation doesn't apply at all, so nothing is needed there. */
	@media (min-width: 681px) and (max-width: 700px) {
		.tsw-card:hover .tsw-socials-static .tsw-social-linkedin,
		.tsw-card:focus-within .tsw-socials-static .tsw-social-linkedin {
			transform: translate( 266px, -152px ) !important;
		}
	}
}

/* -- Category filter bar --------------------------------------------------- */
.tsw-filter-bar {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0 0 28px;
}

.tsw-filter-btn {
	padding: 8px 18px;
	font-size: 13px;
	font-weight: 600;
	color: var(--tsw-text-dark);
	background: transparent;
	border: 1px solid #d7dbe0;
	border-radius: 30px;
	cursor: pointer;
	transition: background .2s ease, color .2s ease, border-color .2s ease;
}

.tsw-filter-btn:hover {
	border-color: var(--tsw-overlay-bg);
}

.tsw-filter-btn.is-active {
	background: var(--tsw-overlay-bg);
	border-color: var(--tsw-overlay-bg);
	color: #fff;
}

/* ==========================================================================
   MOBILE — always-expanded blue bio card (no hover on touch, so the
   overlay is simply always shown). Photo sits top-left with a white
   border, LinkedIn / social icons badge in the top-right corner, name +
   title + category + bio stack underneath, all inside one blue card.

   Technique: .tsw-photo-wrap, .tsw-overlay and .tsw-overlay-inner get
   `display: contents` so their children (photo, bio, socials) become
   direct flex children of .tsw-card and can be reordered with `order`,
   without needing to change the plugin's PHP markup.
   ========================================================================== */
@media (max-width: 680px) {

	.tsw-grid,
	.tsw-columns-2, .tsw-columns-3, .tsw-columns-4, .tsw-columns-5, .tsw-columns-6 {
		grid-template-columns: 1fr !important;
		gap: 18px;
	}

	.tsw-card {
		display: flex;
		flex-direction: column;
		position: relative;
		background: var(--tsw-overlay-bg);
		border-radius: 10px;
		padding: 20px;
		overflow: hidden;
	}

	.tsw-photo-wrap,
	.tsw-overlay,
	.tsw-overlay-inner,
	.tsw-info {
		display: contents;
	}

	.tsw-photo,
	.tsw-photo-placeholder {
		position: static !important;
		inset: auto !important;
		order: 1;
		width: 120px !important;
		height: 120px !important;
		flex: none;
		border-radius: 6px;
		border: 4px solid #fff;
		box-shadow: 0 2px 6px rgba(0,0,0,.15);
		margin: 0 0 16px;
	}

	.tsw-name {
		order: 2;
		color: #fff;
		margin: 0 0 2px;
	}

	.tsw-title {
		order: 3;
		color: #cfe0f5;
		margin: 0 0 8px;
	}

	.tsw-badge {
		order: 4;
		align-self: flex-start;
		margin: 0 0 10px;
		background: rgba(255,255,255,.15);
		color: #fff;
	}

	.tsw-overlay-bio {
		order: 5;
		margin: 0;
		color: #eef3fa;
	}

	/* The overlay's own social row (e.g. LinkedIn) becomes the corner badge */
	.tsw-socials-overlay {
		position: absolute;
		top: 16px;
		right: 16px;
		margin: 0;
	}

	/* No hover/JS animation on touch — the LinkedIn icon should just always
	   be visible in the corner badge here (undoing the desktop-only rule
	   that hides it as an invisible animation target). */
	.tsw-socials-overlay .tsw-social-linkedin {
		opacity: 1;
		pointer-events: auto;
	}

	/* The static row's LinkedIn icon is hidden on mobile (its content is
	   already shown via the corner badge above), so it never needs the
	   desktop fly-animation transform here either. */
	.tsw-socials-static .tsw-social-linkedin {
		transform: none !important;
	}

	/* Hide the duplicate always-visible social row from the info block —
	   its content now lives in the corner badge above. */
	.tsw-socials-static {
		display: none;
	}
}