/*
 * Talivio Team - front-end styles.
 * Every selector is scoped under .tlv-team / .tlv-team-page.
 * Theme adaptation happens only through the custom properties below.
 */

.tlv-team,
.tlv-team-page {
	--tlv-team-primary: var( --pgs_primary_color, var( --wp--preset--color--primary, #1f6feb ) );
	--tlv-team-primary-hover: var( --pgs_btn_hover_bg_color, var( --pgs_secondary_color, #1558c0 ) );
	--tlv-team-on-primary: var( --pgs_btn_text_color, #fff );
	--tlv-team-heading: var( --pgs_heading_color, inherit );
	--tlv-team-text: var( --pgs_text_color, inherit );
	--tlv-team-heading-font: var( --pgs_typography_h3_font_family, inherit );
	--tlv-team-body-font: var( --pgs_typography_body_font_family, inherit );
	--tlv-team-radius: 20px;
	--tlv-team-pill: 50px;
	--tlv-team-border: rgba( 0, 0, 0, 0.08 );
	--tlv-team-surface: #fff;
	--tlv-team-soft: #f4f9fb;
}

.tlv-team-page {
	font-family: var( --tlv-team-body-font );
	color: var( --tlv-team-text );
}

.tlv-team-container {
	max-width: var( --pgs_container_width, 1200px );
	margin-left: auto;
	margin-right: auto;
	padding-left: 15px;
	padding-right: 15px;
}

.tlv-team-page__title {
	font-family: var( --tlv-team-heading-font );
	color: var( --tlv-team-heading );
}

/* Layout: filters + results. */
.tlv-team {
	display: block;
}

@media ( min-width: 992px ) {
	.tlv-team {
		display: grid;
		grid-template-columns: minmax( 240px, 280px ) 1fr;
		gap: 32px;
		align-items: start;
	}
}

.tlv-team__filters-toggle {
	margin: 0 0 16px;
}

@media ( min-width: 992px ) {
	.tlv-team__filters-toggle {
		margin: 0;
	}

	.tlv-team__filters-toggle > summary {
		display: none;
	}
}

.tlv-team__filters-toggle > summary {
	display: flex;
	align-items: center;
	gap: 4px;
	cursor: pointer;
	font-weight: 600;
	padding: 10px 0;
}

.tlv-team__filters {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.tlv-team__filter {
	border: 0;
	margin: 0;
	padding: 0;
}

.tlv-team__filter legend {
	font-weight: 600;
	color: var( --tlv-team-heading );
	margin-bottom: 8px;
}

.tlv-team__filter label {
	display: flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
}

.tlv-team__filter details summary {
	cursor: pointer;
	padding: 8px 0;
}

.tlv-team--js .tlv-team__submit {
	display: none;
}

.tlv-team__submit,
.tlv-team-profile__button,
.tlv-team__card .tlv-team__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	border: 0;
	border-radius: var( --tlv-team-pill );
	background: var( --tlv-team-primary );
	color: var( --tlv-team-on-primary );
	padding: 10px 20px;
	text-decoration: none;
	cursor: pointer;
	font-family: var( --tlv-team-body-font );
}

.tlv-team__submit:hover,
.tlv-team-profile__button:hover,
.tlv-team__card .tlv-team__button:hover {
	background: var( --tlv-team-primary-hover );
}

.tlv-team-profile__button:not( .tlv-team-profile__button--primary ) {
	background: transparent;
	color: var( --tlv-team-primary );
	border: 1px solid var( --tlv-team-border );
}

.tlv-team__submit:focus-visible,
.tlv-team__reset:focus-visible,
.tlv-team-profile__button:focus-visible,
.tlv-team__card .tlv-team__button:focus-visible,
.tlv-team__chip:focus-visible,
.tlv-team__pagination a:focus-visible,
.tlv-team__filter input:focus-visible {
	outline: 3px solid var( --tlv-team-primary );
	outline-offset: 2px;
}

.tlv-team__reset {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	color: var( --tlv-team-text );
	text-decoration: underline;
}

.tlv-team__reset .dashicons,
.tlv-team__filters-toggle > summary .dashicons {
	font-size: 16px;
	width: 16px;
	height: 16px;
}

/* Results. */
.tlv-team__summary {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	margin-bottom: 16px;
}

.tlv-team__count {
	font-weight: 600;
	color: var( --tlv-team-heading );
	margin: 0;
}

.tlv-team__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

/* View switcher (grid/list): progressive enhancement only, hidden without JS. */
.tlv-team__view-switch {
	display: flex;
	gap: 4px;
	margin-left: auto;
}

.tlv-team__view-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 1px solid var( --tlv-team-border );
	border-radius: 6px;
	background: var( --tlv-team-surface );
	color: var( --tlv-team-text );
	cursor: pointer;
}

.tlv-team__view-btn svg {
	display: block;
	fill: currentColor;
}

.tlv-team__view-btn[ aria-pressed='true' ] {
	background: var( --tlv-team-primary );
	border-color: var( --tlv-team-primary );
	color: var( --tlv-team-on-primary );
}

.tlv-team__chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: var( --tlv-team-soft );
	border-radius: var( --tlv-team-pill );
	padding: 6px 12px;
	text-decoration: none;
	color: var( --tlv-team-text );
	font-size: 14px;
}

.tlv-team__grid {
	display: grid;
	gap: 24px;
	grid-template-columns: repeat( auto-fill, minmax( 230px, 1fr ) );
	padding: 0;
	margin: 0;
}

/* Neutralise a theme's global `ul { list-style }` inside the grid only. */
.tlv-team__grid,
.tlv-team__grid > li {
	list-style: none;
}

@media ( min-width: 600px ) {
	.tlv-team__grid--cols-1 {
		grid-template-columns: minmax( 230px, 1fr );
	}

	.tlv-team__grid--cols-2 {
		grid-template-columns: repeat( 2, minmax( 230px, 1fr ) );
	}

	.tlv-team__grid--cols-3 {
		grid-template-columns: repeat( 3, minmax( 230px, 1fr ) );
	}

	.tlv-team__grid--cols-4 {
		grid-template-columns: repeat( 4, minmax( 230px, 1fr ) );
	}
}

.tlv-team__card {
	background: var( --tlv-team-surface );
	border: 1px solid var( --tlv-team-border );
	border-radius: var( --tlv-team-radius );
	box-shadow: 0 1px 2px rgba( 0, 0, 0, 0.04 ), 0 6px 16px rgba( 0, 0, 0, 0.05 );
	padding: 18px;
	display: flex;
	flex-direction: column;
	gap: 14px;
	transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.tlv-team__card:hover {
	box-shadow: 0 2px 4px rgba( 0, 0, 0, 0.05 ), 0 12px 24px rgba( 0, 0, 0, 0.08 );
	transform: translateY( -2px );
}

@media ( prefers-reduced-motion: reduce ) {
	.tlv-team__card:hover {
		transform: none;
	}
}

.tlv-team__card-body {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
}

.tlv-team__card-body > .tlv-team__excerpt {
	margin-top: 2px;
}

.tlv-team__card-body > .tlv-team__button {
	margin-top: 8px;
	align-self: flex-start;
}

.tlv-team__photo,
.tlv-team__placeholder {
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	border-radius: calc( var( --tlv-team-radius ) - 6px );
	background: var( --tlv-team-soft );
}

/*
 * List view (progressive enhancement, toggled via JS): same card markup
 * (photo + .tlv-team__card-body), laid out as a flat horizontal row instead
 * of a grid tile. The two direct children of .tlv-team__card are always just
 * the photo/placeholder and the body, so this never depends on how much text
 * the body happens to contain.
 */
.tlv-team__grid--view-list {
	grid-template-columns: 1fr;
	gap: 12px;
}

.tlv-team__grid--view-list .tlv-team__card {
	flex-direction: row;
	align-items: flex-start;
	gap: 18px;
	padding: 16px;
}

.tlv-team__grid--view-list .tlv-team__photo,
.tlv-team__grid--view-list .tlv-team__placeholder {
	width: 120px;
	flex: 0 0 120px;
	aspect-ratio: 1 / 1;
}

.tlv-team__grid--view-list .tlv-team__card-body {
	flex: 1 1 auto;
}

.tlv-team__grid--view-list .tlv-team__excerpt {
	-webkit-line-clamp: 2;
}

.tlv-team__placeholder text {
	fill: var( --tlv-team-primary );
	font-size: 2.5em;
	font-family: var( --tlv-team-heading-font );
}

.tlv-team__placeholder rect {
	fill: var( --tlv-team-soft );
}

.tlv-team__name {
	font-family: var( --tlv-team-heading-font );
	color: var( --tlv-team-heading );
	font-size: 21px;
	line-height: 1.25;
	margin: 0;
}

.tlv-team__name a {
	color: inherit;
	text-decoration: none;
}

.tlv-team__name a:hover {
	color: var( --tlv-team-primary );
}

.tlv-team__role {
	color: var( --tlv-team-primary );
	font-weight: 500;
	margin: 0;
}

.tlv-team__meta-line {
	color: color-mix( in srgb, var( --tlv-team-text ) 80%, #000 );
	font-size: 13px;
	line-height: 1.6;
	margin: 0;
}

.tlv-team__meta-segment {
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

.tlv-team__meta-segment .dashicons {
	font-size: 16px;
	width: 16px;
	height: 16px;
}

.tlv-team__meta-sep {
	margin: 0 4px;
}

.tlv-team__excerpt {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	overflow: hidden;
	font-size: 14px;
	line-height: 1.6;
	margin: 0;
}

/* Pagination. */
.tlv-team__pagination ul {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	list-style: none;
	padding: 0;
	margin: 24px 0 0;
}

.tlv-team__pagination a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	min-width: 36px;
	min-height: 36px;
	padding: 0 10px;
	border-radius: 8px;
	text-decoration: none;
	color: var( --tlv-team-text );
	border: 1px solid var( --tlv-team-border );
}

.tlv-team__pagination .dashicons {
	font-size: 16px;
	width: 16px;
	height: 16px;
}

.tlv-team__pagination a[ aria-current='page' ] {
	background: var( --tlv-team-primary );
	color: var( --tlv-team-on-primary );
	border-color: var( --tlv-team-primary );
}

.tlv-team__no-results {
	padding: 32px 0;
	text-align: center;
}

.tlv-team__no-results .dashicons {
	font-size: 20px;
	width: 20px;
	height: 20px;
	vertical-align: middle;
	margin-right: 4px;
}

/* Profile page. */
.tlv-team-profile {
	display: block;
	gap: 32px;
}

@media ( min-width: 768px ) {
	.tlv-team-profile {
		display: grid;
		grid-template-columns: 320px 1fr;
	}
}

.tlv-team-profile__photo,
.tlv-team-profile__placeholder {
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	border-radius: var( --tlv-team-radius );
}

.tlv-team-profile__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 16px;
}

.tlv-team-profile__back {
	display: inline-block;
	margin-bottom: 16px;
	color: var( --tlv-team-text );
}

.tlv-team-profile__name {
	font-family: var( --tlv-team-heading-font );
	color: var( --tlv-team-heading );
	margin: 0 0 4px;
}

.tlv-team-profile__role {
	color: var( --tlv-team-primary );
	margin: 0 0 8px;
}

.tlv-team-profile__terms {
	margin: 16px 0;
}

.tlv-team-profile__terms dt {
	font-weight: 600;
	color: var( --tlv-team-heading );
}

.tlv-team-profile__terms dd {
	margin: 0 0 12px;
}

@media ( prefers-reduced-motion: reduce ) {
	.tlv-team * {
		scroll-behavior: auto;
		transition: none;
	}
}