/*------------------------------------------------------------------
[ AB Story — закачена секция с глави ]

Променливите (--ab-story-*) идват inline от шорткода. Структурата е
тук, project-specific override-и отиват в css/ab_custom.css.
------------------------------------------------------------------*/

.ab-story {
	position: relative;
	width: 100%;
	background: var(--ab-story-bg, #231a17);
	color: var(--ab-story-text-color, #fff);
	font-family: inherit;
}

.ab-story__stage {
	position: relative;
	height: calc(100vh - var(--ab-story-offset, 0px));
	height: calc(100svh - var(--ab-story-offset, 0px));
	overflow: hidden;
	background: var(--ab-story-bg, #231a17);
	isolation: isolate;
}

/* ── Фонове ────────────────────────────────────────────────────── */

.ab-story__bgs {
	position: absolute;
	inset: 0;
	z-index: 0;
}
.ab-story__bg {
	position: absolute;
	inset: 0;
	opacity: 0;
	will-change: opacity, transform;
	transform-origin: 50% 50%;
}
.ab-story__bg.is-active {
	opacity: 1;
}
.ab-story__bg-img,
.ab-story__bg img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/* ── Градиенти към фона на сайта ───────────────────────────────── */

.ab-story__fade {
	position: absolute;
	left: 0;
	right: 0;
	height: var(--ab-story-fade-h, 180px);
	z-index: 1;
	pointer-events: none;
}
.ab-story__fade--top {
	top: 0;
	background: linear-gradient(to bottom, var(--ab-story-fade, #231a17) 0%, rgba(0, 0, 0, 0) 100%);
}
.ab-story__fade--bottom {
	bottom: 0;
	background: linear-gradient(to top, var(--ab-story-fade, #231a17) 0%, rgba(0, 0, 0, 0) 100%);
}

/* ── Глави ─────────────────────────────────────────────────────── */

.ab-story__slides {
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
}

.ab-story__slide {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	opacity: 0;
	visibility: hidden;
}
.ab-story__slide.is-active {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

/* .container на темата, ограничен до --ab-story-container (по подразбиране 1400px) */
.ab-story .ab-story__container {
	display: flex;
	width: 100%;
	max-width: var(--ab-story-container, 1400px);
	margin: 0 auto;
	padding-left: 15px;
	padding-right: 15px;
}
.ab-story__slide--left .ab-story__container {
	justify-content: flex-start;
}
.ab-story__slide--right .ab-story__container {
	justify-content: flex-end;
}

.ab-story__content {
	width: 50%;
	max-width: var(--ab-story-text-w, 640px);
	will-change: transform;
}

/* Номер + етикет + орнамент */
.ab-story__chapter {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: max-content;
	margin: 0 0 26px;
	color: var(--ab-story-accent, #C39B63);
}
.ab-story__number {
	display: block;
	font-family: 'CyrillicOld';
	font-weight: 400;
	font-size: var(--ab-story-number-size, 64px);
	line-height: 0.7;
	letter-spacing: 0.04em;
}
.ab-story__label {
	display: block;
	/* margin-top: 8px; */
	font-family: "Bona Nova", Georgia, serif;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	text-indent: 0.32em; /* компенсира letter-spacing за визуално центриране */
}
.ab-story__ornament {
	display: block;
	width: 110px;
	height: 14px;
	margin-top: 0px;
}
.ab-story__ornament-svg {
	display: block;
	width: 100%;
	height: 100%;
	overflow: visible;
}
.ab-story__ornament-svg line {
	stroke:#b5875396;
}

/* Заглавие — два реда в един <h2>: бял и акцентен, всеки със собствен text-shadow */
.ab-story__title {
	margin: 0 0 28px;
	font-family: "Bona Nova", Georgia, serif;
	font-weight: 700;
	font-size: var(--ab-story-title-size, 64px);
	/* line-height: 1.08; */
	letter-spacing: 0;
	text-transform: none;
	color: var(--ab-story-title-color, #fff);
}
.ab-story__title-main,
.ab-story__title-accent {
	display: block;
}
.ab-story__title-main {
	color: var(--ab-story-title-color, #fff);
	text-shadow:
		0 0 18px rgba(255, 255, 255, 0.5),
		0 0 48px rgba(255, 255, 255, 0.2);
}
.ab-story__title-accent {
	color: var(--ab-story-accent, #C39B63);
	text-shadow:
		0 0 18px rgba(195, 155, 99, 0.45),
		0 0 48px rgba(195, 155, 99, 0.2);
}
/* <em> вътре в който и да е ред = акцентен цвят (за смесени редове) */
.ab-story__title em {
	font-style: normal;
	color: var(--ab-story-accent, #C39B63);
}

.ab-story__desc {
	font-size: var(--ab-story-text-size, 17px);
	line-height: 1.75;
	color: var(--ab-story-text-color, #fff);
}
.ab-story__desc p {
	margin: 0 0 1em;
	color: inherit;
}
.ab-story__desc p:last-child {
	margin-bottom: 0;
}
.ab-story__desc a {
	color: var(--ab-story-accent, #C39B63);
}

/* ── Страничен вертикален текст ────────────────────────────────── */

.ab-story__aside {
	position: absolute;
	top: 50%;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 18px;
	transform: translateY(-50%);
	color: var(--ab-story-accent, #C39B63);
}
.ab-story__aside--left {
	left: 2.6vw;
}
.ab-story__aside--right {
	right: 2.6vw;
}
.ab-story__aside-line {
	display: block;
	width: 1px;
	height: 110px;
	background: currentColor;
	opacity: 0.7;
}
.ab-story__aside-text {
	display: block;
	writing-mode: vertical-rl;
	font-family: "Bona Nova", Georgia, serif;
	font-size: 18px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	white-space: nowrap;
}
.ab-story__aside--left .ab-story__aside-text {
	transform: rotate(180deg); /* чете се отдолу нагоре, както в дизайна */
}

/* ── Подсказка за скрол ────────────────────────────────────────── */

.ab-story__hint {
	position: absolute;
	left: 50%;
	bottom: 4.5vh;
	z-index: 3;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	transform: translateX(-50%);
	color: var(--ab-story-accent, #C39B63);
	pointer-events: none;
	font-family: "Bona Nova", Georgia, serif;
}
.ab-story--has-meta .ab-story__hint {
	bottom: calc(4.5vh + 44px);
}
.ab-story__hint-text {
	font-size: 12px;
	letter-spacing: 1px;
	text-transform: uppercase;
	white-space: nowrap;
}
/* Същата вертикална линия с пробягващ сегмент като в ab_hero */
.ab-story__hint-line {
	position: relative;
	width: 1px;
	height: 46px;
	overflow: hidden;
	background: rgba(195, 155, 99, 0.25);
	background: color-mix(in srgb, currentColor 25%, transparent);
}
.ab-story__hint-line::after {
	content: "";
	position: absolute;
	left: 0;
	top: -50%;
	width: 100%;
	height: 50%;
	background: currentColor;
	animation: ab-story-hint 2.4s ease-in-out infinite;
}
@keyframes ab-story-hint {
	0%   { top: -50%; }
	60%  { top: 100%; }
	100% { top: 100%; }
}

/* ── Прогрес и брояч ───────────────────────────────────────────── */

.ab-story__meta {
	position: absolute;
	left: 50%;
	bottom: 4.5vh;
	z-index: 3;
	display: flex;
	align-items: center;
	gap: 22px;
	width: min(var(--ab-story-container, 1400px), 88vw);
	transform: translateX(-50%);
	transition: opacity 0.45s ease, transform 0.45s ease, visibility 0.45s;
}
/* Скрит, докато секцията е още закачена след последната глава (пауза/hold) */
.ab-story__meta.is-out {
	opacity: 0;
	visibility: hidden;
	transform: translateX(-50%) translateY(14px);
	pointer-events: none;
}
.ab-story__progress {
	position: relative;
	flex: 1 1 auto;
	height: 1px;
	background: rgba(255, 255, 255, 0.18);
	overflow: hidden;
}
.ab-story__progress-bar {
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 0;
	background: var(--ab-story-accent, #C39B63);
	box-shadow: 0 0 10px var(--ab-story-accent, #C39B63);
}
.ab-story__counter {
	flex: 0 0 auto;
	font-family: "Bona Nova", Georgia, serif;
	font-size: 15px;
	letter-spacing: 0.18em;
	color: var(--ab-story-accent, #C39B63);
	white-space: nowrap;
}
.ab-story__counter-current {
	color: var(--ab-story-title-color, #fff);
}
.ab-story__counter-sep {
	margin: 0 0.35em;
	opacity: 0.6;
}

/* ── Маска — бутилка ───────────────────────────────────────────── */

.ab-story__mask {
	position: absolute;
	inset: 0;
	z-index: 10;
	display: none; /* включва се от JS с .ab-story--ready */
	width: 100%;
	height: 100%;
	pointer-events: none;
}
.ab-story__mask-fill {
	fill: var(--ab-story-bg, #231a17);
}
.ab-story--ready .ab-story__mask {
	display: block;
}
.ab-story--revealed .ab-story__mask {
	display: none;
}

/* ── Мобилно / малки екрани ────────────────────────────────────── */
@media (max-width: 1550px) {
	.ab-story .ab-story__container{
		padding-left: 90px;
		padding-right: 90px;
	}
}
@media (max-width: 991px) {
	
}
@media (max-width: 1199px) {
	.ab-story__content {
		width: 56%;
	}
	.ab-story__title {
		font-size: calc(var(--ab-story-title-size, 64px) * 0.8);
	}
	.ab-story__number {
		font-size: calc(var(--ab-story-number-size, 64px) * 0.85);
	}
}

@media (max-width: 991px) {
	.ab-story__slide {
		align-items: flex-start;
		padding-top: 12vh;
	}
	.ab-story__content {
		width: 100%;
		max-width: none;
	}
	.ab-story__title {
		font-size: calc(var(--ab-story-title-size, 64px) * 0.62);
		margin-bottom: 16px;
	}
	.ab-story__number {
		font-size: calc(var(--ab-story-number-size, 64px) * 0.7);
	}
	.ab-story__chapter {
		margin-bottom: 16px;
	}
	.ab-story__desc {
		font-size: calc(var(--ab-story-text-size, 17px) * 0.94);
		line-height: 1.6;
		max-height: calc(100svh - var(--ab-story-offset, 0px) - 12vh - 260px);
		overflow: hidden;
	}
	.ab-story__aside-line {
		height: 60px;
	}
	.ab-story__aside--left {
		left: 12px;
	}
	.ab-story__aside--right {
		right: 12px;
	}
	.ab-story__aside-text {
		font-size: 11px;
	}
	.ab-story__meta {
		width: 90vw;
		gap: 14px;
	}
	.ab-story__counter {
		font-size: 13px;
	}
	.ab-story .ab-story__container{
		padding-left: 50px;
		padding-right: 50px;
	}
}

@media (max-width: 767px) {
	.ab-story__aside {
		display: none;
	}
	.ab-story .ab-story__container{
		padding-left: 15px;
		padding-right: 15px;
	}
}

@media (max-width: 575px) {
	.ab-story__slide {
		padding-top: 10vh;
	}
	.ab-story__title {
		font-size: calc(var(--ab-story-title-size, 64px) * 0.5);
	}
	.ab-story__desc {
		font-size: calc(var(--ab-story-text-size, 17px) * 0.88);
	}
}

/* ── Без анимации / статичен режим ─────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
	.ab-story__hint-line::after {
		animation: none;
	}
}
.ab-story--static .ab-story__mask,
.ab-story--static .ab-story__hint {
	display: none;
}
.ab-story--static .ab-story__slide,
.ab-story--static .ab-story__bg {
	transition: opacity 0.6s ease;
}
/* Без JS главите са скрити под pointer-events; в статичен режим няма навигация,
   затова редим главите една под друга */
.ab-story--static .ab-story__stage {
	height: auto;
}
.ab-story--static .ab-story__slides {
	position: relative;
}
.ab-story--static .ab-story__slide {
	position: relative;
	opacity: 1;
	visibility: visible;
	min-height: 100vh;
	pointer-events: auto;
}
.ab-story--static .ab-story__bgs,
.ab-story--static .ab-story__meta {
	display: none;
}