/* IPS Team People 1.0.2
 * Every value a control can change is a custom property on .ips-tp, so controls never fight this file.
 * No !important anywhere: one would outrank every Elementor control (PLUGIN_BUILD_GUIDE s3).
 * Buttons are reset at three classes and four for :hover/:focus, above the kit's and the theme's
 * global button rules, which reach any <button> on the page.
 */

.ips-tp {
	--ips-tp-accent: #e8562f;
	--ips-tp-line: color-mix(in srgb, currentColor 12%, transparent);
	--ips-tp-arrow: color-mix(in srgb, currentColor 20%, transparent);
	--ips-tp-arrow-hover: color-mix(in srgb, currentColor 6%, transparent);
	--ips-tp-photo-bg: #e4e1d9;
	--ips-tp-panel-bg: rgba(255, 255, 255, 0.8);
	--ips-tp-panel-text: #131211;
	--ips-tp-panel-blur: 20px;
	--ips-tp-slot-h: 74px;
	--ips-tp-radius: 24px;
	--ips-tp-list-gap: 24px;

	position: relative;
	box-sizing: border-box;
	display: grid;
	grid-template-columns: minmax(0, 1fr) var(--ips-tp-photo-w, 46%);
	grid-template-rows: auto minmax(0, 1fr);
	/* the gap preset (ips-spacing) sets --column-gap on the widget wrapper */
	column-gap: var(--ips-tp-gap, var(--column-gap, 56px));
	row-gap: var(--ips-tp-list-gap);
	height: var(--ips-tp-h, 720px);
	width: 100%;
}
.ips-tp *,
.ips-tp *::before,
.ips-tp *::after { box-sizing: border-box; }

/* ── heading ─────────────────────────────────────────── */
.ips-tp__head {
	grid-column: 1;
	grid-row: 1;
	display: flex;
	flex-direction: column;
	gap: 10px;
	min-width: 0;
}
.ips-tp__eyebrow {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: clamp(0.75rem, 0.7314rem + 0.0901vw, 0.8125rem);
	color: color-mix(in srgb, currentColor 64%, transparent);
}
.ips-tp__dot {
	flex: 0 0 6px;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--ips-tp-accent);
}
.ips-tp .ips-tp__heading {
	margin: 0;
	font-size: clamp(1rem, 0.8885rem + 0.5405vw, 1.375rem);
	line-height: 1.25;
	font-weight: 400;
	letter-spacing: -0.015em;
	color: inherit;
}

/* ── the names ───────────────────────────────────────── */
.ips-tp__list {
	grid-column: 1;
	grid-row: 2;
	min-height: 0;
	display: flex;
	flex-direction: column;
	gap: var(--ips-tp-list-gap);
}
.ips-tp__wheel {
	position: relative;
	flex: 1 1 0;
	min-height: calc(var(--ips-tp-slot-h) * 3);
	border-radius: 8px;
	cursor: grab;
	/* a vertical swipe on a touch screen scrolls the page (owner's choice, 2026-10-12) */
	touch-action: pan-y;
	-webkit-user-select: none;
	user-select: none;
	outline: none;
}
.ips-tp__wheel:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
.ips-tp.is-dragging .ips-tp__wheel { cursor: grabbing; }
.ips-tp__drum {
	position: absolute;
	inset: 0;
	overflow: hidden;
	perspective: 900px;
	-webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 24%, #000 76%, transparent 100%);
	mask-image: linear-gradient(to bottom, transparent 0%, #000 24%, #000 76%, transparent 100%);
}
.ips-tp__band {
	position: absolute;
	left: 0;
	right: 0;
	top: 50%;
	height: var(--ips-tp-slot-h);
	margin-top: calc(var(--ips-tp-slot-h) / -2);
	border-top: 1px solid var(--ips-tp-line);
	border-bottom: 1px solid var(--ips-tp-line);
	pointer-events: none;
}
.elementor-widget-ips-team-people .ips-tp .ips-tp__slot {
	position: absolute;
	left: 0;
	right: 0;
	top: 50%;
	height: var(--ips-tp-slot-h);
	margin: calc(var(--ips-tp-slot-h) / -2) 0 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	color: inherit;
	font: inherit;
	text-align: left;
	text-transform: none;
	letter-spacing: normal;
	cursor: inherit;
	display: flex;
	align-items: center;
	gap: 14px;
	transform-origin: 0% 50%;
	will-change: transform, opacity;
	transition: none;
}
.elementor-widget-ips-team-people .ips-tp .ips-tp__slot:hover,
.elementor-widget-ips-team-people .ips-tp .ips-tp__slot:focus,
.elementor-widget-ips-team-people .ips-tp .ips-tp__slot:active {
	background: none;
	color: inherit;
	border: 0;
	box-shadow: none;
	outline: none;
}
.ips-tp__index {
	flex: 0 0 26px;
	width: 26px;
	align-self: flex-start;
	margin-top: calc(var(--ips-tp-slot-h) * 0.11);
	font-size: 12px;
	line-height: 1;
	color: var(--ips-tp-accent);
	opacity: 0;
}
.ips-tp__slot.is-current .ips-tp__index { opacity: 1; }
.ips-tp--no-index .ips-tp__index { display: none; }
.ips-tp .ips-tp__name {
	font-size: clamp(2.25rem, 1.7297rem + 2.5225vw, 4rem);
	font-weight: 400;
	line-height: 1;
	letter-spacing: -0.045em;
	white-space: nowrap;
}

/* ── counter and arrows ──────────────────────────────── */
.ips-tp__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}
.ips-tp__counter {
	font-size: clamp(0.875rem, 0.8564rem + 0.0901vw, 0.9375rem);
	font-variant-numeric: tabular-nums;
}
.ips-tp__total { color: color-mix(in srgb, currentColor 60%, transparent); }
.ips-tp__arrows { display: flex; gap: 8px; }
.elementor-widget-ips-team-people .ips-tp .ips-tp__arrow {
	width: 46px;
	height: 46px;
	min-height: 0;
	padding: 0;
	margin: 0;
	border-radius: 50%;
	border: 1px solid var(--ips-tp-arrow);
	background: transparent;
	box-shadow: none;
	color: inherit;
	font: inherit;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background-color 0.2s ease, border-color 0.2s ease;
}
.elementor-widget-ips-team-people .ips-tp .ips-tp__arrow:hover,
.elementor-widget-ips-team-people .ips-tp .ips-tp__arrow:focus {
	background: transparent;
	color: inherit;
	border-color: var(--ips-tp-arrow);
	box-shadow: none;
	outline: none;
}
@media (hover: hover) {
	.elementor-widget-ips-team-people .ips-tp .ips-tp__arrow:hover {
		background: var(--ips-tp-arrow-hover);
		border-color: color-mix(in srgb, currentColor 36%, transparent);
	}
}
.elementor-widget-ips-team-people .ips-tp .ips-tp__arrow:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}
.ips-tp__arrow svg { display: block; flex: 0 0 16px; }

/* ── the photo card ──────────────────────────────────── */
.ips-tp__photo {
	grid-column: 2;
	grid-row: 1 / span 2;
	position: relative;
	min-height: 0;
	border-radius: var(--ips-tp-radius);
	overflow: hidden;
	background: var(--ips-tp-photo-bg);
	/* a vertical swipe scrolls the page; a sideways one changes the person (touch) */
	touch-action: pan-y;
	-webkit-user-select: none;
	user-select: none;
	-webkit-touch-callout: none;
}
.ips-tp__layer {
	position: absolute;
	inset: 0;
	overflow: hidden;
	background: var(--ips-tp-photo-bg);
}
.ips-tp__layer + .ips-tp__layer { visibility: hidden; }
.ips-tp .ips-tp__layer img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	border-radius: 0;
	transform-origin: 50% 40%;
	-webkit-user-drag: none;
}
.ips-tp__panel {
	position: absolute;
	left: 16px;
	right: 16px;
	bottom: 16px;
	z-index: 20;
	padding: 20px;
	border-radius: 16px;
	background: var(--ips-tp-panel-bg);
	-webkit-backdrop-filter: blur(var(--ips-tp-panel-blur)) saturate(1.3);
	backdrop-filter: blur(var(--ips-tp-panel-blur)) saturate(1.3);
	color: var(--ips-tp-panel-text);
	display: flex;
	flex-direction: column;
	gap: 8px;
	will-change: opacity, transform;
}
.ips-tp__panel-top {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
}
.ips-tp__role { font-size: clamp(1rem, 0.9628rem + 0.1802vw, 1.125rem); }
.ips-tp__city {
	font-size: clamp(0.6875rem, 0.6689rem + 0.0901vw, 0.75rem);
	color: color-mix(in srgb, currentColor 64%, transparent);
	text-align: right;
}
.ips-tp .ips-tp__bio {
	margin: 0;
	font-size: clamp(0.9375rem, 0.9189rem + 0.0901vw, 1rem);
	line-height: 1.55;
	color: color-mix(in srgb, currentColor 72%, transparent);
	white-space: pre-line;
}
.ips-tp__bio:empty, .ips-tp__city:empty { display: none; }

/* ── narrow: stacked (heading, photo, names). The script sets data-layout from the widget's OWN
 * width (under 640px); before it runs, the same rules apply to phones by media query. ── */
.ips-tp.ips-tp[data-layout="stack"] {
	grid-template-columns: minmax(0, 1fr);
	grid-template-rows: auto auto auto;
	row-gap: var(--ips-tp-gap, var(--row-gap, 40px));
	height: auto;
}
/* NOT aspect-ratio: a height that depends on the photo's width is under-measured by an Elementor flex
 * container (it sized itself 103px short on a 390 phone and the widget spilled out of its section,
 * 2026-10-12). A viewport-based height sizes correctly; the script then sets the exact 5:6 height in px. */
.ips-tp[data-layout="stack"] .ips-tp__photo { grid-column: 1; grid-row: 2; height: min(640px, 96vw); }
.ips-tp[data-layout="stack"] .ips-tp__list { grid-row: 3; }
.ips-tp[data-layout="stack"] .ips-tp__wheel { flex: 0 0 auto; height: calc(var(--ips-tp-slot-h) * 5); min-height: 0; }
.ips-tp[data-layout="stack"] .ips-tp__panel { left: 12px; right: 12px; bottom: 12px; padding: 16px; }
@media (max-width: 767px) {
	.ips-tp.ips-tp:not([data-layout]) {
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: auto auto auto;
		row-gap: var(--ips-tp-gap, var(--row-gap, 40px));
		height: auto;
	}
	.ips-tp:not([data-layout]) .ips-tp__photo { grid-column: 1; grid-row: 2; height: min(640px, 96vw); }
	.ips-tp:not([data-layout]) .ips-tp__list { grid-row: 3; }
	.ips-tp:not([data-layout]) .ips-tp__wheel { flex: 0 0 auto; height: calc(var(--ips-tp-slot-h) * 5); min-height: 0; }
	.ips-tp:not([data-layout]) .ips-tp__panel { left: 12px; right: 12px; bottom: 12px; padding: 16px; }
}

@media (prefers-reduced-motion: reduce) {
	.elementor-widget-ips-team-people .ips-tp .ips-tp__arrow { transition: none; }
}