/*
 * Книжки за принтиране – архив (/knizhki-za-otsvetyavane/) и книжка.
 * Всичко е под .ftk. Divi налага line-height:1.5em!important на текст и заглавия – затова тук няма line-height.
 *
 * 1. Основа   2. Hero на архива   3. Табове и филтри   4. Карти   5. Как се ползват
 * 6. Бутони   7. Книжка   8. Преглед на цял екран   9. Таблет и телефон
 */

/* ---------- 1. Основа ---------- */
.ftk {
	--ftk-brown: #3b2314;
	--ftk-text: #5a4637;
	--ftk-muted: #8a7666;
	--ftk-line: #f0dccd;
	--ftk-orange: #e66c4d;
	--ftk-orange-dark: #c9532f;
	--ftk-cream: #fdf3e9;
	--ftk-peach: #fbe3d3;
	--ftk-green: #2f7a3e;
	--ftk-gold: #f6c453;
	--ftk-gold-dark: #8a5a00;
	--ftk-radius: 18px;
	--ftk-shadow: 0 14px 34px -18px rgba(59, 35, 20, .45);
	--ftk-header: 98px; /* хедърът на Divi е position:absolute върху съдържанието */
	color: var(--ftk-text); /* без фон: Divi Custom CSS дава на #main-content background:transparent!important */
	font-size: 17px;
}
.ftk *, .ftk *::before, .ftk *::after { box-sizing: border-box; }
.ftk h1, .ftk h2 { padding: 0; }
.ftk-wrap { width: min(1160px, 100% - 32px); margin-inline: auto; }
.ftk-crumbs { padding-top: 18px; font-size: 14px; }
.ftk-crumbs a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.ftk :focus-visible { outline: 3px solid var(--ftk-orange); outline-offset: 3px; }

/* ---------- 2. Hero на архива ---------- */
.ftk-hero {
	padding: var(--ftk-header) 0 48px;
	background:
		radial-gradient(1200px 400px at 85% 0%, rgba(230, 108, 77, .18), transparent 60%),
		linear-gradient(180deg, var(--ftk-cream), #fff);
}
.ftk-hero__grid { display: grid; grid-template-columns: 1.25fr 1fr; gap: 32px; align-items: center; padding-top: 24px; }
.ftk-hero__title { margin-bottom: 16px; font-size: clamp(32px, 4.2vw, 50px); }
.ftk-hero__intro { max-width: 58ch; margin-bottom: 16px; font-size: 18px; }
.ftk-hero__stats { font-size: 15px; color: var(--ftk-brown); }
.ftk-hero__stats strong { color: var(--ftk-green); }
.ftk-hero__stats .ftk-hero__unlocked { display: inline-flex; align-items: center; gap: 5px; color: var(--ftk-gold-dark); }
.ftk-hero__fan { position: relative; height: 300px; }
.ftk-hero__cover {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 170px;
	height: auto;
	border-radius: 10px;
	box-shadow: var(--ftk-shadow);
}
.ftk-hero__cover--1 { z-index: 3; transform: translate(-50%, -50%); }
.ftk-hero__cover--2 { z-index: 2; transform: translate(-115%, -46%) rotate(-9deg); }
.ftk-hero__cover--3 { z-index: 1; transform: translate(15%, -46%) rotate(9deg); }

/* ---------- 3. Табове между видовете и филтри по тема ---------- */
.ftk-body { padding: 8px 0 72px; }
.ftk-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; border-bottom: 2px solid var(--ftk-peach); }
.ftk-tab {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-bottom: -2px;
	padding: 12px 18px;
	border-bottom: 3px solid transparent;
	color: var(--ftk-brown);
	font-size: 18px;
}
.ftk-tab:hover { border-bottom-color: var(--ftk-peach); }
.ftk-tab.is-active { border-bottom-color: var(--ftk-orange); font-weight: 600; }
.ftk-tab__count { padding: 1px 8px; border-radius: 999px; background: var(--ftk-peach); color: var(--ftk-orange-dark); font-size: 12px; }

.ftk-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; }
.ftk-chip {
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	padding: 6px 16px;
	border: 1.5px solid #ecd2c2;
	border-radius: 999px;
	background: #fff;
	color: var(--ftk-brown);
	font: inherit;
	font-size: 15px;
	cursor: pointer;
	transition: border-color .15s;
}
.ftk-chip:hover { border-color: var(--ftk-orange); }
.ftk-chip.is-active { border-color: var(--ftk-brown); background: var(--ftk-brown); color: #fff; }
.ftk-chip--free { border-color: #b9dcc0; color: var(--ftk-green); }
.ftk-chip--free.is-active { border-color: var(--ftk-green); background: var(--ftk-green); }
.ftk-chip--small { min-height: 32px; padding: 3px 12px; font-size: 14px; }

/* ---------- 4. Карти ---------- */
.ftk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 36px 28px; }
.ftk-card[hidden], .ftk-empty[hidden] { display: none; }
.ftk-card__link { display: block; border-radius: var(--ftk-radius); }
.ftk-card__cover { position: relative; display: block; }
.ftk-card__cover img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 12px;
	box-shadow: var(--ftk-shadow);
	transition: transform .25s ease;
}
.ftk-card__link:hover img { transform: translateY(-4px) rotate(-1deg); }
.ftk-card.is-unlocked .ftk-card__cover img { box-shadow: 0 0 0 3px var(--ftk-gold), var(--ftk-shadow); } /* абонат: отключените се виждат от пръв поглед */
.ftk-card__title { display: block; margin: 16px 0 6px; color: var(--ftk-orange-dark); font-size: 21px; }
.ftk-card__excerpt { margin-bottom: 6px; font-size: 15px; }
.ftk-card__meta { color: var(--ftk-muted); font-size: 13px; }
.ftk-empty { padding: 24px 0; font-size: 18px; }

.ftk-badge {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 4px 10px;
	border-radius: 999px;
	font-size: 12.5px;
	font-weight: 600;
}
.ftk-card .ftk-badge { position: absolute; top: 10px; left: 10px; box-shadow: 0 4px 10px -4px rgba(0, 0, 0, .35); }
.ftk-badge--free { background: var(--ftk-green); color: #fff; }
.ftk-badge--sub { background: rgba(255, 255, 255, .94); color: var(--ftk-brown); }
.ftk-badge--unlocked { background: var(--ftk-gold); color: var(--ftk-brown); } /* абонат – различава се и от заключените, и от безплатните */

/* ---------- 5. Как се ползват ---------- */
.ftk-how { margin-top: 64px; padding: 32px; border-radius: var(--ftk-radius); background: var(--ftk-cream); }
.ftk-how h2 { margin-bottom: 20px; font-size: 28px; }
.ftk-how__steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; counter-reset: ftk-step; }
.ftk-how__steps li { position: relative; padding-left: 52px; counter-increment: ftk-step; }
.ftk-how__steps li::before {
	content: counter(ftk-step);
	position: absolute;
	top: -2px;
	left: 0;
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: var(--ftk-orange);
	color: #fff;
	font-size: 18px;
}
.ftk-how__steps strong { display: block; color: var(--ftk-brown); }
.ftk-how__sub { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--ftk-line); }

/* ---------- 6. Бутони ---------- */
.ftk-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 52px;
	padding: 12px 28px;
	border-radius: 999px;
	font-size: 18px;
	font-weight: 600;
	text-align: center;
	transition: background-color .15s;
}
.ftk-btn--primary { background: var(--ftk-orange); color: #fff; box-shadow: 0 10px 22px -10px rgba(230, 108, 77, .9); }
.ftk-btn--primary:hover { background: var(--ftk-orange-dark); color: #fff; }
.ftk-btn--ghost { border: 2px solid var(--ftk-orange); color: var(--ftk-orange-dark); }
.ftk-btn--ghost:hover { background: var(--ftk-cream); }

/* ---------- 7. Книжка ---------- */
.ftk--single > .ftk-wrap { padding-top: var(--ftk-header); } /* Divi Custom CSS нулира padding на #main-content с !important */
.ftk-book { display: grid; grid-template-columns: minmax(0, 440px) minmax(0, 1fr); gap: 56px; align-items: start; padding: 28px 0 48px; }
.ftk-zoom { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.ftk-book__cover { display: block; width: 100%; height: auto; border-radius: 14px; box-shadow: var(--ftk-shadow); }
.ftk-thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 16px; }
.ftk-thumb { display: block; width: 100%; height: auto; border: 1px solid #eadbd0; border-radius: 8px; background: #fff; transition: transform .2s; }
.ftk-zoom:hover .ftk-thumb { transform: translateY(-3px); }
.ftk-kicker { margin: 4px 0 8px; font-size: 15px; letter-spacing: .06em; text-transform: uppercase; }
.ftk-book__title { margin-bottom: 14px; font-size: clamp(34px, 4vw, 52px); }
.ftk-book__lead { margin-bottom: 24px; color: var(--ftk-brown); font-size: 20px; }
.ftk-facts { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 18px; }
.ftk-facts div { padding: 10px 18px; border: 1px solid var(--ftk-line); border-radius: 14px; background: #fff; }
.ftk-facts dt { color: var(--ftk-muted); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; }
.ftk-facts dd { margin: 0; color: var(--ftk-brown); font-size: 18px; font-weight: 600; }
.ftk-book__temas { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.ftk-get { padding: 24px; border: 2px solid var(--ftk-peach); border-radius: var(--ftk-radius); background: #fff; }
.ftk-get .ftk-btn { width: 100%; }
.ftk-get__lock { margin-bottom: 16px; color: var(--ftk-brown); }
.ftk-get__lock .ftk-badge { margin-right: 6px; padding-left: 0; }
.ftk-get__note .ftk-badge { padding: 2px 9px; vertical-align: 1px; }
.ftk-get__note { margin-top: 12px; color: var(--ftk-muted); font-size: 14px; text-align: center; }
.ftk-content { max-width: 760px; padding: 8px 0 24px; font-size: 18px; }
.ftk-content h2 { margin: 32px 0 12px; font-size: 28px; }
.ftk-content p { margin-bottom: 16px; }
.ftk-content li { position: relative; margin-bottom: 8px; padding-left: 28px; }
.ftk-content li::before {
	content: "";
	position: absolute;
	top: .6em;
	left: 6px;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--ftk-orange);
}
.ftk-related { padding: 40px 0 72px; border-top: 2px solid var(--ftk-cream); }
.ftk-related h2 { margin-bottom: 28px; font-size: 32px; }
.ftk-related__all { margin-top: 36px; text-align: center; }

/* ---------- 8. Преглед на цял екран ---------- */
.ftk-viewer { width: min(92vw, 760px); max-height: 94vh; padding: 0; border: 0; border-radius: 16px; overflow: visible; }
.ftk-viewer::backdrop { background: rgba(32, 20, 12, .82); }
.ftk-viewer__img { display: block; width: 100%; height: auto; max-height: 86vh; object-fit: contain; border-radius: 16px 16px 0 0; }
.ftk-viewer__caption { padding: 10px 16px; font-size: 14px; text-align: center; }
.ftk-viewer__close, .ftk-viewer__nav {
	position: absolute;
	width: 48px;
	height: 48px;
	border: 0;
	border-radius: 50%;
	background: #fff;
	color: var(--ftk-brown);
	font-size: 30px;
	cursor: pointer;
	box-shadow: 0 6px 18px -6px rgba(0, 0, 0, .5);
}
.ftk-viewer__close { top: -18px; right: -18px; }
.ftk-viewer__nav { top: 50%; transform: translateY(-50%); }
.ftk-viewer__nav--prev { left: -24px; }
.ftk-viewer__nav--next { right: -24px; }

/* ---------- 9. Таблет и телефон ---------- */
@media (max-width: 980px) {
	.ftk { --ftk-header: 88px; }
	.ftk-hero__grid, .ftk-book { grid-template-columns: 1fr; }
	.ftk-hero__fan { order: -1; height: 220px; }
	.ftk-hero__cover { width: 130px; }
	.ftk-book { gap: 32px; }
	.ftk-book__media { width: 100%; max-width: 440px; margin-inline: auto; }
	.ftk-how__steps { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
	.ftk-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 16px; }
	.ftk-card__title { font-size: 18px; }
	.ftk-card__excerpt { display: none; }
	.ftk-tab { padding: 10px 12px; font-size: 16px; }
	.ftk-how { padding: 24px 18px; }
	.ftk-viewer__close { top: 6px; right: 6px; }
	.ftk-viewer__nav--prev { left: 6px; }
	.ftk-viewer__nav--next { right: 6px; }
}
@media (prefers-reduced-motion: reduce) {
	.ftk * { transition: none; }
}