/* ==========================================================================
   Baliimoti Design — Помощни класове
   Достъпност, подравняване, отстояния, видимост, clamp, ratio, reveal анимация.
   Стойности: само var(--bd-*) от tokens.css.
   ========================================================================== */

/* --- Достъпност ------------------------------------------------------------ */

.bd-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.bd-skip-link {
	position: absolute;
	left: var(--bd-s-4);
	top: -100px;
	z-index: var(--bd-z-modal);
	padding: var(--bd-s-3) var(--bd-s-5);
	border-radius: var(--bd-radius);
	background-color: var(--bd-primary);
	color: var(--bd-text-on-dark);
	text-decoration: none;
	transition: top var(--bd-t-base) var(--bd-ease);
}

.bd-skip-link:focus {
	top: var(--bd-s-4);
	outline: none;
	box-shadow: 0 0 0 3px var(--bd-focus-ring);
}

/* --- Подравняване на текст ------------------------------------------------- */

.bd-text-left { text-align: left; }
.bd-text-center { text-align: center; }
.bd-text-right { text-align: right; }

/* --- Отстояния (8px скала) ------------------------------------------------- */

.bd-mt-0 { margin-top: 0; }
.bd-mt-1 { margin-top: var(--bd-s-1); }
.bd-mt-2 { margin-top: var(--bd-s-2); }
.bd-mt-3 { margin-top: var(--bd-s-3); }
.bd-mt-4 { margin-top: var(--bd-s-4); }
.bd-mt-5 { margin-top: var(--bd-s-5); }
.bd-mt-6 { margin-top: var(--bd-s-6); }
.bd-mt-7 { margin-top: var(--bd-s-7); }
.bd-mt-8 { margin-top: var(--bd-s-8); }
.bd-mt-9 { margin-top: var(--bd-s-9); }
.bd-mt-10 { margin-top: var(--bd-s-10); }

.bd-mb-0 { margin-bottom: 0; }
.bd-mb-1 { margin-bottom: var(--bd-s-1); }
.bd-mb-2 { margin-bottom: var(--bd-s-2); }
.bd-mb-3 { margin-bottom: var(--bd-s-3); }
.bd-mb-4 { margin-bottom: var(--bd-s-4); }
.bd-mb-5 { margin-bottom: var(--bd-s-5); }
.bd-mb-6 { margin-bottom: var(--bd-s-6); }
.bd-mb-7 { margin-bottom: var(--bd-s-7); }
.bd-mb-8 { margin-bottom: var(--bd-s-8); }
.bd-mb-9 { margin-bottom: var(--bd-s-9); }
.bd-mb-10 { margin-bottom: var(--bd-s-10); }

/* --- Видимост по breakpoint ------------------------------------------------ */

@media (max-width: 767.98px) {
	.bd-hide-mobile { display: none; }
}

@media (min-width: 768px) {
	.bd-hide-desktop { display: none; }
}

/* --- Отрязване на редове --------------------------------------------------- */

.bd-clamp-2,
.bd-clamp-3 {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.bd-clamp-2 { -webkit-line-clamp: 2; line-clamp: 2; }
.bd-clamp-3 { -webkit-line-clamp: 3; line-clamp: 3; }

/* --- Съотношения (aspect-ratio) -------------------------------------------- */

.bd-ratio {
	position: relative;
	overflow: hidden;
}

.bd-ratio--4-3 { aspect-ratio: 4 / 3; }
.bd-ratio--3-2 { aspect-ratio: 3 / 2; }
.bd-ratio--16-9 { aspect-ratio: 16 / 9; }

.bd-ratio > img,
.bd-ratio > picture,
.bd-ratio > video,
.bd-ratio > iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* --- Reveal анимация при скрол -------------------------------------------- */

.bd-reveal {
	opacity: 0;
	transform: translateY(16px);
	transition: opacity 600ms var(--bd-ease), transform 600ms var(--bd-ease);
}

.bd-reveal.is-visible {
	opacity: 1;
	transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
	.bd-reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}
}