/* ──────────────────────────────────────────────
   SIA Team Member — frontend
   4 layout variants share the .sia-tm root + .sia-tm--{layout} modifier.
   All visual properties overridable from Elementor Style tab.
   ────────────────────────────────────────────── */

.sia-tm {
	background: #fff;
	border-radius: 16px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	font-family: inherit;
	color: var(--sia-color-text, #1A1718);
	position: relative;
	/* Establish a stacking context — keeps the rounded clip clean while inner
	   transforms (image scale on hover) repaint. */
	isolation: isolate;
	/* CSS variable for universal edge-definition outline (see ::after below). */
	--sia-card-edge: rgba(255, 255, 255, 0.08);
}

/* Universal edge-definition outline — same SIA anti-illusion convention as
   .sia-cta. 1px inner outline that follows the rounded clip mask, breaking
   the optical "thin line" illusion when card color approaches page bg color
   regardless of theme. Doesn't conflict with `tm_card_border` or
   `tm_card_shadow` Elementor controls (those target `.sia-tm` itself). */
.sia-tm::after {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: inherit;
	pointer-events: none;
	box-shadow: inset 0 0 0 1px var(--sia-card-edge);
	z-index: 10;
}
.sia-tm * { box-sizing: border-box; }

.sia-tm--placeholder {
	padding: 24px;
	text-align: center;
	color: #9ca3af;
	font-style: italic;
	border: 1px dashed #d1d5db;
	background: #f9fafb;
}

/* ─── Image ─── */
.sia-tm__image {
	position: relative;
	overflow: hidden;
	aspect-ratio: 1/1;
	flex-shrink: 0;
	/* GPU layer — prevents the "white edge slivers on rounded corners" artifact
	   when the inner image transform-scales on hover (Chromium/Safari rasterizer
	   subpixel rounding under animation). */
	transform: translateZ(0);
	/* No background here. The previous `background: #f3f4f6` (loading placeholder)
	   was visible as a thin LIGHT-GRAY 1px lateral stripe whenever the image's
	   rendered width came up sub-pixel-short of the container — particularly in
	   carousel context where Swiper's translate3d adds extra rounding. With no
	   bg, any sub-pixel gap shows the .sia-tm card bg behind it (set by the
	   user via Style → Card → Background) — blends in regardless of theme. */
}
.sia-tm__image img {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
	object-position: center top;
	transition: transform 0.4s ease, filter 0.3s ease;
	will-change: transform;
	/* Image scale at rest. Combined with the universal overlay `inset: -5px`
	   rule and the removal of `.sia-tm__image` background, this fully covers
	   sub-pixel rounding gaps in any context (grid + carousel). 1.02 (2%)
	   is visually imperceptible — on a 350px-wide image that's ~7px of extra
	   width, all clipped by `.sia-tm__image overflow: hidden`. */
	transform: scale(1.02);
	backface-visibility: hidden;
}
.sia-tm:hover .sia-tm__image img {
	transform: scale(1.04);
}

/* ─── Image overlay (universal — works on every layout) ───
   Opacity + background are owned ENTIRELY by Elementor's Style → Overlay
   section (Normal + Hover tabs, opacity slider 0–100%). No hardcoded opacity
   here — that would either be overridden by a more-specific :hover rule OR
   silently win against Elementor's selectors and break user customization.

   `inset: -5px` per the SIA universal overlay rule: every overlay element
   in the plugin extends 5px past every edge of its parent. The parent
   (`.sia-tm__image` here) has `overflow: hidden` which clips the surplus
   invisibly. This guarantees the overlay covers the whole visible area
   even when sub-pixel rounding (carousel translate3d, rounded clip masks,
   fractional slide widths from Swiper) leaves a 1-2px gap between the
   image's rendered edge and the parent's clip mask. Without this, a
   visible thin lateral line of card background would show through the
   gap at rest. */
.sia-tm__overlay {
	position: absolute;
	inset: -5px;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: opacity 0.25s ease, background 0.25s ease;
	pointer-events: none;        /* pass-through unless layout overrides */
	z-index: 1;
	/* GPU layer — without this, when the team card hover-scales its image,
	   the parent's overflow:hidden + border-radius rounded clip mask gets
	   re-rasterized per frame. Sub-pixel rounding during that recomputation
	   shows a 1px lateral line. Own layer = clip computed once at composite. */
	will-change: transform;
	transform: translateZ(0);
}
.sia-tm__overlay > * { pointer-events: auto; }

/* When socials are placed inside the overlay (overlay layout), they slide in
   on hover. Other layouts can still apply opacity + background to the overlay. */
.sia-tm__overlay .sia-tm__socials {
	margin-top: 0;
	transform: translateY(8px);
	transition: transform 0.25s ease;
}
.sia-tm:hover .sia-tm__overlay .sia-tm__socials {
	transform: translateY(0);
}

/* ─── Content ─── */
.sia-tm__content {
	padding: 24px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	flex: 1;
	position: relative;
	z-index: 2; /* keep content above overlays in stacked layouts */
}

.sia-tm__name {
	margin: 0;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.01em;
}
.sia-tm__role {
	font-size: 13px;
	font-weight: 600;
	color: var(--sia-color-primary, #c5ed3b);
	letter-spacing: 0.05em;
	text-transform: uppercase;
}
.sia-tm__meta {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
	font-size: 12px;
	color: #9ca3af;
	margin-top: 4px;
}
.sia-tm__meta span::before {
	content: "•";
	margin-right: 8px;
	color: #d1d5db;
}
.sia-tm__meta span:first-child::before { content: none; }

.sia-tm__bio {
	font-size: 14px;
	line-height: 1.55;
	color: #6b7280;
	margin-top: 4px;
}

/* ─── Socials ─── */
.sia-tm__socials {
	display: flex;
	gap: 8px;
	margin-top: 12px;
	flex-wrap: wrap;
}
.sia-tm__social {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	/* Variables: the :hover rule below sits at (0,2,0) and the Normal control
	   writing `background` lands at (0,4,0), so setting a Normal background
	   used to kill the hover. The background control has a default, so it was
	   killed out of the box. */
	background: var(--sia-tm-social-bg, #111827);
	color: var(--sia-tm-social-color, #fff);
	font-size: 16px;
	/* line-height:0 on the flex parent removes any inherited line-box height that
	   could push an inline icon glyph off-center inside the round box. The icon
	   itself gets line-height:1 below so its glyph metrics are unaffected. */
	line-height: 0;
	text-decoration: none;
	text-align: center;
	transition: background 0.18s, color 0.18s, transform 0.18s;
	position: relative;
	z-index: 6; /* above stretched-link (z:5) so social icons remain individually clickable */
}
/* Inline brand SVG — sizes with the icon-size control (font-size on the box). */
.sia-tm__social-svg {
	width: 1em;
	height: 1em;
	display: block;
	fill: currentColor;
}
.sia-tm__social:hover {
	background: var(--sia-color-primary, #c5ed3b);
	transform: translateY(-2px);
}
.sia-tm__social i {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-style: normal;
	line-height: 1;
}
.sia-tm__social i::before {
	display: block;
	line-height: 1;
}
.sia-tm__social-text { font-weight: 700; font-size: 14px; text-transform: uppercase; line-height: 1; }

/* ─── Socials: official brand colors (toggle) ───
   When the "Official brand colors" switch is ON the widget wrapper gets
   `.sia-tm-brandsoc-yes`. Each social anchor carries its own `--sia-tm-brand`
   inline (set from Renderer::social_brand()); we fill the box with it and use a
   white glyph. Falls back to a neutral dark when the platform has no brand
   color (custom/unknown → empty var). Toggle OFF = the user's custom color
   controls apply as before (those controls are condition-hidden when ON). */
.sia-tm-brandsoc-yes .sia-tm__social {
	background: var(--sia-tm-brand, #111827);
	color: #fff;
}
.sia-tm-brandsoc-yes .sia-tm__social:hover {
	filter: brightness(1.1);
}

/* ─── CTA ─── */
.sia-tm__cta {
	display: inline-block;
	align-self: flex-start;
	margin-top: 12px;
	padding: 12px 24px;
	border-radius: 999px;
	background: var(--sia-tm-cta-bg, var(--sia-color-secondary, #54595F));
	color: var(--sia-tm-cta-color, #fff);
	text-decoration: none;
	font-weight: 600;
	font-size: 14px;
	transition: background 0.18s, transform 0.12s;
}
.sia-tm__cta:hover {
	background: var(--sia-color-primary, #c5ed3b);
	transform: translateY(-1px);
}

/* ─── Card-as-link (stretched overlay anchor) ───
   Sits absolute over the whole card so the entire surface becomes clickable
   without wrapping the article in an <a> (which would create invalid nested
   anchors with the socials/CTA links inside).
   z-index: 5 puts the link above ALL content layers (image, overlay, content
   wrapper at z:2). Click on title/role/bio/anywhere inside the card →
   stretched link wins hit-test → navigates. Inner interactive elements
   (.sia-tm__social, .sia-tm__cta) bumped to z:6 so they remain individually
   clickable as their own URLs (social to platform, CTA to its own URL).
   The decorative ::after outline (z:10) sits above visually but has
   pointer-events:none so clicks pass through. */
.sia-tm__link {
	position: absolute;
	inset: 0;
	z-index: 5;
	color: inherit;
	text-decoration: none;
	font-size: 0;          /* hide aria-label text if any */
	overflow: hidden;
}
.sia-tm__link:focus-visible {
	outline: 2px solid var(--sia-color-primary, #c5ed3b);
	outline-offset: -2px;
}
/* When a card link is present, lift the card slightly on hover for affordance. */
.sia-tm:has(.sia-tm__link):hover {
	cursor: pointer;
}
/* Content + image must outrank z-index 1 for layering, but they do already
   thanks to .sia-tm__content { z-index: 2 }. Keep CTAs/socials clickable. */
.sia-tm__cta {
	position: relative;
	z-index: 3;
}

/* ─── Layout: CLASSIC ─── */
.sia-tm--classic { /* uses defaults above */ }

/* ─── Layout: HOVER OVERLAY (image fills upper area; on hover overlay
   reveals socials; content below stays as-is) ─── */
.sia-tm--overlay .sia-tm__overlay {
	background: rgba(17, 24, 39, 0.6);
}
/* On non-overlay layouts the universal overlay defaults to opacity 0 and only
   shows if the user explicitly raises it from the Style tab. The overlay
   layout REQUIRES the hover-reveal so we keep that here. */

/* ─── Layout: SPLIT (image top, distinct colored block below) ─── */
.sia-tm--split .sia-tm__image {
	aspect-ratio: 4/3;
}
.sia-tm--split .sia-tm__content {
	background: #4f46e5;        /* default split bg — overridable in Style → Card */
	color: #fff;
	padding: 28px 24px;
	align-items: center;
	text-align: center;
}
.sia-tm--split .sia-tm__name {
	color: inherit;
}
.sia-tm--split .sia-tm__role {
	color: rgba(255,255,255,0.85);
}
.sia-tm--split .sia-tm__bio,
.sia-tm--split .sia-tm__meta {
	color: rgba(255,255,255,0.78);
}
.sia-tm--split .sia-tm__meta span::before { color: rgba(255,255,255,0.45); }
.sia-tm--split .sia-tm__socials {
	justify-content: center;
}

/* ─── Layout: PORTRAIT (full-bleed image, overlaid info) ─── */
.sia-tm--portrait {
	min-height: 480px;
	display: block;
}
.sia-tm--portrait .sia-tm__image {
	position: absolute;
	inset: 0;
	aspect-ratio: auto;
	height: 100%;
}
.sia-tm--portrait .sia-tm__image::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0,0,0,0) 50%, rgba(0,0,0,0.55) 100%);
	pointer-events: none;
}
.sia-tm--portrait .sia-tm__role {
	position: absolute;
	top: 24px;
	right: 18px;
	color: #fff;
	writing-mode: vertical-rl;
	transform: rotate(180deg);
	letter-spacing: 0.12em;
	font-size: 12px;
	z-index: 3;
}
.sia-tm--portrait .sia-tm__socials {
	position: absolute;
	right: 16px;
	bottom: 110px;
	flex-direction: column;
	margin-top: 0;
	z-index: 3;
}
.sia-tm--portrait .sia-tm__content {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 24px 28px;
	z-index: 3;
}
.sia-tm--portrait .sia-tm__name { color: #fff; }
.sia-tm--portrait .sia-tm__bio,
.sia-tm--portrait .sia-tm__meta { color: rgba(255, 255, 255, 0.85); }

/* ─── Layout: HOVER ICONS (image fills; socials revealed centered on hover;
   name strip over the bottom of the photo; role/bio/CTA below) ─── */
.sia-tm--hover-icons .sia-tm__overlay {
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(17, 24, 39, 0.6);
}
/* Center the socials cluster inside the overlay. */
.sia-tm--hover-icons .sia-tm__overlay .sia-tm__socials {
	margin-top: 0;
	justify-content: center;
}
/* Name strip pinned over the bottom of the image with a subtle dark gradient. */
.sia-tm--hover-icons .sia-tm__namebar {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 16px 18px;
	background: linear-gradient(transparent, rgba(0, 0, 0, 0.6));
	z-index: 2;         /* above the overlay (z:1) so the name stays legible */
	pointer-events: none;
}
.sia-tm--hover-icons .sia-tm__namebar .sia-tm__name { color: #fff; margin: 0; }
.sia-tm--hover-icons .sia-tm__namebar .sia-tm__role { color: rgba(255, 255, 255, 0.85); }

/* ─── Layout: BLOB (photo masked into an animated organic shape) ─── */
.sia-tm--blob {
	align-items: center;
	text-align: center;
}
.sia-tm--blob .sia-tm__image {
	width: 78%;
	max-width: 320px;
	margin: 24px auto 0;
	aspect-ratio: 1/1;
	overflow: hidden;
	border-radius: 42% 58% 70% 30% / 45% 45% 55% 55%;
	animation: sia-tm-blob 8s ease-in-out infinite;
}
.sia-tm--blob .sia-tm__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.sia-tm--blob .sia-tm__socials { justify-content: center; }

@keyframes sia-tm-blob {
	0%, 100% { border-radius: 42% 58% 70% 30% / 45% 45% 55% 55%; }
	34%      { border-radius: 70% 30% 46% 54% / 30% 60% 40% 70%; }
	67%      { border-radius: 30% 60% 65% 35% / 60% 40% 60% 40%; }
}
@media (prefers-reduced-motion: reduce) {
	.sia-tm--blob .sia-tm__image { animation: none; }
}

/* ─── Content alignment (single control) ───
   The "Content (bottom) → Content alignment" control sets `text-align` on the
   content (name / role / bio) AND adds `.sia-tm-calign-{left,center,right}` to
   the wrapper. Those classes align the flex children that text-align can't
   reach: the social-icons row (justify-content) and the CTA button (align-self,
   which otherwise pins it left). Placed after the layout rules so it wins. */
.sia-tm-calign-left   .sia-tm__socials { justify-content: flex-start; }
.sia-tm-calign-center .sia-tm__socials { justify-content: center; }
.sia-tm-calign-right  .sia-tm__socials { justify-content: flex-end; }
.sia-tm-calign-left   .sia-tm__cta { align-self: flex-start; }
.sia-tm-calign-center .sia-tm__cta { align-self: center; }
.sia-tm-calign-right  .sia-tm__cta { align-self: flex-end; }

/* ─── Grid container — only Team-Member-specific bits.
   Container display, grid layout + responsive breakpoints, and empty-state
   styling all live in the shared `assets/css/grid-base.css` (handle:
   `sia-grid-base`). The Grid widget root carries both `.sia-grid` and
   `.sia-tg`, so the shared rules apply automatically. */
.sia-tg__list > .sia-tm { height: 100%; }   /* always full-cell height (no toggle for team) */

/* ─── Responsive (cards) ─── */
@media (max-width: 480px) {
	.sia-tm__content { padding: 20px; }
	.sia-tm__name { font-size: 18px; }
	.sia-tm--portrait { min-height: 420px; }
}

/* ─── Team Member Socials widget (standalone) ───
   Renders the displayed member's social links as icon buttons, for use inside
   an Elementor template for the member CPT. Sizing/colors come from the
   widget's Style controls; brand colors ride inline (see class-socials-widget).
   The `flex-wrap` keeps long link sets from overflowing a narrow column. */
.sia-tms {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
}
.sia-tms__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	font-size: 16px;
	border-radius: 50%;
	color: var(--sia-color-text, #1A1718);
	text-decoration: none;
	flex-shrink: 0;
	transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.sia-tms__link svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
	display: block;
}
.sia-tms__link:hover {
	transform: translateY(-2px);
}
.sia-tms--empty {
	font-size: 13px;
	color: #6b7280;
	padding: 10px 12px;
	border: 1px dashed #d1d5db;
	border-radius: 8px;
}

@media (prefers-reduced-motion: reduce) {
	.sia-tms__link { transition: none; }
	.sia-tms__link:hover { transform: none; }
}