/* Naslovna strana */

.civava-hero {
	position: relative;
	height: 813px;
	background-color: var(--c-ink);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
	display: flex;
	align-items: flex-end;
	justify-content: flex-start;
	/* Bocni razmak dolazi iz .civava-container unutra - da se ovde NE dodaje
	   jos jednom, inace bi se sadrzaj hero-a pomerio za duplo (216px umesto
	   108px) i ne bi se poravnao sa logom u headeru. */
	padding: 0 0 96px;
	overflow: hidden;
}

/* Maska preko pozadinske fotografije - tacne vrednosti sa Figme:
   Linear Gradient 50% (#000000 -> #000000 0%) + Radial Gradient 55% (#0B0401 0% -> #0B0401). */
.civava-hero__mask {
	position: absolute;
	inset: 0;
	z-index: 1;
	background-image:
		linear-gradient(180deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 100%),
		radial-gradient(circle, rgba(11, 4, 1, 0) 0%, rgba(11, 4, 1, 0.55) 100%);
	pointer-events: none;
}

.civava-hero__crest {
	position: relative;
	max-width: 480px;
	width: 100%;
}

/* Pozadinski video (ACF "Pozadinski video") - ispod maske, isti cover/center
   tretman kao pozadinska fotografija. */
.civava-hero__video {
	position: absolute;
	inset: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
}

/* Naslov + dugme preko slike/videa (ACF "Naslov" / "Tekst dugmeta" / "Link dugmeta")
   - poravnato dole levo, uz isti levi rub kao logo u headeru (container padding). */
.civava-hero__content {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 24px;
	text-align: left;
	max-width: 100%;
}

.civava-hero__content h1 {
	margin: 0;
	font-family: var(--font-serif);
	color: #faf7f1;
	font-size: 36px;
	font-weight: 400;
	line-height: 56px;
	letter-spacing: -1px;
}

.civava-hero__content .civava-btn {
	height: 40px;
	padding: 8px 24px;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	color: #faf7f1;
	font-family: var(--font-body);
	font-size: 14px;
	font-weight: 600;
	line-height: 15.6px;
	letter-spacing: 2px;
	border-radius: 0;
}

@media (max-width: 700px) {
	.civava-hero {
		height: 600px;
		padding-bottom: 48px;
	}

	.civava-hero__content h1 {
		font-size: 26px;
		line-height: 34px;
		letter-spacing: -0.5px;
	}
}

.civava-stats {
	background: var(--c-ink);
	border-top: 1px solid var(--c-bronze);
	border-bottom: 1px solid var(--c-bronze);
	padding: 40px var(--container-padding);
}

.civava-stats__row {
	max-width: var(--container-max);
	margin-inline: auto;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
}

.civava-stats__item {
	text-align: center;
	padding: 0 16px;
	
}

.civava-stats__number {
	font-family: var(--font-serif);
	font-size: 32px;
	font-weight: 500;
	color: var(--c-gold);
	margin-bottom: 6px;
}

.civava-stats__label {
	font-family: var(--font-body);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--c-cream-200);
}

.civava-section {
	padding: var(--section-padding-y) var(--container-padding);
}

.civava-section__head {
	max-width: var(--container-max);
	margin: 0 auto 40px;
	text-align: center;
}

/* --- Kategorije --- */

.civava-categories {
	max-width: var(--container-max);
	margin-inline: auto;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
}

.civava-category-card {
	--info-visina: 87px;

	position: relative;
	display: block;
	height: 415px;
	border: 1px solid var(--c-border);
	background: var(--c-white);
	overflow: hidden;
}

.civava-category-card__media {
	position: absolute;
	inset: 0;
	overflow: hidden;
}

.civava-category-card__media img {
	width: 100%;
	height: 100%;
	/* „cover" je bure odsecao svuda gde odnos kartice ne prati odnos
	   fotografije — a to je na svakoj širini osim četvorokolonske. Fotografije
	   su na beloj podlozi, pa se „contain" ne razlikuje po izgledu, a ništa ne
	   seče. Donji padding je visina opisa, da slika ne ulazi pod njega. */
	object-fit: contain;
	padding: 16px 16px var(--info-visina);
	transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.civava-category-card:hover .civava-category-card__media img {
	transform: scale(1.08);
}

/* Naslov/broj proizvoda "pluta" preko donjeg dela slike (blur pozadina).
   Na hover: "Pogledaj detalje" ulazi odozdo na gore (slide up), dok
   naslov/broj proizvoda istovremeno izlazi na gore i nestaje. */
.civava-category-card__info {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: var(--info-visina);
	overflow: hidden;
	border-top: 1px solid var(--c-border);
	background: rgba(255, 255, 255, 0.72);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
}

.civava-category-card__body {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	transform: translateY(0);
	transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.civava-category-card__body--hover {
	transform: translateY(100%);
}

.civava-category-card:hover .civava-category-card__body--default {
	transform: translateY(-100%);
}

.civava-category-card:hover .civava-category-card__body--hover {
	transform: translateY(0);
}

.civava-category-card__title {
	font-family: var(--font-serif);
	font-size: 16px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	margin-bottom: 6px;
}

.civava-category-card__body--hover .civava-category-card__title {
	margin-bottom: 0;
}

.civava-category-card__count {
	font-family: var(--font-mono);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--c-bronze);
}

/* --- Istaknuti proizvodi (tabovi + karusel) --- */

.civava-tabs {
	max-width: var(--container-max);
	margin: 0 auto 80px;
	display: flex;
}

.civava-tabs__btn {
	flex: 1 1 50%;
	text-align: center;
	padding: 12px 20px;
	font-family: var(--font-body);
	font-size: 16px;
	font-weight: 500;
	line-height: normal;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: #7a6e63;
	border-bottom: 1px solid rgba(122, 110, 99, 0.3);
}

.civava-tabs__btn.is-active {
	color: var(--c-ink);
	border-bottom-color: var(--c-ink);
}

.civava-featured {
	max-width: var(--container-max);
	margin-inline: auto;
}

/* --- O nama --- */

.civava-about {
	position: relative;
	min-height: 615px;
	display: flex;
	align-items: center;
	padding: 64px var(--container-padding);
	color: var(--c-cream-50);
}

/* Pozadinska slika dolazi preko --civava-about-bg CSS varijable (setovana
   inline u content-homepage.php iz ACF "about_bg_image") jer ::before ne moze
   direktno da primi inline stil sa roditelja. Vrednosti tacno sa Figme. */
.civava-about::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0.15) 0%, rgba(0, 0, 0, 0) 100%), var(--civava-about-bg, none) center / cover no-repeat, #1c1612;
}

.civava-about__grid {
	position: relative;
	width: 100%;
	max-width: var(--container-max);
	margin-inline: auto;
	display: grid;
	grid-template-columns: 1.2fr 1fr;
	gap: 64px;
	align-items: center;
}

.civava-about__text p {
	margin-top: 16px;
	color: rgba(232, 223, 208, 0.78);;
	font-weight: 300;
	line-height: 1.6;
}

.civava-about__text p:first-of-type {
	margin-top: 24px;
}

.civava-about__features {
	display: flex;
	flex-direction: column;
	text-align: center;
}

.civava-about__feature {
	padding: 20px 0;
}

.civava-about__feature-title {
	font-family: var(--font-serif);
	font-size: 24px;
	font-weight: 500;
	color: var(--c-gold);
	margin-bottom: 4px;
}

.civava-about__feature-subtitle {
	font-size: 12px;
	color: rgba(209, 196, 175, 0.70);
	text-transform: uppercase;
	letter-spacing: 1.728px
}

@media (max-width: 1024px) {
	.civava-categories,
	.civava-stats__row {
		grid-template-columns: repeat(2, 1fr);
		gap: 16px;
	}

	.civava-stats__item:nth-child(2n+1) {
		border-left: none;
	}

	.civava-about__grid {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 560px) {
	.civava-stats__row {
		grid-template-columns: 1fr;
	}

	.civava-stats__item {
		border-left: none;
		border-top: 1px solid rgba(255, 255, 255, 0.08);
		padding: 16px 0;
	}

	.civava-stats__item:first-child {
		border-top: none;
	}
}

/* ===========================================================================
   MOBILNI PRIKAZ (<= 600px)
   Figma "Mobile Homepage" (fajl Ub6KR0WLgKThfonWqvzoRn, node 309:9634 ->
   frame "App" 375x4566). Kljucne razlike u odnosu na desktop:
   - statistika ide u mrezu 2x2 (bez linija razdvajanja);
   - kategorije u jednu kolonu;
   - karusel istaknutih proizvoda ide preko cele sirine ekrana, kartica je
     centrirana sa "provirivanjem" susednih, a strelice stoje ISPOD trake;
   - "O nama" je centriran, u jednu kolonu.
   Napomena: hero po dizajnu nema naslov ni dugme - zadrzani su namerno
   (H1 zbog SEO-a, dugme kao jedini CTA ka katalogu iz hero-a) i samo
   prilagodjeni visini od 558px.
   =========================================================================== */
@media (max-width: 600px) {

	/* --- Hero --- */
	.civava-hero {
		height: 558px;
		/* Bocni razmak daje .civava-container iznutra (20px). */
		padding: 0 0 64px;
		justify-content: center;
	}

	.civava-hero__content {
		align-items: center;
		gap: 16px;
		text-align: center;
	}

	.civava-hero__content h1 {
		font-size: 28px;
		line-height: 36px;
		letter-spacing: -0.5px;
	}

	/* --- Statistika: mreza 2x2, bez linija razdvajanja --- */
	.civava-stats__row {
		grid-template-columns: repeat(2, 1fr);
		column-gap: 0;
		row-gap: 28px;
	}

	.civava-stats__item {
		border: 0;
		padding: 0;
	}

	.civava-stats__number {
		margin-bottom: 0;
		font-size: 28px;
		line-height: 35px;
		letter-spacing: 1px;
	}

	.civava-stats__label {
		display: block;
		padding-top: 8px;
		font-size: 11px;
		font-weight: 400;
		line-height: 18px;
		letter-spacing: 2px;
		color: var(--c-border);
	}

	/* --- Zajednicki naslovni blok sekcija --- */
	.civava-section {
		padding-block: 80px;
	}

	/* Kategorije i istaknuti proizvodi su susedne sekcije - druga ima manji
	   gornji razmak, kao na dizajnu (80 + 40 izmedju njih). */
	.civava-section + .civava-section {
		padding-block-start: 40px;
	}

	.civava-section__head .civava-eyebrow {
		margin-bottom: 0;
		font-size: 13px;
		font-weight: 400;
		line-height: 14px;
		letter-spacing: 2px;
	}

	/* line-height 56px sa dizajna vazi za naslov u JEDNOM redu; kad se
	   naslov prelomi (duzi ACF tekst) takav prored pravi rupu izmedju
	   redova, pa je razmak prebacen u padding - visina bloka ostaje ista
	   za jedan red, a prelomljen naslov se normalno cita. */
	.civava-section__head .civava-heading-lg {
		padding-block: 10px;
		font-size: 28px;
		line-height: 36px;
	}

	/* --- Kategorije: dve kolone ---

	   Jedna kolona je karticu razvlačila na 350x422. Odnos stranica je tako
	   bio 0,83, a sama fotografija je 2:3 (0,67) — pa je „cover" buretu
	   odsecao vrh i dno i nije se videlo šta je na slici.

	   Dve kolone i odnos koji prati fotografiju rešavaju oboje: kartica je
	   manja, sve četiri kategorije stanu skoro na jedan ekran, a bure se vidi
	   celo. */
	.civava-categories {
		grid-template-columns: repeat(2, 1fr);
		gap: 12px;
	}

	.civava-category-card {
		--info-visina: 62px;

		height: auto;
		aspect-ratio: 2 / 3;
	}

	/* Mera za široku karticu; na pola širine ostavlja previše belog. */
	.civava-category-card__media img {
		padding: 10px 10px var(--info-visina);
	}

	.civava-category-card__title {
		font-size: 13px;
		margin-bottom: 2px;
	}

	.civava-category-card__count {
		font-size: 10px;
	}

	/* --- Istaknuti proizvodi: tabovi --- */
	.civava-tabs {
		margin-bottom: 40px;
	}

	.civava-tabs__btn {
		padding: 12px 8px;
		font-size: 14px;
		font-weight: 600;
		line-height: 19px;
		letter-spacing: 1px;
	}

	/* --- Istaknuti proizvodi: karusel preko cele sirine ekrana ---
	   Traka izlazi iz kontejnera do ivica ekrana, kartica je fiksnih 280px i
	   centrira se (scroll-snap-align: center), pa susedne kartice proviruju
	   sa obe strane. Bocni padding je tacno toliko da se i PRVA i POSLEDNJA
	   kartica mogu centrirati. */
	.civava-featured .civava-carousel__viewport {
		margin-inline: calc(var(--container-padding) * -1);
		padding-inline: calc((100vw - 280px) / 2);
	}

	.civava-featured .civava-product-grid--slider .civava-product-card {
		flex: 0 0 280px;
		scroll-snap-align: center;
	}

	/* Strelice ispod trake, centrirane (na desktopu flankiraju traku i
	   pojavljuju se tek na hover - na dodir hover ne postoji). */
	.civava-featured .civava-carousel {
		padding-bottom: 76px;
	}

	.civava-featured .civava-carousel__nav {
		top: auto;
		bottom: 0;
		width: 36px;
		height: 36px;
		transform: none;
		opacity: 1;
	}

	.civava-featured .civava-carousel__nav--prev {
		left: calc(50% - 52px);
		right: auto;
	}

	.civava-featured .civava-carousel__nav--next {
		left: auto;
		right: calc(50% - 52px);
	}

	/* --- O nama: jedna kolona, sve centrirano --- */
	.civava-about {
		min-height: 0;
		padding: 64px var(--container-padding) 80px;
	}

	.civava-about__grid {
		gap: 40px;
		text-align: center;
	}

	.civava-about__text .civava-eyebrow {
		margin-bottom: 0;
		font-size: 13px;
		font-weight: 400;
		line-height: 14px;
		letter-spacing: 2px;
	}

	.civava-about__text .civava-heading-lg {
		padding-block: 10px;
		font-size: 28px;
		line-height: 36px;
	}

	.civava-about__text p {
		font-size: 16px;
		line-height: 24px;
	}

	.civava-about__features {
		gap: 40px;
	}

	.civava-about__feature {
		padding: 0;
	}

	.civava-about__feature-title {
		margin-bottom: 0;
		font-size: 24px;
		line-height: 32px;
		letter-spacing: 4px;
	}

	.civava-about__feature-subtitle {
		display: block;
		padding-top: 10px;
		font-size: 12px;
		line-height: 14px;
		letter-spacing: 2px;
	}
}