/**
 * Tobalt Faustina — Staff Directory color + layout overrides
 *
 * Author: Tobalt — https://tobalt.lt
 *
 * 1) Repaint the plugin's design tokens to the school's institutional palette.
 * 2) Tighten the single-staff page so it feels neat, not oversized.
 *    Targets https://faustina.tobalt.cloud/darbuotojai/{slug}/
 */

/* ── 1. Color tokens ─────────────────────────────────────
 * The plugin drives all theming off :root CSS variables, so a
 * single override of those vars repaints the entire module.
 */
:root {
	--tbt-primary:       #06579D;  /* institutional deep blue */
	--tbt-primary-dark:  #003366;  /* darker blue for gradients/hover */
	--tbt-primary-light: #e8f1f9;  /* pale blue wash for tags/cards */
	--tbt-accent:        #4A8C68;  /* site secondary green */
	--tbt-gold:          #ffbf47;  /* site accent yellow (featured badge) */
	--tbt-heading:       #0A0A0A;  /* site body text color */
	--tbt-body:          #5a6a7d;
	--tbt-body-dark:     #2a3645;
}

/* Featured badge — soften the ring to match the new gold */
.tbt-staff-featured .tbt-staff-photo::after {
	box-shadow: 0 0 0 3px rgba(255, 191, 71, .35);
	color: #0A0A0A;
}

/* ── 2. Single staff page — neater, smaller ──────────────
 * Reduce max width, hero padding, photo size, headline size
 * and card padding so the profile reads as a tidy card rather
 * than a full-width landing hero.
 */
.tbt-single {
	max-width: 780px;
}

.tbt-staff-breadcrumb {
	margin-bottom: 20px;
	font-size: 12px;
}

/* Hero block */
.tbt-single-hero {
	grid-template-columns: 180px 1fr;
	gap: 28px;
	padding: 24px 26px;
	border-radius: 10px;
	margin-bottom: 24px;
}

.tbt-single-hero::before {
	height: 3px;
}

/* Photo / placeholder */
.tbt-single-img,
.tbt-single-placeholder {
	aspect-ratio: 1 / 1;           /* square reads tidier than 3:4 */
	border-radius: 8px;
}

.tbt-single-img {
	box-shadow: 0 4px 14px rgba(6, 87, 157, .10);
}

.tbt-single-placeholder {
	background: linear-gradient(135deg, #f3f6fa 0%, #e8f1f9 100%);
}

.tbt-single-placeholder .dashicons {
	font-size: 48px;
	width: 48px;
	height: 48px;
	color: #b7c6d6;
}

/* Intro block */
.tbt-single-name {
	font-size: 22px;
	line-height: 1.2;
	margin: 0 0 4px;
}

.tbt-single-position {
	font-size: 14px;
	font-weight: 500;
	margin: 0 0 10px;
}

.tbt-single-departments {
	gap: 6px;
	margin-bottom: 12px;
}

.tbt-single-dept {
	padding: 3px 12px;
	font-size: 12px;
}

.tbt-single-subjects {
	font-size: 13px;
	padding: 9px 12px;
	margin-bottom: 14px;
}

.tbt-single-subjects .dashicons {
	font-size: 16px;
	width: 16px;
	height: 16px;
}

/* Contact action chips */
.tbt-single-actions {
	gap: 8px;
	margin-bottom: 10px;
}

.tbt-single-action {
	padding: 6px 14px;
	font-size: 13px;
}

.tbt-single-action .dashicons {
	font-size: 14px;
	width: 14px;
	height: 14px;
}

.tbt-single-office {
	font-size: 13px;
}

/* Bio + section titles */
.tbt-single-bio {
	margin-bottom: 24px;
}

.tbt-single-section-title {
	font-size: 16px;
	margin: 0 0 12px;
	padding-bottom: 8px;
	border-bottom-width: 2px;
}

.tbt-single-bio-text {
	font-size: 15px;
	line-height: 1.65;
}

/* Detail cards (hours / quals / contacts) */
.tbt-single-details {
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 14px;
	margin-bottom: 26px;
}

.tbt-single-card {
	padding: 16px 18px;
	border-radius: 10px;
}

.tbt-single-card-icon {
	width: 32px;
	height: 32px;
	border-radius: 8px;
	margin-bottom: 10px;
}

.tbt-single-card-icon .dashicons {
	font-size: 16px;
	width: 16px;
	height: 16px;
}

.tbt-single-card h3 {
	font-size: 14px;
	margin: 0 0 8px;
}

.tbt-single-card-body,
.tbt-single-contact-list li {
	font-size: 13px;
	line-height: 1.55;
}

.tbt-single-contact-list li {
	margin-bottom: 8px;
	gap: 8px;
}

.tbt-single-contact-list .dashicons {
	font-size: 14px;
	width: 14px;
	height: 14px;
}

/* Bottom nav */
.tbt-single-nav {
	padding-top: 18px;
}

.tbt-single-back {
	padding: 8px 18px;
	font-size: 13px;
}

/* ── 3. Responsive tweak ─────────────────────────────────
 * On narrow screens collapse the hero and cap the photo so it
 * doesn't dominate the viewport.
 */
@media (max-width: 720px) {
	.tbt-single-hero {
		grid-template-columns: 1fr;
		padding: 20px;
		gap: 18px;
	}

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

	.tbt-single-name {
		font-size: 20px;
	}
}