/**
 * [trainings_list] — v2.17.1 redesign.
 *
 * Matches cine-display-craft.lovable.app reference. Full !important lockdown
 * on every property so host theme button/article/h3 rules don't bleed in.
 *
 * @package Tobalt_Renginiai
 * @author  Tobalt — https://tobalt.lt
 */

.tl-wrapper {
	--tl-card-bg: #ffffff;
	--tl-card-border: rgba(15, 23, 42, 0.10);
	--tl-card-radius: 10px;
	--tl-card-pad-y: 14px;
	--tl-card-pad-x: 18px;
	--tl-card-gap: 14px;
	--tl-row-gap: 8px;
	--tl-rows-max-width: 720px;

	--tl-image-size: 56px;
	--tl-image-bg: rgba(15, 23, 42, 0.06);
	--tl-image-radius: 8px;

	--tl-badge-bg: rgba(15, 23, 42, 0.04);
	--tl-badge-fg: rgba(15, 23, 42, 0.72);
	--tl-badge-border: rgba(15, 23, 42, 0.10);

	--tl-text-primary: #0f172a;
	--tl-text-secondary: rgba(15, 23, 42, 0.62);
	--tl-text-tertiary: rgba(15, 23, 42, 0.50);

	--tl-cta-bg: transparent;
	--tl-cta-fg: #0f172a;
	--tl-cta-border: rgba(15, 23, 42, 0.18);
	--tl-cta-hover-bg: rgba(15, 23, 42, 0.04);
	--tl-cta-hover-border: rgba(15, 23, 42, 0.32);

	--tl-link: #2563eb;

	--tl-font-family: var(--tr-font-family, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);

	font-family: var(--tl-font-family) !important;
	color: var(--tl-text-primary) !important;
}

/* --------------------------------------------------------------------- */
/* Layout — v2.17.9: when chrome is present, switch to 2-col grid        */
/* (chips sidebar left + rows right). Mobile stacks back to single col.  */
/* --------------------------------------------------------------------- */
.tl-wrapper:has(.tl-chrome) {
	display: grid !important;
	grid-template-columns: 180px 1fr !important;
	gap: 28px !important;
	max-width: 960px !important;
	margin: 0 auto !important;
	align-items: start !important;
}

/* When chrome is sidebar, rows stop using their own max-width centering. */
.tl-wrapper:has(.tl-chrome) .tl-rows {
	max-width: none !important;
	margin: 0 !important;
}

/* Chrome as sidebar — vertical chip stack */
.tl-wrapper .tl-chrome {
	display: flex !important;
	flex-direction: column !important;
	gap: 8px !important;
	align-items: stretch !important;
	margin: 0 !important;
	width: 100% !important;
	padding: 0 !important;
	background: transparent !important;
	border: 0 !important;
	position: sticky !important;
	top: 24px !important;
}

/* Chips group — vertical stack in sidebar */
.tl-wrapper .tl-chips {
	display: flex !important;
	flex-direction: column !important;
	gap: 6px !important;
	align-items: stretch !important;
	margin: 0 !important;
	padding: 0 !important;
}

/* Individual chip — pill button, full-width within sidebar, left-aligned text */
.tl-wrapper .tl-chip,
.tl-wrapper .tl-chip:hover,
.tl-wrapper .tl-chip:focus,
.tl-wrapper .tl-chip:focus-visible,
.tl-wrapper .tl-chip:active {
	-webkit-appearance: none !important;
	appearance: none !important;
	display: flex !important;
	align-items: center !important;
	justify-content: flex-start !important;
	padding: 8px 14px !important;
	margin: 0 !important;
	width: 100% !important;
	text-align: left !important;
	background: transparent !important;
	background-color: transparent !important;
	background-image: none !important;
	color: var(--tl-text-secondary) !important;
	border: 1px solid var(--tl-card-border) !important;
	border-radius: 999px !important;
	font-family: inherit !important;
	font-size: 0.82rem !important;
	font-weight: 500 !important;
	line-height: 1.2 !important;
	cursor: pointer !important;
	user-select: none !important;
	text-decoration: none !important;
	box-shadow: none !important;
	transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease !important;
}
.tl-wrapper .tl-chip:hover {
	background: rgba(15, 23, 42, 0.04) !important;
	background-color: rgba(15, 23, 42, 0.04) !important;
	color: var(--tl-text-primary) !important;
}
.tl-wrapper .tl-chip.is-active,
.tl-wrapper .tl-chip[aria-pressed="true"] {
	background: var(--tl-text-primary) !important;
	background-color: var(--tl-text-primary) !important;
	color: #ffffff !important;
	border-color: var(--tl-text-primary) !important;
}
.tl-wrapper .tl-chip:focus-visible {
	outline: 2px solid var(--tl-link) !important;
	outline-offset: 2px !important;
}
.tl-wrapper .tl-chrome__filter,
.tl-wrapper .tl-chrome__search {
	flex: 1 1 200px !important;
	min-width: 0 !important;
}
.tl-wrapper .tl-filter,
.tl-wrapper .tl-search {
	width: 100% !important;
	padding: 10px 14px !important;
	border: 1px solid var(--tl-card-border) !important;
	border-radius: 10px !important;
	font: inherit !important;
	background: #ffffff !important;
	color: var(--tl-text-primary) !important;
}
.tl-wrapper .tl-filter:focus-visible,
.tl-wrapper .tl-search:focus-visible {
	outline: 2px solid var(--tl-link) !important;
	outline-offset: 2px !important;
}
.tl-wrapper .tl-calendar-link {
	flex: 0 0 auto !important;
	padding: 10px 18px !important;
	background: transparent !important;
	color: var(--tl-text-primary) !important;
	border: 1px solid var(--tl-card-border) !important;
	border-radius: 999px !important;
	text-decoration: none !important;
	font-weight: 500 !important;
}
.tl-wrapper .tl-calendar-link:hover {
	background: var(--tl-cta-hover-bg) !important;
	color: var(--tl-text-primary) !important;
}

/* --------------------------------------------------------------------- */
/* Rows                                                                   */
/* --------------------------------------------------------------------- */
.tl-wrapper .tl-rows {
	display: flex !important;
	flex-direction: column !important;
	gap: var(--tl-row-gap) !important;
	margin: 0 auto !important;
	padding: 0 !important;
	max-width: var(--tl-rows-max-width) !important;
	width: 100% !important;
}

.tl-wrapper .tl-row {
	display: flex !important;
	gap: var(--tl-card-gap) !important;
	align-items: center !important;
	padding: var(--tl-card-pad-y) var(--tl-card-pad-x) !important;
	background: var(--tl-card-bg) !important;
	border: 1px solid var(--tl-card-border) !important;
	border-radius: var(--tl-card-radius) !important;
	margin: 0 !important;
	box-shadow: none !important;
}

/* Image — compact 56px square */
.tl-wrapper .tl-row__image {
	flex: 0 0 auto !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: var(--tl-image-size) !important;
	height: var(--tl-image-size) !important;
	background: var(--tl-image-bg) !important;
	border-radius: var(--tl-image-radius) !important;
	overflow: hidden !important;
	text-decoration: none !important;
	color: rgba(15, 23, 42, 0.40) !important;
	border: 0 !important;
	box-shadow: none !important;
}
.tl-wrapper .tl-row__image img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	display: block !important;
	border-radius: 0 !important;
}
.tl-wrapper .tl-row__image-placeholder {
	opacity: 0.45 !important;
}

/* Body — vertical stack, compact gaps */
.tl-wrapper .tl-row__body {
	flex: 1 1 0 !important;
	min-width: 0 !important;
	display: flex !important;
	flex-direction: column !important;
	gap: 5px !important;
	margin: 0 !important;
	padding: 0 !important;
}

.tl-wrapper .tl-row__topline {
	display: flex !important;
	gap: 12px !important;
	align-items: center !important;
	flex-wrap: wrap !important;
}
.tl-wrapper .tl-row__badge {
	display: inline-block !important;
	padding: 3px 10px !important;
	font-size: 0.72rem !important;
	font-weight: 500 !important;
	color: var(--tl-badge-fg) !important;
	background: var(--tl-badge-bg) !important;
	border: 1px solid var(--tl-badge-border) !important;
	border-radius: 999px !important;
	line-height: 1.4 !important;
	margin: 0 !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
}
.tl-wrapper .tl-row__subtitle {
	font-size: 0.85rem !important;
	color: var(--tl-text-secondary) !important;
	font-weight: 400 !important;
	margin: 0 !important;
}

.tl-wrapper .tl-row__title,
.tl-wrapper h3.tl-row__title {
	margin: 0 !important;
	padding: 0 !important;
	font-size: 1.05rem !important;
	font-weight: 600 !important;
	line-height: 1.25 !important;
	color: var(--tl-text-primary) !important;
	font-family: inherit !important;
}
.tl-wrapper .tl-row__title a {
	color: inherit !important;
	text-decoration: none !important;
	background: transparent !important;
}
.tl-wrapper .tl-row__title a:hover,
.tl-wrapper .tl-row__title a:focus-visible {
	text-decoration: underline !important;
	color: inherit !important;
}

.tl-wrapper .tl-row__excerpt {
	margin: 0 !important;
	padding: 0 !important;
	font-size: 0.82rem !important;
	line-height: 1.4 !important;
	color: var(--tl-text-secondary) !important;
	display: -webkit-box !important;
	-webkit-line-clamp: 1 !important;
	-webkit-box-orient: vertical !important;
	overflow: hidden !important;
	font-weight: 400 !important;
}

.tl-wrapper .tl-row__meta {
	display: flex !important;
	gap: 14px !important;
	flex-wrap: wrap !important;
	font-size: 0.78rem !important;
	color: var(--tl-text-secondary) !important;
	margin: 0 !important;
	padding: 0 !important;
}
.tl-wrapper .tl-row__meta-item {
	display: inline-flex !important;
	align-items: center !important;
	gap: 6px !important;
}
.tl-wrapper .tl-row__meta-icon {
	flex-shrink: 0 !important;
	opacity: 0.7 !important;
}
.tl-wrapper .tl-row__meta-item--price {
	font-weight: 600 !important;
	color: var(--tl-text-primary) !important;
}

/* CTA button — compact outlined pill */
.tl-wrapper .tl-row__cta,
.tl-wrapper a.tl-row__cta,
.tl-wrapper .tl-row__cta:hover,
.tl-wrapper .tl-row__cta:focus,
.tl-wrapper .tl-row__cta:focus-visible,
.tl-wrapper .tl-row__cta:active {
	-webkit-appearance: none !important;
	appearance: none !important;
	display: inline-flex !important;
	align-self: flex-start !important;
	align-items: center !important;
	gap: 6px !important;
	padding: 5px 12px !important;
	margin: 3px 0 0 !important;
	background: var(--tl-cta-bg) !important;
	background-color: var(--tl-cta-bg) !important;
	background-image: none !important;
	color: var(--tl-cta-fg) !important;
	border: 1px solid var(--tl-cta-border) !important;
	border-radius: 999px !important;
	text-decoration: none !important;
	font-family: inherit !important;
	font-size: 0.78rem !important;
	font-weight: 500 !important;
	line-height: 1 !important;
	box-shadow: none !important;
	cursor: pointer !important;
	transition: background-color 120ms ease, border-color 120ms ease !important;
}
.tl-wrapper .tl-row__cta:hover,
.tl-wrapper .tl-row__cta:focus-visible {
	background: var(--tl-cta-hover-bg) !important;
	background-color: var(--tl-cta-hover-bg) !important;
	border-color: var(--tl-cta-hover-border) !important;
	color: var(--tl-cta-fg) !important;
	text-decoration: none !important;
}
.tl-wrapper .tl-row__cta-icon {
	flex-shrink: 0 !important;
}

/* --------------------------------------------------------------------- */
/* Empty / error / fallback                                              */
/* --------------------------------------------------------------------- */
.tl-wrapper .tl-empty,
.tl-wrapper .tl-error {
	padding: 32px 16px !important;
	text-align: center !important;
	color: var(--tl-text-secondary) !important;
}
.tl-wrapper .tl-error { color: #1a1f1f !important; }
.tl-wrapper .tl-fallback-notice {
	padding: 12px 16px !important;
	margin: 0 0 8px !important;
	background: rgba(245, 158, 11, 0.08) !important;
	border-left: 3px solid #F59E0B !important;
	color: var(--tl-text-secondary) !important;
	border-radius: 6px !important;
	font-size: 0.92rem !important;
}

/* --------------------------------------------------------------------- */
/* Load-more                                                              */
/* --------------------------------------------------------------------- */
.tl-wrapper .tl-load-more,
.tl-wrapper .tl-load-more:hover,
.tl-wrapper .tl-load-more:focus,
.tl-wrapper .tl-load-more:focus-visible {
	display: block !important;
	margin: 24px auto 0 !important;
	padding: 10px 24px !important;
	background: transparent !important;
	background-color: transparent !important;
	background-image: none !important;
	color: var(--tl-text-primary) !important;
	border: 1px solid var(--tl-card-border) !important;
	border-radius: 999px !important;
	font: inherit !important;
	font-weight: 500 !important;
	cursor: pointer !important;
	transition: background-color 120ms ease !important;
	box-shadow: none !important;
}
.tl-wrapper .tl-load-more:hover,
.tl-wrapper .tl-load-more:focus-visible {
	background: var(--tl-cta-hover-bg) !important;
	background-color: var(--tl-cta-hover-bg) !important;
	outline: 2px solid var(--tl-link) !important;
	outline-offset: 2px !important;
}
.tl-wrapper .tl-load-more[hidden] {
	display: none !important;
}

/* --------------------------------------------------------------------- */
/* Responsive                                                             */
/* --------------------------------------------------------------------- */
@media (max-width: 768px) {
	.tl-wrapper .tl-chrome { gap: 8px !important; }
	.tl-wrapper .tl-calendar-link {
		width: 100% !important;
		text-align: center !important;
	}
}
@media (max-width: 768px) {
	/* Sidebar collapses to top-stacked horizontal pill row on tablet/phone. */
	.tl-wrapper:has(.tl-chrome) {
		display: block !important;
	}
	.tl-wrapper .tl-chrome {
		flex-direction: row !important;
		flex-wrap: wrap !important;
		position: static !important;
		margin: 0 auto 16px !important;
		max-width: var(--tl-rows-max-width) !important;
	}
	.tl-wrapper .tl-chips {
		flex-direction: row !important;
		flex-wrap: wrap !important;
	}
	.tl-wrapper .tl-chip {
		width: auto !important;
		padding: 5px 12px !important;
		font-size: 0.78rem !important;
	}
}
@media (max-width: 640px) {
	.tl-wrapper .tl-row {
		gap: 10px !important;
	}
	.tl-wrapper .tl-row__title {
		font-size: 1rem !important;
	}
	.tl-wrapper .tl-row__image {
		width: 48px !important;
		height: 48px !important;
	}
}