/**
 * [trainings_cards_scroller] — horizontal carousel.
 *
 * v2.16.0 redesign — matches cultural-carousel-joy.lovable.app reference:
 *   - Dark section bg, serif heading, amber kicker
 *   - 4-up poster cards (5:7 aspect)
 *   - Category badge top-left (amber)
 *   - Bottom overlay on image: genitive-month + arrow icon
 *   - Title + meta MOVED BELOW image (was overlaid in v2.9-v2.15)
 *
 * All visual values via --tcs-* custom properties scoped to .tcs-wrapper.
 *
 * @package Tobalt_Renginiai
 * @author  Tobalt — https://tobalt.lt
 */

.tcs-wrapper {
	/* Foundation tokens (override per skin) */
	--tcs-gap: 24px;
	--tcs-radius: var(--tr-radius, 12px);
	--tcs-card-bg: transparent;
	--tcs-card-image-aspect-ratio: 4 / 5; /* v2.16.4: compacter than the 5/7 reference */
	--tcs-card-image-fallback-bg: rgba(15, 23, 42, 0.06);
	--tcs-text-primary: var(--tr-color-text, #0f172a);
	--tcs-text-secondary: var(--tr-color-muted, rgba(15, 23, 42, 0.62));

	/* v2.18.2: accent bound to admin-defined --tr-color-primary so cards-scroller
	 * follows site brand (e.g. anyksciukc navy #001c46). Falls back to the
	 * original amber #d4a574 when the admin hasn't set a primary. */
	--tcs-accent: var(--tr-color-primary, #d4a574);
	--tcs-accent-bg: var(--tr-color-primary, #d4a574);
	--tcs-accent-fg: #ffffff;

	/* Heading: serif display font, falls through to system serif */
	--tcs-heading-font: 'Playfair Display', 'Iowan Old Style', 'Apple Garamond', 'Baskerville', 'Times New Roman', serif;

	--tcs-arrow-bg: rgba(15, 23, 42, 0.06);
	--tcs-arrow-fg: var(--tcs-text-primary);
	--tcs-arrow-hover-bg: rgba(15, 23, 42, 0.12);
	--tcs-arrow-disabled-opacity: 0.35;

	--tcs-dot-bg: rgba(39, 45, 45, 0.25);   /* #272D2D faded */
	--tcs-dot-active-bg: #272D2D;

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

	font-family: var(--tcs-font-family);
	color: var(--tcs-text-primary);
	position: relative;
}

/* --------------------------------------------------------------------- */
/* Chrome — heading row with kicker + arrows                              */
/* --------------------------------------------------------------------- */
.tcs-chrome {
	display: flex;
	align-items: end;
	justify-content: space-between;
	margin-bottom: 40px;
	gap: 24px;
	flex-wrap: wrap;
}
.tcs-chrome__intro { min-width: 0; }
.tcs-kicker {
	display: block;
	font-size: 0.72rem;
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--tcs-accent);
	margin-bottom: 12px;
}
.tcs-heading {
	font-family: var(--tcs-heading-font);
	font-size: clamp(2rem, 4vw, 3.25rem);
	font-weight: 400;
	line-height: 1.05;
	letter-spacing: -0.01em;
	margin: 0;
	color: var(--tcs-text-primary);
	font-style: italic;
}
.tcs-chrome__view-all {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--tcs-accent);
	text-decoration: none;
	font-size: 0.88rem;
	font-weight: 500;
}
.tcs-chrome__view-all:hover { text-decoration: underline; }

/* --------------------------------------------------------------------- */
/* Frame + rail                                                           */
/* --------------------------------------------------------------------- */
.tcs-frame {
	position: relative;
}
.tcs-rail {
	display: flex;
	gap: var(--tcs-gap);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	scroll-padding-left: var(--tcs-section-pad-x);
}
.tcs-rail::-webkit-scrollbar { display: none; }

/* --------------------------------------------------------------------- */
/* v2.22.0: Arrows on item sides — overlay siblings of .tcs-rail inside  */
/* .tcs-frame, absolutely positioned vertically centered, white bg +     */
/* shadow so they read clearly over card images. Chrome no longer holds  */
/* nav arrows (kicker/heading/view-all only).                            */
/* --------------------------------------------------------------------- */
/* v2.24.0: arrows are now COMPLETELY STATIC — no hover, focus, or active
 * style changes. No transitions. Eliminates any possible blink/repaint loop.
 * The only visual feedback on interaction is the browser's native cursor
 * change (pointer) + native focus ring. */
.tcs-arrow,
.tcs-arrow:hover,
.tcs-arrow:focus,
.tcs-arrow:focus-visible,
.tcs-arrow:active {
	all: unset !important;
	box-sizing: border-box !important;
	width: 44px !important;
	height: 44px !important;
	border-radius: 999px !important;
	background: #ffffff !important;
	background-color: #ffffff !important;
	border: 1px solid rgba(0, 28, 70, 0.10) !important;
	color: var(--tr-color-primary, #1e3a8a) !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	cursor: pointer !important;
	box-shadow: 0 4px 14px -4px rgba(0, 28, 70, 0.18), 0 1px 2px rgba(0, 28, 70, 0.06) !important;
	/* NO transitions on any property. */
	transition: none !important;
}
.tcs-arrow[disabled],
.tcs-arrow[aria-disabled="true"] {
	opacity: var(--tcs-arrow-disabled-opacity, 0.35) !important;
	cursor: not-allowed !important;
	pointer-events: none !important;
}
/* v2.24.1: explicit transform: translateY(-50%) on ALL states. v2.24.0's
 * `all: unset !important` on hover/focus/active wiped the centering →
 * arrow appeared to "jump down" by half its height when hovered/clicked. */
.tcs-arrow--overlay,
.tcs-arrow--overlay:hover,
.tcs-arrow--overlay:focus,
.tcs-arrow--overlay:focus-visible,
.tcs-arrow--overlay:active {
	position: absolute !important;
	top: 50% !important;
	transform: translateY(-50%) !important;
	z-index: 50 !important;
	pointer-events: auto !important;
}
/* v2.23.1: arrows positioned INSIDE the frame (was -22px outside which
 * could be clipped by a parent Elementor section with overflow:hidden,
 * making them unreachable/unclickable for users). 12px inside gutter
 * keeps them visually offset from card edge but always reachable. */
.tcs-arrow--overlay.tcs-arrow--prev { left: 12px !important; }
.tcs-arrow--overlay.tcs-arrow--next { right: 12px !important; }
/* v2.22.3: overlay arrows keep their translateY(-50%) centering on hover —
 * no scale change (was causing "jumping" perception per Tomas). */
.tcs-arrow--overlay:hover,
.tcs-arrow--overlay:focus-visible,
.tcs-arrow--overlay:active {
	transform: translateY(-50%) !important;
}
@media (max-width: 768px) {
	.tcs-arrow--overlay.tcs-arrow--prev { left: 8px !important; }
	.tcs-arrow--overlay.tcs-arrow--next { right: 8px !important; }
	/* v2.22.2/v2.23.1: bigger tap target on phones, z-index already 50 from base. */
	.tcs-arrow--overlay {
		width: 48px !important;
		height: 48px !important;
	}
}
/* v2.22.2: prevent click bleed through to card link below + improve touch
 * responsiveness on mobile. */
.tcs-arrow {
	touch-action: manipulation !important;
	-webkit-tap-highlight-color: transparent !important;
	z-index: 10 !important;
}

/* v2.24.0: .tcs-frame--arrow-hover suppression rules REMOVED — no longer
 * needed since arrows have no hover style and cards have no geometry hover. */

/* Legacy chrome nav (kept for back-compat in case other shortcodes use it). */
.tcs-chrome__nav {
	display: none !important;
}

/* --------------------------------------------------------------------- */
/* Card                                                                   */
/* --------------------------------------------------------------------- */
.tcs-card {
	flex: 0 0 calc((100% - var(--tcs-gap) * 3) / 4);
	scroll-snap-align: start;
	background: var(--tcs-card-bg);
	display: flex;
	flex-direction: column;
	min-width: 0;
}
/* v2.24.0: GEOMETRY hover effects removed — only color/decoration changes
 * remain. Eliminates blink/repaint loop reported by Tomas on cinema +
 * cards-scroller cards. */
.tcs-card:hover .tcs-card__title a {
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}

.tcs-card__media {
	display: block;
	position: relative;
	aspect-ratio: var(--tcs-card-image-aspect-ratio);
	border-radius: var(--tcs-radius);
	overflow: hidden;
	background: var(--tcs-card-image-fallback-bg);
	text-decoration: none;
	color: inherit;
	transition: box-shadow 200ms ease;
}
.tcs-card__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	/* v2.24.0: scale-on-hover removed; no transform transition needed. */
}
.tcs-card__image--placeholder {
	background:
		linear-gradient(135deg, rgba(245, 245, 245, 0.04), rgba(245, 245, 245, 0.10));
}

.tcs-card__badge {
	position: absolute;
	top: 14px;
	left: 14px;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	padding: 6px 14px;
	border-radius: 6px;
	background: var(--tcs-accent-bg) !important;
	color: #ffffff !important;
	font-size: 0.7rem !important;
	font-weight: 600 !important;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

/* v2.24.0: eyebrow simplified per Tomas — ONE inline text style, no chip
 * background, no bold weight, distinctive olive-chartreuse color (`#476308`,
 * same `--trc-marquee-text` as the fleet kicker). Date + time inline,
 * separated by middle dot. */
.tcs-card__date-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin-bottom: 8px;
}
.tcs-card__overlay-month,
.tcs-card__overlay-month:hover {
	display: inline-block;
	font-family: var(--tcs-font-family);
	font-size: 0.95rem;
	font-style: normal;
	font-weight: 400;
	letter-spacing: 0.02em;
	color: #476308;
	line-height: 1.3;
	background: transparent;
	padding: 0;
	font-variant-numeric: tabular-nums;
}
/* v2.24.0: time chip removed per Tomas — eyebrow now ONE inline text. */
/* Reactions inline with date — push to right end of row, normalize margins. */
.tcs-card__date-row .tr-reactions {
	margin: 0 !important;
}

.tcs-card__body {
	padding: 18px 4px 0;
}
/* v2.22.0: title size 28px → 24px per Tomas. `!important` retained to beat
 * elementor-heading-title.elementor-size-default cascade tie. */
.tcs-card__title {
	font-family: 'Barlow', var(--tcs-font-family) !important;
	font-size: 24px !important;
	font-weight: 500 !important;
	line-height: 1.25 !important;
	margin: 0 0 6px !important;
	color: var(--tcs-text-primary);
}
.tcs-card__title a {
	color: inherit;
	text-decoration: none;
}
.tcs-card__title a:hover,
.tcs-card__title a:focus-visible { text-decoration: underline; }

.tcs-card__meta {
	display: flex;
	flex-direction: column;
	gap: 6px;
	font-size: 0.82rem;
	color: var(--tcs-text-secondary);
}
.tcs-card__meta-item {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}
.tcs-card__meta-icon {
	flex-shrink: 0;
	opacity: 0.7;
}

/* v2.22.0: dots block removed per Tomas — arrows-only navigation. CSS
 * intentionally deleted; .tcs-dots / .tcs-dot selectors no longer rendered. */

/* --------------------------------------------------------------------- */
/* Empty state                                                            */
/* --------------------------------------------------------------------- */
.tcs-empty {
	padding: 48px 16px;
	text-align: center;
	color: var(--tcs-text-secondary);
}

/* --------------------------------------------------------------------- */
/* Responsive                                                             */
/* --------------------------------------------------------------------- */
@media (max-width: 1024px) {
	.tcs-card {
		flex: 0 0 calc((100% - var(--tcs-gap)) / 2);
	}
}
@media (max-width: 640px) {
	.tcs-card {
		flex: 0 0 calc(100% - 40px);
	}
	.tcs-heading { font-size: 2.1rem; }
	.tcs-chrome { margin-bottom: 24px; }
}