/* "Kako poručiti" stranica - Hero je stilski identican "O nama"
   (.civava-hero--onama u o-nama.css: centriran tekst, ista boja/velicina
   eyebrow-a i naslova), samo je visina fiksirana na 500px umesto podrazumevanih
   813px iz home.css (.civava-hero) - dodatni opisni pasus (.civava-hero__text)
   je jedino sto ova stranica ima vise od "O nama" hero-a. Ostatak sadrzaja
   (numerisane sekcije) je specifican za ovu stranicu. */

/* --- Hero (isti stil kao "O nama", visina 500px) --- */
.civava-hero--kako-poruciti {
	height: 500px;
	align-items: center;
	justify-content: center;
	/* Bocni razmak drzi .civava-container unutra (vidi .civava-hero). */
	padding: 0;
}

.civava-hero--kako-poruciti .civava-hero__content {
	align-items: center;
	text-align: center;
	max-width: 720px;
	margin-inline: auto;
}

.civava-hero--kako-poruciti .civava-eyebrow {
	color: var(--c-gold);
	font-family: var(--font-body);
	font-size: 13px;
	font-weight: 400;
	line-height: 15.6px;
	letter-spacing: 2px;
	text-transform: uppercase;
}

.civava-hero--kako-poruciti .civava-heading-lg {
	color: var(--c-cream-50);
	font-family: var(--font-serif);
	font-size: 48px;
	font-weight: 400;
	line-height: 56px;
	letter-spacing: 1px;
}

.civava-hero__text {
	margin: 24px 0 0;
	color: var(--c-cream-200);
	font-family: var(--font-body);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.6;
}

@media (max-width: 700px) {
	.civava-hero--kako-poruciti {
		height: 380px;
	}

	.civava-hero--kako-poruciti .civava-hero__content {
		max-width: 100%;
	}

	.civava-hero--kako-poruciti .civava-heading-lg {
		font-size: 28px;
		line-height: 36px;
	}
}

/* --- Sekcije (numerisan sadrzaj, 2 kolone sa slikom ili samo tekst) --- */
.civava-order {
	padding: var(--section-padding-y) 0;
}

.civava-order-section {
	padding: 64px 0;
	position: relative;
}

.civava-order-section__grid {
	display: grid;
	grid-template-columns: 1fr;
}

.civava-order-section--has-image .civava-order-section__grid {
	grid-template-columns: 1fr 1fr;
	align-items: stretch;
	gap: 64px;
}

.civava-order-section--image-left .civava-order-section__media {
	order: -1;
}

.civava-order-section__content {
	max-width: 620px;
}

.civava-order-section__content .civava-heading-lg {
	margin: 4px 0 0;
}

/* Dve "spojene" sekcije (ACF "Spoji sa sledećom sekcijom") u istoj koloni teksta */
.civava-order-section__block--stacked {
	margin-top: 56px;
}

/* --- Uvodni / zavrsni pasusi --- */
.civava-order-section__text {
	margin-top: 20px;
	color: #7a6e63;
	font-family: var(--font-body);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.65;
}

.civava-order-section__text p + p {
	margin-top: 16px;
}

.civava-order-section__text a {
	color: var(--c-bronze);
	text-decoration: underline;
}

/* --- Numerisani koraci --- */
.civava-order-steps {
	margin-top: 28px;
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.civava-order-step {
	display: flex;
	gap: 16px;
}

.civava-order-step__number {
	flex: 0 0 28px;
	padding-top: 2px;
	font-family: var(--font-serif);
	font-size: 20px;
	font-weight: 500;
	letter-spacing: -0.5px;
	line-height: 32px;
	color: #C4A35A;
}

.civava-order-step__body {
	flex: 1 1 auto;
	min-width: 0;
	padding-top: 5px;
}

.civava-order-step__title {
	margin: 0 0 6px;
	font-family: var(--font-body);
	font-size: 16px;
	font-weight: 600;
	color: #7A6E63;
}

.civava-order-step__text {
	margin: 0;
	font-family: var(--font-body);
		color: #7A6E63;
	font-size: 13px;
	font-style: normal;
	font-weight: 300;
	line-height: 20px;
}

/* --- Napomena (istaknut pasus sa bullet-om - koristi se i za prave
   "NAPOMENA" blokove i za "Jednostrani raskid" u Povraćaju novca) --- */
.civava-order-note {
	display: flex;
	gap: 12px;
	padding-top: 24px;
}

.civava-order-note__bullet {
	flex: 0 0 auto;
	font-family: var(--font-body);
	font-size: 20px;
	font-weight: 600;
	line-height: 24px;
	color: var(--c-bronze);
}

.civava-order-note__body {
	flex: 1 1 auto;
	min-width: 0;
}

.civava-order-note__label {
	display: block;
	margin-bottom: 8px;
	font-family: var(--font-body);
	color: #7A6E63;
	font-size: 16px;
	font-style: normal;
	font-weight: 600;
	line-height: 24px; /* 150% */
}

.civava-order-note__text {
	margin: 0;
	font-family: var(--font-body);
	font-size: 14px;
	font-weight: 400;
	line-height: 1.6;
	color: #7a6e63;
}

.civava-order-note__text + .civava-order-note__text {
	margin-top: 12px;
}

.civava-order-section__text--after-note {
	margin-top: 24px;
}

/* --- Slike + oznaka preko donjeg levog ugla --- */
/* Kolona se sad rasteže preko align-items:stretch na gridu (vidi gore), pa
   kod 2 slike "justify-content: space-between" gura prvu na vrh a drugu na
   dno - na visinu tekstualne kolone (.civava-order-section__content), kao
   na dizajnu. "gap" ostaje kao minimalan razmak ako je sadrzaj kratak. */
.civava-order-section__media {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 24px;
	z-index: 100 !important;
}

/* Spojena sekcija (ACF "Spoji sa sledećom sekcijom") - njena slika je uvek
   SAMA u koloni, pa je "space-between" (nasledjeno gore) ne bi pomerio -
   ovde je eksplicitno guramo na dno kolone, poravnato sa dnom teksta. */
.civava-order-section--merged .civava-order-section__media {
	justify-content: flex-end;
}

.civava-order-image {
	position: relative;
	overflow: visible;
}

.civava-order-image img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 486 / 360;
	object-fit: cover;
}

.civava-order-image__badge {
	position: absolute;
	left: -10px;
	bottom:-10px;
	padding: 23px 36px;
	background: #C4A35A;
	color: rgba(28, 22, 18, 0.70);
	font-family: var(--font-body);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 2px;
	text-transform: uppercase;
}

/* --- Dekorativne SVG veze izmedju sekcija (umesto bordera) - postavljene kao
   sibling <section> elementima, visine 0 (ne remete razmak), sa svg-om
   apsolutno pozicioniranim preko granice dve sekcije. "--right" tip (ista
   kriva koristi se izmedju 1/2 i 5/6 sekcije) ide iz gornjeg desnog ka donjem
   levom uglu - desna ivica prislonjena uz desnu ivicu kontejnera (gde je
   slika sekcije IZNAD, pozicionirana desno). "--left" tip (izmedju 2/3
   sekcije) ide iz gornjeg levog ka donjem desnom uglu - leva ivica prislonjena
   uz levu ivicu kontejnera (gde je slika sekcije IZNAD, pozicionirana levo). */
.civava-order-connector {
	position: relative;
	height: 50px;
}

.civava-order-connector .civava-container {
	position: relative;
	    width: 100%;
    height: 50px;
}

.civava-order-connector svg {
	position: absolute;
	pointer-events: none;
}

.civava-order-connector--right svg {
	right: 0;
	top: -137px;
	right: 0;
    top: -150px;
    left: 315px;
    position: absolute;
    z-index: 9;
    width: 800px;
}

.civava-order-connector--left svg {
	right: 0;
	top: -137px;
	right: 0;
    top: -150px;
    left: 315px;
    position: absolute;
    z-index: 9;
    width: 800px;
}

@media (max-width: 1024px) {
	.civava-order-section--has-image .civava-order-section__grid {
		grid-template-columns: 1fr;
		gap: 32px;
	}

	.civava-order-section--image-left .civava-order-section__media {
		order: 0;
	}

	.civava-order-section__content {
		max-width: 100%;
	}

	.civava-order-connector {
		display: none;
	}
}

@media (max-width: 700px) {
	.civava-order-section {
		padding: 40px 0;
	}

	.civava-order-image__badge {
		padding: 10px 16px;
		font-size: 11px;
	}
}

/* --- Tackice ispod trake koraka (samo mobilni carousel - generise ih
   assets/js/kako-poruciti.js, vidi mobilni blok ispod) --- */
.civava-order-steps__dots {
	display: none;
}

/* ===========================================================================
   MOBILNI PRIKAZ (<= 600px)
   Figma "Mobile kako poruciti" (fajl Ub6KR0WLgKThfonWqvzoRn, node 270:7838),
   frame 375px. Kljucne razlike u odnosu na desktop:
   - naslovni blok sekcije (eyebrow + naslov + uvodni pasus) je CENTRIRAN,
     dok koraci i napomene ostaju levo poravnati;
   - koraci se prikazuju kao swipe carousel (scroll-snap) sa tackicama;
   - slika je kvadratna (1:1) i prikazuje se samo PRVA slika sekcije;
   - oznaka preko slike "iscuri" do ivice ekrana, naizmenicno desno/levo.
   =========================================================================== */
@media (max-width: 600px) {

	/* --- Hero --- */
	.civava-hero--kako-poruciti {
		height: 563px;
	}

	/* Dizajn: tekst hero-a ide sire od ostatka sadrzaja - 355px u 375px
	   ekrana, pa je bocni razmak 10px umesto uobicajenih 20px. */
	.civava-hero--kako-poruciti .civava-container {
		padding-inline: 10px;
	}

	.civava-hero--kako-poruciti .civava-hero__content {
		gap: 16px;
	}

	.civava-hero--kako-poruciti .civava-eyebrow {
		margin-bottom: 0;
		font-size: 12px;
		line-height: 20px;
	}

	.civava-hero--kako-poruciti .civava-heading-lg {
		font-size: 28px;
		line-height: 32px;
		letter-spacing: 0.5px;
	}

	.civava-hero--kako-poruciti .civava-hero__text {
		/* 16px gap + 8px = 24px razmaka od naslova (kao na dizajnu). */
		margin-top: 8px;
		font-weight: 300;
		line-height: 24px;
	}

	/* --- Ritam sekcija (Figma: padding 64px, razmak izmedju sekcija 80px) --- */
	.civava-order {
		display: flex;
		flex-direction: column;
		gap: 80px;
		padding: 64px 0;
	}

	.civava-order-section {
		padding: 0;
	}

	.civava-order-section--has-image .civava-order-section__grid {
		gap: 64px;
	}

	/* Bez ovoga grid kolona raste do min-content sirine carousel trake
	   (zbir svih koraka) i razvlaci stranicu u stranu. */
	.civava-order-section__content {
		min-width: 0;
	}

	.civava-order-section__block--stacked {
		margin-top: 64px;
	}

	/* --- Naslovni blok sekcije: centriran --- */
	.civava-order-section__content .civava-eyebrow {
		margin-bottom: 0;
		font-size: 13px;
		font-weight: 400;
		line-height: 14px;
		letter-spacing: 2px;
		text-align: center;
	}

	/* Razmak je u padding-u a ne u prorodu - tako duzi ACF naslov koji se
	   prelomi u dva reda nema rupu izmedju redova, a visina bloka za
	   naslov u jednom redu ostaje ista kao na dizajnu. */
	.civava-order-section__content .civava-heading-lg {
		margin: 0;
		padding-block: 10px;
		font-size: 28px;
		line-height: 36px;
		text-align: center;
	}

	.civava-order-section__text {
		margin-top: 20px;
		font-weight: 300;
		line-height: 24px;
		text-align: center;
	}

	/* --- Koraci kao carousel: traka sa scroll-snap-om --- */
	.civava-order-steps {
		margin-top: 40px;
		flex-direction: row;
		/* Slajd = tacno 100% sirine trake, pa je indeks = scrollLeft/sirina
		   (vidi assets/js/kako-poruciti.js) - zato bez gap-a. */
		gap: 0;
		/* Koraci zadrzavaju svoju visinu (bez flex stretch-a) - visinu trake
		   postavlja JS na visinu aktivnog koraka, vidi updateHeight(). */
		align-items: flex-start;
		overflow-x: auto;
		overflow-y: hidden;
		scroll-snap-type: x mandatory;
		/* Swipe do kraja liste ne sme da okine "nazad" gest browsera. */
		overscroll-behavior-x: contain;
		scrollbar-width: none;
		transition: height 250ms var(--ease-out-expo, ease);
	}

	@media (prefers-reduced-motion: reduce) {
		.civava-order-steps {
			transition: none;
		}
	}

	.civava-order-steps::-webkit-scrollbar {
		display: none;
	}

	.civava-order-step {
		flex: 0 0 100%;
		min-width: 0;
		gap: 20px;
		scroll-snap-align: start;
	}

	.civava-order-step__number {
		flex-basis: 20px;
		padding-top: 0;
		text-align: center;
	}

	.civava-order-step__body {
		padding-top: 0;
	}

	.civava-order-step__title {
		margin-bottom: 12px;
		line-height: 24px;
	}

	.civava-order-step__text {
		font-weight: 300;
	}

	.civava-order-steps__dots {
		display: flex;
		justify-content: center;
		gap: 10px;
		margin-top: 40px;
	}

	.civava-order-steps__dot {
		width: 10px;
		height: 10px;
		padding: 0;
		border: 0;
		border-radius: 50%;
		background: rgba(122, 110, 99, 0.25);
		cursor: pointer;
		transition: background-color var(--duration-fast, 150ms) ease;
	}

	.civava-order-steps__dot.is-active {
		background: var(--c-gold);
	}

	/* --- Napomena --- */
	.civava-order-note {
		gap: 20px;
	}

	.civava-order-note__bullet {
		flex-basis: 20px;
		font-family: var(--font-serif);
		font-size: 32px;
		text-align: center;
		color: var(--c-gold);
	}

	.civava-order-note__label {
		margin-bottom: 12px;
	}

	.civava-order-note__text {
		font-size: 13px;
		font-weight: 300;
		line-height: 20px;
	}

	/* --- Slika: kvadratna, samo prva iz sekcije --- */
	.civava-order-section__media {
		gap: 0;
	}

	.civava-order-image + .civava-order-image {
		display: none;
	}

	.civava-order-image img {
		aspect-ratio: 1 / 1;
	}

	/* Oznaka preko slike "iscuri" 20px preko kontejnera, tj. tacno do ivice
	   ekrana. Strana se smenjuje po sekcijama (nth-of-type gleda samo
	   <section> elemente - dekorativni konektori su <div>), kao na dizajnu. */
	.civava-order-image__badge {
		bottom: -20px;
		padding: 25px 32px;
		line-height: 15px;
	}

	.civava-order > section:nth-of-type(odd) .civava-order-image__badge {
		left: auto;
		right: calc(var(--container-padding) * -1);
	}

	.civava-order > section:nth-of-type(even) .civava-order-image__badge {
		left: calc(var(--container-padding) * -1);
		right: auto;
	}
}