/**
 * [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, inherit);

	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.
 * v2.33.0: title hover-underline removed — the whole card is the click target,
 * so underlining the title on hover read as noise. */
.tcs-card:hover .tcs-card__title a {
	text-decoration: none;
}

.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; }
}

/* --------------------------------------------------------------------- */
/* v2.28.0 — compact (registration) card variant                          */
/* card_layout="kompaktinis". Image-less text card matching the vsveikata  */
/* homepage look. Cards stay transparent — the surrounding Elementor       */
/* section owns the (teal) band; title/date inherit the section's text     */
/* colour, only the pill is explicitly styled. Everything scoped under      */
/* .tcs-wrapper--kompaktinis so the poster layout is untouched.            */
/* --------------------------------------------------------------------- */
.tcs-wrapper--kompaktinis {
	/* v2.28.2: replicate Elementor Loop Item template #13812. Transparent card
	 * over the section's (teal-pattern) background, dark uppercase title, grey
	 * date row, white "Registruotis →" pill. Colours match the site kit. */
	--tcs-accent: #008568;        /* teal — pill text + hover fill */
	--tcs-kompakt-title: #3f3f3f; /* kit "Text" colour */
	--tcs-kompakt-date: #757575;  /* kit muted colour */
}
/* v2.30.1: side gutters so the overlay nav arrows (left/right, ~12px in)
 * don't sit on top of the cards. Cards inset 64px each side; scroll-snap
 * padding matches so the first card aligns to the gutter, not the edge. */
/* v2.31.0: gutters live on the FRAME (not the rail), so the rail clips
 * cleanly at its own edges — exactly 3 cards per view, no partial peek into
 * the gutters. Arrows sit in the frame gutters, outside the rail. */
.tcs-wrapper--kompaktinis .tcs-frame {
	padding-left: 60px;
	padding-right: 60px;
}
@media (max-width: 640px) {
	.tcs-wrapper--kompaktinis .tcs-frame { padding-left: 48px; padding-right: 48px; }
}
/* White chevron nav arrows (eicon-style), no circle/shadow — per request. */
.tcs-wrapper--kompaktinis .tcs-arrow,
.tcs-wrapper--kompaktinis .tcs-arrow:hover,
.tcs-wrapper--kompaktinis .tcs-arrow:focus,
.tcs-wrapper--kompaktinis .tcs-arrow:focus-visible,
.tcs-wrapper--kompaktinis .tcs-arrow:active {
	background: transparent !important;
	background-color: transparent !important;
	border: none !important;
	box-shadow: none !important;
	color: #ffffff !important;
	width: 30px !important;
	height: 44px !important;
}
.tcs-wrapper--kompaktinis .tcs-arrow__icon { width: 24px; height: 24px; fill: currentColor; display: block; }
.tcs-wrapper--kompaktinis .tcs-arrow__icon--flip { transform: scaleX(-1); }
.tcs-wrapper--kompaktinis .tcs-arrow--overlay.tcs-arrow--prev { left: 14px !important; }
.tcs-wrapper--kompaktinis .tcs-arrow--overlay.tcs-arrow--next { right: 14px !important; }
.tcs-wrapper--kompaktinis .tcs-card--compact {
	background: #ffffff;   /* v2.30.2: white card, exactly like template #13812 */
	border-radius: 7px;
	min-height: 100%;
	/* 3-up like the original Loop Grid (elementor-grid-3) — wider cards so the
	 * date + pill sit on one row, matching template #13812. */
	flex: 0 0 calc((100% - var(--tcs-gap) * 2) / 3);
}
@media (max-width: 1024px) {
	.tcs-wrapper--kompaktinis .tcs-card--compact { flex: 0 0 calc((100% - var(--tcs-gap)) / 2); }
}
@media (max-width: 640px) {
	.tcs-wrapper--kompaktinis .tcs-card--compact { flex: 0 0 calc(100% - 40px); }
}
.tcs-wrapper--kompaktinis .tcs-card--compact .tcs-card__body {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	justify-content: space-between;  /* v2.31.0: title top, date/CTA row bottom — fills full card height */
	gap: 4px;
	padding: 10px;
	height: 100%;
}
/* Title — top, UPPERCASE, Jost 14/600, dark grey, left-aligned. */
.tcs-wrapper--kompaktinis .tcs-card__title--compact {
	font-family: 'Jost', var(--tcs-font-family) !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	line-height: 20px !important;
	text-transform: uppercase;
	letter-spacing: 0;
	text-align: left;
	color: var(--tcs-kompakt-title);
	margin: 0 !important;
}
.tcs-wrapper--kompaktinis .tcs-card__title--compact a { color: inherit; text-decoration: none; }
/* v2.31.1: no underline on hover/focus (overrides the base .tcs-card hover);
 * the hover effect lives on the whole card instead. */
.tcs-wrapper--kompaktinis .tcs-card__title--compact a:hover,
.tcs-wrapper--kompaktinis .tcs-card__title--compact a:focus-visible,
.tcs-wrapper--kompaktinis .tcs-card--compact:hover .tcs-card__title a { text-decoration: none !important; }
/* Whole-card hover effect — clear shadow "lift" + title turns teal + a faint
 * tint. No transform (geometry hover caused a repaint/blink loop before). */
.tcs-wrapper--kompaktinis .tcs-card--compact {
	transition: box-shadow 180ms ease, background-color 180ms ease;
}
.tcs-wrapper--kompaktinis .tcs-card--compact:hover {
	box-shadow: 0 14px 32px -6px rgba(0, 28, 70, 0.30);
	background-color: #fbfdfc;
}
.tcs-wrapper--kompaktinis .tcs-card--compact:hover .tcs-card__title a {
	color: #008568;
}
/* v2.31.3: CTA stays #008568 on hover (4.6:1 on white, AA pass). It used to
 * lighten to #00b58d (2.57:1) — a WCAG AA contrast failure. */
/* Date (left) + CTA pill (right) on one row. */
.tcs-wrapper--kompaktinis .tcs-card__row {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	margin-top: 2px;
}
.tcs-wrapper--kompaktinis .tcs-card__cdate {
	flex: 1 1 auto;
	min-width: 0;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--tcs-font-family);
	font-size: 12px;   /* v2.30.3: smaller date/time text per request */
	font-weight: 400;
	line-height: 1.3;
	color: var(--tcs-kompakt-date);
	font-variant-numeric: tabular-nums;
}
.tcs-wrapper--kompaktinis .tcs-card__cdate-icon {
	flex: 0 0 auto;
	width: 13px;
	height: 13px;
	color: currentColor;
}
.tcs-wrapper--kompaktinis .tcs-card__ctime::before {
	content: "·";
	margin: 0 6px 0 2px;
	opacity: 0.6;
}
/* CTA — plain teal text + arrow (NO pill), exactly like template #13812's
 * button (white bg blends into the card → reads as teal text). Text #008568,
 * arrow #00B58D, uppercase Jost 14/600, pinned right. */
.tcs-wrapper--kompaktinis .tcs-card__cta {
	margin-left: auto;
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 0;
	background: transparent;
	color: #008568;
	font-family: 'Jost', var(--tcs-font-family);
	font-size: 14px;
	font-weight: 600;
	line-height: 24px;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	border: none;
	transition: opacity 160ms ease;
}
.tcs-wrapper--kompaktinis .tcs-card__cta:focus-visible {
	outline: 2px solid #008568;
	outline-offset: 2px;
}

/* --------------------------------------------------------------------- */
/* v2.29.0 — self-contained band background (band_bg shortcode attribute)  */
/* Paints the band onto the scroller wrapper itself (cover/center), so the */
/* layout no longer depends on the surrounding Elementor section having a   */
/* background. Inline style supplies the image/colour; this adds sizing +   */
/* padding so cards + heading sit nicely inside the band.                  */
/* --------------------------------------------------------------------- */
.tcs-wrapper--banded {
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	padding: 30px 28px;
}
@media (max-width: 640px) {
	.tcs-wrapper--banded { padding: 22px 16px; }
}
/* Heading + kicker read white on a dark/teal band (matches the template's
 * white "Artimiausi renginiai" heading). Light-band sites override. */
.tcs-wrapper--banded.tcs-wrapper--kompaktinis .tcs-heading,
.tcs-wrapper--banded.tcs-wrapper--kompaktinis .tcs-kicker {
	color: #ffffff;
	font-family: 'Jost', var(--tcs-font-family);
}