/* ══ Trek blokovi naslovne ══
   Izdvojeno iz templates/index.html.twig (2026-08-11) da isti blokovi mogu da se
   koriste i na mini-naslovnama rubrika (templates/rubrika/blok/*). Pravila su
   preneta nepromenjena; nova pravila za rubrike su na dnu fajla.
   Zato mini-naslovna rubrike nosi i klasu .trek-naslovna. */

	/* ===== Naslovna: minimal editorial + interakcija ===== */
	.trek-naslovna a { text-decoration: none; color: inherit; }
	.trek-sekcija { padding: 2.6rem 0 0; }
	.trek-meta { font-size: .78rem; color: var(--trek-ink-2, #56575c); margin-top: .35rem; }

	/* Chip traka kategorija */
	.trek-chips-traka { border-bottom: 1px solid var(--trek-hairline, rgba(0,0,0,.12)); }
	.trek-chips { display: flex; gap: .4rem; overflow-x: auto; padding: .6rem 0; scrollbar-width: none; }
	.trek-chips::-webkit-scrollbar { display: none; }
	.trek-chip { flex: 0 0 auto; display: inline-flex; align-items: center; gap: .45rem; padding: .35rem .85rem; border: 1px solid var(--trek-hairline, rgba(0,0,0,.12)); border-radius: 2rem; font-size: .82rem; font-weight: 600; transition: border-color .15s ease; }
	.trek-chip:hover { border-color: var(--trek-ink, #131417); }
	.trek-chip-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
	.trek-chip-alt { color: var(--trek-ink-2, #56575c); }

	/* Lead */
	.trek-lead-prica { display: block; }
	.trek-lead-slika { aspect-ratio: 16/9; overflow: hidden; border-radius: 6px; }
	.trek-lead-slika img { width: 100%; height: 100%; object-fit: cover; }
	.trek-lead-naslov { font-size: clamp(1.7rem, 3.4vw, 2.6rem); line-height: 1.15; margin: .35rem 0 .5rem; }
	.trek-lead-prica:hover .trek-lead-naslov { color: var(--trek-accent, #2163e8); }
	.trek-lead-opis { font-family: var(--trek-serif, Georgia, serif); color: var(--trek-ink-2, #56575c); font-size: 1.05rem; line-height: 1.6; margin: 0; }

	/* Rail + tabovi */
	.trek-rail { border-top: 2px solid var(--trek-ink, #131417); padding-top: .85rem; }
	.trek-tabovi { display: flex; gap: 1.1rem; margin-bottom: .3rem; }
	.trek-tab-btn { border: 0; background: none; padding: 0 0 .35rem; font-size: .82rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--trek-ink-2, #56575c); border-bottom: 2px solid transparent; }
	.trek-tab-btn.is-active { color: var(--trek-ink, #131417); border-bottom-color: var(--trek-accent, #2163e8); }
	.trek-rail-item { display: block; padding: .85rem 0; border-bottom: 1px solid var(--trek-hairline, rgba(0,0,0,.12)); }
	.trek-rail-item:last-of-type { border-bottom: 0; }
	.trek-rail-tt { font-family: var(--trek-serif, Georgia, serif); font-size: 1.05rem; font-weight: 600; line-height: 1.3; margin: .15rem 0 0; }
	.trek-rail-item:hover .trek-rail-tt { color: var(--trek-accent, #2163e8); }
	.trek-rail-vise { display: inline-flex; align-items: center; gap: .3rem; font-size: .82rem; font-weight: 700; color: var(--trek-accent, #2163e8) !important; margin-top: .5rem; }
	.trek-rail-broj { display: flex; gap: .8rem; align-items: flex-start; }
	.trek-top-broj { font-family: var(--trek-serif, Georgia, serif); font-size: 1.7rem; font-weight: 700; line-height: 1.1; color: var(--trek-ink, #131417); opacity: .22; min-width: 1.2rem; }

	/* Zona head + strelice */
	.trek-zona-head { display: flex; align-items: center; justify-content: space-between; border-bottom: 2px solid var(--trek-ink, #131417); padding-bottom: .5rem; margin-bottom: 1.2rem; }
	.trek-zona-naslov { font-size: .95rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--trek-ink, #131417) !important; position: relative; padding-left: .85rem; font-family: var(--trek-sans, sans-serif); }
	.trek-zona-naslov::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 4px; height: 1em; background: var(--zc, #2163e8); }
	.trek-kar-strelice { display: flex; gap: .4rem; }
	.trek-kar-btn { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--trek-hairline, rgba(0,0,0,.15)); background: transparent; color: var(--trek-ink, #131417); display: inline-flex; align-items: center; justify-content: center; transition: all .15s ease; }
	.trek-kar-btn:hover { background: var(--trek-ink, #131417); color: var(--trek-paper, #fff); border-color: var(--trek-ink, #131417); }
	.trek-kar-btn:disabled { opacity: .3; pointer-events: none; }
	@media (max-width: 767.98px) { .trek-kar-strelice { display: none; } }

	/* Karusel */
	.trek-karusel { display: flex; gap: 1.25rem; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: .25rem; }
	.trek-karusel::-webkit-scrollbar { display: none; }
	/* Za tebe pojas */
	.trek-zatebe { padding: 1.25rem 0 .5rem; }
	.trek-zt-vise { margin-left: auto; font-size: .85rem; font-weight: 600; text-decoration: none; color: var(--bs-primary); white-space: nowrap; }
	.trek-zt-anon-note { font-weight: 400; color: var(--bs-secondary-color); font-style: italic; }
	.trek-zt-red { padding-top: .25rem; }
	.trek-zt-kart { flex: 0 0 230px; scroll-snap-align: start; text-decoration: none; color: var(--bs-body-color); }
	.trek-zt-slika { border-radius: .8rem; overflow: hidden; aspect-ratio: 16/10; margin-bottom: .5rem; }
	.trek-zt-slika img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
	.trek-zt-kart:hover .trek-zt-slika img { transform: scale(1.05); }
	.trek-zt-nas { font-size: 1rem; line-height: 1.3; margin: .15rem 0 0; font-family: var(--trek-serif, Georgia, serif); }
	@media (max-width: 575.98px) { .trek-zt-kart { flex-basis: 72%; } }
	.trek-kar-kart { flex: 0 0 280px; scroll-snap-align: start; }
	@media (max-width: 575.98px) { .trek-kar-kart { flex-basis: 78%; } }

	/* Uredničke kartice */
	.trek-ed-slika { aspect-ratio: 3/2; overflow: hidden; border-radius: 6px; }
	.trek-ed-slika img { width: 100%; height: 100%; object-fit: cover; }
	.trek-ed-tt { font-family: var(--trek-serif, Georgia, serif); font-size: 1.1rem; font-weight: 600; line-height: 1.3; margin: .3rem 0 0; }
	.trek-kar-kart:hover .trek-ed-tt { color: var(--trek-accent, #2163e8); }


	/* Lead auto-karusel */
	.trek-lead-slajdovi { display: grid; }
	.trek-lead-slajd { grid-area: 1 / 1; opacity: 0; transition: opacity .6s ease; pointer-events: none; display: block; }
	.trek-lead-slajd.is-active { opacity: 1; pointer-events: auto; }
	.trek-lead-trake { display: flex; gap: .5rem; margin-top: 1rem; }
	.trek-lead-traka { flex: 1; height: 3px; max-width: 72px; border: 0; padding: 0; background: var(--trek-hairline, rgba(0,0,0,.12)); border-radius: 3px; overflow: hidden; cursor: pointer; }
	.trek-lead-traka i { display: block; height: 100%; width: 0; background: var(--trek-ink, #131417); }
	.trek-lead-traka.is-active i { animation: trek-lead-punjenje 6s linear forwards; }
	@keyframes trek-lead-punjenje { to { width: 100%; } }

	/* Varijanta B: portret overlay */
	.trek-okart { position: relative; flex: 0 0 250px; aspect-ratio: 4/5; border-radius: 6px; overflow: hidden; }
	.trek-okart img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
	.trek-okart::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(10,11,14,.85) 0%, rgba(10,11,14,.15) 55%, transparent 100%); }
	.trek-okart-body { position: absolute; left: 0; right: 0; bottom: 0; padding: 1rem; z-index: 1; }
	.trek-okart-tt { font-family: var(--trek-serif, Georgia, serif); font-size: 1.05rem; font-weight: 600; line-height: 1.3; color: #fff; margin: 0; }
	.trek-okart-meta { color: rgba(255,255,255,.75); font-size: .74rem; margin-top: .3rem; }
	.trek-okart:hover img { opacity: .92; }
	@media (max-width: 575.98px) { .trek-okart { flex-basis: 62%; } }

	/* Varijanta C: tipografska sa brojem */
	.trek-tkart { flex: 0 0 300px; border-left: 3px solid var(--zc, #2163e8); padding: .2rem 0 .2rem 1.1rem; align-self: stretch; display: flex; flex-direction: column; }
	.trek-tkart-broj { font-family: var(--trek-serif, Georgia, serif); font-size: 2.2rem; font-weight: 700; line-height: 1; color: var(--trek-ink, #131417); opacity: .16; }
	.trek-tkart-tt { font-family: var(--trek-serif, Georgia, serif); font-size: 1.15rem; font-weight: 600; line-height: 1.3; margin: .35rem 0 .3rem; }
	.trek-tkart:hover .trek-tkart-tt { color: var(--trek-accent, #2163e8); }
	.trek-tkart-opis { font-size: .84rem; color: var(--trek-ink-2, #56575c); line-height: 1.5; margin: 0; }
	.trek-tkart .trek-meta { margin-top: auto; padding-top: .5rem; }
	@media (max-width: 575.98px) { .trek-tkart { flex-basis: 74%; } }


	/* Spotlight (Izdvojeno): horizontalna kartica slika+tekst */
	.trek-spot { flex: 0 0 520px; display: flex; gap: 1rem; align-items: stretch; }
	.trek-spot-slika { flex: 0 0 210px; aspect-ratio: 1/1; overflow: hidden; border-radius: 6px; }
	.trek-spot-slika img { width: 100%; height: 100%; object-fit: cover; }
	.trek-spot-telo { display: flex; flex-direction: column; min-width: 0; padding: .2rem 0; }
	.trek-spot-tt { font-family: var(--trek-serif, Georgia, serif); font-size: 1.15rem; font-weight: 600; line-height: 1.3; margin: .25rem 0 .35rem; }
	.trek-spot:hover .trek-spot-tt { color: var(--trek-accent, #2163e8); }
	.trek-spot-opis { font-size: .85rem; color: var(--trek-ink-2, #56575c); line-height: 1.5; margin: 0; }
	.trek-spot .trek-meta { margin-top: auto; padding-top: .4rem; }
	@media (max-width: 575.98px) { .trek-spot { flex-basis: 88%; } .trek-spot-slika { flex-basis: 132px; } }

	/* Mozaik male stavke sa thumbom */
	.trek-mini { display: flex; gap: .9rem; align-items: flex-start; padding: .7rem 0; border-bottom: 1px solid var(--trek-hairline, rgba(0,0,0,.12)); }
	.trek-mini:last-of-type { border-bottom: 0; }
	.trek-mini img { width: 96px; height: 72px; object-fit: cover; border-radius: 6px; flex-shrink: 0; }

	/* Novinska lista sa kvadratnim thumbom */
	.trek-lista-item { display: flex; gap: 1rem; align-items: flex-start; padding: .8rem 0; border-top: 1px solid var(--trek-hairline, rgba(0,0,0,.12)); }
	.trek-lista-item img { width: 88px; height: 88px; object-fit: cover; border-radius: 6px; flex-shrink: 0; }

	/* Split foto-naslovnica */
	.trek-split-foto { position: relative; display: block; border-radius: 6px; overflow: hidden; aspect-ratio: 16/10; }
	.trek-split-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
	.trek-split-foto::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(10,11,14,.85) 0%, transparent 55%); }
	.trek-split-telo { position: absolute; left: 0; right: 0; bottom: 0; padding: 1.25rem; z-index: 1; }
	.trek-split-tt { font-family: var(--trek-serif, Georgia, serif); font-size: clamp(1.15rem, 2vw, 1.5rem); font-weight: 600; line-height: 1.3; color: #fff; margin: 0; }


	/* Veći rail naslov (Izdvojeno desno) */
	.trek-rail-tt-vece { font-size: 1.2rem; }
	/* 3x3 mreža naslova */
	.trek-naslov-celija { display: block; padding: .9rem 0; border-top: 1px solid var(--trek-hairline, rgba(0,0,0,.12)); height: 100%; }
	.trek-naslov-celija:hover .trek-rail-tt { color: var(--trek-accent, #2163e8); }

	/* Newsletter band */
	.trek-news-band { display: flex; align-items: center; justify-content: space-between; gap: 2rem; flex-wrap: wrap; background: var(--trek-ink, #131417); color: #fff; border-radius: 6px; padding: 2rem; }
	.trek-news-naslov { font-family: var(--trek-serif, Georgia, serif); color: #fff; font-size: 1.4rem; margin-bottom: .25rem; }
	.trek-news-opis { color: rgba(255,255,255,.7); font-size: .9rem; }
	.trek-news-forma { display: flex; gap: .5rem; flex: 1; min-width: 300px; max-width: 460px; }
	.trek-news-forma .form-control { border: 0; }
	@media (max-width: 575.98px) { .trek-news-forma { min-width: 100%; } }

/* Tamni band za Trek priče + beli naslov */
	.trek-stories-band { background: #11141b; border-radius: 1.25rem; }
	[data-bs-theme="dark"] .trek-stories-band { background: #0b0d12; }
	.trek-h-light::before { background: #fff; }

/* Story format (blur pozadina, čist tekst) */
	.trek-stories { display: flex; gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: .25rem; cursor: pointer; }
	.trek-stories::-webkit-scrollbar { display: none; }
	.trek-story { position: relative; flex: 0 0 270px; height: 400px; border-radius: 1.25rem; overflow: hidden; display: block; text-decoration: none; scroll-snap-align: start; }
	.trek-story-bg { position: absolute; inset: -24px; background-size: cover; background-position: center; filter: blur(9px) brightness(.5); transform: scale(1.12); }
	.trek-story-content { position: relative; z-index: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; padding: 1.25rem; color: #fff; text-shadow: 0 2px 12px rgba(0,0,0,.5); }
	.trek-story-content h5 { font-weight: 800; line-height: 1.2; color: #fff; }
	.trek-story-content p { opacity: .92; color: #fff; }
	@media (max-width: 575.98px) { .trek-story { flex-basis: 80%; height: 380px; } }

/* ===== Trek priče — fullscreen story viewer (Instagram stil) ===== */
	.tsv { position: fixed; inset: 0; z-index: 1090; background: #000; display: none; overflow: hidden; }
	.tsv.is-open { display: block; }
	body.tsv-lock { overflow: hidden; }
	/* track = statičan „prozor" (klip), strip = traka koja se pomera. Pomeranje samog
	   track-a pomera i klip prozor pa se sledeći slajd nikad ne vidi (bag popravljen 23.07). */
	.tsv-track { height: 100%; width: 100%; overflow: hidden; }
	.tsv-strip { display: flex; height: 100%; width: 100%; transition: transform .32s cubic-bezier(.4,0,.2,1); will-change: transform; }
	.tsv-slide { position: relative; flex: 0 0 100%; width: 100%; height: 100%; overflow: hidden; }
	.tsv-bg { position: absolute; inset: -30px; background-size: cover; background-position: center; filter: brightness(.78); }
	.tsv-slide::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0,0,0,.25) 0%, rgba(0,0,0,0) 28%, rgba(0,0,0,.55) 60%, rgba(0,0,0,.95) 100%); pointer-events: none; }
	.tsv-scroll { position: relative; z-index: 1; height: 100%; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none;
		/* tekst koji odlazi gore polako nestaje, a vraćanjem se ponovo pojavljuje */
		-webkit-mask-image: linear-gradient(to bottom, transparent 0, rgba(0,0,0,.15) 8%, #000 20%, #000 100%);
		        mask-image: linear-gradient(to bottom, transparent 0, rgba(0,0,0,.15) 8%, #000 20%, #000 100%); }
	.tsv-scroll::-webkit-scrollbar { display: none; }
	.tsv-spacer { height: 46vh; }
	.tsv-panel { position: relative; padding: 1.5rem 1.25rem calc(2rem + env(safe-area-inset-bottom)); color: #fff; max-width: 720px; margin: 0 auto; text-shadow: 0 1px 10px rgba(0,0,0,.4); }
	.tsv-title { font-weight: 800; line-height: 1.18; font-size: clamp(1.5rem, 5vw, 2.25rem); margin-bottom: .4rem; color: #fff !important; }
	.tsv-meta { font-size: .8rem; opacity: .8; margin-bottom: 1rem; }
	.tsv-lead { font-size: 1.1rem; font-weight: 600; line-height: 1.5; margin-bottom: 1rem; }
	.tsv-body { font-size: 1rem; line-height: 1.75; opacity: .92; margin-bottom: 1.5rem; }
	.tsv-cta { font-weight: 700; border-radius: 2rem; padding-inline: 1.5rem; }
	.tsv-hint { margin-top: 1rem; font-size: .78rem; opacity: .65; text-align: center; }
	/* gornje progres trake */
	.tsv-bars { position: absolute; top: 0; left: 0; right: 0; z-index: 3; display: flex; gap: 4px; padding: calc(.6rem + env(safe-area-inset-top)) .75rem .5rem; }
	.tsv-bar { flex: 1; height: 3px; border-radius: 3px; background: rgba(255,255,255,.3); overflow: hidden; }
	.tsv-bar i { display: block; height: 100%; width: 0; background: #fff; border-radius: 3px; transition: width .3s ease; }
	.tsv-bar.is-done i { width: 100%; }
	.tsv-bar.is-active i { width: 100%; }
	/* dugmad */
	.tsv-close { position: absolute; top: calc(.5rem + env(safe-area-inset-top)); right: .75rem; z-index: 4; width: 40px; height: 40px; border: 0; border-radius: 50%; background: rgba(0,0,0,.4); color: #fff; font-size: 1.7rem; line-height: 1; cursor: pointer; }
	.tsv-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 46px; height: 46px; border: 0; border-radius: 50%; background: rgba(0,0,0,.35); color: #fff; font-size: 1.8rem; line-height: 1; cursor: pointer; display: none; }
	.tsv-prev { left: 1rem; } .tsv-next { right: 1rem; }
	/* DESKTOP: uzan stori (kao Instagram na vebu), ne preko celog ekrana */
	@media (min-width: 768px) {
		.tsv { background: rgba(0,0,0,.82); backdrop-filter: blur(4px); }
		.tsv.is-open { display: flex; align-items: center; justify-content: center; }
		.tsv-track { width: 420px; max-width: 92vw; height: 86vh; max-height: 760px; border-radius: 1.25rem; overflow: hidden; box-shadow: 0 24px 70px rgba(0,0,0,.55); }
		.tsv-slide { border-radius: 1.25rem; }
		.tsv-spacer { height: 40%; }
		.tsv-bars { left: 50%; transform: translateX(-50%); width: 420px; max-width: 92vw; top: calc(7vh - 6px); padding: .4rem .9rem; }
		.tsv-close { top: 6vh; right: max(1rem, calc(50% - 270px)); }
		.tsv-arrow { display: block; }
		.tsv-arrow:hover { background: rgba(0,0,0,.6); }
		.tsv-prev { left: max(.5rem, calc(50% - 280px)); }
		.tsv-next { right: max(.5rem, calc(50% - 280px)); }
	}

/* ══════════════════════════════════════════════════════════════════════════
   MINI-NASLOVNE RUBRIKA (.trek-rn). Blokovi koje naslovna sajta nema:
   foto mozaik, top lista sa brojevima i tiker najnovijeg. Boja rubrike stiže
   kroz --rc, pa svaka rubrika nosi svoj akcenat bez posebnog CSS-a.
   ══════════════════════════════════════════════════════════════════════════ */
.trek-rn { --rc: #2163e8; }
.trek-rn .trek-zona-naslov { --zc: var(--rc); }

/* ── Foto mozaik: jedna velika + četiri manje ── */
.trek-mozaik { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: 220px 220px; gap: 1rem; }
.trek-moz-kart { position: relative; overflow: hidden; border-radius: 14px; display: block; }
.trek-moz-1 { grid-column: span 2; grid-row: span 2; }
.trek-moz-kart img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.trek-moz-kart:hover img { transform: scale(1.04); }
.trek-moz-veo { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,12,18,0) 35%, rgba(10,12,18,.82) 100%); }
.trek-moz-telo { position: absolute; left: 0; right: 0; bottom: 0; padding: 1rem 1.1rem; display: flex; flex-direction: column; gap: .3rem; color: #fff; }
.trek-moz-kicker { font-size: .68rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #fff; opacity: .85; }
.trek-moz-nas { font-weight: 700; line-height: 1.25; font-size: 1rem; }
.trek-moz-1 .trek-moz-nas { font-size: 1.6rem; }
.trek-moz-opis { font-size: .86rem; opacity: .9; }
.trek-moz-meta { font-size: .72rem; opacity: .72; }
.trek-moz-kart::after { content: ""; position: absolute; left: 0; top: 0; width: 4px; height: 100%; background: var(--rc); opacity: 0; transition: opacity .2s; }
.trek-moz-kart:hover::after { opacity: 1; }
@media (max-width: 991.98px) {
	.trek-mozaik { grid-template-columns: repeat(2, 1fr); grid-template-rows: 180px 180px 180px; }
	.trek-moz-1 { grid-column: span 2; grid-row: span 1; }
	.trek-moz-1 .trek-moz-nas { font-size: 1.2rem; }
}

/* ── Top lista: veliki broj, naslov, mala sličica ── */
.trek-topl { list-style: none; margin: 0; padding: 0; counter-reset: t; column-gap: 2.5rem; }
.trek-topl-red { display: flex; align-items: center; gap: 1rem; padding: .85rem 0; border-bottom: 1px solid var(--bs-border-color); }
.trek-topl-red:last-child { border-bottom: 0; }
.trek-topl-broj { flex: 0 0 auto; width: 2.4rem; text-align: center; font-weight: 800; font-size: 1.9rem; line-height: 1;
	color: transparent; -webkit-text-stroke: 1.5px var(--rc); }
.trek-topl-red:nth-child(-n+3) .trek-topl-broj { color: var(--rc); -webkit-text-stroke: 0; }
.trek-topl-link { flex: 1 1 auto; min-width: 0; display: block; }
.trek-topl-nas { display: block; font-weight: 650; line-height: 1.35; }
.trek-topl-red:hover .trek-topl-nas { color: var(--rc); }
.trek-topl-sl { flex: 0 0 auto; width: 74px; height: 52px; border-radius: 8px; overflow: hidden; }
.trek-topl-sl img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 992px) { .trek-topl { columns: 2; } .trek-topl-red { break-inside: avoid; } }

/* ── Tiker: uska traka najnovijeg, u boji rubrike ── */
.trek-rnt { display: flex; align-items: stretch; gap: 0; border-top: 1px solid var(--bs-border-color); border-bottom: 1px solid var(--bs-border-color); }
.trek-rnt-oznaka { flex: 0 0 auto; display: flex; align-items: center; gap: .45rem; background: var(--rc); color: #fff;
	font-weight: 800; font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; padding: .6rem 1rem; }
.trek-rnt-tacka { width: 7px; height: 7px; border-radius: 50%; background: #fff; animation: trekTikerPuls 1.6s infinite; }
@keyframes trekTikerPuls { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
.trek-rnt-traka { flex: 1 1 auto; min-width: 0; display: flex; gap: 2.2rem; overflow-x: auto; scrollbar-width: none; align-items: center; padding: 0 1rem; }
.trek-rnt-traka::-webkit-scrollbar { display: none; }
.trek-rnt-stavka { white-space: nowrap; font-size: .86rem; font-weight: 600; padding: .55rem 0; }
.trek-rnt-stavka:hover { color: var(--rc); }
.trek-rnt-vreme { font-size: .72rem; color: var(--trek-ink-2, #56575c); margin-right: .4rem; }

/* ══════════════════════════════════════════════════════════════════════════
   MOBILNE mini-naslovne rubrika (.trek-rnm). Nadogradnja na mobilni dizajn-sistem
   (.trek-m-*, boja rubrike kroz --cc): blokovi koje feed naslovne nema.
   Sve je unutar .trek-m, koji se na desktopu gasi (min-width 992px).
   ══════════════════════════════════════════════════════════════════════════ */
.trek-rnm-tiker { padding-top: 2px; }
.trek-rnm-tik { flex: none; max-width: 74vw; padding: 9px 14px; border-radius: 100px; background: var(--m-soft);
	color: var(--bs-body-color); text-decoration: none; font-size: 13.5px; font-weight: 600; white-space: nowrap;
	overflow: hidden; text-overflow: ellipsis; }
.trek-rnm-tik-d { color: var(--cc); font-weight: 800; margin-right: 6px; }

/* Foto rail (mozaik na mobilnom) */
.trek-rnm-foto { flex: none; width: 168px; height: 118px; border-radius: 16px; overflow: hidden; position: relative; text-decoration: none; background: var(--bs-tertiary-bg); }
.trek-rnm-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.trek-rnm-foto-grad { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.05) 35%, rgba(0,0,0,.75) 100%); }
.trek-rnm-foto-tt { position: absolute; left: 10px; right: 10px; bottom: 9px; color: #fff; font-family: var(--trek-serif, Georgia, serif);
	font-weight: 700; font-size: 13px; line-height: 1.2; text-shadow: 0 1px 4px rgba(0,0,0,.45);
	display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* Najčitanije: kompaktna numerisana lista */
.trek-rnm-top { list-style: none; margin: 0; padding: 0 18px; }
.trek-rnm-top li { display: flex; align-items: flex-start; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--bs-border-color); }
.trek-rnm-top li:last-child { border-bottom: 0; }
.trek-rnm-top-n { flex: none; width: 24px; text-align: center; font-weight: 800; font-size: 20px; line-height: 1.1;
	color: transparent; -webkit-text-stroke: 1.4px var(--cc); }
.trek-rnm-top li:nth-child(-n+3) .trek-rnm-top-n { color: var(--cc); -webkit-text-stroke: 0; }
.trek-rnm-top-l { flex: 1; min-width: 0; text-decoration: none; color: var(--bs-body-color); }
.trek-rnm-top-t { display: block; font-family: var(--trek-serif, Georgia, serif); font-weight: 700; font-size: 15px; line-height: 1.25; }
.trek-rnm-top-m { display: block; margin-top: 4px; font-size: 11.5px; color: var(--bs-secondary-color); font-weight: 500; }

/* Uspravna lista sa slikom levo */
.trek-rnm-lista { padding: 0 18px; }
.trek-rnm-st { display: flex; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--bs-border-color); text-decoration: none; color: var(--bs-body-color); }
.trek-rnm-st:last-child { border-bottom: 0; }
.trek-rnm-st-sl { flex: none; width: 104px; height: 72px; border-radius: 12px; overflow: hidden; background: var(--bs-tertiary-bg); }
.trek-rnm-st-sl img { width: 100%; height: 100%; object-fit: cover; }
.trek-rnm-st-telo { flex: 1; min-width: 0; }
.trek-rnm-st-tt { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
	font-family: var(--trek-serif, Georgia, serif); font-weight: 700; font-size: 15px; line-height: 1.25; }
.trek-rnm-st-m { display: block; margin-top: 5px; font-size: 11.5px; color: var(--bs-secondary-color); font-weight: 500; }

/* Autori rubrike */
.trek-rnm-autor { flex: none; width: 104px; display: flex; flex-direction: column; align-items: center; gap: 6px; text-decoration: none; color: var(--bs-body-color); }
.trek-rnm-autor img, .trek-rnm-autor-av { width: 58px; height: 58px; border-radius: 50%; object-fit: cover;
	border: 2.5px solid var(--cc); display: flex; align-items: center; justify-content: center;
	background: var(--m-soft); color: var(--cc); font-weight: 800; font-size: 20px; }
.trek-rnm-autor-ime { font-size: 12.5px; font-weight: 700; text-align: center; line-height: 1.2;
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.trek-rnm-autor-br { font-size: 11px; color: var(--bs-secondary-color); }

/* Dugi naslovi u mobilnom hero-u rubrike ne smeju da prerastu karticu (naslovna ostaje netaknuta). */
.trek-rnm .trek-m-hero-title { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.trek-rnm .trek-m-carousel, .trek-rnm .trek-m-rail { padding-top: 10px; }

/* Čipovi popularnih tema (naslovna). */
.trek-tema-cip { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 100px;
	border: 1px solid var(--bs-border-color); background: var(--bs-body-bg); color: var(--bs-body-color);
	font-size: .88rem; font-weight: 600; text-decoration: none; transition: border-color .15s, background .15s; }
.trek-tema-cip:hover { border-color: var(--bs-primary); background: var(--bs-tertiary-bg); }
.trek-tema-cip > span { font-size: .74rem; font-weight: 700; color: var(--bs-secondary-color); }

/* ══ Strana „Na današnji dan" ══ */
.trek-otd-hero { padding: 2.4rem 0 1.4rem; border-bottom: 1px solid var(--bs-border-color); }
.trek-otd-kicker { font-size: .78rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--bs-primary); }
.trek-otd-naslov { font-weight: 800; font-size: clamp(2rem, 5vw, 3.2rem); margin: .3rem 0 .2rem; text-transform: capitalize; }
.trek-otd-sub { color: var(--bs-secondary-color); margin: 0 0 1rem; }
.trek-otd-nav { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.trek-otd-strelica, .trek-otd-danas { display: inline-flex; align-items: center; gap: .4rem; padding: .45rem 1rem; border-radius: 100px;
	border: 1px solid var(--bs-border-color); text-decoration: none; color: var(--bs-body-color); font-size: .88rem; font-weight: 600; }
.trek-otd-strelica:hover, .trek-otd-danas:hover { border-color: var(--bs-primary); color: var(--bs-primary); }
.trek-otd-danas { background: var(--bs-primary); border-color: var(--bs-primary); color: #fff; }
.trek-otd-danas:hover { color: #fff; opacity: .92; }

.trek-otd-lista { list-style: none; margin: 0; padding: 0; max-width: 820px; }
.trek-otd-red { display: flex; gap: 1.4rem; padding: 1rem 0; border-bottom: 1px solid var(--bs-border-color); }
.trek-otd-red:last-child { border-bottom: 0; }
.trek-otd-godina { flex: 0 0 86px; font-weight: 800; font-size: 1.15rem; color: var(--bs-primary); font-variant-numeric: tabular-nums; }
.trek-otd-tekst { flex: 1; line-height: 1.65; }
@media (max-width: 575.98px) {
	.trek-otd-red { gap: .9rem; }
	.trek-otd-godina { flex-basis: 62px; font-size: 1rem; }
}

/* ══ „Trek priče": dugme na kraju priče ══
   Bag: .tsv-panel boji sav tekst belim, a .trek-naslovna a { color: inherit } je
   specifičnije od Bootstrap .btn-light, pa je CTA bio beo tekst na skoro belom
   dugmetu (čitljiv tek u :active). Ovde se boje postavljaju izričito. */
.tsv-panel a.tsv-cta {
	background: #fff; border-color: #fff; color: #14151a; text-shadow: none;
	box-shadow: 0 8px 24px rgba(0,0,0,.35); transition: background .18s, color .18s, transform .12s;
}
.tsv-panel a.tsv-cta:hover,
.tsv-panel a.tsv-cta:focus-visible {
	background: var(--bs-primary, #2163e8); border-color: var(--bs-primary, #2163e8); color: #fff; transform: translateY(-1px);
}
.tsv-panel a.tsv-cta:active { background: #e9ecef; border-color: #e9ecef; color: #14151a; }
.tsv-panel a.tsv-cta i { color: inherit; }

/* ══════════════════════════════════════════════════════════════════════════
   OGLASNI SLOJ: IMAX baner i slajder oglasa.
   IMAX je panoramski prostor preko cele širine; na telefonu ide preko celog
   ekrana (100vw × 100svh) da deluje kao platno. Slajder smenjuje više oglasa
   u istom prostoru, pa jedan slot nosi više prodatih kampanja.
   ══════════════════════════════════════════════════════════════════════════ */
.trek-imax-wrap { margin: 3rem 0; }
.trek-imax { position: relative; width: 100%; background: linear-gradient(135deg, #0d0f14, #1b1f2a);
	border-radius: 18px; overflow: hidden; min-height: 320px; display: flex; align-items: center; justify-content: center; }
.trek-imax .trek-imax-baner, .trek-imax img { width: 100%; height: 100%; object-fit: cover; margin: 0 !important; }
.trek-imax-demo { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .6rem;
	width: 100%; min-height: 320px; color: rgba(255,255,255,.72); text-align: center; padding: 2rem 1rem;
	background-image: repeating-linear-gradient(45deg, rgba(255,255,255,.045) 0 12px, transparent 12px 24px); }
.trek-imax-demo i { font-size: 2rem; opacity: .8; }
.trek-imax-demo-dim { font-weight: 800; letter-spacing: .04em; font-size: 1.05rem; color: #fff; }
.trek-imax-demo-note { font-size: .86rem; opacity: .7; }
@media (min-width: 992px) { .trek-imax { min-height: 420px; } .trek-imax-demo { min-height: 420px; } }

/* Telefon: IMAX izlazi iz kontejnera i zauzima ceo ekran. */
@media (max-width: 991.98px) {
	.trek-imax-wrap { margin: 2rem 0; }
	.trek-imax { border-radius: 0; width: 100vw; margin-left: calc(50% - 50vw); min-height: 100svh; }
	.trek-imax-demo { min-height: 100svh; }
}

/* Slajder oglasa */
.trek-bslajder { position: relative; }
.trek-bslajd { display: none; }
.trek-bslajd.is-active { display: block; animation: trekBslajd .35s ease; }
@keyframes trekBslajd { from { opacity: 0; } to { opacity: 1; } }
.trek-bslajder-tacke { display: flex; justify-content: center; gap: 6px; margin-top: .5rem; }
.trek-bslajder-tacka { width: 7px; height: 7px; border-radius: 50%; border: 0; padding: 0; cursor: pointer;
	background: var(--bs-border-color); transition: background .18s, transform .18s; }
.trek-bslajder-tacka.is-active { background: var(--bs-primary); transform: scale(1.25); }

/* Mali oglasni blokovi između sekcija */
.trek-mali-baneri { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; margin: 2rem 0; }

/* ── Spojena traka od četiri oglasa ──
   Svaka kreativa je u odnosu 1080×1350 (4:5), kao objava na Instagramu, i sve
   četiri se naslanjaju jedna na drugu bez ijednog piksela razmaka. Slot gubi
   sopstveni okvir, oznaku i marginu, da traka izgleda kao jedan blok. */
.trek-cetiri { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-radius: 16px; overflow: hidden;
	box-shadow: 0 18px 44px rgba(10,14,30,.14); line-height: 0; }
.trek-cetiri-polje { position: relative; aspect-ratio: 1080 / 1350; display: flex; line-height: normal; }
.trek-cetiri .trek-baner,
.trek-cetiri .trek-baner-html,
.trek-cetiri .trek-baner-html > a { border: 0; padding: 0; margin: 0 !important; background: transparent; border-radius: 0;
	max-width: none !important; width: 100%; height: 100%; display: flex; }
.trek-cetiri .trek-baner-oznaka { display: none; }          /* jedna oznaka za celu traku */
.trek-cetiri .trek-baner-demo { height: 100%; width: 100%; margin: 0 !important; max-width: none; border-radius: 0; }
.trek-cetiri-natpis { display: block; text-align: right; font-size: .62rem; letter-spacing: .1em; text-transform: uppercase;
	color: var(--bs-secondary-color); margin-top: .4rem; }
@media (max-width: 991.98px) { .trek-cetiri { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575.98px) { .trek-cetiri { grid-template-columns: 1fr; } }

/* Baner unutar IMAX prostora ide od ivice do ivice (bez okvira i podloge slota). */
.trek-imax .trek-baner { border: 0; padding: 0; background: transparent; border-radius: 0; margin: 0 !important; max-width: none !important; width: 100%; height: 100%; }
.trek-imax .trek-baner-html { padding: 0; height: 100%; }
.trek-imax .trek-baner-oznaka { top: .75rem; right: .9rem; background: rgba(0,0,0,.45); border-color: rgba(255,255,255,.25); color: rgba(255,255,255,.85); }

/* ══ Traka sa tržišta (rubrika Berze) ══ */
.trek-brz { border-top: 1px solid var(--bs-border-color); border-bottom: 1px solid var(--bs-border-color); background: var(--bs-body-bg); }
.trek-brz-red { display: flex; align-items: stretch; gap: 0; }
.trek-brz-oznaka { flex: none; display: flex; align-items: center; gap: .45rem; background: #eab308; color: #1a1400;
	font-weight: 800; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; padding: .55rem 1rem; }
.trek-brz-tacka { width: 7px; height: 7px; border-radius: 50%; background: #1a1400; animation: trekBrzPuls 1.8s infinite; }
@keyframes trekBrzPuls { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
.trek-brz-traka { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 1.6rem; overflow-x: auto;
	scrollbar-width: none; padding: 0 1rem; }
.trek-brz-traka::-webkit-scrollbar { display: none; }
.trek-brz-stavka { display: inline-flex; align-items: baseline; gap: .45rem; white-space: nowrap; font-size: .84rem; }
.trek-brz-stavka[hidden] { display: none; }
.trek-brz-naziv { font-weight: 700; color: var(--bs-body-color); }
.trek-brz-cena { font-variant-numeric: tabular-nums; color: var(--bs-body-color); }
.trek-brz-promena { font-size: .76rem; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--bs-secondary-color); }
.trek-brz-stavka.je-gore .trek-brz-promena { color: #16a34a; }
.trek-brz-stavka.je-dole .trek-brz-promena { color: #dc2626; }
.trek-brz-podesi { flex: none; display: inline-flex; align-items: center; gap: .4rem; border: 0; border-left: 1px solid var(--bs-border-color);
	background: transparent; color: var(--bs-secondary-color); font-size: .78rem; font-weight: 600; padding: .5rem 1rem; cursor: pointer; }
.trek-brz-podesi:hover { color: var(--bs-body-color); }
.trek-brz-izbor { padding: .9rem 0 1rem; border-top: 1px dashed var(--bs-border-color); }
.trek-brz-izbor-tt { display: block; font-size: .68rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
	color: var(--bs-secondary-color); margin-bottom: .5rem; }
.trek-brz-izbor-cipovi { display: flex; flex-wrap: wrap; gap: .45rem; }
.trek-brz-cip { display: inline-flex; align-items: center; gap: .4rem; font-size: .8rem; font-weight: 600; padding: 6px 12px;
	border-radius: 100px; border: 1px solid var(--bs-border-color); cursor: pointer; }
.trek-brz-cip input { accent-color: #eab308; }
.trek-brz-nota { display: block; margin-top: .6rem; font-size: .7rem; color: var(--bs-secondary-color); }

/* ══ Pokrovitelj rubrike ══ */
.trek-spz { background: var(--bs-tertiary-bg); border-bottom: 1px solid var(--bs-border-color); padding: .75rem 0; }
.trek-spz-red { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.trek-spz-nat { flex: none; font-size: .68rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
	color: var(--bs-secondary-color); position: relative; padding-left: 12px; }
.trek-spz-nat::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
	width: 4px; height: 1em; border-radius: 2px; background: var(--rc); }
.trek-spz-kreativa { flex: 1 1 320px; min-width: 0; }
.trek-spz .trek-baner { border: 0; padding: 0; margin: 0 !important; background: transparent; max-width: none !important; }
.trek-spz .trek-baner-oznaka { display: none; }
.trek-spz .trek-baner-html > a { border-radius: 12px; }
/* Traka pokrovitelja je niža od običnog banera: fotografija i tekst se stišavaju. */
.trek-spz .trek-baner-html > a > span:first-child { flex: 0 0 150px !important; min-height: 92px !important; }
.trek-spz .trek-baner-html > a > span:last-child { padding: 12px 16px !important; gap: 12px !important; }
.trek-spz .trek-baner-html > a span[style*="font-size:1.32rem"] { font-size: 1.05rem !important; }
.trek-spz .trek-baner-html > a span[style*="line-height:1.5"] { display: none; }