/* Reference majitelů – barvy/rozměry jako proměnné, přepiš je v Breakdance (Global CSS) na .rf-reference */
.rf-reference {
	--rf-text: #2a1d07;
	--rf-quote: #7a6a52;
	--rf-muted: #8a8272;
	--rf-card: #fff;
	--rf-radius: 10px;
	--rf-gap: 20px;
	--rf-min-h: 210px;
	--rf-accent: #1f6fd1;
	--rf-tabs-bg: #FAF8EF;
	--rf-tab-text: #2a1d07;
	--rf-arrow: #1c1408;
	--rf-dot: #d6d0c3;
	--rf-dots-bg: #fff;
	--rf-dots-border: #ece6d8;
	--rf-speed: .5s;
	--rf-cols: var(--rf-cols-d, 1);

	width: 100%;
	text-align: left;
}
.rf-reference *,
.rf-reference *::before,
.rf-reference *::after { box-sizing: border-box; }

/* Záložky */
.rf-reference .rf-tabs {
	display: flex;
	width: max-content;
	max-width: 100%;
	gap: 2px;
	margin: 0 auto 28px;
	padding: 4px;
	border-radius: 999px;
	background: var(--rf-tabs-bg);
	overflow-x: auto;
	scrollbar-width: none;
}
.rf-reference .rf-tabs::-webkit-scrollbar { display: none; }
.rf-reference .rf-tab {
	flex: none;
	margin: 0;
	padding: 8px 16px;
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: var(--rf-tab-text);
	font: inherit;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.2;
	white-space: nowrap;
	cursor: pointer;
	transition: background .2s, color .2s;
}
.rf-reference .rf-tab:hover { background: rgba(255, 255, 255, .6); }
.rf-reference .rf-tab.is-active {
	background: var(--rf-accent);
	color: #fff;
}

/* Carousel */
.rf-reference .rf-stage {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	grid-template-areas: "view";
	align-items: center;
}
.rf-reference.rf-has-arrows .rf-stage {
	grid-template-columns: 56px minmax(0, 1fr) 56px;
	grid-template-areas: "prev view next";
}
.rf-reference .rf-viewport {
	grid-area: view;
	overflow: hidden;
	padding: 8px 20px 28px;
	margin: -8px -20px -28px;
	touch-action: pan-y;
}
.rf-reference .rf-track {
	display: flex;
	gap: var(--rf-gap);
	transition: transform var(--rf-speed) cubic-bezier(.22, .7, .2, 1);
}

/* Karta */
.rf-reference .rf-card {
	flex: 0 0 calc((100% - (var(--rf-cols) - 1) * var(--rf-gap)) / var(--rf-cols));
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 28px;
	min-height: var(--rf-min-h);
	margin: 0;
	padding: 22px 24px;
	border-radius: var(--rf-radius);
	background: var(--rf-card);
	box-shadow: 0 0 0 1px rgba(42, 29, 7, .04), 0 10px 24px -14px rgba(42, 29, 7, .3);
	color: var(--rf-text);
}
.rf-reference .rf-card.is-hidden { display: none; }
/* karty mimo výřez schovat (ať nepřesahují stínem), až po dojetí animace */
.rf-reference .rf-card[aria-hidden="true"] {
	visibility: hidden;
	transition: visibility 0s linear var(--rf-speed);
}
.rf-reference:not(.rf-ready) .rf-card,
.rf-reference:not(.rf-ready) .rf-track { transition: none !important; }

.rf-reference .rf-quote,
.rf-reference .rf-quote p {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	quotes: none;
	font-style: normal;
	text-align: left;
}
.rf-reference .rf-quote::before,
.rf-reference .rf-quote::after { content: none; display: none; }
.rf-reference .rf-quote p {
	color: var(--rf-quote);
	font-size: 14.5px;
	line-height: 1.65;
}
.rf-reference .rf-quote .rf-quote-hl {
	color: var(--rf-text);
	font-weight: 500;
}

.rf-reference .rf-author {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0;
}
.rf-reference img.rf-avatar {
	flex: none;
	width: 52px !important;
	height: 52px !important;
	max-width: none !important;
	margin: 0 !important;
	border-radius: 6px;
	object-fit: cover !important;
}
.rf-reference .rf-author-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rf-reference .rf-name {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--rf-text);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.3;
}
.rf-reference .rf-verified { display: inline-flex; color: var(--rf-accent); }
.rf-reference .rf-verified svg { width: 15px; height: 15px; }
.rf-reference .rf-role {
	color: var(--rf-muted);
	font-size: 11.5px;
	line-height: 1.4;
}
.rf-reference .rf-sr {
	position: absolute;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* Šipky */
.rf-reference .rf-arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--rf-arrow);
	cursor: pointer;
	transition: opacity .2s;
}
.rf-reference .rf-arrow svg { width: 26px; height: 26px; }
.rf-reference .rf-prev { grid-area: prev; justify-self: start; }
.rf-reference .rf-next { grid-area: next; justify-self: end; }
.rf-reference .rf-arrow:disabled { opacity: .3; cursor: default; }
.rf-reference.rf-no-nav .rf-arrow { visibility: hidden; }

/* Tečky */
.rf-reference .rf-dots {
	display: flex;
	width: max-content;
	align-items: center;
	gap: 2px;
	margin: 22px auto 0;
	padding: 3px 6px;
	border: 1px solid var(--rf-dots-border);
	border-radius: 999px;
	background: var(--rf-dots-bg);
}
.rf-reference .rf-dots[hidden] { display: none; }
.rf-reference .rf-dot {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	padding: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
	transition: width .3s ease;
}
.rf-reference .rf-dot::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 999px;
	background: var(--rf-dot);
	transition: width .3s ease, background .3s ease;
}
.rf-reference .rf-dot.is-active { width: 34px; }
.rf-reference .rf-dot.is-active::before { width: 28px; background: var(--rf-accent); }

.rf-reference .rf-tab:focus-visible,
.rf-reference .rf-arrow:focus-visible,
.rf-reference .rf-dot:focus-visible {
	outline: 2px solid var(--rf-accent);
	outline-offset: 2px;
}

/* Tablet */
@media (max-width: 900px) {
	.rf-reference { --rf-cols: min(var(--rf-cols-d, 1), 2); }
	.rf-reference.rf-has-arrows .rf-stage {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas: "view";
	}
	.rf-reference .rf-arrow { display: none; }
}

/* Mobil */
@media (max-width: 600px) {
	.rf-reference { --rf-cols: 1; --rf-gap: 14px; }
	/* záložky jako samostatné pilulky, zalomené a vycentrované */
	.rf-reference .rf-tabs {
		flex-wrap: wrap;
		justify-content: center;
		gap: 8px;
		width: auto;
		max-width: 100%;
		margin-bottom: 20px;
		padding: 0;
		border-radius: 0;
		background: transparent;
		overflow: visible;
	}
	.rf-reference .rf-tab {
		padding: 9px 16px;
		background: var(--rf-tabs-bg);
		font-size: 13.5px;
	}
	.rf-reference .rf-tab:hover { background: var(--rf-tabs-bg); }
	.rf-reference .rf-tab.is-active { background: var(--rf-accent); }
	.rf-reference .rf-viewport { padding: 6px 0 24px; margin: -6px 0 -24px; }
	.rf-reference .rf-card {
		padding: 20px;
		box-shadow: 0 0 0 1px rgba(42, 29, 7, .05), 0 14px 20px -18px rgba(42, 29, 7, .45);
	}
}

@media (prefers-reduced-motion: reduce) {
	.rf-reference .rf-track,
	.rf-reference .rf-dot,
	.rf-reference .rf-dot::before { transition: none; }
}