/**
 * Staff Module - Frontend Styles
 *
 * Author: Tobalt — https://tobalt.lt
 */

/* ── Design Tokens ────────────────────────────────────── */
/* "Nordic institutional" palette — paper-warm surfaces, editorial hierarchy,
   a single teal accent used sparingly.
   v1.5.4: tokens defer to Elementor's Global Colors when available, then to
   built-in defaults. Site owners can override any token via Darbuotojai →
   Nustatymai → Spalvos (injected on wp_head as :root overrides). */
:root {
	--tbt-primary:      var(--e-global-color-primary,   #009E69);
	--tbt-primary-dark: var(--e-global-color-secondary, #007A50);
	--tbt-primary-light: #e6f7f0;
	--tbt-accent:       var(--e-global-color-accent,    #ad2727);
	--tbt-gold:         #b8963e;
	--tbt-heading:      var(--e-global-color-text,      #1a1f24);
	--tbt-body:         #556778;
	--tbt-body-dark:    #2e3b4a;
	--tbt-bg:           #fafaf7;
	--tbt-bg-cool:      #f3f5f8;
	--tbt-white:        #ffffff;
	--tbt-border:       #e8e5dc;
	--tbt-border-light: #f1eee6;
	--tbt-shadow-sm:    0 1px 2px rgba(30, 40, 50, .04);
	--tbt-shadow-md:    0 6px 20px rgba(30, 40, 50, .06);
	--tbt-shadow-lg:    0 20px 56px rgba(30, 40, 50, .12);
	--tbt-radius:       10px;
	--tbt-radius-lg:    14px;
	--tbt-transition:   .32s cubic-bezier(.4, 0, .15, 1);
	--tbt-container:    1280px;
	--tbt-eyebrow-size: 11px;
	--tbt-eyebrow-spacing: .12em;
	/* Accordion text-size hierarchy (Skyrius > Grupė > kontaktas).
	   Defaults equal the historical px so untouched sites render identically;
	   overridden per-site from Nustatymai → Tipografija (wp_head :root inject). */
	--tbt-acc-skyrius-size:   16px;
	--tbt-acc-grupe-size:     12px;
	--tbt-acc-kontaktas-size: 15px;
	/* Search field appearance. Defaults = the historical pill look so untouched
	   sites are unchanged; overridden per-site from Nustatymai → "Perimti
	   paieškos lauko stilių iš temos" (reads the Elementor kit form-field
	   tokens on wp_head — genuinely inherits the theme's input styling). */
	--tbt-search-radius:           100px;
	--tbt-search-bg:               var(--tbt-white);
	--tbt-search-border-width:     1px;
	--tbt-search-border-color:     var(--tbt-border);
	--tbt-search-focus-border:        var(--tbt-primary);
	--tbt-search-focus-border-width:  1px;
	--tbt-search-focus-ring-width:    4px;
}

/* ══════════════════════════════════════════════════════
   FILTER BAR — search + department pills
   ══════════════════════════════════════════════════════ */
.tbt-staff-filters-wrap {
	display: flex;
	flex-direction: column;
	gap: 20px;
	margin-bottom: 36px;
	padding-bottom: 24px;
	border-bottom: 1px solid var(--tbt-border);
}

.tbt-staff-search-wrap {
	position: relative;
	max-width: 560px;
}

.tbt-staff-search-wrap .tbt-staff-search-icon {
	position: absolute;
	left: 18px;
	top: 50%;
	transform: translateY(-50%);
	color: var(--tbt-body);
	width: 18px;
	height: 18px;
	font-size: 18px;
	pointer-events: none;
	transition: color var(--tbt-transition);
}

.tbt-staff-search-wrap:focus-within .tbt-staff-search-icon {
	color: var(--tbt-primary);
}

.tbt-staff-search {
	width: 100%;
	/* `!important` is intentional here: Hello Elementor / Elementor Kit's
	   `.elementor-kit-XX input:not(...)` rule has higher specificity and would
	   otherwise overwrite our height + horizontal padding, breaking icon alignment. */
	height: 50px !important;
	padding: 0 44px 0 48px !important;
	border: var(--tbt-search-border-width) solid var(--tbt-search-border-color);
	border-radius: var(--tbt-search-radius) !important;
	background: var(--tbt-search-bg);
	font-size: 15px;
	color: var(--tbt-heading);
	box-sizing: border-box;
	transition: var(--tbt-transition);
	box-shadow: inset 0 1px 2px rgba(30, 40, 50, .03);
}

/* ── Clear-search button (rendered + toggled via JS when input has value) ─
   Wrapper-scoped (0,2,0) so `border:none` beats Hello Elementor reset.css's
   `[type="button"], button { border: 1px solid #cc3366 }` (0,1,0) — that rule
   was painting a stray red border around the ✕. `!important` on display
   because the reset's `display:inline-block` also wins on equal specificity. */
.tbt-staff-search-wrap .tbt-staff-search-clear {
	position: absolute;
	right: 8px;
	top: 50%;
	transform: translateY(-50%);
	display: none !important;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border: none;
	background: transparent;
	color: var(--tbt-body);
	cursor: pointer;
	border-radius: 50%;
	transition: var(--tbt-transition);
	padding: 0;
}
.tbt-staff-search-wrap .tbt-staff-search-clear:hover {
	background: var(--tbt-bg);
	color: var(--tbt-primary);
}
/* No raw UA focus outline; keyboard users get a subtle brand ring instead. */
.tbt-staff-search-wrap .tbt-staff-search-clear:focus { outline: none; }
.tbt-staff-search-wrap .tbt-staff-search-clear:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--tbt-primary) 30%, transparent);
}
.tbt-staff-search-clear.is-visible {
	display: inline-flex !important;
}
.tbt-staff-search-clear svg { display: block; }

.tbt-staff-search:focus {
	outline: none;
	/* `!important` matches the height/padding/radius pattern above: Elementor's
	   `.elementor-kit-XX input…` rule out-ranks a plain `:focus` selector and
	   would otherwise keep the resting border colour/width on focus. */
	border-width: var(--tbt-search-focus-border-width) !important;
	border-style: solid !important;
	border-color: var(--tbt-search-focus-border) !important;
	box-shadow: 0 0 0 var(--tbt-search-focus-ring-width) color-mix(in srgb, var(--tbt-search-focus-border) 18%, transparent), inset 0 1px 2px rgba(30, 40, 50, .03);
}

.tbt-staff-search::placeholder {
	color: var(--tbt-body);
	opacity: .65;
}

/* Hide the browser-native <input type="search"> clear button (a tiny ✕ that
   Chrome/Safari/Edge show on hover/focus) and any theme-injected decoration —
   we render our own .tbt-staff-search-clear button on the right.
   `!important` because UA stylesheet + Hello Elementor reset both win on
   pseudo-element specificity otherwise. */
.tbt-staff-search::-webkit-search-cancel-button,
.tbt-staff-search::-webkit-search-decoration,
.tbt-staff-search::-webkit-search-results-button,
.tbt-staff-search::-webkit-search-results-decoration {
	-webkit-appearance: none !important;
	appearance: none !important;
	display: none !important;
	width: 0 !important;
	height: 0 !important;
}
.tbt-staff-search {
	-webkit-appearance: none !important;
	appearance: none !important;
}
/* Firefox + IE — moz-x not exposed; ms-clear is theirs. */
.tbt-staff-search::-ms-clear,
.tbt-staff-search::-ms-reveal {
	display: none !important;
	width: 0 !important;
	height: 0 !important;
}

/* ══════════════════════════════════════════════════════
   DEPARTMENT FILTER TABS
   ══════════════════════════════════════════════════════ */
.tbt-staff-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 32px;
	padding-bottom: 20px;
	border-bottom: 1px solid var(--tbt-border);
}

/* When inside the filters wrap, the wrap owns spacing + divider. */
.tbt-staff-filters-wrap .tbt-staff-filters {
	margin-bottom: 0;
	padding-bottom: 0;
	border-bottom: none;
}

.tbt-staff-filter-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 18px;
	border: 1px solid var(--tbt-border);
	border-radius: 100px;
	background: var(--tbt-white);
	color: var(--tbt-body-dark);
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	transition: var(--tbt-transition);
	white-space: nowrap;
}

.tbt-staff-filter-btn:hover {
	border-color: var(--tbt-heading);
	color: var(--tbt-heading);
	background: var(--tbt-bg);
}

.tbt-staff-filter-btn.active {
	background: var(--tbt-heading);
	border-color: var(--tbt-heading);
	color: var(--tbt-white);
}

.tbt-staff-filter-btn.active:hover {
	background: var(--tbt-primary);
	border-color: var(--tbt-primary);
}

.tbt-staff-filter-count {
	font-size: 11px;
	font-weight: 500;
	opacity: .7;
	font-variant-numeric: tabular-nums;
}

/* ══════════════════════════════════════════════════════
   STAFF GRID
   ══════════════════════════════════════════════════════ */
.tbt-staff-list,
.tbt-staff-grid {
	display: grid;
	gap: 28px;
	margin: 0 0 40px;
}

.tbt-staff-grid[data-columns="2"] { grid-template-columns: repeat(2, 1fr); }
.tbt-staff-grid[data-columns="3"] { grid-template-columns: repeat(3, 1fr); }
.tbt-staff-grid[data-columns="4"] { grid-template-columns: repeat(4, 1fr); }

/* ── Staff Card ──────────────────────────────────────── */
.tbt-staff-card {
	background: var(--tbt-white);
	border-radius: var(--tbt-radius);
	overflow: hidden;
	border: 1px solid var(--tbt-border);
	transition: transform var(--tbt-transition), box-shadow var(--tbt-transition), border-color var(--tbt-transition);
	opacity: 0;
	transform: translateY(20px);
	box-shadow: var(--tbt-shadow-sm);
}

.tbt-staff-card.tbt-visible {
	opacity: 1;
	transform: translateY(0);
	transition: opacity .5s ease, transform .5s ease, box-shadow var(--tbt-transition), border-color var(--tbt-transition);
}

.tbt-staff-card:hover {
	transform: translateY(-6px);
	box-shadow: var(--tbt-shadow-md);
	border-color: var(--tbt-primary);
}

/* ── Card Photo ──────────────────────────────────────── */
/* v1.11.2 — Inset framing: ~12px white margin around the photo inside
   the card instead of bleeding to edges. All four corners of the image
   are now rounded (was top-only). Featured-badge star (top:8px right:8px)
   ends up sitting on the white frame area near the image's top-right
   corner — intentional, looks like a sticker on a polaroid. */
.tbt-staff-photo {
	display: block;
	overflow: hidden;
	background: var(--tbt-white);
	padding: 12px 12px 0;
}

.tbt-staff-image {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	object-position: center top;
	border-radius: var(--tbt-radius);
	transition: transform .5s cubic-bezier(.2, 0, 0, 1), filter .4s ease;
	filter: saturate(.96);
}

.tbt-staff-card:hover .tbt-staff-image {
	transform: scale(1.04);
	filter: saturate(1);
}

.tbt-staff-placeholder {
	width: 100%;
	aspect-ratio: 4 / 3;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, var(--tbt-bg) 0%, var(--tbt-border-light) 100%);
	border-radius: var(--tbt-radius);
}

.tbt-staff-placeholder .dashicons {
	font-size: 56px;
	width: 56px;
	height: 56px;
	color: var(--tbt-border);
}

/* v1.11.0 — Initials+tone bubble fallback in card view when no photo.
   Shares the tone palette with the accordion .tbt-staff-acc-initials below. */
.tbt-staff-placeholder--initials {
	font-size: 48px;
	font-weight: 700;
	letter-spacing: 0.02em;
	color: var(--tbt-heading);
	background: var(--tbt-bg);
	user-select: none;
}

/* ── Featured Badge ──────────────────────────────────── */
.tbt-staff-featured {
	border-color: var(--tbt-primary-light);
}

.tbt-staff-featured .tbt-staff-photo {
	position: relative;
}

.tbt-staff-featured .tbt-staff-photo::after {
	content: '★';
	position: absolute;
	top: 8px;
	right: 8px;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: var(--tbt-gold);
	box-shadow: 0 0 0 3px rgba(184, 150, 62, .3);
	z-index: 1;
	color: #fff;
	font-size: 12px;
	line-height: 24px;
	text-align: center;
}

/* ── Card Info (below photo) ─────────────────────────── */
.tbt-staff-info {
	padding: 18px 20px 20px;
}

.tbt-staff-name {
	font-size: 17px;
	font-weight: 800;
	letter-spacing: -0.01em;
	line-height: 1.25;
	margin: 0 0 6px;
	color: var(--tbt-heading);
}

.tbt-staff-name a {
	color: inherit;
	text-decoration: none;
	background-image: linear-gradient(var(--tbt-primary), var(--tbt-primary));
	background-position: 0 100%;
	background-repeat: no-repeat;
	background-size: 0 1px;
	transition: background-size var(--tbt-transition), color var(--tbt-transition);
}

.tbt-staff-name a:hover {
	color: var(--tbt-primary);
	background-size: 100% 1px;
}

.tbt-staff-position {
	font-size: var(--tbt-eyebrow-size);
	font-weight: 600;
	letter-spacing: var(--tbt-eyebrow-spacing);
	text-transform: uppercase;
	color: var(--tbt-body);
	margin: 0;
	line-height: 1.4;
}

/* ── Card Department ─────────────────────────────────── */
.tbt-staff-department {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	margin-top: 6px;
}

.tbt-staff-dept-tag {
	display: inline-block;
	padding: 2px 10px;
	background: var(--tbt-primary-light);
	color: var(--tbt-primary);
	border-radius: 100px;
	font-size: 12px;
	font-weight: 500;
}

/* ── Card Contact ────────────────────────────────────── */
.tbt-staff-contact {
	margin-top: 14px;
	padding-top: 14px;
	border-top: 1px solid var(--tbt-border-light);
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.tbt-staff-contact p {
	margin: 0;
	font-size: 13px;
	display: flex;
	align-items: center;
	gap: 8px;
	color: var(--tbt-body);
	line-height: 1.4;
}

.tbt-staff-contact .dashicons {
	width: 14px;
	height: 14px;
	font-size: 14px;
	color: var(--tbt-primary);
	flex-shrink: 0;
}

.tbt-staff-contact a {
	color: var(--tbt-body-dark);
	text-decoration: none;
	transition: var(--tbt-transition);
	word-break: break-word;
}

.tbt-staff-contact a:hover {
	color: var(--tbt-primary);
}

/* v1.11.1 — Each contact link inside the card was inheriting only the
   parent flex column from .tbt-staff-contact (gap between rows). The
   link's own children (icon span + text span) had no layout rule,
   so the SVG and email/phone text rendered as inline elements with
   default whitespace gap and inconsistent vertical alignment. Match
   the accordion's icon+text composition: flex row, fixed gap, shared
   hover state for icon colour. */
.tbt-staff-card-contact {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	line-height: 1.4;
}

.tbt-staff-card-contact > span:last-child {
	min-width: 0;
	word-break: break-word;
}

.tbt-staff-card-contact:hover .tbt-staff-card-icon {
	color: var(--tbt-primary);
}

/* ══════════════════════════════════════════════════════
   PAGINATION
   ══════════════════════════════════════════════════════ */
.tbt-staff-pagination {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 6px;
	margin: 32px 0 0;
	padding-top: 24px;
	border-top: 1px solid var(--tbt-border);
}

.tbt-staff-pagination a,
.tbt-staff-pagination span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 12px;
	border: 1px solid var(--tbt-border);
	border-radius: var(--tbt-radius);
	font-size: 14px;
	font-weight: 500;
	color: var(--tbt-body-dark);
	text-decoration: none;
	transition: var(--tbt-transition);
}

.tbt-staff-pagination a:hover {
	border-color: var(--tbt-primary);
	color: var(--tbt-primary);
	background: var(--tbt-primary-light);
}

.tbt-staff-pagination .current {
	background: var(--tbt-primary);
	border-color: var(--tbt-primary);
	color: var(--tbt-white);
}

.tbt-staff-pagination .dots {
	border: none;
	padding: 0 4px;
	min-width: auto;
}

/* ══════════════════════════════════════════════════════
   CAROUSEL
   ══════════════════════════════════════════════════════ */
.tbt-staff-carousel-wrap {
	position: relative;
	margin: 0 0 40px;
}

.tbt-staff-carousel {
	display: flex;
	gap: 24px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	padding: 8px 0 24px;
}

.tbt-staff-carousel::-webkit-scrollbar {
	display: none;
}

.tbt-staff-carousel .tbt-staff-card {
	flex: 0 0 280px;
	scroll-snap-align: start;
	opacity: 1;
	transform: none;
}

.tbt-carousel-btn {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: var(--tbt-white);
	border: 1px solid var(--tbt-border);
	box-shadow: var(--tbt-shadow-sm);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: var(--tbt-transition);
	z-index: 5;
	color: var(--tbt-heading);
	font-size: 18px;
	line-height: 1;
}

.tbt-carousel-btn:hover {
	background: var(--tbt-heading);
	border-color: var(--tbt-heading);
	color: var(--tbt-white);
	box-shadow: var(--tbt-shadow-md);
}

.tbt-carousel-btn--prev { left: -20px; }
.tbt-carousel-btn--next { right: -20px; }

.tbt-carousel-dots {
	display: flex;
	justify-content: center;
	gap: 6px;
	margin-top: 16px;
}

.tbt-carousel-dot {
	width: 28px;
	height: 3px;
	border-radius: 2px;
	background: var(--tbt-border);
	border: none;
	cursor: pointer;
	transition: var(--tbt-transition);
	padding: 0;
}

.tbt-carousel-dot:hover {
	background: var(--tbt-body);
}

.tbt-carousel-dot.active {
	background: var(--tbt-primary);
	width: 48px;
}

/* ══════════════════════════════════════════════════════
   GROUPED VIEW — Department Sections
   ══════════════════════════════════════════════════════ */
.tbt-staff-group {
	margin-bottom: 48px;
}

.tbt-staff-group:last-child {
	margin-bottom: 0;
}

.tbt-staff-group-logo {
	margin: 0 0 12px;
	text-align: center;
}

.tbt-staff-group-logo-img {
	max-width: 200px;
	height: auto;
	display: inline-block;
	max-height: 90px;
	width: auto;
	object-fit: contain;
}

.tbt-staff-group-title {
	position: relative;
	font-size: 22px;
	font-weight: 800;
	letter-spacing: -0.015em;
	color: var(--tbt-heading);
	margin: 0 0 24px;
	padding: 0 0 14px;
	border-bottom: 1px solid var(--tbt-border);
}

.tbt-staff-group-title::before {
	content: 'Skyrius';
	display: block;
	font-size: var(--tbt-eyebrow-size);
	font-weight: 700;
	letter-spacing: var(--tbt-eyebrow-spacing);
	text-transform: uppercase;
	color: var(--tbt-primary);
	margin-bottom: 6px;
}

.tbt-staff-group:has(.tbt-staff-group-logo) .tbt-staff-group-title {
	text-align: center;
	border-bottom: none;
	padding-bottom: 0;
	margin-bottom: 24px;
	font-size: 17px;
	color: var(--tbt-heading);
	text-transform: uppercase;
	letter-spacing: .06em;
	font-weight: 700;
}

.tbt-staff-group:has(.tbt-staff-group-logo) .tbt-staff-group-title::before {
	display: none;
}

.tbt-staff-group-list {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
}

@media (max-width: 900px) {
	.tbt-staff-group-list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 600px) {
	.tbt-staff-group-list {
		grid-template-columns: 1fr;
	}
}

/* ── Staff Row (grouped view) ────────────────────────── */
.tbt-staff-row {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 20px 18px 22px;
	background: var(--tbt-white);
	border: 1px solid var(--tbt-border-light);
	border-radius: var(--tbt-radius);
	transition: box-shadow var(--tbt-transition), transform var(--tbt-transition), border-color var(--tbt-transition);
	height: 100%;
	box-sizing: border-box;
}

.tbt-staff-row:hover {
	box-shadow: var(--tbt-shadow-md);
	transform: translateY(-3px);
	border-color: var(--tbt-border);
}

.tbt-staff-row-photo {
	display: block;
	text-decoration: none;
	text-align: center;
}

.tbt-staff-row-image {
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	object-position: center top;
	border-radius: 50%;
	max-width: 140px;
	display: block;
	margin: 0 auto;
}

.tbt-staff-row-placeholder {
	width: 100%;
	aspect-ratio: 1 / 1;
	max-width: 140px;
	margin: 0 auto;
	background: var(--tbt-bg);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.tbt-staff-row-placeholder .dashicons {
	font-size: 36px;
	width: 36px;
	height: 36px;
	color: var(--tbt-border);
}

.tbt-staff-row-info {
	padding-top: 2px;
}

.tbt-staff-row-name {
	font-size: 17px;
	font-weight: 800;
	letter-spacing: -0.01em;
	margin: 0 0 4px;
	line-height: 1.25;
	text-align: center;
}

.tbt-staff-row-name a {
	color: var(--tbt-heading);
	text-decoration: none;
	transition: var(--tbt-transition);
}

.tbt-staff-row-name a:hover {
	color: var(--tbt-primary);
}

.tbt-staff-row-position {
	font-size: var(--tbt-eyebrow-size);
	font-weight: 600;
	letter-spacing: var(--tbt-eyebrow-spacing);
	text-transform: uppercase;
	color: var(--tbt-primary);
	margin: 0 0 10px;
	text-align: center;
}

.tbt-staff-row-quals {
	font-size: 13px;
	color: var(--tbt-body);
	margin: 0 0 12px;
	line-height: 1.55;
	text-align: center;
	padding: 0 4px;
}

.tbt-staff-row-contact {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding-top: 12px;
	margin-top: auto;
	border-top: 1px solid var(--tbt-border-light);
}

.tbt-staff-row-contact a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-size: 13px;
	color: var(--tbt-body-dark);
	text-decoration: none;
	transition: var(--tbt-transition);
	word-break: break-word;
}

.tbt-staff-row-contact a:hover {
	color: var(--tbt-primary);
}

.tbt-staff-row-contact .dashicons {
	width: 14px;
	height: 14px;
	font-size: 14px;
	color: var(--tbt-primary);
}

/* ══════════════════════════════════════════════════════
   SKIN SWITCHER — [tobalt_staff_skins] button bar
   ══════════════════════════════════════════════════════ */
.tbt-staff-skin-nav {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px;
	margin: 0 0 28px;
	padding: 14px 18px;
	background: var(--tbt-bg);
	border: 1px solid var(--tbt-border);
	border-radius: var(--tbt-radius);
}

.tbt-staff-skin-nav-label {
	font-size: var(--tbt-eyebrow-size);
	font-weight: 700;
	letter-spacing: var(--tbt-eyebrow-spacing);
	text-transform: uppercase;
	color: var(--tbt-body);
	white-space: nowrap;
}

.tbt-staff-skin-nav-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.tbt-staff-skin-btn {
	display: inline-flex;
	align-items: center;
	padding: 7px 14px;
	border: 1px solid var(--tbt-border);
	border-radius: 100px;
	background: var(--tbt-white);
	color: var(--tbt-body-dark);
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
	transition: var(--tbt-transition);
	white-space: nowrap;
}

.tbt-staff-skin-btn:hover {
	border-color: var(--tbt-heading);
	color: var(--tbt-heading);
	background: var(--tbt-white);
}

.tbt-staff-skin-btn.is-active {
	background: var(--tbt-heading);
	border-color: var(--tbt-heading);
	color: var(--tbt-white);
	pointer-events: none;
}

/* ══════════════════════════════════════════════════════
   ACCORDION VIEW — collapsible department sections
   ══════════════════════════════════════════════════════ */
.tbt-staff-accordion {
	display: block;
	margin: 0 0 40px;
	background: var(--tbt-white);
	border-radius: var(--tbt-radius-lg);
	overflow: hidden;
	border: 1px solid var(--tbt-border);
	box-shadow: var(--tbt-shadow-sm);
}

.tbt-staff-acc-group {
	position: relative;
	border-top: 1px solid var(--tbt-border);
	transition: background var(--tbt-transition);
}

.tbt-staff-acc-group:first-child {
	border-top: none;
}

.tbt-staff-acc-group::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 3px;
	background: var(--tbt-primary);
	transform: scaleY(0);
	transform-origin: top;
	transition: transform var(--tbt-transition);
}

.tbt-staff-acc-group[open]::before {
	transform: scaleY(1);
}

.tbt-staff-acc-group[open] {
	background: var(--tbt-bg);
}

.tbt-staff-acc-summary {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 22px 24px;
	cursor: pointer;
	font-size: var(--tbt-acc-skyrius-size);
	font-weight: 700;
	letter-spacing: -0.005em;
	/* v1.8.0 — closed = body gray (downplay), open = heading teal (highlight). */
	color: var(--tbt-body);
	list-style: none;
	user-select: none;
	transition: color var(--tbt-transition);
}

.tbt-staff-acc-group[open] > .tbt-staff-acc-summary {
	color: var(--tbt-heading);
}

.tbt-staff-acc-summary::-webkit-details-marker {
	display: none;
}

.tbt-staff-acc-summary::after {
	content: '';
	width: 9px;
	height: 9px;
	margin-left: auto;
	border-right: 1.5px solid var(--tbt-body);
	border-bottom: 1.5px solid var(--tbt-body);
	transform: rotate(45deg) translate(-2px, -2px);
	transition: transform var(--tbt-transition), border-color var(--tbt-transition);
}

.tbt-staff-acc-group[open] > .tbt-staff-acc-summary::after {
	transform: rotate(-135deg) translate(-2px, -2px);
	border-color: var(--tbt-primary);
}

.tbt-staff-acc-summary:hover {
	color: var(--tbt-primary);
}

.tbt-staff-acc-title {
	flex: 1 1 auto;
}

.tbt-staff-acc-count {
	font-size: var(--tbt-eyebrow-size);
	font-weight: 600;
	letter-spacing: var(--tbt-eyebrow-spacing);
	text-transform: uppercase;
	color: var(--tbt-body);
	padding: 3px 10px;
	background: var(--tbt-bg);
	border-radius: 100px;
}

.tbt-staff-acc-group[open] .tbt-staff-acc-count {
	background: var(--tbt-primary-light);
	color: var(--tbt-primary-dark);
}

.tbt-staff-acc-list {
	list-style: none;
	margin: 0;
	padding: 0 24px 20px;
}

/* v1.8.0 — Skyrius body wrapper holds direct rows + per-grupė subgroups. */
.tbt-staff-acc-body {
	display: block;
}

/* v1.8.0 — Subgroup (grupė inside skyrius). */
.tbt-staff-acc-subgroup {
	margin: 4px 0 0;
}

.tbt-staff-acc-subgroup .tbt-staff-acc-list {
	padding: 0 24px 16px;
}

/* Wrapper-scoped: out-rank Elementor's `.elementor-kit-<id> h4` (0,1,1),
   which would otherwise override this h4's size with the global heading size. */
.tbt-staff-accordion .tbt-staff-acc-subtitle {
	margin: 0;
	padding: 14px 24px 6px;
	font-size: var(--tbt-acc-grupe-size);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--tbt-heading);
}

.tbt-staff-acc-subcount {
	font-weight: 500;
	color: var(--tbt-body);
	margin-left: 4px;
	letter-spacing: 0;
	text-transform: none;
}

/* v1.8.0 — When wrap is filtering by search query, surface the
   `Skyrius › Grupė` breadcrumb under each name so multi-section
   matches keep their context. Hidden in default browse mode. */
.tbt-staff-acc-breadcrumb {
	display: none;
	margin-top: 3px;
	font-size: 11.5px;
	font-weight: 500;
	color: var(--tbt-body);
	letter-spacing: 0.01em;
}

.tbt-staff-wrap.is-searching .tbt-staff-acc-breadcrumb {
	display: block;
}

.tbt-staff-acc-row {
	display: flex;
	align-items: center;
	gap: 18px;
	padding: 16px 0;
	border-top: 1px solid var(--tbt-border-light);
	transition: padding var(--tbt-transition);
}

.tbt-staff-acc-row:first-child {
	border-top: 1px solid var(--tbt-border);
	margin-top: 4px;
}

.tbt-staff-acc-photo {
	display: block;
	flex-shrink: 0;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	overflow: hidden;
	background: var(--tbt-bg);
	box-shadow: 0 0 0 2px var(--tbt-white), 0 0 0 3px var(--tbt-border-light);
	transition: box-shadow var(--tbt-transition);
}

.tbt-staff-acc-row:hover .tbt-staff-acc-photo {
	box-shadow: 0 0 0 2px var(--tbt-white), 0 0 0 3px var(--tbt-primary-light);
}

/* Double-class beats Elementor's .elementor img { border-radius: 0 } rule. */
.tbt-staff-acc-photo .tbt-staff-acc-img {
	width: 40px;
	height: 40px;
	object-fit: cover;
	object-position: center top;
	display: block;
	border-radius: 50%;
}

.tbt-staff-acc-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--tbt-bg) 0%, var(--tbt-border-light) 100%);
}

.tbt-staff-acc-placeholder .dashicons {
	width: 18px;
	height: 18px;
	font-size: 18px;
	color: var(--tbt-border);
}

/* Initial-letter avatars when no photo — six muted tones derived from the name hash */
.tbt-staff-acc-initials {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.02em;
	color: var(--tbt-heading);
	background: var(--tbt-bg);
	user-select: none;
}

.tbt-staff-acc-initials[data-tone="1"],
.tbt-staff-placeholder--initials[data-tone="1"] { background: #eef4ff; color: #2c4d8a; }
.tbt-staff-acc-initials[data-tone="2"],
.tbt-staff-placeholder--initials[data-tone="2"] { background: #f3eef9; color: #5a3d8a; }
.tbt-staff-acc-initials[data-tone="3"],
.tbt-staff-placeholder--initials[data-tone="3"] { background: #fff1ec; color: #8a3d2c; }
.tbt-staff-acc-initials[data-tone="4"],
.tbt-staff-placeholder--initials[data-tone="4"] { background: #ecf6f0; color: #2e6b48; }
.tbt-staff-acc-initials[data-tone="5"],
.tbt-staff-placeholder--initials[data-tone="5"] { background: #fbf3df; color: #6e5a1f; }
.tbt-staff-acc-initials[data-tone="6"],
.tbt-staff-placeholder--initials[data-tone="6"] { background: #fae9ef; color: #7d2c4d; }

/* v1.11.0 — "Darbo grafikas" schedule block + accordion-row inline pill.
   v1.12.0 — pre-line honors raw newlines from the textarea so editors can
   put each weekday on its own line; accordion pill becomes a block so it
   doesn't squeeze multi-line content into one row. */
.tbt-staff-schedule {
	font-size: 13px;
	line-height: 1.4;
	color: var(--tbt-body);
	margin: 6px 0 0;
	white-space: pre-line;
}
.tbt-staff-schedule strong {
	color: var(--tbt-heading);
	font-weight: 600;
	margin-right: 4px;
}
.tbt-staff-acc-schedule {
	display: block;
	font-size: 12px;
	font-weight: 500;
	color: var(--tbt-body);
	background: var(--tbt-bg);
	border: 1px solid var(--tbt-border-light);
	border-radius: 4px;
	padding: 4px 6px;
	margin: 4px 0 0;
}
.tbt-staff-profile-schedule {
	white-space: pre-line;
	line-height: 1.5;
	color: var(--tbt-body);
}

/* Inline SVG icons in the contact block — replace dashicons */
.tbt-staff-acc-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--tbt-bg);
	color: var(--tbt-body);
	flex-shrink: 0;
	transition: background var(--tbt-transition), color var(--tbt-transition), transform var(--tbt-transition);
}

.tbt-staff-acc-contact a:hover .tbt-staff-acc-icon {
	background: var(--tbt-primary-light);
	color: var(--tbt-primary);
	transform: scale(1.08);
}

.tbt-staff-acc-icon svg {
	display: block;
}

.tbt-staff-acc-num,
.tbt-staff-acc-addr {
	font-variant-numeric: tabular-nums;
}

.tbt-staff-acc-main {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.tbt-staff-acc-name {
	font-size: var(--tbt-acc-kontaktas-size);
	font-weight: 700;
	letter-spacing: -0.005em;
	color: var(--tbt-heading);
	text-decoration: none;
	transition: color var(--tbt-transition);
	line-height: 1.3;
}

.tbt-staff-acc-name:hover {
	color: var(--tbt-primary);
}

.tbt-staff-acc-position {
	font-size: calc(var(--tbt-acc-kontaktas-size) - 4px);
	font-weight: 600;
	letter-spacing: var(--tbt-eyebrow-spacing);
	text-transform: uppercase;
	color: var(--tbt-body);
	line-height: 1.4;
}

.tbt-staff-acc-contact {
	display: flex;
	flex-wrap: wrap;
	gap: 18px;
	flex-shrink: 0;
	align-items: center;
}

.tbt-staff-acc-contact a {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: calc(var(--tbt-acc-kontaktas-size) - 2px);
	color: var(--tbt-body-dark);
	text-decoration: none;
	transition: color var(--tbt-transition);
	font-variant-numeric: tabular-nums;
}

.tbt-staff-acc-contact a:hover {
	color: var(--tbt-primary);
}

.tbt-staff-acc-contact .dashicons {
	width: 14px;
	height: 14px;
	font-size: 14px;
	color: var(--tbt-body);
	flex-shrink: 0;
	transition: color var(--tbt-transition);
}

.tbt-staff-acc-contact a:hover .dashicons {
	color: var(--tbt-primary);
}

@media (max-width: 720px) {
	.tbt-staff-acc-summary {
		padding: 18px 18px;
	}
	.tbt-staff-acc-list {
		padding: 0 18px 18px;
	}
	.tbt-staff-acc-row {
		flex-wrap: wrap;
		gap: 14px;
	}
	.tbt-staff-acc-contact {
		width: 100%;
		padding-left: 58px;
		gap: 14px;
	}
}

/* ══════════════════════════════════════════════════════
   SINGLE STAFF PAGE
   ══════════════════════════════════════════════════════ */
.tbt-single {
	max-width: 960px;
	margin: 0 auto;
}

/* ── Breadcrumb ─────────────────────────────────────── */
.tbt-staff-breadcrumb {
	font-size: 13px;
	color: var(--tbt-body);
	margin-bottom: 28px;
}

.tbt-staff-breadcrumb a {
	color: var(--tbt-primary);
	text-decoration: none;
}

.tbt-staff-breadcrumb a:hover {
	color: var(--tbt-accent);
}

.tbt-staff-breadcrumb .sep {
	margin: 0 8px;
	opacity: .4;
}

/* ── Hero ───────────────────────────────────────────── */
.tbt-single-hero {
	display: grid;
	grid-template-columns: 280px 1fr;
	gap: 44px;
	align-items: start;
	padding: 36px;
	background: var(--tbt-white);
	border: 1px solid var(--tbt-border);
	border-radius: var(--tbt-radius-lg);
	margin-bottom: 36px;
	position: relative;
	overflow: hidden;
}

/* No-photo profile collapses to single column */
.tbt-single--nophoto .tbt-single-hero {
	grid-template-columns: 1fr;
	gap: 0;
}

.tbt-single-hero::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 4px;
	background: linear-gradient(90deg, var(--tbt-primary), var(--tbt-primary-dark));
}

/* ── Photo ──────────────────────────────────────────── */
.tbt-single-photo {
	position: relative;
}

.tbt-single-img {
	width: 100%;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	border-radius: var(--tbt-radius);
	box-shadow: var(--tbt-shadow-md);
}

.tbt-single-placeholder {
	width: 100%;
	aspect-ratio: 3 / 4;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, var(--tbt-bg) 0%, var(--tbt-border-light) 100%);
	border-radius: var(--tbt-radius);
}

.tbt-single-placeholder .dashicons {
	font-size: 72px;
	width: 72px;
	height: 72px;
	color: var(--tbt-border);
}

/* ── Intro info ─────────────────────────────────────── */
.tbt-single-intro {
	padding-top: 4px;
}

.tbt-single-name {
	font-size: 32px;
	font-weight: 700;
	color: var(--tbt-heading);
	line-height: 1.15;
	margin: 0 0 8px;
}

.tbt-single-position {
	font-size: 17px;
	font-weight: 500;
	color: var(--tbt-primary);
	margin: 0 0 16px;
	line-height: 1.4;
}

.tbt-single-departments {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 18px;
}

/* tbt-single-dept and tbt-single-back share the tbt-single-action visual
   language — same pill shell + icon-circle on hover. */
.tbt-single-dept {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 14px 8px 14px;
	border: 1px solid var(--tbt-border);
	border-radius: 100px;
	font-size: 14px;
	font-weight: 500;
	color: var(--tbt-body-dark);
	text-decoration: none;
	background: var(--tbt-white);
	transition: var(--tbt-transition);
}
.tbt-single-dept:hover {
	border-color: var(--tbt-primary);
	color: var(--tbt-primary);
	background: var(--tbt-primary-light);
}

.tbt-single-subjects {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	font-size: 15px;
	color: var(--tbt-body-dark);
	line-height: 1.5;
	margin-bottom: 20px;
	padding: 12px 16px;
	background: var(--tbt-bg);
	border-radius: var(--tbt-radius);
}

.tbt-single-subjects .dashicons {
	width: 18px;
	height: 18px;
	font-size: 18px;
	color: var(--tbt-primary);
	flex-shrink: 0;
	margin-top: 2px;
}

/* ── Contact actions ────────────────────────────────── */
.tbt-single-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 14px;
}

.tbt-single-action {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 14px 8px 8px;
	border: 1px solid var(--tbt-border);
	border-radius: 100px;
	font-size: 14px;
	font-weight: 500;
	color: var(--tbt-body-dark);
	text-decoration: none;
	transition: var(--tbt-transition);
	background: var(--tbt-white);
}

.tbt-single-action:hover {
	border-color: var(--tbt-primary);
	color: var(--tbt-primary);
	background: var(--tbt-primary-light);
}

.tbt-single-action-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--tbt-bg);
	color: var(--tbt-body);
	flex-shrink: 0;
	transition: background var(--tbt-transition), color var(--tbt-transition);
}

.tbt-single-action:hover .tbt-single-action-icon {
	background: var(--tbt-primary-light);
	color: var(--tbt-primary);
}

.tbt-single-action-icon svg {
	display: block;
}

.tbt-single-office {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 14px;
	color: var(--tbt-body);
}

.tbt-single-subjects-icon {
	display: inline-flex;
	align-items: center;
	color: var(--tbt-primary);
	flex-shrink: 0;
	margin-top: 2px;
}

.tbt-single-contact-link {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: var(--tbt-heading);
	text-decoration: none;
	transition: color var(--tbt-transition);
}

.tbt-single-contact-link:hover {
	color: var(--tbt-primary);
}

.tbt-single-contact-link:hover .tbt-single-action-icon {
	background: var(--tbt-primary-light);
	color: var(--tbt-primary);
}

.tbt-single-contact-list .tbt-single-action-icon {
	width: 24px;
	height: 24px;
}

/* ── Bio section ────────────────────────────────────── */
.tbt-single-bio {
	margin-bottom: 36px;
}

.tbt-single-section-title {
	font-size: 20px;
	font-weight: 700;
	color: var(--tbt-heading);
	margin: 0 0 16px;
	padding-bottom: 12px;
	border-bottom: 2px solid var(--tbt-primary);
}

.tbt-single-bio-text {
	font-size: 16px;
	line-height: 1.75;
	color: var(--tbt-body-dark);
}

.tbt-single-bio-text p {
	margin: 0 0 12px;
}

.tbt-single-bio-text p:last-child {
	margin-bottom: 0;
}

/* ── Detail cards ───────────────────────────────────── */
.tbt-single-details {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 20px;
	margin-bottom: 40px;
}

.tbt-single-card {
	background: var(--tbt-white);
	border: 1px solid var(--tbt-border);
	border-radius: var(--tbt-radius-lg);
	padding: 24px;
	position: relative;
}

.tbt-single-card-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 10px;
	background: var(--tbt-primary-light);
	margin-bottom: 14px;
}

.tbt-single-card-icon .dashicons {
	width: 20px;
	height: 20px;
	font-size: 20px;
	color: var(--tbt-primary);
}

.tbt-single-card h3 {
	font-size: 15px;
	font-weight: 700;
	color: var(--tbt-heading);
	margin: 0 0 12px;
}

.tbt-single-card-body {
	font-size: 15px;
	line-height: 1.7;
	color: var(--tbt-body-dark);
}

/* ── Contact list in cards ──────────────────────────── */
.tbt-single-contact-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.tbt-single-contact-list li {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 10px;
	font-size: 14px;
	color: var(--tbt-body-dark);
}

.tbt-single-contact-list li:last-child {
	margin-bottom: 0;
}

.tbt-single-contact-list .dashicons {
	width: 16px;
	height: 16px;
	font-size: 16px;
	color: var(--tbt-primary);
	flex-shrink: 0;
}

.tbt-single-contact-list a {
	color: var(--tbt-heading);
	text-decoration: none;
	transition: var(--tbt-transition);
}

.tbt-single-contact-list a:hover {
	color: var(--tbt-primary);
}

/* ── Bottom nav ─────────────────────────────────────── */
.tbt-single-nav {
	padding-top: 24px;
	border-top: 1px solid var(--tbt-border);
}

.tbt-single-back {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 14px 8px 8px;
	border: 1px solid var(--tbt-border);
	border-radius: 100px;
	font-size: 14px;
	font-weight: 500;
	color: var(--tbt-body-dark);
	text-decoration: none;
	background: var(--tbt-white);
	transition: var(--tbt-transition);
}
.tbt-single-back:hover {
	border-color: var(--tbt-primary);
	color: var(--tbt-primary);
	background: var(--tbt-primary-light);
}
.tbt-single-back .dashicons {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--tbt-bg);
	color: var(--tbt-body);
	font-size: 16px;
	flex-shrink: 0;
	transition: background var(--tbt-transition), color var(--tbt-transition);
}
.tbt-single-back:hover .dashicons {
	background: var(--tbt-primary-light);
	color: var(--tbt-primary);
}

/* ══════════════════════════════════════════════════════
   PROFILE ([tobalt_staff_single] shortcode)
   ══════════════════════════════════════════════════════ */
.tbt-staff-profile {
	background: var(--tbt-white);
	border: 1px solid var(--tbt-border);
	border-radius: var(--tbt-radius-lg);
	padding: 36px;
	margin: 32px 0;
}

.tbt-staff-profile-header {
	display: grid;
	grid-template-columns: 180px 1fr;
	gap: 32px;
	margin-bottom: 32px;
	padding-bottom: 28px;
	border-bottom: 1px solid var(--tbt-border-light);
}

.tbt-staff-profile-image {
	width: 100%;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	border-radius: var(--tbt-radius);
}

.tbt-staff-placeholder-large {
	width: 100%;
	aspect-ratio: 3 / 4;
	background: var(--tbt-bg);
	border-radius: var(--tbt-radius);
	display: flex;
	align-items: center;
	justify-content: center;
}

.tbt-staff-placeholder-large .dashicons {
	font-size: 56px;
	width: 56px;
	height: 56px;
	color: var(--tbt-border);
}

.tbt-staff-profile-name {
	font-size: 26px;
	font-weight: 700;
	color: var(--tbt-heading);
	margin: 0 0 6px;
	line-height: 1.2;
}

.tbt-staff-profile-position {
	font-size: 15px;
	color: var(--tbt-primary);
	margin: 0 0 14px;
	font-weight: 500;
}

.tbt-staff-profile-department,
.tbt-staff-profile-subjects {
	font-size: 14px;
	color: var(--tbt-body);
	margin: 0 0 6px;
}

.tbt-staff-profile-department strong,
.tbt-staff-profile-subjects strong {
	color: var(--tbt-heading);
}

.tbt-staff-profile-bio {
	margin-bottom: 28px;
	line-height: 1.7;
	color: var(--tbt-body-dark);
}

.tbt-staff-profile-details {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 24px;
}

.tbt-staff-profile-section h3 {
	font-size: 15px;
	font-weight: 700;
	color: var(--tbt-heading);
	margin: 0 0 12px;
	padding-bottom: 10px;
	border-bottom: 2px solid var(--tbt-primary-light);
}

.tbt-staff-profile-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.tbt-staff-profile-list li {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin-bottom: 8px;
	font-size: 14px;
	color: var(--tbt-body-dark);
}

.tbt-staff-profile-list .dashicons {
	width: 18px;
	height: 18px;
	font-size: 18px;
	color: var(--tbt-primary);
	margin-top: 2px;
	flex-shrink: 0;
}

.tbt-staff-profile-hours,
.tbt-staff-profile-qualifications {
	font-size: 14px;
	line-height: 1.6;
	color: var(--tbt-body-dark);
}

/* ══════════════════════════════════════════════════════
   UTILITIES
   ══════════════════════════════════════════════════════ */
.tbt-no-staff {
	padding: 48px 32px;
	text-align: center;
	background: var(--tbt-bg);
	border: 2px dashed var(--tbt-border);
	border-radius: var(--tbt-radius-lg);
	color: var(--tbt-body);
	font-size: 15px;
}

.tbt-error {
	padding: 16px 20px;
	background: #fef2f2;
	border: 1px solid #fecaca;
	border-radius: var(--tbt-radius);
	color: #991b1b;
	font-weight: 500;
	font-size: 14px;
}

/* ══════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
	.tbt-staff-grid[data-columns="4"] { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 768px) {
	.tbt-staff-list,
	.tbt-staff-grid {
		grid-template-columns: repeat(2, 1fr) !important;
		gap: 16px;
	}

	.tbt-single-hero {
		grid-template-columns: 1fr;
		gap: 24px;
		padding: 24px;
		text-align: center;
	}

	.tbt-single-photo {
		max-width: 240px;
		margin: 0 auto;
	}

	.tbt-single-name { font-size: 26px; }
	.tbt-single-departments { justify-content: center; }
	.tbt-single-actions { justify-content: center; }
	.tbt-single-subjects { text-align: left; }

	.tbt-single-details {
		grid-template-columns: 1fr;
	}

	.tbt-staff-profile-header {
		grid-template-columns: 1fr;
		text-align: center;
	}

	.tbt-staff-profile-image,
	.tbt-staff-placeholder-large {
		max-width: 200px;
		margin: 0 auto;
	}

	.tbt-staff-profile-details {
		grid-template-columns: 1fr;
	}

	.tbt-carousel-btn--prev { left: 4px; }
	.tbt-carousel-btn--next { right: 4px; }
}

@media (max-width: 480px) {
	.tbt-staff-list,
	.tbt-staff-grid {
		grid-template-columns: 1fr !important;
	}

	.tbt-staff-carousel .tbt-staff-card {
		flex: 0 0 240px;
	}

	.tbt-staff-filters {
		gap: 6px;
	}

	.tbt-staff-filter-btn {
		padding: 6px 14px;
		font-size: 13px;
	}

	.tbt-staff-row {
		grid-template-columns: 72px 1fr;
		gap: 14px;
	}

	.tbt-staff-row-image,
	.tbt-staff-row-placeholder {
		width: 72px;
		height: 72px;
	}

	.tbt-staff-group-title { font-size: 19px; }
}

/* ── No-results message (search yields zero matches) ─────── */
.tbt-staff-no-results {
	margin: 24px 0;
	padding: 24px;
	text-align: center;
	color: var(--tbt-body);
	background: var(--tbt-bg);
	border: 1px dashed var(--tbt-border);
	border-radius: var(--tbt-radius);
	font-size: 15px;
	font-weight: 500;
}

/* ══════════════════════════════════════════════════════
   PAREIGYBĖ (job-description PDF) link — v1.6.0
   Inherits theme tokens; appears alongside email/phone
   in card / row / accordion / single-profile views.
   ══════════════════════════════════════════════════════ */
.tbt-staff-acc-pareigybe,
.tbt-staff-card-pareigybe,
.tbt-staff-row-pareigybe,
.tbt-staff-dept-nuostatai {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: 13px;
	color: var(--tbt-body-dark);
	text-decoration: none;
	transition: color var(--tbt-transition);
}
.tbt-staff-acc-pareigybe:hover,
.tbt-staff-card-pareigybe:hover,
.tbt-staff-row-pareigybe:hover,
.tbt-staff-dept-nuostatai:hover {
	color: var(--tbt-primary);
}

/* „Skyriaus nuostatai" strip — first row inside an open accordion section
   (and under the heading in grouped view). Divider mirrors the staff rows
   below it so the document reads as part of the section, not a floating link. */
.tbt-staff-acc-nuostatai {
	padding: 12px 0;
	border-bottom: 1px solid var(--tbt-border);
	/* v1.24.0: dokumento nuoroda lygiuojama į DEŠINĘ juostos pusę.
	   Juosta jau driekiasi per visą skilties plotį, o pati nuoroda yra
	   inline-flex, tad pakanka paversti juostą flex konteineriu —
	   `text-align` inline-flex vaikui neturėtų poveikio.
	   `flex-end`, o ne `right`: gerbia dokumento kryptį (RTL). */
	display: flex;
	justify-content: flex-end;
}

/* 🪤 Du rodiniai turi SKIRTINGĄ šoninį paraštį, tad vienos reikšmės
   nepakanka. Akordeone darbuotojų sąrašas yra `.tbt-staff-acc-list`
   su `padding: 0 24px 20px` — be tokio pat įtraukimo nuoroda ir po ja
   einantis skirtukas išsikištų 24px į dešinę už eilučių turinio
   (išmatuota: nuoroda 1182, eilutės turinys 1158).
   Grupuotame rodinyje `.tbt-staff-group-list` yra grid BE šoninių
   paraščių, todėl ten juosta privalo likti prie pat krašto. */
.tbt-staff-acc-body > .tbt-staff-acc-nuostatai {
	padding-inline: 24px;
}
.tbt-staff-acc-nuostatai .tbt-staff-dept-nuostatai {
	font-weight: 600;
}
.tbt-staff-acc-nuostatai:hover .tbt-staff-acc-icon {
	background: var(--tbt-primary-light);
	color: var(--tbt-primary);
}
.tbt-staff-card-icon,
.tbt-staff-row-icon {
	display: inline-flex;
	width: 14px;
	height: 14px;
	color: var(--tbt-body);
	flex-shrink: 0;
	transition: color var(--tbt-transition);
}
.tbt-staff-card-pareigybe:hover .tbt-staff-card-icon,
.tbt-staff-row-pareigybe:hover .tbt-staff-row-icon {
	color: var(--tbt-primary);
}
/* Card-view: stack the link on its own row to match the <p>+icon
   look of the email/phone items rendered above it. */
.tbt-staff-contact > .tbt-staff-card-pareigybe {
	margin-top: 4px;
}
