/**
 * Stack Team — Elementor Widget Styles
 * Prefix: stkm-
 */

/* ═══════════════════════════════════════════
   BASE — Grid & Column System
═══════════════════════════════════════════ */

.stkm-wrap {
	--stkm-cols: 3;
	--stkm-gap: 24px;
	/* Scoped to the wrapper, never :root. */
	--stkm-accent:      #4f46e5;
	--stkm-accent-soft: color-mix(in srgb, var(--stkm-accent) 10%, #fff);
	--stkm-border:      #e4e7ec;
	--stkm-ink:         #101828;
	--stkm-muted:       #667085;
	--stkm-shadow:      0 1px 2px rgba(16,24,40,.06), 0 8px 24px -8px rgba(16,24,40,.12);
	--stkm-shadow-lg:   0 2px 4px rgba(16,24,40,.06), 0 16px 40px -12px rgba(16,24,40,.18);
	display: grid;
	grid-template-columns: repeat(var(--stkm-cols), 1fr);
	gap: var(--stkm-gap);
}

@supports not (color: color-mix(in srgb, red 50%, blue)) {
	.stkm-wrap { --stkm-accent-soft: #f3f2fe; }
}

.stkm-wrap *, .stkm-wrap *::before, .stkm-wrap *::after { box-sizing: border-box; }

/* ── Photo aspect ratio (control-driven) ──────────────────── */
.stkm-ratio-1-1  .stkm-photo img, .stkm-ratio-1-1  .stkm-initials { height: auto; min-height: 0; aspect-ratio: 1 / 1; }
.stkm-ratio-4-5  .stkm-photo img, .stkm-ratio-4-5  .stkm-initials { height: auto; min-height: 0; aspect-ratio: 4 / 5; }
.stkm-ratio-3-4  .stkm-photo img, .stkm-ratio-3-4  .stkm-initials { height: auto; min-height: 0; aspect-ratio: 3 / 4; }
.stkm-ratio-2-3  .stkm-photo img, .stkm-ratio-2-3  .stkm-initials { height: auto; min-height: 0; aspect-ratio: 2 / 3; }
.stkm-ratio-16-9 .stkm-photo img, .stkm-ratio-16-9 .stkm-initials { height: auto; min-height: 0; aspect-ratio: 16 / 9; }

.stkm-cols-1 { --stkm-cols: 1; }
.stkm-cols-2 { --stkm-cols: 2; }
.stkm-cols-3 { --stkm-cols: 3; }
.stkm-cols-4 { --stkm-cols: 4; }
.stkm-cols-5 { --stkm-cols: 5; }

@media (max-width: 1024px) {
	.stkm-tablet-1 { --stkm-cols: 1; }
	.stkm-tablet-2 { --stkm-cols: 2; }
	.stkm-tablet-3 { --stkm-cols: 3; }
	.stkm-tablet-4 { --stkm-cols: 4; }
}

@media (max-width: 767px) {
	.stkm-mobile-1 { --stkm-cols: 1; }
	.stkm-mobile-2 { --stkm-cols: 2; }
}

/* ═══════════════════════════════════════════
   BASE — Card Resets
═══════════════════════════════════════════ */

.stkm-card {
	position: relative;
	box-sizing: border-box;
	overflow: hidden;
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.stkm-photo {
	position: relative;
	overflow: hidden;
}

.stkm-photo img {
	display: block;
	width: 100%;
	height: 220px;
	object-fit: cover;
	transition: transform 0.35s ease;
}

.stkm-initials {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 220px;
	font-size: 2.5rem;
	font-weight: 700;
	background: #e8eaf6;
	color: #3949ab;
	letter-spacing: 2px;
}

.stkm-card {
	display: flex;
	flex-direction: column;
}

.stkm-body {
	padding: 20px;
	display: flex;
	flex-direction: column;
	flex: 1;
	min-width: 0;
}

/* Last row pinned so socials/contact land on the same line in every card. */
.stkm-foot {
	margin-top: auto;
	padding-top: 4px;
}

.stkm-name {
	margin: 0 0 4px;
	font-size: 1.05rem;
	font-weight: 700;
	line-height: 1.3;
}

.stkm-role {
	display: block;
	font-size: 0.82rem;
	margin-bottom: 6px;
	opacity: 0.7;
}

.stkm-dept {
	display: inline-block;
	align-self: flex-start;
	max-width: 100%;
	font-size: 0.7rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	padding: 3px 10px;
	border-radius: 999px;
	margin-bottom: 8px;
	background: var(--stkm-accent-soft);
	color: var(--stkm-accent);
	/* A two-word department used to break across two lines mid-chip. */
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.stkm-bio {
	margin: 8px 0;
	font-size: 0.85rem;
	line-height: 1.6;
	color: inherit;
}

.stkm-socials {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 12px;
}

.stkm-social {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	font-size: 14px;
	border-radius: 50%;
	background: #f1f3f4;
	color: #555;
	text-decoration: none;
	transition: background 0.2s, color 0.2s, transform 0.2s;
}

.stkm-social:hover {
	background: #1a73e8;
	color: #fff;
	transform: translateY(-2px);
}

.stkm-contact {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 0.82rem;
	color: inherit;
	text-decoration: none;
	margin-top: 6px;
	opacity: 0.75;
}

.stkm-contact:hover { opacity: 1; }

.stkm-dept-badge {
	position: absolute;
	bottom: 10px;
	left: 10px;
	max-width: calc(100% - 20px);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	font-size: 0.7rem;
	font-weight: 600;
	text-transform: uppercase;
	padding: 3px 8px;
	border-radius: 3px;
	background: rgba(0,0,0,0.6);
	color: #fff;
}

.stkm-empty { color: #999; font-style: italic; }

/* Row layouts need a minimum track or the fixed photo pane eats the whole
   column and the name, role and bio are squeezed to zero width. */
.stkm-wrap.stkm-horizontal,
.stkm-wrap.stkm-horizontal-alt,
.stkm-wrap.stkm-horizontal-compact {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr));
}

.stkm-wrap.stkm-list,
.stkm-wrap.stkm-list-bordered,
.stkm-wrap.stkm-sidebar {
	grid-template-columns: minmax(0, 1fr);
}

/* ── Side-by-side layouts ──────────────────────────────────────
   The photo pane is a hard width and the image is taken out of flow, so
   every card in the set gets the same photo column and the portrait's
   natural aspect ratio cannot stretch the row. */
.stkm-horizontal .stkm-photo,
.stkm-horizontal-alt .stkm-photo,
.stkm-horizontal-compact .stkm-photo,
.stkm-sidebar .stkm-photo,
.stkm-split .stkm-photo {
	position: relative;
	align-self: stretch;
}

.stkm-horizontal .stkm-photo img,
.stkm-horizontal-alt .stkm-photo img,
.stkm-horizontal-compact .stkm-photo img,
.stkm-sidebar .stkm-photo img,
.stkm-split .stkm-photo img,
.stkm-horizontal .stkm-initials,
.stkm-horizontal-alt .stkm-initials,
.stkm-horizontal-compact .stkm-initials,
.stkm-sidebar .stkm-initials,
.stkm-split .stkm-initials {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	min-height: 0;
}

/* Social row never wraps 2-2-1 in a narrow pane; it scrolls instead. */
.stkm-horizontal .stkm-socials,
.stkm-horizontal-alt .stkm-socials,
.stkm-horizontal-compact .stkm-socials {
	flex-wrap: nowrap;
	overflow-x: auto;
	scrollbar-width: none;
}
.stkm-horizontal .stkm-socials::-webkit-scrollbar,
.stkm-horizontal-alt .stkm-socials::-webkit-scrollbar,
.stkm-horizontal-compact .stkm-socials::-webkit-scrollbar { display: none; }

/* ═══════════════════════════════════════════
   01 — Grid Classic
═══════════════════════════════════════════ */

.stkm-grid-classic .stkm-card {
	background: #fff;
	border: 1px solid #e0e0e0;
	border-radius: 8px;
}

.stkm-grid-classic .stkm-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 8px 24px rgba(0,0,0,0.12);
}

/* ═══════════════════════════════════════════
   02 — Overlap Caption
   The copy panel is pulled up over the portrait instead of sitting under it.
═══════════════════════════════════════════ */

.stkm-overlap .stkm-card {
	background: transparent;
	border: none;
	border-radius: 0;
	overflow: visible;
	/* overflow:visible drops the automatic min-width:0 of a scroll container,
	   so the nowrap department chip would otherwise widen the whole track. */
	min-width: 0;
}

.stkm-overlap .stkm-photo {
	border-radius: 14px;
	overflow: hidden;
}

.stkm-overlap .stkm-body {
	position: relative;
	z-index: 1;
	margin: -44px 14px 0;
	padding: 16px 18px 18px;
	background: #fff;
	border: 1px solid var(--stkm-border);
	border-radius: 12px;
	box-shadow: var(--stkm-shadow);
}

.stkm-overlap .stkm-card:hover .stkm-body { box-shadow: var(--stkm-shadow-lg); }

/* ═══════════════════════════════════════════
   03 — Editorial Byline
   No card chrome: a rule, a small square portrait beside the byline, and the
   biography running the full measure beneath both.
═══════════════════════════════════════════ */

.stkm-editorial .stkm-card {
	background: transparent;
	border: none;
	border-top: 2px solid var(--stkm-ink);
	border-radius: 0;
	padding-top: 14px;
}

.stkm-editorial .stkm-photo {
	float: left;
	width: 62px;
	height: 62px;
	margin: 0 14px 8px 0;
	border-radius: 6px;
}

.stkm-editorial .stkm-photo img,
.stkm-editorial .stkm-initials {
	width: 62px;
	height: 62px;
	min-height: 0;
	font-size: 1.1rem;
	border-radius: 6px;
}

.stkm-editorial .stkm-body { padding: 0; display: block; }

.stkm-editorial .stkm-dept {
	background: none;
	padding: 0;
	color: var(--stkm-muted);
	font-size: 0.68rem;
}

.stkm-editorial .stkm-name { font-size: 1rem; }
.stkm-editorial .stkm-role { font-size: 0.78rem; }

.stkm-editorial .stkm-bio {
	clear: both;
	margin-top: 10px;
	padding-top: 10px;
	border-top: 1px solid var(--stkm-border);
}

.stkm-editorial .stkm-foot { clear: both; }

/* ═══════════════════════════════════════════
   04 — Dark Footer Strip
   A dark card whose contact row runs edge to edge on a lighter base strip.
═══════════════════════════════════════════ */

.stkm-dark-strip .stkm-card {
	background: #101828;
	border: 1px solid #1d2939;
	border-radius: 12px;
	color: #d0d5dd;
}

.stkm-dark-strip .stkm-body { padding: 18px 20px 0; gap: 0; }
.stkm-dark-strip .stkm-name { color: #f9fafb; }
.stkm-dark-strip .stkm-role { color: #98a2b3; opacity: 1; }
.stkm-dark-strip .stkm-bio  { color: #98a2b3; }

.stkm-dark-strip .stkm-dept {
	background: rgba(255,255,255,.08);
	color: #d0d5dd;
}

.stkm-dark-strip .stkm-foot {
	/* auto keeps the strip pinned to the base of the tallest card in the row. */
	margin: auto -20px 0;
	padding: 12px 20px;
	background: rgba(255,255,255,.05);
	border-top: 1px solid #1d2939;
}

.stkm-dark-strip .stkm-socials { margin-top: 0; }

.stkm-dark-strip .stkm-social {
	background: rgba(255,255,255,.08);
	color: #d0d5dd;
}

.stkm-dark-strip .stkm-social:hover { background: var(--stkm-accent); color: #fff; }
.stkm-dark-strip .stkm-contact { color: #98a2b3; }
.stkm-dark-strip .stkm-initials { background: #1d2939; color: #98a2b3; }
.stkm-dark-strip .stkm-card:hover { box-shadow: 0 16px 40px -12px rgba(0,0,0,.5); }

/* ═══════════════════════════════════════════
   05 — Framed Portrait
   The portrait is inset inside a padded frame and the copy sits on a tinted
   panel of its own — a card within a card.
═══════════════════════════════════════════ */

.stkm-framed .stkm-card {
	background: #fff;
	border: 1px solid var(--stkm-border);
	border-radius: 16px;
	padding: 12px;
	box-shadow: var(--stkm-shadow);
}

.stkm-framed .stkm-photo {
	border-radius: 10px;
	overflow: hidden;
	flex: 0 0 auto;
}

.stkm-framed .stkm-body {
	margin-top: 12px;
	padding: 16px;
	background: var(--stkm-accent-soft);
	border-radius: 10px;
}

.stkm-framed .stkm-dept { background: #fff; }
.stkm-framed .stkm-card:hover { box-shadow: var(--stkm-shadow-lg); }

/* ═══════════════════════════════════════════
   06 — Two-Column Body
   Identity in one column, biography in the other, contact spanning both.
═══════════════════════════════════════════ */

.stkm-two-col .stkm-card {
	background: #fff;
	border: 1px solid var(--stkm-border);
	border-radius: 12px;
	container-type: inline-size;
}

.stkm-two-col .stkm-body {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	column-gap: 18px;
	align-content: start;
	padding: 18px 20px;
}

.stkm-two-col .stkm-bio { margin: 8px 0 0; }

.stkm-two-col .stkm-foot {
	grid-column: 1 / -1;
	margin-top: 14px;
	padding-top: 12px;
	border-top: 1px solid var(--stkm-border);
}

/* The second column only appears once the card itself is wide enough for it. */
@container (min-width: 340px) {
	.stkm-two-col .stkm-body { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
	.stkm-two-col .stkm-dept { grid-column: 1; grid-row: 1; }
	.stkm-two-col .stkm-name { grid-column: 1; grid-row: 2; }
	.stkm-two-col .stkm-role { grid-column: 1; grid-row: 3; }
	.stkm-two-col .stkm-bio {
		grid-column: 2;
		grid-row: 1 / span 3;
		margin: 0;
		padding-left: 18px;
		border-left: 1px solid var(--stkm-border);
	}
}

.stkm-two-col .stkm-card:hover { box-shadow: var(--stkm-shadow); }

/* ═══════════════════════════════════════════
   07 — Gutter Rail
   A tinted gutter column runs the full height beside the portrait and copy.
═══════════════════════════════════════════ */

.stkm-gutter .stkm-card {
	/* The gutter is painted, not a grid track: an implicit-row grid cannot be
	   spanned with 1 / -1, so a pseudo-element rail stopped at the portrait. */
	background:
		linear-gradient(90deg,
			var(--stkm-accent) 0 8px,
			var(--stkm-accent-soft) 8px 29px,
			var(--stkm-border) 29px 30px,
			#fff 30px);
	border: 1px solid var(--stkm-border);
	border-radius: 12px;
	padding-left: 30px;
}
.stkm-gutter .stkm-card:hover { box-shadow: var(--stkm-shadow); }

/* ═══════════════════════════════════════════
   08 — Overlay
═══════════════════════════════════════════ */

.stkm-overlay .stkm-card {
	border: 2px solid #ddd;
	border-radius: 8px;
	overflow: hidden;
}

.stkm-overlay .stkm-photo {
	position: relative;
}

.stkm-overlay .stkm-photo img,
.stkm-overlay .stkm-initials {
	height: 340px;
}

/* The caption must never grow past the portrait it sits on. */
.stkm-overlay .stkm-body { overflow: hidden; }
.stkm-overlay .stkm-socials { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.stkm-overlay .stkm-socials::-webkit-scrollbar { display: none; }

/* The name and role are on screen at rest. The card used to hide every
   piece of member data behind :hover, which is unusable on touch. */
.stkm-overlay .stkm-body {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: 20px;
	background: linear-gradient(to top, rgba(9,12,20,0.9) 0%, rgba(9,12,20,0.55) 34%, transparent 72%);
	color: #fff;
}

.stkm-overlay .stkm-bio {
	max-height: 0;
	opacity: 0;
	overflow: hidden;
	margin: 0;
	transition: max-height 0.3s ease, opacity 0.3s ease, margin 0.3s ease;
}

.stkm-overlay .stkm-card:hover .stkm-bio,
.stkm-overlay .stkm-card:focus-within .stkm-bio {
	max-height: 8em;
	opacity: 1;
	margin: 8px 0;
}

.stkm-overlay .stkm-name  { color: #fff; margin-bottom: 2px; }
.stkm-overlay .stkm-role  { color: rgba(255,255,255,0.85); opacity: 1; }
.stkm-overlay .stkm-dept  { display: none; }
.stkm-overlay .stkm-dept-badge {
	background: rgba(255,255,255,0.2);
	backdrop-filter: blur(4px);
	border: 1px solid rgba(255,255,255,0.3);
}

.stkm-overlay .stkm-social {
	background: rgba(255,255,255,0.2);
	color: #fff;
}

.stkm-overlay .stkm-social:hover {
	background: #fff;
	color: #333;
}

/* ═══════════════════════════════════════════
   09 — Overlay Slide
═══════════════════════════════════════════ */

/* 09 — Portrait Split
   Photo above, a solid accent panel below. Nothing is hidden off-card
   waiting for a hover that never comes on a phone. */
.stkm-overlay-slide .stkm-card {
	border: none;
	border-radius: 14px;
	overflow: hidden;
	box-shadow: var(--stkm-shadow);
}

.stkm-overlay-slide .stkm-photo img,
.stkm-overlay-slide .stkm-initials {
	height: 260px;
}

.stkm-overlay-slide .stkm-body {
	position: static;
	padding: 20px;
	background: linear-gradient(150deg, var(--stkm-accent) 0%, color-mix(in srgb, var(--stkm-accent) 72%, #000) 100%);
	color: #fff;
}

.stkm-overlay-slide .stkm-card:hover { box-shadow: var(--stkm-shadow-lg); transform: translateY(-3px); }

.stkm-overlay-slide .stkm-bio { color: rgba(255,255,255,0.85); }

.stkm-overlay-slide .stkm-name  { color: #fff; }
.stkm-overlay-slide .stkm-role  { color: rgba(255,255,255,0.8); opacity: 1; }
.stkm-overlay-slide .stkm-dept  { display: none; }
.stkm-overlay-slide .stkm-dept-badge {
	background: rgba(255,255,255,0.2);
	border: 1px solid rgba(255,255,255,0.35);
}
.stkm-overlay-slide .stkm-social {
	background: rgba(255,255,255,0.15);
	color: #fff;
}
.stkm-overlay-slide .stkm-social:hover { background: #fff; color: #1a237e; }

/* ═══════════════════════════════════════════
   10 — Overlay Dark
═══════════════════════════════════════════ */

.stkm-overlay-dark .stkm-card {
	border: 2px solid #222;
	border-radius: 4px;
	overflow: hidden;
}

/* 10 — Dark Frame
   The copy sits *under* the portrait in its own panel. It used to be
   absolutely centred over the photo, printing the bio across the initials. */
.stkm-overlay-dark .stkm-card {
	background: #101828;
	border: 1px solid rgba(255,255,255,0.08);
	border-radius: 14px;
}

.stkm-overlay-dark .stkm-photo {
	margin: 14px 14px 0;
	border-radius: 10px;
	overflow: hidden;
}

.stkm-overlay-dark .stkm-photo img,
.stkm-overlay-dark .stkm-initials {
	height: 240px;
	filter: none;
	transition: transform 0.35s ease;
}

.stkm-overlay-dark .stkm-initials {
	background: #1d2939;
	color: #98a2b3;
}

.stkm-overlay-dark .stkm-card:hover .stkm-photo img { transform: scale(1.04); }

.stkm-overlay-dark .stkm-body {
	position: static;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: 18px 20px 22px;
	color: #fff;
}

.stkm-overlay-dark .stkm-name  { color: #fff; }
.stkm-overlay-dark .stkm-role  { color: rgba(255,255,255,0.75); opacity: 1; }
.stkm-overlay-dark .stkm-dept  { display: none; }
.stkm-overlay-dark .stkm-dept-badge {
	background: rgba(255,255,255,0.15);
	border: 1px solid rgba(255,255,255,0.3);
}
.stkm-overlay-dark .stkm-bio   { color: rgba(255,255,255,0.8); }
.stkm-overlay-dark .stkm-socials { justify-content: center; }
.stkm-overlay-dark .stkm-social {
	background: rgba(255,255,255,0.15);
	color: #fff;
}
.stkm-overlay-dark .stkm-social:hover { background: #fff; color: #222; }

/* ═══════════════════════════════════════════
   11 — Horizontal
═══════════════════════════════════════════ */

.stkm-horizontal .stkm-card {
	display: flex;
	flex-direction: row;
	background: #fff;
	border: 1px solid #dde3ee;
	border-radius: 10px;
}

.stkm-horizontal .stkm-photo {
	flex: 0 0 160px;
	min-width: 160px;
}

.stkm-horizontal .stkm-photo img,
.stkm-horizontal .stkm-initials {
	height: 100%;
	min-height: 160px;
	border-radius: 10px 0 0 10px;
}

.stkm-horizontal .stkm-body {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.stkm-horizontal .stkm-card:hover {
	box-shadow: 0 6px 20px rgba(0,0,0,0.1);
	transform: translateX(4px);
}

@media (max-width: 767px) {
	.stkm-horizontal .stkm-card { flex-direction: column; }
	.stkm-horizontal .stkm-photo { flex: none; }
	.stkm-horizontal .stkm-photo img,
	.stkm-horizontal .stkm-initials { height: 200px; border-radius: 10px 10px 0 0; }
}

/* ═══════════════════════════════════════════
   12 — Horizontal Alt
═══════════════════════════════════════════ */

.stkm-horizontal-alt .stkm-card {
	display: flex;
	flex-direction: row;
	background: #f9f9fb;
	border: 2px solid #e0e4f4;
	border-radius: 12px;
}

.stkm-horizontal-alt .stkm-card:nth-child(even) {
	flex-direction: row-reverse;
}

.stkm-horizontal-alt .stkm-photo {
	flex: 0 0 180px;
}

.stkm-horizontal-alt .stkm-photo img,
.stkm-horizontal-alt .stkm-initials {
	height: 100%;
	min-height: 180px;
}

.stkm-horizontal-alt .stkm-card:nth-child(odd) .stkm-photo img,
.stkm-horizontal-alt .stkm-card:nth-child(odd) .stkm-initials {
	border-radius: 10px 0 0 10px;
}

.stkm-horizontal-alt .stkm-card:nth-child(even) .stkm-photo img,
.stkm-horizontal-alt .stkm-card:nth-child(even) .stkm-initials {
	border-radius: 0 10px 10px 0;
}

.stkm-horizontal-alt .stkm-body { flex: 1; display: flex; flex-direction: column; justify-content: center; }

.stkm-horizontal-alt .stkm-card:hover {
	box-shadow: 0 8px 24px rgba(0,0,0,0.1);
}

/* ═══════════════════════════════════════════
   13 — Horizontal Compact
═══════════════════════════════════════════ */

.stkm-horizontal-compact .stkm-card {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 14px;
	padding: 14px;
	background: #fff;
	border: 1px solid #e4e8f0;
	border-radius: 8px;
}

.stkm-horizontal-compact .stkm-photo {
	flex: 0 0 70px;
	min-width: 70px;
}

.stkm-horizontal-compact .stkm-photo img,
.stkm-horizontal-compact .stkm-initials {
	width: 70px;
	height: 70px;
	border-radius: 50%;
	min-height: unset;
}

.stkm-horizontal-compact .stkm-body { padding: 0; }
.stkm-horizontal-compact .stkm-bio  { display: none; }

.stkm-horizontal-compact .stkm-card:hover {
	border-color: #aab4d6;
	box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

/* ═══════════════════════════════════════════
   14 — Hanging Portrait
   A round portrait breaks out over the top edge of the card.
═══════════════════════════════════════════ */

.stkm-hanging .stkm-card {
	background: #fff;
	border: 1px solid var(--stkm-border);
	border-radius: 14px;
	overflow: visible;
	min-width: 0;
	margin-top: 48px;
	text-align: center;
	box-shadow: var(--stkm-shadow);
}

.stkm-hanging .stkm-photo {
	width: 96px;
	height: 96px;
	margin: -48px auto 0;
	border-radius: 50%;
	border: 4px solid #fff;
	box-shadow: var(--stkm-shadow);
}

.stkm-hanging .stkm-photo img,
.stkm-hanging .stkm-initials {
	width: 100%;
	height: 100%;
	min-height: 0;
	font-size: 1.5rem;
	border-radius: 50%;
}

.stkm-hanging .stkm-body { align-items: center; padding-top: 14px; }
.stkm-hanging .stkm-socials { justify-content: center; }
.stkm-hanging .stkm-card:hover { box-shadow: var(--stkm-shadow-lg); }

/* ═══════════════════════════════════════════
   15 — Circle Minimal
═══════════════════════════════════════════ */

.stkm-circle-minimal .stkm-card {
	background: transparent;
	border-top: 3px solid #5c6bc0;
	border-bottom: 1px solid #e8eaf6;
	border-left: none;
	border-right: none;
	border-radius: 0;
	text-align: center;
	padding-top: 20px;
}

.stkm-circle-minimal .stkm-photo {
	margin: 0 auto 12px;
	width: 90px;
	height: 90px;
	border-radius: 50%;
	overflow: hidden;
	border: 2px solid #c5cae9;
}

.stkm-circle-minimal .stkm-photo img,
.stkm-circle-minimal .stkm-initials {
	width: 90px;
	height: 90px;
	border-radius: 50%;
}

.stkm-circle-minimal .stkm-body { display: flex; flex-direction: column; align-items: center; padding-top: 0; }
.stkm-circle-minimal .stkm-dept { background: none; padding: 0; color: #5c6bc0; }
.stkm-circle-minimal .stkm-bio  { font-size: 0.82rem; }
.stkm-circle-minimal .stkm-socials { justify-content: center; }

/* ═══════════════════════════════════════════
   16 — Divided Detail
   Each fact is its own hairline-divided row running edge to edge.
═══════════════════════════════════════════ */

.stkm-divided .stkm-card {
	background: #fff;
	border: 1px solid var(--stkm-border);
	border-radius: 10px;
}

.stkm-divided .stkm-body { padding: 0; }

.stkm-divided .stkm-dept {
	display: block;
	align-self: stretch;
	margin: 0;
	padding: 10px 18px;
	background: var(--stkm-accent-soft);
	border-radius: 0;
	border-bottom: 1px solid var(--stkm-border);
}

.stkm-divided .stkm-name {
	margin: 0;
	padding: 14px 18px 4px;
}

.stkm-divided .stkm-role {
	margin: 0;
	padding: 0 18px 14px;
	border-bottom: 1px solid var(--stkm-border);
}

.stkm-divided .stkm-bio {
	margin: 0;
	padding: 14px 18px;
	border-bottom: 1px solid var(--stkm-border);
}

.stkm-divided .stkm-foot { padding: 12px 18px; }
.stkm-divided .stkm-socials { margin-top: 0; }
.stkm-divided .stkm-card:hover { box-shadow: var(--stkm-shadow); }

/* ═══════════════════════════════════════════
   17 — Neon
═══════════════════════════════════════════ */

.stkm-neon .stkm-card {
	background: #0a0a1a;
	border: 1px solid #00e5ff;
	border-radius: 8px;
	color: #e0e0e0;
	box-shadow: 0 0 10px rgba(0,229,255,0.15), inset 0 0 20px rgba(0,229,255,0.03);
	transition: box-shadow 0.3s, border-color 0.3s;
}

.stkm-neon .stkm-card:hover {
	border-color: #00e5ff;
	box-shadow: 0 0 20px rgba(0,229,255,0.4), inset 0 0 30px rgba(0,229,255,0.08);
}

.stkm-neon .stkm-name {
	color: #00e5ff;
	text-shadow: 0 0 8px rgba(0,229,255,0.6);
}

.stkm-neon .stkm-role {
	color: #b39ddb;
	opacity: 1;
}

.stkm-neon .stkm-dept {
	background: rgba(0,229,255,0.1);
	color: #00e5ff;
	border: 1px solid rgba(0,229,255,0.3);
}

.stkm-neon .stkm-bio { color: #aaa; }

.stkm-neon .stkm-social {
	background: rgba(0,229,255,0.1);
	color: #00e5ff;
	border: 1px solid rgba(0,229,255,0.25);
}

.stkm-neon .stkm-social:hover {
	background: #00e5ff;
	color: #0a0a1a;
	box-shadow: 0 0 12px rgba(0,229,255,0.5);
}

.stkm-neon .stkm-initials {
	background: rgba(0,229,255,0.08);
	color: #00e5ff;
}

/* ═══════════════════════════════════════════
   18 — Glass
═══════════════════════════════════════════ */

.stkm-glass .stkm-wrap,
.stkm-wrap.stkm-glass {
	padding: 20px;
}

.stkm-glass .stkm-card {
	background: rgba(255,255,255,0.15);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border: 1px solid rgba(255,255,255,0.3);
	border-radius: 16px;
	color: inherit;
	box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}

.stkm-glass .stkm-card:hover {
	background: rgba(255,255,255,0.22);
	box-shadow: 0 8px 32px rgba(0,0,0,0.14);
}

.stkm-glass .stkm-dept {
	background: rgba(255,255,255,0.25);
	border: 1px solid rgba(255,255,255,0.4);
}

.stkm-glass .stkm-social {
	background: rgba(255,255,255,0.2);
	border: 1px solid rgba(255,255,255,0.35);
}

.stkm-glass .stkm-social:hover {
	background: rgba(255,255,255,0.5);
}

/* ═══════════════════════════════════════════
   19 — Feature First
   The first person leads the set as a full-width row; the rest follow as tiles.
═══════════════════════════════════════════ */

.stkm-feature-first .stkm-card {
	background: #fff;
	border: 1px solid var(--stkm-border);
	border-radius: 12px;
	box-shadow: var(--stkm-shadow);
}

.stkm-feature-first .stkm-card:first-child {
	grid-column: 1 / -1;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: stretch;
}

.stkm-feature-first .stkm-card:first-child .stkm-photo {
	flex: 1 1 260px;
	min-width: 0;
	position: relative;
}

.stkm-feature-first .stkm-card:first-child .stkm-photo img,
.stkm-feature-first .stkm-card:first-child .stkm-initials {
	height: 100%;
	min-height: 240px;
}

.stkm-feature-first .stkm-card:first-child .stkm-body {
	flex: 999 1 300px;
	justify-content: center;
	padding: 28px 32px;
}

.stkm-feature-first .stkm-card:first-child .stkm-name { font-size: 1.5rem; }
.stkm-feature-first .stkm-card:first-child .stkm-bio  { font-size: 0.95rem; }
.stkm-feature-first .stkm-card:hover { box-shadow: var(--stkm-shadow-lg); }

/* ═══════════════════════════════════════════
   20 — Polaroid
═══════════════════════════════════════════ */

/* 20 — Frame
   Portrait inset inside a padded frame. The old version rotated every card
   without reserving room for the rotation, so neighbours overlapped. */
.stkm-polaroid .stkm-card {
	background: #fff;
	border: 1px solid var(--stkm-border);
	border-radius: var(--stkm-radius, 14px);
	padding: 14px 14px 18px;
	box-shadow: var(--stkm-shadow);
}

.stkm-polaroid .stkm-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--stkm-shadow-lg);
	z-index: 2;
}

.stkm-polaroid .stkm-photo {
	padding: 0;
	border-radius: 10px;
	overflow: hidden;
	background: #f2f4f7;
}

.stkm-polaroid .stkm-photo img,
.stkm-polaroid .stkm-initials {
	height: 220px;
	border-radius: 10px;
}

.stkm-polaroid .stkm-body {
	padding: 10px 4px 0;
	text-align: center;
}

.stkm-polaroid .stkm-body { display: flex; flex-direction: column; align-items: center; }
.stkm-polaroid .stkm-socials { justify-content: center; }
.stkm-polaroid .stkm-bio  { font-size: 0.8rem; }

/* ═══════════════════════════════════════════
   21 — Staggered Grid
   Alternate cards drop out of line so the set reads on two rhythms.
═══════════════════════════════════════════ */

.stkm-wrap.stkm-staggered { align-items: start; }

.stkm-staggered .stkm-card {
	background: #fff;
	border: 1px solid var(--stkm-border);
	border-radius: 14px;
	box-shadow: var(--stkm-shadow);
}

.stkm-staggered .stkm-card:nth-child(even) { margin-top: 40px; }
.stkm-staggered .stkm-photo img,
.stkm-staggered .stkm-initials { height: 200px; }

.stkm-staggered .stkm-body { padding: 18px 20px; }
.stkm-staggered .stkm-card:hover { box-shadow: var(--stkm-shadow-lg); }

@media (max-width: 767px) {
	.stkm-staggered .stkm-card:nth-child(even) { margin-top: 0; }
}

/* ═══════════════════════════════════════════
   22 — Gradient Border
═══════════════════════════════════════════ */

.stkm-gradient-border .stkm-card {
	background: #fff;
	border: 2px solid transparent;
	border-radius: 12px;
	position: relative;
}

.stkm-gradient-border .stkm-card::before {
	content: '';
	position: absolute;
	inset: -2px;
	border-radius: 14px;
	padding: 2px;
	background: linear-gradient(135deg, #f093fb, #f5576c, #4facfe);
	-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	pointer-events: none;
}

.stkm-gradient-border .stkm-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 8px 24px rgba(0,0,0,0.1);
}

.stkm-gradient-border .stkm-dept {
	background: linear-gradient(135deg, #f093fb, #f5576c);
	color: #fff;
}

/* ═══════════════════════════════════════════
   23 — Profile Card
═══════════════════════════════════════════ */

.stkm-profile .stkm-card {
	background: #fff;
	border: 1px solid #e2e8f4;
	border-radius: 16px;
	text-align: center;
	overflow: visible;
}

/* Clip the cover to the card instead of letting the round photo escape it. */
.stkm-profile .stkm-card { overflow: hidden; }

.stkm-profile .stkm-cover {
	height: 90px;
	flex-shrink: 0;
	background: linear-gradient(120deg, var(--stkm-accent), color-mix(in srgb, var(--stkm-accent) 55%, #0ea5e9));
	border-radius: 16px 16px 0 0;
	margin: 0;
}

.stkm-profile .stkm-photo {
	margin: -50px auto 0;
	flex-shrink: 0;
	width: 90px;
	height: 90px;
	border-radius: 50%;
	overflow: hidden;
	border: 4px solid #fff;
	box-shadow: 0 2px 10px rgba(0,0,0,0.15);
	position: relative;
	z-index: 1;
}

.stkm-profile .stkm-photo img,
.stkm-profile .stkm-initials {
	width: 90px;
	height: 90px;
	border-radius: 50%;
}

.stkm-profile .stkm-body {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding-top: 12px;
}

.stkm-profile .stkm-socials { justify-content: center; }

.stkm-profile .stkm-card:hover {
	box-shadow: 0 8px 24px rgba(79,70,229,0.2);
}

/* ═══════════════════════════════════════════
   24 — Roster Row
   A dense borderless roster: small portrait, identity, contact on the right.
═══════════════════════════════════════════ */

.stkm-wrap.stkm-roster {
	grid-template-columns: minmax(0, 1fr);
	gap: 0;
}

.stkm-roster .stkm-card {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 16px;
	padding: 14px 4px;
	background: transparent;
	border: none;
	border-bottom: 1px solid var(--stkm-border);
	border-radius: 0;
	overflow: visible;
	min-width: 0;
}

.stkm-roster .stkm-card:first-child { border-top: 1px solid var(--stkm-border); }

.stkm-roster .stkm-photo {
	flex: 0 0 48px;
	width: 48px;
	height: 48px;
	border-radius: 50%;
}

.stkm-roster .stkm-photo img,
.stkm-roster .stkm-initials {
	width: 48px;
	height: 48px;
	min-height: 0;
	font-size: 0.95rem;
	border-radius: 50%;
}

.stkm-roster .stkm-body {
	flex: 1 1 200px;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
	align-items: center;
	column-gap: 16px;
}

.stkm-roster .stkm-dept { grid-column: 2; margin: 0; justify-self: start; }
.stkm-roster .stkm-name { grid-column: 1; grid-row: 1; margin: 0; font-size: 0.95rem; }
.stkm-roster .stkm-role { grid-column: 1; grid-row: 2; margin: 0; }
.stkm-roster .stkm-dept { grid-row: 1 / span 2; }
.stkm-roster .stkm-bio  { display: none; }

.stkm-roster .stkm-foot {
	grid-column: 3;
	grid-row: 1 / span 2;
	margin: 0;
	padding: 0;
	justify-self: end;
}

.stkm-roster .stkm-socials { margin-top: 0; flex-wrap: nowrap; }
.stkm-roster .stkm-card:hover { background: var(--stkm-accent-soft); }

/* ═══════════════════════════════════════════
   25 — Bio First
   The words lead; the portrait shrinks to a signature line at the base.
═══════════════════════════════════════════ */

.stkm-bio-first .stkm-card {
	background: #fff;
	border: 1px solid var(--stkm-border);
	border-radius: 12px;
	padding: 22px;
	display: flex;
	flex-direction: column;
}

.stkm-bio-first .stkm-photo {
	order: 2;
	width: 52px;
	height: 52px;
	margin-top: 16px;
	border-radius: 50%;
	flex: 0 0 auto;
}

.stkm-bio-first .stkm-photo img,
.stkm-bio-first .stkm-initials {
	width: 52px;
	height: 52px;
	min-height: 0;
	font-size: 1rem;
	border-radius: 50%;
}

.stkm-bio-first .stkm-body {
	order: 1;
	padding: 0;
	display: flex;
	flex-direction: column;
}

.stkm-bio-first .stkm-bio {
	order: -1;
	margin: 0 0 16px;
	font-size: 1.05rem;
	line-height: 1.6;
	color: var(--stkm-ink);
}

.stkm-bio-first .stkm-dept { order: 3; margin-top: 10px; }
.stkm-bio-first .stkm-card:hover { box-shadow: var(--stkm-shadow); }

/* ═══════════════════════════════════════════
   26 — Numbered
═══════════════════════════════════════════ */

.stkm-numbered .stkm-card {
	background: #fff;
	border: 1px solid #e8eaee;
	border-radius: 8px;
	padding-top: 10px;
}

.stkm-number-badge {
	position: absolute;
	top: 14px;
	left: 14px;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: #4f46e5;
	color: #fff;
	font-size: 0.8rem;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 2;
	box-shadow: 0 2px 6px rgba(79,70,229,0.4);
}

.stkm-numbered .stkm-card:hover {
	box-shadow: 0 8px 24px rgba(0,0,0,0.1);
	transform: translateY(-3px);
}

/* ═══════════════════════════════════════════
   27 — Ribbon
═══════════════════════════════════════════ */

.stkm-ribbon .stkm-card {
	background: #fff;
	border: 1px solid #dde4f0;
	border-radius: 8px;
}

.stkm-ribbon-wrap {
	position: absolute;
	top: 0; right: 0;
	overflow: hidden;
	width: 128px;
	height: 128px;
	pointer-events: none;
	z-index: 3;
}

/* Element class must not equal the layout class .stkm-ribbon, which sits on
   the wrapper: sharing it rotated the entire widget across the page. */
.stkm-ribbon__label {
	position: absolute;
	top: 26px;
	right: -36px;
	width: 168px;
	padding: 5px 0;
	background: var(--stkm-accent);
	color: #fff;
	font-size: 0.62rem;
	font-weight: 700;
	text-transform: uppercase;
	text-align: center;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	transform: rotate(45deg);
	letter-spacing: 0.06em;
	box-shadow: 0 2px 8px rgba(16,24,40,.18);
}

.stkm-ribbon .stkm-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 10px 28px rgba(0,0,0,0.1);
}

/* ═══════════════════════════════════════════
   28 — Corner Portrait
   Text leads; the portrait is pinned into the top corner of the card.
═══════════════════════════════════════════ */

.stkm-corner-portrait .stkm-card {
	background: #fff;
	border: 1px solid var(--stkm-border);
	border-radius: 12px;
	padding: 20px;
	display: block;
	container-type: inline-size;
	box-shadow: var(--stkm-shadow);
}

.stkm-corner-portrait .stkm-photo {
	width: 84px;
	height: 84px;
	margin-bottom: 12px;
	border-radius: 10px;
}

.stkm-corner-portrait .stkm-photo img,
.stkm-corner-portrait .stkm-initials {
	width: 84px;
	height: 84px;
	min-height: 0;
	font-size: 1.3rem;
	border-radius: 10px;
}

.stkm-corner-portrait .stkm-body { padding: 0; }

/* Pin the portrait into the corner only once the copy still has a measure. */
@container (min-width: 280px) {
	.stkm-corner-portrait .stkm-photo {
		position: absolute;
		top: 16px;
		right: 16px;
		margin-bottom: 0;
	}
	.stkm-corner-portrait .stkm-body {
		padding-right: 96px;
		min-height: 86px;
	}
	.stkm-corner-portrait .stkm-bio,
	.stkm-corner-portrait .stkm-foot { padding-right: 0; margin-right: -96px; }
}
.stkm-corner-portrait .stkm-card:hover { box-shadow: var(--stkm-shadow-lg); }

/* ═══════════════════════════════════════════
   29 — Split
═══════════════════════════════════════════ */

.stkm-split .stkm-card {
	display: flex;
	flex-direction: row;
	background: #fff;
	border: 1px solid #e0e6f0;
	border-radius: 12px;
	overflow: hidden;
	min-height: 220px;
}

.stkm-split .stkm-photo {
	flex: 0 0 45%;
}

.stkm-split .stkm-photo img,
.stkm-split .stkm-initials {
	height: 100%;
	min-height: 220px;
	border-radius: 0;
}

.stkm-split .stkm-body {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	border-left: 3px solid #e0e6f0;
}

.stkm-split .stkm-card:hover {
	box-shadow: 0 8px 24px rgba(0,0,0,0.1);
}

.stkm-split .stkm-card:hover .stkm-photo img {
	transform: scale(1.05);
}

@media (max-width: 767px) {
	.stkm-split .stkm-card { flex-direction: column; }
	.stkm-split .stkm-body { border-left: none; border-top: 3px solid #e0e6f0; }
}

/* ═══════════════════════════════════════════
   30 — Metro Tiles
═══════════════════════════════════════════ */

.stkm-metro .stkm-card {
	position: relative;
	overflow: hidden;
	border: 2px solid rgba(255,255,255,0.2);
	border-radius: 4px;
	min-height: 200px;
}

/* The photo pane must fill the tile: with an auto-height parent the
   absolutely-positioned image collapsed and the tile rendered blank. */
.stkm-metro .stkm-photo {
	position: absolute;
	inset: 0;
}

.stkm-metro .stkm-photo img,
.stkm-metro .stkm-initials {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	min-height: 0;
	object-fit: cover;
	border-radius: 0;
}

.stkm-metro .stkm-body {
	position: absolute;
	bottom: 0; left: 0; right: 0;
	padding: 16px;
	background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
	color: #fff;
}

.stkm-metro .stkm-name  { color: #fff; font-size: 0.95rem; }
.stkm-metro .stkm-role  { color: rgba(255,255,255,0.75); opacity: 1; font-size: 0.78rem; }
.stkm-metro .stkm-dept  {
	background: rgba(255,255,255,0.2);
	color: #fff;
	font-size: 0.65rem;
}
.stkm-metro .stkm-bio    { display: none; }
.stkm-metro .stkm-social {
	background: rgba(255,255,255,0.15);
	color: #fff;
	width: 28px; height: 28px;
	font-size: 12px;
}

.stkm-metro .stkm-card:hover {
	border-color: rgba(255,255,255,0.5);
}

.stkm-metro .stkm-card:hover .stkm-photo img {
	transform: scale(1.08);
}

.stkm-metro .stkm-initials {
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 2rem;
}

/* ═══════════════════════════════════════════
   31 — List
═══════════════════════════════════════════ */

.stkm-wrap.stkm-list {
	grid-template-columns: 1fr;
}

.stkm-list .stkm-card {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 20px;
	padding: 18px 20px;
	background: #fff;
	border: 1px solid #e8eaf0;
	border-radius: 8px;
	transition: background 0.2s, box-shadow 0.2s;
}

.stkm-list .stkm-photo {
	flex: 0 0 80px;
	min-width: 80px;
}

.stkm-list .stkm-photo img,
.stkm-list .stkm-initials {
	width: 80px;
	height: 80px;
	border-radius: 50%;
	min-height: unset;
}

.stkm-list .stkm-body { flex: 1; padding: 0; }
.stkm-list .stkm-bio  { max-width: 600px; }
.stkm-list .stkm-socials { flex-direction: row; }

.stkm-list .stkm-card:hover {
	background: #f8f9ff;
	box-shadow: 0 4px 14px rgba(0,0,0,0.07);
}

/* ═══════════════════════════════════════════
   32 — List Bordered
═══════════════════════════════════════════ */

.stkm-wrap.stkm-list-bordered {
	grid-template-columns: 1fr;
}

.stkm-list-bordered .stkm-card {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 20px;
	padding: 18px 20px;
	background: transparent;
	border: none;
	border-bottom: 1px solid #e0e6f0;
	border-radius: 0;
}

.stkm-list-bordered .stkm-card:first-child {
	border-top: 1px solid #e0e6f0;
}

.stkm-list-bordered .stkm-photo {
	flex: 0 0 72px;
	min-width: 72px;
}

.stkm-list-bordered .stkm-photo img,
.stkm-list-bordered .stkm-initials {
	width: 72px;
	height: 72px;
	border-radius: 50%;
	border: 2px solid #e0e6f0;
	min-height: unset;
}

.stkm-list-bordered .stkm-body { flex: 1; padding: 0; }
.stkm-list-bordered .stkm-bio  { font-size: 0.82rem; max-width: 600px; }

.stkm-list-bordered .stkm-card:hover {
	background: #f8f9ff;
}

/* ═══════════════════════════════════════════
   33 — Baseline Row
   Name and role share a baseline across a rule; contact sits on its own line.
═══════════════════════════════════════════ */

.stkm-baseline .stkm-card {
	background: #fff;
	border: 1px solid var(--stkm-border);
	border-radius: 8px;
	container-type: inline-size;
}

.stkm-baseline .stkm-photo img,
.stkm-baseline .stkm-initials { height: 150px; }

.stkm-baseline .stkm-body {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	align-items: baseline;
	column-gap: 12px;
	padding: 14px 16px;
}

/* Name and role only share a baseline once the card is wide enough for both. */
@container (min-width: 250px) {
	.stkm-baseline .stkm-body { grid-template-columns: minmax(0, 1fr) auto; }
	.stkm-baseline .stkm-role { grid-column: 2; grid-row: 2; text-align: right; }
}

.stkm-baseline .stkm-dept {
	grid-column: 1 / -1;
	grid-row: 1;
	margin-bottom: 8px;
}

.stkm-baseline .stkm-name {
	grid-column: 1;
	grid-row: 2;
	margin: 0;
	font-size: 0.95rem;
	padding-bottom: 8px;
}

.stkm-baseline .stkm-role {
	grid-column: 1;
	grid-row: 3;
	margin: 0;
	font-size: 0.75rem;
	padding-bottom: 8px;
	border-bottom: 1px solid var(--stkm-border);
}

.stkm-baseline .stkm-bio {
	grid-column: 1 / -1;
	grid-row: 4;
	border-top: 1px solid var(--stkm-border);
	padding-top: 10px;
	margin: 10px 0 0;
	font-size: 0.8rem;
}

.stkm-baseline .stkm-foot {
	grid-column: 1 / -1;
	grid-row: 5;
	justify-self: end;
}

.stkm-baseline .stkm-socials { margin-top: 10px; }
.stkm-baseline .stkm-card:hover { box-shadow: var(--stkm-shadow); transform: translateY(-3px); }

/* ═══════════════════════════════════════════
   34 — Sidebar
═══════════════════════════════════════════ */

.stkm-wrap.stkm-sidebar {
	grid-template-columns: 1fr;
}

.stkm-sidebar .stkm-card {
	display: flex;
	flex-direction: row;
	background: #fff;
	border: 1px solid #dde4f0;
	border-radius: 10px;
	overflow: hidden;
}

.stkm-sidebar .stkm-photo {
	flex: 0 0 200px;
}

.stkm-sidebar .stkm-photo img,
.stkm-sidebar .stkm-initials {
	height: 100%;
	min-height: 200px;
	border-radius: 0;
}

.stkm-sidebar .stkm-body {
	flex: 1;
	border-left: 4px solid #4f46e5;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.stkm-sidebar .stkm-dept {
	background: #eef0fd;
	color: #4f46e5;
}

.stkm-sidebar .stkm-card:hover {
	box-shadow: 0 8px 24px rgba(0,0,0,0.1);
}

@media (max-width: 767px) {
	.stkm-sidebar .stkm-card { flex-direction: column; }
	.stkm-sidebar .stkm-photo { flex: none; }
	.stkm-sidebar .stkm-photo img,
	.stkm-sidebar .stkm-initials { height: 200px; min-height: unset; }
	.stkm-sidebar .stkm-body { border-left: none; border-top: 4px solid #4f46e5; }
}

/* ═══════════════════════════════════════════
   35 — Neumorphic
═══════════════════════════════════════════ */

.stkm-neumorphic .stkm-card {
	background: #e8ecf1;
	border: 1px solid #d0d5de;
	border-radius: 20px;
	box-shadow:
		6px 6px 14px rgba(163,177,198,0.6),
		-6px -6px 14px rgba(255,255,255,0.9);
	text-align: center;
	transition: box-shadow 0.3s, transform 0.3s;
}

.stkm-neumorphic .stkm-card:hover {
	box-shadow:
		2px 2px 6px rgba(163,177,198,0.6),
		-2px -2px 6px rgba(255,255,255,0.9);
	transform: scale(0.98);
}

.stkm-neumorphic .stkm-photo {
	width: 100px;
	height: 100px;
	margin: 20px auto 0;
	border-radius: 50%;
	overflow: hidden;
	box-shadow:
		4px 4px 10px rgba(163,177,198,0.6),
		-4px -4px 10px rgba(255,255,255,0.9);
}

.stkm-neumorphic .stkm-photo img,
.stkm-neumorphic .stkm-initials {
	width: 100px;
	height: 100px;
	border-radius: 50%;
}

.stkm-neumorphic .stkm-initials { background: #dde3ea; color: #5c6bc0; }

.stkm-neumorphic .stkm-body { display: flex; flex-direction: column; align-items: center; }
.stkm-neumorphic .stkm-socials { justify-content: center; }

.stkm-neumorphic .stkm-dept {
	background: #e8ecf1;
	color: #5c6bc0;
	box-shadow:
		inset 2px 2px 5px rgba(163,177,198,0.5),
		inset -2px -2px 5px rgba(255,255,255,0.8);
	border: none;
}

.stkm-neumorphic .stkm-social {
	background: #e8ecf1;
	color: #666;
	border: none;
	box-shadow:
		3px 3px 7px rgba(163,177,198,0.6),
		-3px -3px 7px rgba(255,255,255,0.9);
}

.stkm-neumorphic .stkm-social:hover {
	box-shadow:
		inset 2px 2px 5px rgba(163,177,198,0.5),
		inset -2px -2px 5px rgba(255,255,255,0.8);
	color: #5c6bc0;
	background: #e8ecf1;
}


/* ─────────────────────────────────────────────
   NEW LAYOUTS 36–40
   These styles are appended to ensure backward compatibility.
───────────────────────────────────────────── */

/* 36 — Outline Contrast */
.stkm-outline-contrast .stkm-card {
	background: #fff;
	border: 3px solid #111;
	box-shadow: 8px 8px 0 #1110;
	border-radius: 12px;
}
.stkm-outline-contrast .stkm-card:hover {
	transform: translateY(-4px);
	box-shadow: 12px 12px 0 #1111;
}
.stkm-outline-contrast .stkm-photo img,
.stkm-outline-contrast .stkm-initials {
	border-bottom: 3px solid #111;
}
.stkm-outline-contrast .stkm-dept {
	background: #111;
	color: #fff;
	border-radius: 4px;
}

/* 37 — Tilt Hover */
.stkm-tilt .stkm-card {
	border-radius: 14px;
	box-shadow: 0 10px 24px rgba(0,0,0,0.12);
	transform-origin: center;
}
.stkm-tilt .stkm-card:hover { transform: rotate(-1.5deg) translateY(-6px); }
.stkm-tilt .stkm-photo img { transform-origin: center; }
.stkm-tilt .stkm-card:hover .stkm-photo img { transform: scale(1.08) rotate(1.5deg); }
.stkm-tilt .stkm-body { position: relative; }
.stkm-tilt .stkm-body:before {
	content: '';
	position: absolute; inset: 0;
	background: linear-gradient(90deg, rgba(99,102,241,0.12), rgba(236,72,153,0.12));
	opacity: 0; pointer-events: none; border-radius: 0 0 14px 14px;
	transition: opacity 0.25s ease;
}
.stkm-tilt .stkm-card:hover .stkm-body:before { opacity: 1; }

/* ═══════════════════════════════════════════
   38 — Social Rail
   Contact icons live in their own vertical gutter down the edge of the card.
═══════════════════════════════════════════ */

.stkm-social-rail .stkm-card {
	background: #fff;
	border: 1px solid var(--stkm-border);
	border-radius: 12px;
	padding-right: 54px;
	box-shadow: var(--stkm-shadow);
}

.stkm-social-rail .stkm-photo img,
.stkm-social-rail .stkm-initials { height: 190px; }

.stkm-social-rail .stkm-body { padding: 16px 18px; }

.stkm-social-rail .stkm-foot {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: 54px;
	margin: 0;
	padding: 14px 0;
	background: var(--stkm-accent-soft);
	border-left: 1px solid var(--stkm-border);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	overflow-y: auto;
	scrollbar-width: none;
}

.stkm-social-rail .stkm-foot::-webkit-scrollbar { display: none; }

.stkm-social-rail .stkm-socials {
	flex-direction: column;
	flex-wrap: nowrap;
	align-items: center;
	margin-top: 0;
}

.stkm-social-rail .stkm-social { width: 30px; height: 30px; font-size: 12px; }
.stkm-social-rail .stkm-contact { display: none; }
.stkm-social-rail .stkm-card:hover { box-shadow: var(--stkm-shadow-lg); }

/* 39 — Corner Badge */
.stkm-corner-badge .stkm-card { border-radius: 12px; box-shadow: 0 8px 20px rgba(0,0,0,0.1); }
.stkm-corner-badge .stkm-card:after {
	content: '';
	position: absolute; top: 0; right: 0;
	border-left: 38px solid transparent;
	border-bottom: 38px solid transparent;
	border-top: 38px solid #7c3aed; /* purple corner */
}
/* Reposition dept label as a floating badge */
.stkm-corner-badge .stkm-dept {
	position: absolute; top: 10px; left: 10px;
	background: #7c3aed; color: #fff; border-radius: 6px; padding: 4px 10px; box-shadow: 0 4px 10px rgba(124,58,237,0.35);
	z-index: 2;
}
.stkm-corner-badge .stkm-body { padding-top: 16px; }

/* 40 — Minimal Line (text forward, hide photo) */
.stkm-minimal-line .stkm-photo { display: none; }
.stkm-minimal-line .stkm-card { border-left: 4px solid #111; padding-left: 0; }
.stkm-minimal-line .stkm-body { padding: 14px 16px 16px 18px; }
.stkm-minimal-line .stkm-name { font-size: 1.1rem; }
.stkm-minimal-line .stkm-role { margin: 2px 0 0; opacity: 0.8; }
.stkm-minimal-line .stkm-dept { background: transparent; color: #111; padding: 0; border-radius: 0; letter-spacing: 0.12em; }
.stkm-minimal-line .stkm-social { width: 28px; height: 28px; border-radius: 4px; }

/* Hover tweaks shared */
.stkm-outline-contrast .stkm-social:hover,
.stkm-tilt .stkm-social:hover,
.stkm-social-rail .stkm-social:hover,
.stkm-corner-badge .stkm-social:hover,
.stkm-minimal-line .stkm-social:hover {
	transform: translateY(-2px);
}

/* ═══════════════════════════════════════════
   Reduced motion
═══════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
	.stkm-wrap *,
	.stkm-wrap *::before,
	.stkm-wrap *::after {
		animation: none !important;
		transition: none !important;
	}
	.stkm-overlay .stkm-bio { max-height: none; opacity: 1; margin: 8px 0; }
}