/**
 * AKC Kolektyvai Scroller — hero-focus spotlight + supporting fixes.
 *
 * Includes a small Elementor fix: hide icon-list rows whose text span is
 * empty (e.g. on single-kolektyvas pages where the contact ACF fields are
 * left blank, the phone/envelope icons would otherwise hang alone).
 *
 * Layout: viewport with absolute-positioned cards. Hero is center, prev/next
 * peek on each side at reduced opacity + scale. Other cards (far) live off-
 * canvas but stay in DOM so JS can slide them in.
 *
 * Author: Anykščių kultūros centras
 */

/* --------------------------------------------------------------------- */
/* Root + viewport                                                       */
/* --------------------------------------------------------------------- */
.akc-kolektyvai {
	--akc-kk-primary: var(--tr-color-primary, #001c46);
	--akc-kk-accent:  #a8d834;
	--akc-kk-text:    #1a1f2e;
	--akc-kk-muted:   #6b7280;
	--akc-kk-bg:      #ffffff;
	--akc-kk-shadow:  0 14px 40px -8px rgba(0, 28, 70, 0.18), 0 4px 12px -4px rgba(0, 0, 0, 0.08);

	max-width: 1140px;
	margin: 0 auto;
	padding: 24px 16px 32px;
	font-family: var(--tr-font-family, 'Roboto', system-ui, -apple-system, sans-serif);
	color: var(--akc-kk-text);
}

.akc-kolektyvai__viewport {
	position: relative;
	height: 520px;
	overflow: visible;
}

@media (max-width: 1199px) {
	.akc-kolektyvai__viewport { height: 470px; }
}
@media (max-width: 767px) {
	.akc-kolektyvai__viewport { height: 460px; overflow: hidden; }
}

/* --------------------------------------------------------------------- */
/* Track + card base                                                     */
/* --------------------------------------------------------------------- */
.akc-kolektyvai__track {
	position: absolute;
	inset: 0;
}

.akc-kolektyvai-card {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 460px;
	height: 500px;
	background: var(--akc-kk-bg);
	border-radius: 14px;
	box-shadow: var(--akc-kk-shadow);
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	display: flex;
	flex-direction: column;
	transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1),
	            opacity   0.55s cubic-bezier(0.4, 0, 0.2, 1),
	            filter    0.55s cubic-bezier(0.4, 0, 0.2, 1);
	will-change: transform, opacity;
}

/* Hero — center stage */
.akc-kolektyvai-card--hero {
	transform: translate(-50%, -50%) scale(1);
	opacity: 1;
	z-index: 3;
}
.akc-kolektyvai-card--hero:hover {
	box-shadow: 0 18px 48px -8px rgba(0, 28, 70, 0.26), 0 6px 16px -4px rgba(0, 0, 0, 0.10);
}

/* Side peeks */
.akc-kolektyvai-card--prev {
	transform: translate(calc(-50% - 380px), -50%) scale(0.85);
	opacity: 0.55;
	filter: saturate(0.85);
	z-index: 2;
}
.akc-kolektyvai-card--next {
	transform: translate(calc(-50% + 380px), -50%) scale(0.85);
	opacity: 0.55;
	filter: saturate(0.85);
	z-index: 2;
}

/* Far cards — out of view, no transition on entry/exit so they snap into
 * a peek position before transitioning. JS handles the choreography. */
.akc-kolektyvai-card--far {
	transform: translate(-50%, -50%) scale(0.7);
	opacity: 0;
	pointer-events: none;
	z-index: 1;
}

/* --------------------------------------------------------------------- */
/* Tablet                                                                 */
/* --------------------------------------------------------------------- */
@media (max-width: 1199px) {
	.akc-kolektyvai-card { width: 400px; height: 450px; }
	.akc-kolektyvai-card--prev { transform: translate(calc(-50% - 330px), -50%) scale(0.82); opacity: 0.45; }
	.akc-kolektyvai-card--next { transform: translate(calc(-50% + 330px), -50%) scale(0.82); opacity: 0.45; }
}

/* --------------------------------------------------------------------- */
/* Mobile — single card full-width, no peeks                              */
/* --------------------------------------------------------------------- */
@media (max-width: 767px) {
	.akc-kolektyvai { padding: 16px 12px 24px; }
	.akc-kolektyvai-card {
		width: calc(100vw - 32px);
		max-width: 360px;
		height: 440px;
	}
	.akc-kolektyvai-card--prev,
	.akc-kolektyvai-card--next {
		opacity: 0;
		pointer-events: none;
	}
	.akc-kolektyvai-card--prev { transform: translate(calc(-50% - 120vw), -50%) scale(1); }
	.akc-kolektyvai-card--next { transform: translate(calc(-50% + 120vw), -50%) scale(1); }
}

/* --------------------------------------------------------------------- */
/* Card internals — media + body                                         */
/* --------------------------------------------------------------------- */
.akc-kolektyvai-card__media {
	flex: 0 0 260px;
	overflow: hidden;
	background: rgba(0, 28, 70, 0.06);
	position: relative;
}
.akc-kolektyvai-card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.akc-kolektyvai-card__placeholder {
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, var(--akc-kk-primary) 0%, #2a4674 100%);
}

@media (max-width: 1199px) { .akc-kolektyvai-card__media { flex-basis: 220px; } }
@media (max-width: 767px)  { .akc-kolektyvai-card__media { flex-basis: 200px; } }

.akc-kolektyvai-card__body {
	flex: 1 1 auto;
	padding: 18px 22px 22px;
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-height: 0;
}

.akc-kolektyvai-card__title {
	margin: 0;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -0.01em;
	color: var(--akc-kk-primary);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.akc-kolektyvai-card__vadovas {
	margin: 0;
	font-size: 13px;
	font-weight: 600;
	color: var(--akc-kk-muted);
	display: flex;
	gap: 6px;
	align-items: baseline;
	flex-wrap: wrap;
}
.akc-kolektyvai-card__role { letter-spacing: 0.02em; }
.akc-kolektyvai-card__sep  { color: var(--akc-kk-accent); font-weight: 700; }
.akc-kolektyvai-card__name { color: var(--akc-kk-text); }

.akc-kolektyvai-card__excerpt {
	margin: 4px 0 0;
	font-size: 14px;
	line-height: 1.5;
	color: var(--akc-kk-muted);
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

@media (max-width: 767px) {
	.akc-kolektyvai-card__title { font-size: 15px; }
	.akc-kolektyvai-card__excerpt { -webkit-line-clamp: 2; }
}

/* --------------------------------------------------------------------- */
/* Arrow nav                                                             */
/* --------------------------------------------------------------------- */
.akc-kolektyvai__nav {
	all: unset;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: #ffffff;
	color: var(--akc-kk-primary);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	z-index: 5;
	box-shadow: 0 4px 12px -2px rgba(0, 0, 0, 0.12);
}
.akc-kolektyvai__nav:focus-visible {
	outline: 3px solid var(--akc-kk-accent);
	outline-offset: 2px;
}
.akc-kolektyvai__nav--prev { left: -10px; }
.akc-kolektyvai__nav--next { right: -10px; }

@media (max-width: 767px) {
	.akc-kolektyvai__nav { display: none; }
}

/* --------------------------------------------------------------------- */
/* Footer — dots + counter                                                */
/* --------------------------------------------------------------------- */
.akc-kolektyvai__footer {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	margin-top: 16px;
	flex-wrap: wrap;
}

.akc-kolektyvai__dots {
	display: flex;
	gap: 5px;
	align-items: center;
	flex-wrap: nowrap;
	max-width: 100%;
}
.akc-kolektyvai__dot {
	all: unset;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: rgba(0, 28, 70, 0.18);
	cursor: pointer;
	transition: background 0.18s, transform 0.18s, opacity 0.18s;
}
.akc-kolektyvai__dot:hover {
	background: rgba(0, 28, 70, 0.40);
}
.akc-kolektyvai__dot.is-active {
	background: var(--akc-kk-primary);
	transform: scale(1.4);
}
.akc-kolektyvai__dot.is-near {
	background: rgba(0, 28, 70, 0.45);
}
.akc-kolektyvai__dot.is-far {
	opacity: 0.35;
	transform: scale(0.7);
}
.akc-kolektyvai__dot:focus-visible {
	outline: 2px solid var(--akc-kk-accent);
	outline-offset: 2px;
}

.akc-kolektyvai__counter {
	margin: 0;
	font-size: 13px;
	font-weight: 700;
	color: var(--akc-kk-primary);
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.02em;
}
.akc-kolektyvai__counter-sep { color: var(--akc-kk-muted); margin: 0 2px; }

/* The Elementor icon-list empty-row fix is delivered as INLINE JS+style
 * from akc-kolektyvai.php (akc_kk_print_iconlist_fix). The external CSS
 * file approach was killed by browser cache + tobalt-child stripping ver
 * params (10y max-age = permanent). Inline `el.style.setProperty('display',
 * 'none', 'important')` is the only reliable path. */

/* Screen-reader-only live region */
.akc-kolektyvai__live {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* --------------------------------------------------------------------- */
/* Reduced motion — kill the transitions + auto-advance (JS reads too).  */
/* --------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.akc-kolektyvai-card,
	.akc-kolektyvai__dot {
		transition: none !important;
	}
}