/* KARM Speakers — [karm_speakers_tabs]: group tabs + horizontal carousel. Colours follow the site's Elementor globals when present. */
.kst {
	--kst-accent: var(--e-global-color-primary, #FF8400);
	--kst-dark: var(--e-global-color-secondary, #512602);
	--kst-cream: var(--e-global-color-accent, #FBF4E8);
	--kst-muted: #5B5248;
	--kst-bg: #FFFFFF;
	--kst-card-w: 232px;
	--kst-card-h: 440px;
	--kst-photo-h: 250px;
	--kst-gap: 20px;
	--kst-pad: 0px; /* side padding of heading, tabs, carousel and position bar */
	--kst-fade: 56px;  /* width of the edge gradients */
	--kst-snap: 56px;  /* a scrolled carousel stops cards this far from the left edge, so the gradient never covers the current card */
	container-type: inline-size;
	background: var(--kst-bg);
	border-radius: 20px;
	font-family: var(--e-global-typography-text-font-family, "Roboto"), system-ui, -apple-system, "Segoe UI", sans-serif;
	color: #222;
	text-align: left;
}
.kst *, .kst *::before, .kst *::after { box-sizing: border-box; }
.kst [hidden] { display: none !important; }
.kst--empty { padding: 32px 40px; }

.kst__in { padding: 36px 0 32px; }

/* ---------- Heading + arrows ---------- */
.kst .kst__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin: 0 var(--kst-pad) 20px;
}
.kst .kst__title {
	margin: 0;
	padding: 0;
	font-family: var(--e-global-typography-primary-font-family, "Roboto"), system-ui, sans-serif;
	font-size: 28px;
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: .01em;
	text-transform: uppercase;
	color: var(--kst-dark);
}
.kst .kst__nav { display: flex; gap: 10px; flex: none; margin-left: auto; }

/* Buttons are fully reset so theme / Elementor button styles do not leak in. */
.kst .kst__arrow,
.kst .kst__tab {
	margin: 0;
	min-height: 0;
	box-shadow: none;
	text-decoration: none;
	text-transform: none;
	letter-spacing: 0;
	-webkit-appearance: none;
	appearance: none;
}
.kst .kst__arrow {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1.5px solid rgba(81, 38, 2, .18);
	border-radius: 50%;
	background: #fff;
	color: var(--kst-dark);
	line-height: 1;
	cursor: pointer;
	transition: background-color .2s, color .2s, border-color .2s, opacity .2s;
}
.kst .kst__arrow:hover:not(:disabled),
.kst .kst__arrow:focus-visible:not(:disabled) {
	background: var(--kst-accent);
	border-color: var(--kst-accent);
	color: #fff;
}
.kst .kst__arrow:focus:not(:hover):not(:focus-visible),
.kst .kst__arrow:active:not(:hover) {
	background: #fff;
	border-color: rgba(81, 38, 2, .18);
	color: var(--kst-dark);
	outline: none;
}
.kst .kst__arrow:focus-visible { outline: 2px solid var(--kst-accent); outline-offset: 2px; }
.kst .kst__arrow:disabled,
.kst .kst__arrow:disabled:hover { opacity: .3; cursor: default; background: #fff; color: var(--kst-dark); border-color: rgba(81, 38, 2, .18); }
.kst .kst__arrow svg { display: block; width: 20px; height: 20px; }

/* ---------- Tabs ---------- */
.kst .kst__tabs {
	display: flex;
	gap: 8px;
	margin: 0 0 24px;
	padding: 2px var(--kst-pad);
	overflow-x: auto;
	scrollbar-width: none;
}
.kst .kst__tabs::-webkit-scrollbar { display: none; }
.kst .kst__tab {
	flex: none;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	height: 44px;
	padding: 0 8px 0 18px;
	border: 0;
	border-radius: 999px;
	background: var(--kst-cream);
	color: var(--kst-dark);
	font-family: inherit;
	font-size: 15px;
	font-weight: 500;
	line-height: 1;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color .2s, color .2s;
}
.kst .kst__tab:hover,
.kst .kst__tab:focus { background: #F6E4C6; color: var(--kst-dark); outline: none; }
.kst .kst__tab[aria-selected="true"],
.kst .kst__tab[aria-selected="true"]:hover,
.kst .kst__tab[aria-selected="true"]:focus { background: var(--kst-dark); color: #fff; }
.kst .kst__tab:focus-visible { outline: 2px solid var(--kst-accent); outline-offset: 2px; }
.kst .kst__count {
	display: inline-grid;
	place-items: center;
	min-width: 28px;
	height: 28px;
	padding: 0 8px;
	border-radius: 999px;
	background: rgba(81, 38, 2, .1);
	font-size: 13px;
	font-weight: 700;
}
.kst .kst__tab[aria-selected="true"] .kst__count { background: rgba(255, 255, 255, .18); }

/* ---------- Carousel with edge fades in the block colour ---------- */
.kst .kst__panel { position: relative; }
.kst .kst__panel::before,
.kst .kst__panel::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	z-index: 2;
	width: var(--kst-fade);
	pointer-events: none;
	transition: opacity .25s ease;
}
.kst .kst__panel::before { left: 0; background: linear-gradient(90deg, var(--kst-bg) 12%, transparent); }
.kst .kst__panel::after { right: 0; background: linear-gradient(270deg, var(--kst-bg) 12%, transparent); }
.kst .kst__panel.is-start::before { opacity: 0; }
.kst .kst__panel.is-end::after { opacity: 0; }

.kst .kst__track {
	display: flex;
	gap: var(--kst-gap);
	margin: 0;
	padding: 4px 0 14px var(--kst-pad);
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scroll-padding-left: max(var(--kst-pad), var(--kst-snap));
	overscroll-behavior-x: contain;
	scrollbar-width: none;
	cursor: grab;
	outline: none;
}
.kst .kst__track::-webkit-scrollbar { display: none; }
.kst .kst__track::after { content: ""; flex: 0 0 max(0px, calc(var(--kst-pad) - var(--kst-gap))); }
.kst .kst__track:focus-visible { box-shadow: inset 0 0 0 2px var(--kst-accent); border-radius: 12px; }
.kst .kst__track.is-dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; }

/* ---------- Card ---------- */
.kst .kst-card {
	flex: 0 0 var(--kst-card-w);
	height: var(--kst-card-h);
	display: flex;
	flex-direction: column;
	margin: 0;
	overflow: hidden;
	scroll-snap-align: start;
	background: #fff;
	border: 1px solid rgba(81, 38, 2, .07);
	border-radius: 16px;
	box-shadow: 0 1px 2px rgba(81, 38, 2, .05), 0 6px 18px rgba(81, 38, 2, .08);
}
.kst .kst-card__photo {
	position: relative;
	flex: none;
	height: var(--kst-photo-h);
	overflow: hidden;
	background: var(--kst-cream);
}
.kst .kst-card__photo img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	margin: 0;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	object-fit: cover;
	object-position: 50% 18%;
	-webkit-user-drag: none;
	user-select: none;
}
.kst .kst-card__photo::after {
	content: "";
	position: absolute;
	inset: auto 0 0;
	height: 4px;
	background: var(--kst-accent);
}
.kst .kst-card__initials {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	font-size: 48px;
	font-weight: 600;
	letter-spacing: .04em;
	color: var(--kst-accent);
	background: radial-gradient(circle at 50% 42%, rgba(255, 132, 0, .14), transparent 62%), var(--kst-cream);
}
.kst .kst-card__body {
	flex: 1 1 auto;
	min-height: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 14px 10px 12px 16px;
}
.kst .kst-card__name {
	margin: 0;
	padding: 0 6px 0 0;
	font-family: var(--e-global-typography-primary-font-family, "Roboto"), system-ui, sans-serif;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 0;
	text-transform: none;
	color: var(--kst-dark);
}
/* Regalia scroll inside the card; soft shadows show there is more text above / below. */
.kst .kst-card__pos {
	flex: 1 1 auto;
	min-height: 0;
	margin: 0;
	padding: 0 6px 0 0;
	overflow-y: auto;
	font-size: 13px;
	line-height: 1.45;
	color: var(--kst-muted);
	scrollbar-width: thin;
	scrollbar-color: var(--kst-accent) transparent;
	background:
		linear-gradient(#fff 30%, rgba(255, 255, 255, 0)) center top,
		linear-gradient(rgba(255, 255, 255, 0), #fff 70%) center bottom,
		radial-gradient(farthest-side at 50% 0, rgba(81, 38, 2, .16), rgba(81, 38, 2, 0)) center top,
		radial-gradient(farthest-side at 50% 100%, rgba(81, 38, 2, .16), rgba(81, 38, 2, 0)) center bottom;
	background-repeat: no-repeat;
	background-size: 100% 36px, 100% 36px, 100% 12px, 100% 12px;
	background-attachment: local, local, scroll, scroll;
}
.kst .kst-card__pos:focus { outline: none; }
.kst .kst-card__pos:focus-visible { outline: 2px solid var(--kst-accent); outline-offset: 2px; }
.kst .kst-card__pos::-webkit-scrollbar { width: 4px; }
.kst .kst-card__pos::-webkit-scrollbar-track { background: transparent; }
.kst .kst-card__pos::-webkit-scrollbar-thumb { background: var(--kst-accent); border-radius: 4px; }

/* ---------- Position indicator ---------- */
.kst .kst__progress {
	position: relative;
	height: 4px;
	margin: 18px var(--kst-pad) 0;
	overflow: hidden;
	border-radius: 4px;
	background: rgba(81, 38, 2, .08);
}
.kst .kst__progress.is-full { visibility: hidden; }
.kst .kst__bar {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 100%;
	border-radius: 4px;
	background: var(--kst-accent);
	transition: left .12s linear, width .2s ease;
}

/* ---------- Phones and narrow columns (by block width, not screen width) ---------- */
@container (max-width: 640px) {
	.kst__in { padding: 24px 0 22px; }
	.kst .kst__head { margin-bottom: 16px; }
	.kst .kst__title { font-size: 20px; }
	.kst .kst__tabs { margin-bottom: 18px; }
	.kst .kst__tab { height: 40px; padding-left: 14px; font-size: 14px; }
	.kst .kst__count { min-width: 24px; height: 24px; font-size: 12px; }
	.kst .kst__track { gap: 12px; }
	.kst .kst__in { --kst-fade: 24px; --kst-snap: 24px; }
	.kst .kst-card { flex-basis: 74%; }
	.kst .kst-card__photo { height: 230px; }
	.kst .kst__progress { margin-top: 14px; }
}

@media (prefers-reduced-motion: reduce) {
	.kst .kst__bar,
	.kst .kst__panel::before,
	.kst .kst__panel::after { transition: none; }
}