/*!
 * Кораци – сајт: стилови за посетиоце.
 * Боје: тамна #17191E, златна #E8B53A, папир #F2F2EE.
 * Фонтови: EB Garamond, IBM Plex Sans.
 */

/* ==========================================================================
   Листе производа (продавница, категорије, сродни, „Нова издања“): картица и корица
   су од Фазе R2 у assets/css/prodavnica.css (један заједнички шаблон за све листе).
   ========================================================================== */

/* ==========================================================================
   Слајдер (Smart Slider 3, id 2): тамни прелив испод текста.
   Прелив је иза слоја са текстом, да бела слова буду читљива на светлој слици.
   ========================================================================== */
div#n2-ss-2 .n2-ss-slide {
	isolation: isolate;
}

div#n2-ss-2 .n2-ss-slide::before {
	content: "";
	display: block;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 0;
	pointer-events: none;
	background: linear-gradient(to top, rgba(0, 0, 0, .75) 0%, rgba(0, 0, 0, .6) 50%, rgba(0, 0, 0, .35) 100%);
}

div#n2-ss-2 .n2-ss-slide .n2-ss-layers-container {
	position: relative;
	z-index: 1;
}

/* Правни линкови у подножју сајта. */
.ast-footer-copyright .koraci-pravni-linkovi a {
	text-decoration: underline;
}

.ast-footer-copyright .koraci-pravni-linkovi {
	display: inline-block;
	margin-top: 4px;
}

/* ==========================================================================
   Faza 4: насловна страна и страна књиге
   Сви наши блокови носе класу .koraci-blok; фонт и боје важе само у њима.
   Боје: тамна #17191E, златна #E8B53A, папир #F2F2EE, картица #FAFAF8,
         линија #DCDAD2, текст #4A4C55, златна за текст #85600E.
   Фонтови: EB Garamond (наслови), IBM Plex Sans (текст). Мобилни прво.
   ========================================================================== */

.koraci-blok {
	--k-dark: #17191E;
	--k-gold: #E8B53A;
	--k-paper: #F2F2EE;
	--k-card: #FAFAF8;
	--k-line: #DCDAD2;
	--k-text: #4A4C55;
	--k-gold-dark: #85600E;
	--k-display: "EB Garamond", Georgia, "Times New Roman", serif;
	--k-sans: "IBM Plex Sans", "Open Sans", Arial, sans-serif;
	font-family: var(--k-sans);
	color: var(--k-text);
	box-sizing: border-box;
}

.koraci-blok *,
.koraci-blok *::before,
.koraci-blok *::after {
	box-sizing: border-box;
}

/* Насловна: пун-ширине траке излазе из Astra контејнера, без хоризонталног скрола. */
body.home .site-content,
body:has(.koraci-band) .site-content {
	overflow-x: clip;
}

/* --- Наслови, везе, дугме ---------------------------------------------- */
.koraci-blok .koraci-naslov {
	margin: 0;
	font-family: var(--k-display);
	font-weight: 600;
	font-size: 30px;
	line-height: 1.15;
	letter-spacing: 0;
	color: var(--k-dark);
}

.koraci-blok .koraci-eyebrow {
	margin: 0 0 12px;
	font-family: var(--k-sans);
	font-weight: 600;
	font-size: 13px;
	line-height: 1.2;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--k-gold-dark);
}

.koraci-blok .koraci-link-sve {
	font-family: var(--k-sans);
	font-weight: 600;
	font-size: 15px;
	line-height: 1.3;
	color: var(--k-gold-dark);
	text-decoration: none !important;
	border-bottom: 1px solid var(--k-gold);
	padding-bottom: 2px;
	white-space: nowrap;
	transition: color .15s ease, border-color .15s ease;
}

.koraci-blok .koraci-link-sve:hover,
.koraci-blok .koraci-link-sve:focus-visible {
	color: var(--k-dark);
	border-bottom-color: var(--k-dark);
}

.koraci-blok .koraci-dugme {
	display: inline-block;
	padding: 16px 32px;
	border-radius: 999px; /* R1: исти облик дугмета као на целом сајту (пилула) */
	background: var(--k-gold);
	color: var(--k-dark);
	font-family: var(--k-sans);
	font-weight: 600;
	font-size: 16px;
	line-height: 1;
	text-decoration: none !important;
	transition: background-color .15s ease;
}

.koraci-blok .koraci-dugme:hover {
	background: #F0C456;
	color: var(--k-dark);
}

.koraci-blok .koraci-dugme:focus-visible,
.koraci-blok a:focus-visible {
	outline: 2px solid var(--k-gold);
	outline-offset: 3px;
}

/* --- Секција и заглавље секције --------------------------------------- */
.koraci-blok.koraci-sekcija {
	margin: 48px 0;
}

.koraci-blok .koraci-sek-glava {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px 20px;
	margin: 0 0 24px;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--k-line);
}

/* --- Пун-ширине траке -------------------------------------------------- */
.koraci-blok.koraci-band {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	padding: 48px 0;
}

/* 1240 = 1200 садржаја + 2 x 20 унутрашње ивице: текст је у равни са остатком странице. */
.koraci-blok .koraci-band__in {
	max-width: 1240px;
	margin: 0 auto;
	padding: 0 20px;
}

.koraci-blok.koraci-band--papir {
	background: var(--k-paper);
}

.koraci-blok.koraci-band--tamna {
	background: var(--k-dark);
	color: #D6D6D0;
}

/* --- Увод (H1 и једна реченица) --------------------------------------- */
.koraci-blok.koraci-uvod {
	max-width: 760px;
	margin: 48px auto 8px;
	padding: 0 4px;
	text-align: center;
}

.koraci-blok.koraci-uvod::before {
	content: "";
	display: block;
	width: 48px;
	height: 3px;
	margin: 0 auto 22px;
	background: var(--k-gold);
}

.koraci-blok.koraci-uvod h1 {
	margin: 0 0 14px;
	font-family: var(--k-display);
	font-weight: 500;
	font-size: 34px;
	line-height: 1.1;
	letter-spacing: 0;
	color: var(--k-dark);
}

.koraci-blok.koraci-uvod p {
	margin: 0;
	font-size: 17px;
	line-height: 1.65;
	color: var(--k-text);
}

/* --- Листа књига (исти WooCommerce шаблон као продавница) -------------- */
.koraci-blok .koraci-proizvodi ul.products {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 28px 14px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.koraci-blok .koraci-proizvodi ul.products::before,
.koraci-blok .koraci-proizvodi ul.products::after {
	content: none !important;
	display: none !important;
}

.koraci-blok .koraci-proizvodi ul.products li.product {
	float: none !important;
	width: auto !important;
	max-width: none;
	margin: 0 !important;
	padding: 0;
	clear: none;
}

.koraci-blok.koraci-band--papir .koraci-proizvodi ul.products li.product .koraci-cover {
	background: var(--k-card);
}

/* --- Клуб: тамна трака ------------------------------------------------- */
.koraci-blok.koraci-klub-cta {
	padding: 56px 0;
}

.koraci-blok .koraci-klub-cta__mreza {
	display: grid;
	gap: 36px;
	align-items: center;
}

.koraci-blok.koraci-band--tamna .koraci-eyebrow {
	color: var(--k-gold);
}

.koraci-blok.koraci-klub-cta .koraci-naslov {
	font-weight: 500;
	font-size: 46px;
	line-height: 1.05;
	color: var(--k-paper);
}

.koraci-blok .koraci-klub-cta__opis {
	max-width: 520px;
	margin: 18px 0 28px;
	font-size: 17px;
	line-height: 1.65;
	color: #C9C9C2;
}

.koraci-blok .koraci-klub-cta__cinjenice {
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid rgba(242, 242, 238, .2);
}

.koraci-blok .koraci-klub-cta__cinjenice li {
	display: flex;
	align-items: center;
	gap: 16px;
	margin: 0;
	padding: 18px 0;
	border-bottom: 1px solid rgba(242, 242, 238, .2);
	font-family: var(--k-display);
	font-weight: 500;
	font-size: 28px;
	line-height: 1.1;
	color: var(--k-paper);
}

.koraci-blok .koraci-klub-cta__cinjenice li::before {
	content: "";
	flex: 0 0 auto;
	width: 18px;
	height: 3px;
	background: var(--k-gold);
}

/* --- Догађаји: картице ------------------------------------------------- */
.koraci-blok .koraci-dogadjaji__mreza {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 24px;
}

.koraci-blok .koraci-kartica {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--k-card);
	border: 1px solid var(--k-line);
	transition: border-color .15s ease;
}

.koraci-blok .koraci-kartica:hover {
	border-color: var(--k-gold);
}

.koraci-blok .koraci-kartica__slika {
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: var(--k-paper);
}

.koraci-blok .koraci-kartica__slika img {
	display: block;
	width: 100%;
	height: 100%;
	margin: 0;
	object-fit: cover;
}

.koraci-blok .koraci-kartica__telo {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 8px;
	padding: 20px 22px 24px;
}

.koraci-blok .koraci-kartica__datum {
	font-weight: 600;
	font-size: 13px;
	line-height: 1.2;
	letter-spacing: .08em;
	color: var(--k-gold-dark);
}

.koraci-blok .koraci-kartica__naslov {
	margin: 0;
	font-family: var(--k-display);
	font-weight: 600;
	font-size: 22px;
	line-height: 1.25;
	letter-spacing: 0;
	color: var(--k-dark);
}

.koraci-blok .koraci-kartica__naslov a {
	color: inherit;
	text-decoration: none;
}

/* Цела картица је веза (растегнут линк наслова). */
.koraci-blok .koraci-kartica__naslov a::after {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
}

.koraci-blok .koraci-kartica:hover .koraci-kartica__naslov a {
	color: var(--k-gold-dark);
}

.koraci-blok .koraci-kartica__izvod {
	margin: 0;
	font-size: 15px;
	line-height: 1.6;
	color: var(--k-text);
}

/* --- Дечје искре: трака ------------------------------------------------ */
.koraci-blok.koraci-iskre {
	padding: 56px 0;
	text-align: center;
}

.koraci-blok .koraci-band__in.koraci-iskre__in {
	max-width: 760px;
}

.koraci-blok .koraci-iskre__in::before {
	content: "";
	display: block;
	width: 48px;
	height: 3px;
	margin: 0 auto 22px;
	background: var(--k-gold);
}

.koraci-blok.koraci-iskre .koraci-naslov {
	font-weight: 500;
	font-size: 34px;
	line-height: 1.1;
}

.koraci-blok .koraci-iskre__opis {
	margin: 16px 0 24px;
	font-size: 17px;
	line-height: 1.65;
}

/* --- Страна књиге ------------------------------------------------------ */
.koraci-blok.koraci-clan-cena {
	margin: 4px 0 20px;
	padding: 12px 16px;
	background: var(--k-paper);
	border-left: 3px solid var(--k-gold);
}

.koraci-blok .koraci-clan-cena__red {
	margin: 0;
	font-size: 16px;
	line-height: 1.4;
	color: var(--k-text);
}

.koraci-blok .koraci-clan-cena__red b,
.koraci-blok .koraci-clan-cena__red b .amount,
.koraci-blok .koraci-clan-cena__red b bdi {
	font-weight: 600;
	color: var(--k-gold-dark);
}

.koraci-blok .koraci-clan-cena__link {
	display: inline-block;
	margin-top: 6px;
	font-size: 13px;
	line-height: 1.3;
	color: var(--k-gold-dark);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.koraci-blok .koraci-clan-cena__link:hover {
	color: var(--k-dark);
}

.koraci-blok.koraci-podaci {
	margin: 20px 0;
	padding-top: 16px;
	border-top: 1px solid var(--k-line);
}

.koraci-blok .koraci-podaci__naslov {
	margin: 0 0 12px;
	font-family: var(--k-display);
	font-weight: 600;
	font-size: 22px;
	line-height: 1.2;
	letter-spacing: 0;
	color: var(--k-dark);
}

.koraci-blok .koraci-podaci__lista {
	display: grid;
	grid-template-columns: max-content minmax(0, 1fr);
	gap: 8px 24px;
	margin: 0;
	font-size: 15px;
	line-height: 1.5;
}

.koraci-blok .koraci-podaci__lista dt {
	margin: 0;
	font-weight: 600;
	color: var(--k-text);
}

.koraci-blok .koraci-podaci__lista dd {
	margin: 0;
	color: var(--k-dark);
}

.koraci-blok .koraci-podaci__lista a {
	color: var(--k-dark);
	text-decoration: underline;
	text-decoration-color: var(--k-gold);
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}

.koraci-blok .koraci-podaci__lista a:hover {
	color: var(--k-gold-dark);
}

.koraci-blok.koraci-o-autoru {
	clear: both;
	margin: 40px 0;
	padding-top: 24px;
	border-top: 1px solid var(--k-line);
}

.koraci-blok.koraci-o-autoru .koraci-naslov {
	margin-bottom: 16px;
	font-size: 28px;
}

.koraci-blok .koraci-o-autoru__ime {
	margin: 0 0 8px;
	font-family: var(--k-sans);
	font-weight: 600;
	font-size: 17px;
	line-height: 1.3;
	color: var(--k-dark);
}

.koraci-blok .koraci-o-autoru__tekst {
	max-width: 760px;
	font-size: 16px;
	line-height: 1.7;
}

.koraci-blok .koraci-o-autoru__tekst p {
	margin: 0 0 12px;
}

.koraci-blok.koraci-iz-edicije {
	clear: both;
	margin: 48px 0 24px;
}

.koraci-blok.koraci-iz-edicije .koraci-naslov {
	font-size: 28px;
}

/* --- Рачунар ------------------------------------------------------------ */
@media (min-width: 768px) {
	.koraci-blok .koraci-naslov {
		font-size: 38px;
	}

	.koraci-blok.koraci-sekcija {
		margin: 72px 0;
	}

	.koraci-blok .koraci-sek-glava {
		margin-bottom: 32px;
	}

	.koraci-blok.koraci-band {
		padding: 72px 0;
	}

	.koraci-blok.koraci-uvod {
		margin-top: 72px;
	}

	.koraci-blok.koraci-uvod h1 {
		font-size: 52px;
	}

	.koraci-blok.koraci-uvod p {
		font-size: 19px;
	}

	.koraci-blok .koraci-proizvodi ul.products {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 36px 24px;
	}

	.koraci-blok.koraci-klub-cta {
		padding: 88px 0;
	}

	.koraci-blok .koraci-klub-cta__mreza {
		grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
		gap: 80px;
	}

	.koraci-blok.koraci-klub-cta .koraci-naslov {
		font-size: 64px;
	}

	.koraci-blok .koraci-klub-cta__opis {
		font-size: 19px;
	}

	.koraci-blok .koraci-klub-cta__cinjenice li {
		padding: 22px 0;
		font-size: 32px;
	}

	.koraci-blok.koraci-iskre {
		padding: 80px 0;
	}

	.koraci-blok.koraci-iskre .koraci-naslov {
		font-size: 48px;
	}

	.koraci-blok.koraci-o-autoru .koraci-naslov,
	.koraci-blok.koraci-iz-edicije .koraci-naslov {
		font-size: 34px;
	}
}

@media (min-width: 900px) {
	.koraci-blok .koraci-dogadjaji__mreza {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 32px;
	}
}

/* ==========================================================================
   Faza 6: поклон-бонови (страна производа, страна „хвала“)
   ========================================================================== */

/* Поља „За кога“ и „Порука“ изнад дугмета „Додај у корпу“. */
.koraci-pb-polja {
	margin: 18px 0 14px;
	padding: 16px 18px 6px;
	background: #F2F2EE;
	border: 1px solid #DCDAD2;
	border-radius: 10px;
}
.koraci-pb-polja .koraci-pb-polje { margin: 0 0 14px; }
.koraci-pb-polja label {
	display: block;
	margin: 0 0 6px;
	font-weight: 600;
	color: #17191E;
}
.koraci-pb-polja .koraci-pb-neobavezno {
	font-weight: 400;
	font-size: 13px;
	color: #6b6d75;
}
.koraci-pb-polja input[type="text"],
.koraci-pb-polja textarea {
	display: block;
	width: 100%;
	padding: 11px 13px;
	border: 1px solid #c9c7be;
	border-radius: 6px;
	background: #fff;
	font: inherit;
	color: #17191E;
}
.koraci-pb-polja textarea { min-height: 84px; resize: vertical; }
.koraci-pb-polja input:focus,
.koraci-pb-polja textarea:focus {
	outline: 3px solid rgba(232, 181, 58, .45);
	border-color: #85600E;
}
.koraci-pb-polja .koraci-pb-brojac {
	display: block;
	margin-top: 4px;
	font-size: 13px;
	text-align: right;
	color: #6b6d75;
}
.koraci-pb-polja .koraci-pb-napomena {
	margin: 0 0 12px;
	font-size: 14px;
	color: #4A4C55;
}

.koraci-pb-proizvod .variations select { min-width: 160px; }

/* Кодови на страни „хвала“ и у налогу. */
.koraci-pb-uspeh {
	margin: 0 0 28px;
	padding: 22px 24px;
	background: #17191E;
	border-radius: 12px;
	color: #DCDAD2;
}
.koraci-pb-uspeh .koraci-pb-uspeh__naslov {
	margin: 0 0 12px;
	color: #E8B53A;
	font-size: 24px;
}
.koraci-pb-uspeh p { margin: 0 0 8px; color: #DCDAD2; }
.koraci-pb-uspeh strong { color: #fff; }
.koraci-pb-lista { margin: 0 0 12px; padding: 0; list-style: none; }
.koraci-pb-lista li {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 6px 18px;
	padding: 12px 0;
	border-top: 1px solid rgba(232, 181, 58, .35);
}
.koraci-pb-lista__iznos { font-size: 22px; font-weight: 600; color: #fff; }
.koraci-pb-lista__kod {
	padding: 2px 10px;
	background: transparent;
	border: 1px dashed #E8B53A;
	border-radius: 4px;
	color: #E8B53A;
	font: 700 20px/1.3 Consolas, "Courier New", monospace;
	letter-spacing: .06em;
}
.koraci-pb-lista__rok { font-size: 14px; }
.koraci-pb-lista__link { color: #E8B53A; text-decoration: underline; }

/* ==========================================================================
   Faza 7: слајдер на телефону
   Smart Slider рачуна висину по садржају највишег слајда (803 px на 390 px),
   па слајдер заузме цео први екран. На телефону се скривају дугачки описи
   (остају наслов и дугме), а висина се држи између 300 и 380 px.
   Слика остаје „cover“.
   ========================================================================== */
@media (max-width: 700px) {
	/* Дугачки описи (слој „Text“ са пасусима, класа n2-ow-all); наслов и дугме остају. */
	div#n2-ss-2 .n2-ss-layer:has(> .n2-ss-item-content.n2-ow-all) {
		display: none;
	}

	/* Исто, за прегледаче без :has – слојеви слајдова 8 и 9. */
	div#n2-ss-2 .n-uc-vRxYJ85A8ArQ,
	div#n2-ss-2 .n-uc-dXBuuQsUGjy0 {
		display: none;
	}

	div#n2-ss-2 .n2-ss-slide {
		min-height: 300px;
		max-height: 380px;
	}
}