/* ═══════════════════════════════════════════════════════════════
   TRELMIRO TEMA — main.css  (v0.1.0)
   Tokeni identični plugin-u (assets/tracker.css).
   Mobile-first: bazni stilovi = telefon, media query = širi ekrani.
   ═══════════════════════════════════════════════════════════════ */
:root {
	/* Sajt je nativno taman — browser ne sme da ga "auto-dark" invertuje,
	   a form kontrole i scrollbarovi se renderuju tamno */
	color-scheme: dark;

	/* Boje — Trelmiro brend knjiga (jul 2026), 1:1 sa tracker.css */
	--tm-bg:            #12100D;
	--tm-surface:       #1C1A16;
	--tm-surface-2:     #26231e;
	--tm-border:        #2b2822;
	--tm-border-input:  #34302a;
	--tm-text:          #ece9e4;
	--tm-text-muted:    #969188;
	--tm-primary:       #3DBB7C;
	--tm-primary-hover: #2E9E66;
	--tm-primary-text:  #0C1F15;
	--tm-link:          #4FC3E8;
	--tm-success:       #5BD98A;
	--tm-warning:       #E8A54F;
	--tm-danger:        #E86B5B;

	/* Tipografija */
	--tm-font:          'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	--tm-font-heading:  'Space Grotesk', var(--tm-font);

	/* Oblik — isti radijusi kao tracker */
	--tm-radius:      14px;   /* kartice */
	--tm-radius-sm:   10px;   /* dugmad */
	--tm-radius-xs:   8px;    /* inputi */

	/* Layout teme */
	--tm-header-h:    64px;
	--tm-section-y:   clamp(3.5rem, 9vw, 7rem);
	--tm-safe-top:    env(safe-area-inset-top, 0px);
	--tm-safe-bottom: env(safe-area-inset-bottom, 0px);
	--tm-safe-left:   env(safe-area-inset-left, 0px);
	--tm-safe-right:  env(safe-area-inset-right, 0px);
}

/* ═══ BAZA ═══ */
*, *::before, *::after { box-sizing: border-box; }

html {
	/* Anchor linkovi ne upadaju pod fiksirani header */
	scroll-padding-top: calc(var(--tm-header-h) + var(--tm-safe-top) + 12px);
	scroll-behavior: smooth;
	-webkit-text-size-adjust: 100%;
	/* Pojas i tregeri uz body clip — propagacija body overflow-a na viewport
	   ume da zakaže (emulatori, admin bar), pa sečemo i ovde */
	overflow-x: clip;
}
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
}

body {
	margin: 0;
	background: var(--tm-bg);
	color: var(--tm-text);
	font-family: var(--tm-font);
	overflow-x: clip;
}

/* Fixed header lebdi preko sadržaja — unutrašnje stranice dobijaju razmak
   odozgo da ne uđu pod njega. Početna (hero) namerno ide pod header. */
body:not(.home) main { padding-top: var(--tm-header-h); }

/* Globalni blockGap daje main-u margin-block-start iako je header fiksiran
   (zauzima 0 visine) — bez ovoga se vidi traka pozadine iznad hero-a */
.wp-site-blocks > main { margin-block-start: 0; }

img, video, iframe { max-width: 100%; height: auto; }
iframe { border: 0; }

:focus-visible {
	outline: 2px solid var(--tm-primary);
	outline-offset: 2px;
	border-radius: 4px;
}

::selection { background: var(--tm-primary); color: var(--tm-primary-text); }

/* Touch targeti — min 44px na interaktivnim elementima */
a.wp-block-button__link, button, .wp-block-navigation a {
	min-height: 44px;
}

/* ═══ HEADER (fixed, providan → 50% pri skrolu) ═══ */
.tm-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 900;
	padding-top: var(--tm-safe-top);
	padding-left: max(16px, var(--tm-safe-left));
	padding-right: max(16px, var(--tm-safe-right));
	background: transparent;
	border-bottom: 1px solid transparent;
	transition: background-color .25s ease, border-color .25s ease;
}
.tm-header.is-scrolled {
	background: rgba(18, 16, 13, .5);
	border-bottom-color: var(--tm-border);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
}
/* Ulogovan pregled: header ispod WP admin bara (na frontu se ne vidi razlika) */
body.admin-bar .tm-header { top: var(--wp-admin--admin-bar--height, 32px); }
.tm-header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: nowrap;      /* header nikad u dva reda */
	gap: 16px;
	max-width: 1140px;
	margin: 0 auto;
	min-height: var(--tm-header-h);
}
.tm-header .wp-block-navigation { min-width: 0; } /* meni sme da se stisne, ne da iscuri */
/* Sve tri sekcije headera na istoj liniji — bez viška margina/paddinga */
.tm-header-inner > * { margin: 0; }
.tm-header .wp-block-navigation,
.tm-header .wp-block-buttons { align-items: center; margin: 0; }
.tm-header .wp-block-navigation .wp-block-navigation__container { align-items: center; }

/* Logo */
.tm-logo {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: var(--tm-font-heading);
	font-weight: 700;
	font-size: 1.25rem; /* 20px */
	color: var(--tm-primary);
	text-decoration: none;
	line-height: 1;
}
.tm-logo:hover { color: var(--tm-primary); }
.tm-logo svg { display: block; }

/* Navigacija (core/navigation) */
.tm-header .wp-block-navigation a {
	color: var(--tm-text-muted);
	font-size: 0.9375rem; /* 15px */
	display: inline-flex;
	align-items: center;
}
.tm-header .wp-block-navigation a:hover,
.tm-header .wp-block-navigation .current-menu-item > a {
	color: var(--tm-text);
}

/* Header CTA dugme — kompaktnije, simetričan padding; SAMO desktop */
.tm-header .wp-block-button__link {
	padding: 10px 18px;
	font-size: 0.875rem; /* 14px */
	line-height: 1;
}
@media (max-width: 899px) {
	/* Na užim ekranima dugme živi u burger meniju — header ostaje logo + burger,
	   ništa na sredini (kamera/notch zona), ništa ne curi van ekrana */
	.tm-header .wp-block-buttons { display: none; }
	.tm-header .wp-block-navigation { gap: 18px; }
}

/* ═══ NAŠ BURGER + MOBILNI MENI (bez WP overlay-a) ═══ */
.tm-burger {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 44px;
	height: 44px;
	padding: 10px;
	background: transparent;
	border: none;
	cursor: pointer;
}
.tm-burger span {
	display: block;
	width: 22px;
	height: 2px;
	background: var(--tm-text);
	border-radius: 2px;
}
@media (max-width: 899px) {
	.tm-burger { display: inline-flex; }
	/* WP meni se sklanja SAMO ako naš burger postoji u markup-u —
	   star header (pre Clear-a) tako zadržava upotrebljiv meni */
	.tm-header-inner:has(.tm-burger) .wp-block-navigation { display: none; }
}

.tm-mobile-menu {
	/* Dropdown panel ispod headera — visina po sadržaju, ne fullscreen */
	position: fixed;
	top: calc(var(--tm-header-h) + var(--tm-safe-top));
	left: 0;
	right: 0;
	z-index: 9500;
	background: var(--tm-bg);
	border-bottom: 1px solid var(--tm-border);
	box-shadow: 0 18px 40px rgba(0, 0, 0, .45);
	padding: 8px max(24px, var(--tm-safe-left)) 20px max(24px, var(--tm-safe-right));
	max-height: calc(100svh - var(--tm-header-h) - var(--tm-safe-top));
	overflow-y: auto;
}
.tm-mobile-menu[hidden] { display: none; }
.tm-mobile-menu ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.tm-mobile-menu li a {
	display: block;
	padding: 12px 0;
	color: var(--tm-text);
	font-family: var(--tm-font-heading);
	font-weight: 500;
	font-size: 1.1875rem; /* 19px */
	text-decoration: none;
}
.tm-mobile-menu li a:hover { color: var(--tm-primary); }
.tm-mobile-menu .tm-mobile-menu-cta a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--tm-primary);
	color: var(--tm-primary-text);
	border-radius: var(--tm-radius-sm);
	padding: 13px 26px;
	font-family: var(--tm-font);
	font-size: 1.0625rem; /* 17px */
	font-weight: 600;
	margin-top: 14px;
	min-height: 44px;
}
body.tm-menu-open { overflow: hidden; }
/* Dok je meni otvoren, header dobija punu pozadinu — panel i traka su celina */
body.tm-menu-open .tm-header {
	background: var(--tm-bg);
	border-bottom-color: var(--tm-border);
}

/* ═══ DUGMAD ═══ */
.wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: background-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.wp-block-button__link:hover {
	transform: translateY(-1px);
	box-shadow: 0 6px 18px rgba(61, 187, 124, .22);
}
.wp-block-button__link:active { transform: translateY(0); }

/* Ghost varijanta — kao .t-btn-ghost u trackeru */
.is-style-tm-ghost .wp-block-button__link {
	background: var(--tm-surface-2);
	color: var(--tm-text);
	border: 1px solid var(--tm-border-input);
}
.is-style-tm-ghost .wp-block-button__link:hover {
	background: var(--tm-border-input);
	color: var(--tm-text);
	box-shadow: none;
}

/* ═══ HERO ═══ */
.tm-hero {
	/* Puna visina ekrana — fixed header lebdi preko, ne oduzima prostor */
	min-height: 100vh;
	min-height: 100svh;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding-top: var(--tm-section-y);
	padding-bottom: var(--tm-section-y);
	/* Background slika (opciono — postavlja se na Group blok u Site Editoru) */
	position: relative;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	/* Dekorativni glow (::after, 120vw) se seče OVDE, na izvoru —
	   jedini element širi od viewporta, uzrok horizontalnog scrolla */
	overflow: clip;
}
/* Opcioni tamni overlay preko slike — dodaj klasu "has-overlay" na hero grupu */
.tm-hero.has-overlay::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(18, 16, 13, .55), rgba(18, 16, 13, .88));
	z-index: 0;
	pointer-events: none;
}
.tm-hero.has-overlay > * { position: relative; z-index: 1; }

/* Hero je flex (vertikalno centriranje) — deca uzimaju punu širinu reda,
   pa WP constrained geometrija radi identično kao u običnim sekcijama */
.tm-hero > * { width: 100%; }

/* Suptilni radial gradient — zeleni sjaj u desnom delu hero-a */
.tm-hero.has-glow::after {
	content: "";
	position: absolute;
	top: -10%;
	right: -15%;
	width: min(70vw, 900px);
	height: min(70vw, 900px);
	background: radial-gradient(circle, rgba(61, 187, 124, .16) 0%, rgba(61, 187, 124, .06) 38%, transparent 68%);
	pointer-events: none;
	z-index: 0;
}
.tm-hero.has-glow > * { position: relative; z-index: 1; }

/* ── Hero logo motiv — "dva poteza" u centru glow-a ──
   Box je IDENTIČAN glow ::after boxu (top/right/width/height,
   uklj. mobilni media query) → centar znaka = centar gradijenta,
   bez ručnog računanja procenata. */
.tm-hero.has-glow > .tm-hero-mark {
	position: absolute;
	top: -10%;
	right: -15%;
	width: min(70vw, 900px);
	height: min(70vw, 900px);
	display: grid;
	place-items: center;
	z-index: 0;
	pointer-events: none;
}
.tm-hero-mark svg {
	width: 38%;
	height: auto;
	/* meka ivica + bloom u dva sloja */
	filter: blur(1.1px)
		drop-shadow(0 0 6px rgba(61, 187, 124, .55))
		drop-shadow(0 0 16px rgba(61, 187, 124, .28));
}
.tm-hero-mark path {
	stroke: var(--tm-primary);
	stroke-linecap: round;
	/* gap > putanja → druga crtica nikad ne dotakne vrh (nema wrap tačke) */
	stroke-dasharray: 100 130;
	stroke-dashoffset: 0; /* default: napunjeno (no-JS / reduced-motion) */
}
.tm-hero-mark .dr-1 { stroke-opacity: .04; }
.tm-hero-mark .dr-2 { stroke-opacity: .022; }

/* Animacija: sakriveno dok typing ne krene (is-live), pa jednokratno
   iscrtavanje; start 105 (ne 100) da round-cap ne ostavi tačku na prvom frejmu */
html.tm-anim .tm-hero-mark path { stroke-dashoffset: 105; }
html.tm-anim .tm-hero.is-live .tm-hero-mark .dr-1 { animation: tm-draw 3s ease-out both; }
html.tm-anim .tm-hero.is-live .tm-hero-mark .dr-2 { animation: tm-draw 3s ease-out 1.2s both; }
@keyframes tm-draw {
	from { stroke-dashoffset: 105; }
	to { stroke-dashoffset: 0; }
}

/* Na telefonu sjaj ide iznad sadržaja (desno nema mesta) */
@media (max-width: 781px) {
	.tm-hero.has-glow::after {
		top: -20%;
		right: -30%;
		width: 120vw;
		height: 120vw;
	}
	.tm-hero.has-glow > .tm-hero-mark {
		top: -20%;
		right: -30%;
		width: 120vw;
		height: 120vw;
	}
}

/* Manji naslov nego globalni h1 hero preset */
.tm-hero h1 {
	font-size: clamp(2rem, 1.5rem + 2.2vw, 3.25rem);
	max-width: 14em;
	margin: 0;
	padding-top: .1em;
	padding-bottom: .3em;
}
.tm-hero .tm-eyebrow { margin-bottom: 12px; }
.tm-hero p.tm-sub {
	font-size: clamp(1.05rem, 1rem + .5vw, 1.3rem);
	color: var(--tm-text-muted);
	max-width: 34em;
	margin: 0 0 28px;
}

/* ── Typing bez CLS: naslov drži punu visinu od starta ──
   Pravi (nevidljivi) tekst rezerviše prostor; vidljivo kucanje ide preko. */
.tm-hero h1.tm-type.is-typing { display: grid; }
.tm-hero h1.tm-type.is-typing > * { grid-area: 1 / 1; } /* obe kopije u istoj ćeliji */
.tm-type-ghost { visibility: hidden; pointer-events: none; }

/* ── Typing caret ── */
.tm-caret {
	display: inline-block;
	width: 3px;
	height: 1em;
	margin-left: 2px;
	background: var(--tm-primary);
	vertical-align: -0.12em;
	animation: tm-blink 1s step-end infinite;
}
@keyframes tm-blink { 50% { opacity: 0; } }

/* ── Gost vs. ulogovan korisnik ──
   WP sam dodaje body.logged-in — bez JS-a, bez flickera.
   Page cache u produkciji MORA da preskače ulogovane! */
body.logged-in .tm-guest { display: none; }
body:not(.logged-in) .tm-member { display: none; }

/* ── Hero dugmad: skrivena dok kucanje ne završi, pa fade redom ── */
html.tm-anim .tm-hero .wp-block-buttons .wp-block-button {
	opacity: 0;
	transform: translateY(8px);
	transition: opacity .45s ease, transform .45s ease;
}
html.tm-anim .tm-hero .wp-block-buttons .wp-block-button.tm-btn-in {
	opacity: 1;
	transform: none;
}

/* Oba hero dugmeta iste širine — koliko traži šire od njih.
   inline-grid: kontejner se skuplja na sadržaj, a 1fr kolone
   se izjednače po najširoj. Gap iz blockGap-a važi i za grid. */
.tm-hero .wp-block-buttons {
	display: inline-grid;
	grid-auto-flow: column;
	grid-auto-columns: 1fr;
}
.tm-hero .wp-block-button__link {
	width: 100%;
	text-align: center;
}

/* Eyebrow — mala oznaka iznad naslova */
.tm-eyebrow {
	display: inline-block;
	font-family: var(--tm-font-heading);
	font-weight: 500;
	font-size: 0.8125rem; /* 13px */
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--tm-primary);
}

/* ═══ SEKCIJE ═══ */
.tm-section {
	padding-top: var(--tm-section-y);
	padding-bottom: var(--tm-section-y);
}
.tm-section-tight { padding-top: calc(var(--tm-section-y) * .6); padding-bottom: calc(var(--tm-section-y) * .6); }

/* Zaglavlje sekcije — WP constrained ga sam centrira na punu širinu kontejnera,
   pa leva ivica prirodno pada na istu liniju kao kartice */
.tm-section-head .tm-eyebrow { margin: 0 0 12px; }
.tm-section-head h2 {
	margin: 0;
	max-width: 16em;               /* naslov se prelama, ne beži preko ekrana */
	padding-top: .1em;             /* vazduh iznad — vizuelna hijerarhija */
	padding-bottom: .25em;         /* vazduh ispod */
}
.tm-section-head .tm-intro {
	color: var(--tm-text-muted);
	max-width: 42em;
	margin: 0;
}
.tm-section h2 { margin-top: 0; }
.tm-section .tm-intro {
	color: var(--tm-text-muted);
	max-width: 42em;
	margin-top: 10px;
}

/* ═══ KARTICE (kao .t-card) ═══ */
.tm-card {
	background: var(--tm-surface);
	border: 1px solid var(--tm-border);
	border-radius: var(--tm-radius);
	padding: clamp(18px, 3vw, 28px);
	transition: transform .25s ease, border-color .25s ease;
}
.tm-card h3 { margin-top: 0; margin-bottom: 10px; font-size: 1.15rem; }
.tm-card p { color: var(--tm-text-muted); margin: 0; font-size: 0.9375rem; /* 15px */ line-height: 1.6; }
.tm-card p + p { margin-top: 10px; }

@media (hover: hover) {
	.tm-card:hover { transform: translateY(-3px); border-color: var(--tm-border-input); }
}

/* Kartice u kolonama — jednaka visina u istom redu.
   WP kolone se ionako rastežu na visinu reda; kartica koja je JEDINO
   dete kolone puni celu visinu. Kolone sa više dece ostaju normalan tok. */
.tm-section .wp-block-column > .tm-card:only-child {
	height: 100%;
	display: flex;
	flex-direction: column;
}

/* Istaknuta kartica (npr. Trelmiro u poređenju, cenovnik) */
.tm-card.is-featured {
	border-color: var(--tm-primary);
	position: relative;
}
/* Badge viri iznad kartice — na mobilnom (naslagane kolone) treba malo vazduha */
.wp-block-column .tm-card.is-featured { margin-top: 12px; }
@media (min-width: 782px) {
	.wp-block-column .tm-card.is-featured { margin-top: 0; }
}
.tm-card.is-featured .tm-badge {
	position: absolute;
	top: -12px;
	left: 20px;
	background: var(--tm-primary);
	color: var(--tm-primary-text);
	font-family: var(--tm-font-heading);
	font-weight: 700;
	font-size: 0.75rem; /* 12px */
	letter-spacing: .04em;
	padding: 4px 12px;
	border-radius: 999px;
}

/* ═══ IMAGE PLACEHOLDER (logo mark na praznom mestu za sliku) ═══ */
.tm-img-ph {
	aspect-ratio: 4 / 3;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--tm-surface-2);
	border-bottom: 1px solid var(--tm-border);
	border-radius: var(--tm-radius) var(--tm-radius) 0 0;
}
.tm-img-ph svg { width: 40%; max-width: 90px; height: auto; opacity: .5; }
/* Kvadratni placeholder (npr. avatar trenera) */
.tm-img-ph.is-square { aspect-ratio: 1; }

/* Kartica sa slikom preko cele širine (npr. trener): bez paddinga, klipuje uglove */
.tm-card.is-media { padding: 0; overflow: hidden; }
.tm-card.is-media .tm-img-ph { border-radius: 0; }
.tm-card.is-media .wp-block-post-featured-image { margin: 0; }
.tm-card.is-media .wp-block-post-featured-image img { display: block; width: 100%; }
.tm-card-body { padding: clamp(16px, 2.5vw, 22px); }
.tm-card-body .wp-block-post-title { margin: 0 0 8px; font-size: 1.15rem; }
.tm-card-body .wp-block-post-title a { color: var(--tm-text); text-decoration: none; }
.tm-card-body .wp-block-post-excerpt { color: var(--tm-text-muted); font-size: 0.9375rem; /* 15px */ line-height: 1.6; }
.tm-card-body .wp-block-post-excerpt p { margin: 0; }

/* Broj klijenata — sakriven dok JS ne potvrdi da broja ima */
.tm-trener-count {
	visibility: hidden;
	margin-top: 12px;
	padding-top: 12px;
	border-top: 1px solid var(--tm-border);
	color: var(--tm-text-muted);
	font-size: 0.875rem; /* 14px */
}
.tm-trener-count.is-ready { visibility: visible; }
.tm-trener-count strong {
	color: var(--tm-primary);
	font-family: var(--tm-font-heading);
	font-weight: 700;
}

/* Grid trenera — razmak između kartica */
.tm-trener-grid { gap: 20px; }

/* Jednaka visina kartica u Query Loop gridu:
   grid red se rasteže po najvišoj — kartica puni ceo red,
   a telo kartice puni karticu */
.tm-trener-grid > li { display: flex; }
.tm-trener-grid > li > .tm-card {
	flex: 1;
	width: 100%;
	display: flex;
	flex-direction: column;
}
.tm-trener-grid .tm-card-body { flex: 1; }

/* Slika trenera — uvek kvadrat, bez obzira na dimenzije originala */
.tm-card.is-media .wp-block-post-featured-image {
	aspect-ratio: 1;
	overflow: hidden;
}
.tm-card.is-media .wp-block-post-featured-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ═══ KORACI (Kako radi) — dizajn 2a: puni zeleni brojevi + divider ═══ */
#kako-radi .tm-step { padding: 26px 22px; }
.tm-step-big {
	display: block;
	font-family: var(--tm-font-heading);
	font-weight: 700;
	font-size: 3.25rem;          /* 52px */
	line-height: 0.85;
	letter-spacing: -0.03em;
	color: var(--tm-primary);
	user-select: none;
}
.tm-step-line {
	height: 1px;
	background: var(--tm-border);
	margin: 20px 0 18px;
}
/* WP blockGap daje telu koraka margin-block-start 1.25rem (drugo dete) —
   gura naslov ispod broja na mobilnom i duplira razmak dividera na desktopu */
#kako-radi .tm-step > .tm-step-body { margin-block-start: 0; }
#kako-radi .tm-step-body h3 {
	margin: 0;
	font-size: 1.0625rem; /* 17px */
	font-weight: 600;
	font-family: var(--tm-font);
}
#kako-radi .tm-step-body p {
	font-size: 0.84375rem; /* 13.5px */
	line-height: 1.55;
	margin-top: 10px;
}

/* Mobilni: broj levo, tekst desno — bez dividera (bio bi vertikalan) */
@media (max-width: 781px) {
	#kako-radi .tm-step {
		flex-direction: row;
		align-items: flex-start;
		gap: 16px;
	}
	#kako-radi .tm-step-big {
		font-size: 2.75rem;
		line-height: 1.05;
		min-width: 64px;
		margin-bottom: 0;
	}
	#kako-radi .tm-step-line { display: none; }
	/* Naslov: bez flex centriranja (posle blockGap fixa pravilo je pravilo pomeraj) */
	#kako-radi .tm-step-body h3 {
		min-height: 0;
		display: block;
	}
	/* Opis: 5px umesto desktop 10px — vizuelna hijerarhija bez rasipanja visine */
	#kako-radi .tm-step-body p { margin-top: 5px; }
}

/* ═══ CENOVNIK ═══ */
.tm-price {
	font-family: var(--tm-font-heading);
	font-weight: 700;
	font-size: clamp(2.2rem, 5vw, 3rem);
	line-height: 1;
	margin: 8px 0 2px;
}
.tm-price small {
	font-size: .4em;
	font-weight: 500;
	color: var(--tm-text-muted);
}
.tm-price-note { color: var(--tm-text-muted); font-size: 0.875rem; /* 14px */ }

/* Lista sa ✓ (šta dobijaš) */
ul.tm-check {
	list-style: none;
	padding: 0;
	margin: 18px 0 0;
}
ul.tm-check li {
	position: relative;
	padding-left: 28px;
	margin-bottom: 10px;
	color: var(--tm-text);
	font-size: 0.9375rem; /* 15px */
}
ul.tm-check li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 3px;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: var(--tm-primary);
	-webkit-mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="none" stroke="black" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" d="M3 8.5l3.2 3L13 5"/></svg>') center / contain no-repeat;
	mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="none" stroke="black" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" d="M3 8.5l3.2 3L13 5"/></svg>') center / contain no-repeat;
}

/* "Nije za tebe" lista — × umesto ✓ */
ul.tm-cross { list-style: none; padding: 0; margin: 18px 0 0; }
ul.tm-cross li {
	position: relative;
	padding-left: 28px;
	margin-bottom: 10px;
	color: var(--tm-text-muted);
	font-size: 0.9375rem; /* 15px */
}
ul.tm-cross li::before {
	content: "×";
	position: absolute;
	left: 2px;
	top: -1px;
	color: var(--tm-danger);
	font-weight: 700;
	font-size: 1.0625rem; /* 17px */
	line-height: 1.4;
}

/* ═══ FAQ (core/details) ═══ */
/* Poziv na kontakt ispod accordiona — širina poravnata sa .tm-faq.
   Razmak ka dugmetu zadat ciljano (blockGap bi dao 1.25rem). */
.tm-faq-more {
	max-width: 760px;
	margin-top: 28px;
}
.tm-faq-more p {
	margin: 0;
	color: var(--tm-text-muted);
}
.tm-faq-more .wp-block-buttons { margin-top: 14px; }

.tm-faq { max-width: 760px; }
.tm-faq details {
	background: var(--tm-surface);
	border: 1px solid var(--tm-border);
	border-radius: var(--tm-radius);
	padding: 0;
	margin-bottom: 10px;
	overflow: hidden;
}
.tm-faq summary {
	cursor: pointer;
	list-style: none;
	padding: 16px 46px 16px 18px;
	font-family: var(--tm-font-heading);
	font-weight: 500;
	font-size: 1rem; /* 16px */
	position: relative;
	user-select: none;
	min-height: 44px;
}
.tm-faq summary::-webkit-details-marker { display: none; }
.tm-faq summary::after {
	content: "";
	position: absolute;
	right: 18px;
	top: 50%;
	width: 12px;
	height: 12px;
	margin-top: -6px;
	border-right: 2px solid var(--tm-primary);
	border-bottom: 2px solid var(--tm-primary);
	transform: rotate(45deg);
	transition: transform .25s ease;
}
.tm-faq details[open] summary::after { transform: rotate(225deg); margin-top: -2px; }
.tm-faq details > *:not(summary) {
	padding: 0 18px;
	color: var(--tm-text-muted);
	font-size: 0.9375rem; /* 15px */
	line-height: 1.6;
}
.tm-faq details > *:last-child { padding-bottom: 16px; }

/* ═══ VIDEO GRID ═══ */
.tm-video-card { overflow: hidden; padding: 0; }
.tm-video-card .tm-video-frame {
	position: relative;
	padding-top: 56.25%;
	background: #000;
}
.tm-video-card .tm-video-frame iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}
.tm-video-card .tm-video-meta { padding: 14px 16px 16px; }
.tm-video-card .tm-video-meta h3 { font-size: 1rem; margin: 0 0 4px; }

/* ═══ MODAL — Registruj se (kao .t-modal) ═══ */
.tm-modal {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: none;
	align-items: flex-end; /* mobile: sheet od dna */
	justify-content: center;
	background: rgba(0, 0, 0, .75);
	padding: 16px;
	padding-bottom: max(16px, var(--tm-safe-bottom));
}
.tm-modal.is-open { display: flex; }
.tm-modal-box {
	background: var(--tm-surface);
	border: 1px solid var(--tm-border);
	border-radius: var(--tm-radius);
	padding: 24px 20px;
	width: 100%;
	max-width: 480px;
	max-height: calc(100dvh - 32px); /* dvh: modal prati vidljivu površinu */
	max-height: calc(100vh - 32px);
	overflow-y: auto;
	position: relative;
	animation: tm-modal-in .3s ease;
}
@keyframes tm-modal-in {
	from { opacity: 0; transform: translateY(24px); }
	to   { opacity: 1; transform: translateY(0); }
}
.tm-modal-box h3 { margin: 0 0 12px; padding-right: 36px; }
.tm-modal-box p { color: var(--tm-text-muted); font-size: 0.9375rem; /* 15px */ line-height: 1.6; }
.tm-modal-x {
	position: absolute;
	top: 14px;
	right: 14px;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--tm-surface-2);
	border: 1px solid var(--tm-border-input);
	color: var(--tm-text);
	font-size: 0.9375rem; /* 15px */
	line-height: 1;
	cursor: pointer;
}
.tm-modal-x:hover { background: var(--tm-border-input); }
.tm-modal-steps { margin: 16px 0; padding: 0 0 0 20px; }
.tm-modal-steps li { color: var(--tm-text); font-size: 0.9375rem; /* 15px */ margin-bottom: 10px; }
.tm-modal-steps li::marker { color: var(--tm-primary); font-weight: 700; }
.tm-modal-account {
	background: var(--tm-bg);
	border: 1px dashed var(--tm-border-input);
	border-radius: var(--tm-radius-xs);
	padding: 12px 14px;
	font-family: var(--tm-font-heading);
	font-size: 1rem; /* 16px */
	letter-spacing: .03em;
	text-align: center;
	margin: 14px 0;
	user-select: all; /* tap = selektuje ceo broj za kopiranje */
}
body.tm-modal-open { overflow: hidden; }

@media (min-width: 600px) {
	.tm-modal { align-items: center; } /* desktop: centriran */
}

/* ═══ STICKY MOBILE CTA ═══ */
.tm-sticky-cta {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 800;
	padding: 10px max(16px, var(--tm-safe-left)) calc(10px + var(--tm-safe-bottom)) max(16px, var(--tm-safe-right));
	background: rgba(18, 16, 13, .92);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border-top: 1px solid var(--tm-border);
	transform: translateY(110%);
	transition: transform .3s ease;
}
.tm-sticky-cta.is-visible { transform: translateY(0); }
.tm-sticky-cta button,
.tm-sticky-cta a {
	display: block;
	width: 100%;
	background: var(--tm-primary);
	color: var(--tm-primary-text);
	border: none;
	border-radius: var(--tm-radius-sm);
	padding: 13px;
	font-family: var(--tm-font);
	font-weight: 600;
	font-size: 1rem; /* 16px */
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	min-height: 44px;
}
.tm-sticky-cta button:hover,
.tm-sticky-cta a:hover { background: var(--tm-primary-hover); color: var(--tm-primary-text); }

@media (min-width: 782px) {
	.tm-sticky-cta { display: none; } /* samo na telefonu */
}

/* Kad je sticky CTA vidljiv, footer dobija prostor da ne bude zaklonjen */
@media (max-width: 781px) {
	body.has-sticky-cta .tm-footer { padding-bottom: 90px; }
}

/* ═══ FOOTER ═══ */
.tm-footer {
	border-top: 1px solid var(--tm-border);
	padding-top: clamp(2.5rem, 6vw, 4rem);
	padding-bottom: calc(clamp(2rem, 5vw, 3rem) + var(--tm-safe-bottom));
	margin-top: var(--tm-section-y);
}
.tm-footer a { color: var(--tm-text-muted); text-decoration: none; }
.tm-footer a:hover { color: var(--tm-text); }
.tm-footer .tm-footer-brand {
	font-family: var(--tm-font-heading);
	font-weight: 700;
	font-size: 1.25rem; /* 20px */
	color: var(--tm-primary);
}
.tm-footer .tm-footer-tag { color: var(--tm-text-muted); font-size: 0.875rem; /* 14px */ margin-top: 6px; }
.tm-footer-meta {
	color: var(--tm-text-muted);
	font-size: 0.8125rem; /* 13px */
	margin-top: 28px;
	padding-top: 18px;
	border-top: 1px solid var(--tm-border);
}
.tm-social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--tm-surface-2);
	border: 1px solid var(--tm-border-input);
	transition: border-color .2s ease, transform .2s ease;
}
.tm-social a:hover { border-color: var(--tm-primary); transform: translateY(-2px); }
.tm-social svg { color: var(--tm-text); }

/* ═══ SCROLL REVEAL ═══
   Fail-safe: sadržaj je podrazumevano VIDLJIV.
   JS doda html.tm-anim → tek tada se elementi kriju i uplivavaju. */
html.tm-anim .tm-reveal {
	opacity: 0;
	transform: translateY(20px);
	transition: opacity .5s ease, transform .5s ease;
}
html.tm-anim .tm-reveal.is-inview {
	opacity: 1;
	transform: none;
}
/* Stagger za decu unutar grid/columns označenih sa tm-reveal-group */
.tm-reveal-group > * { transition-delay: calc(var(--tm-i, 0) * 80ms); }

@media (prefers-reduced-motion: reduce) {
	html.tm-anim .tm-reveal { opacity: 1; transform: none; transition: none; }
	.tm-modal-box { animation: none; }
	.wp-block-button__link { transition: none; }
	.wp-block-button__link:hover { transform: none; }
}

/* ═══ BLOG / SADRŽAJ ═══ */
.tm-post-card { overflow: hidden; padding: 0; }
.tm-post-card .tm-post-body { padding: 18px; }
.tm-post-card .tm-post-body h3 { font-size: 1.1rem; }
.tm-post-card a { color: var(--tm-text); text-decoration: none; }
.tm-post-card a:hover { color: var(--tm-primary); }
.tm-post-meta { color: var(--tm-text-muted); font-size: 0.8125rem; /* 13px */ }

.wp-block-post-content a { text-decoration: underline; text-underline-offset: 3px; }

/* ═══ DEMO APLIKACIJE (okvir telefona + živ iframe) ═══ */
/* Kompaktna lista — štedi visinu pored visokog telefona */
#demo ul.tm-check { margin-top: 4px; }
#demo ul.tm-check li { margin-bottom: 6px; }

.tm-device {
	width: min(390px, 90vw);
	border: 10px solid var(--tm-surface);
	border-radius: 38px;
	overflow: hidden;
	box-shadow: 0 24px 60px rgba(0, 0, 0, .5);
	margin-inline: auto;
	position: relative;
	background: var(--tm-bg);
}
.tm-device-notch {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 120px;
	height: 22px;
	background: var(--tm-surface);
	border-radius: 0 0 14px 14px;
	z-index: 2;
	pointer-events: none;
}
.tm-device-screen {
	width: 100%;
	height: min(760px, 78vh);
	min-height: 560px; /* tabovi + kartica uvek stanu */
	border: 0;
	display: block;
	background: var(--tm-bg);
}

/* Demo kolone: na telefonu tekst iznad, uređaj ispod.
   Okvir telefona nema smisla NA telefonu — demo ide kao čista kartica. */
@media (max-width: 781px) {
	.tm-demo-cols { flex-direction: column; }
	/* Bez okvira i preko cele širine ekrana — negativne margine
	   (50% - 50vw) probijaju root padding sekcije, pa demo ide
	   od ivice do ivice. Ništa se ne gubi na ram. */
	.tm-device {
		width: 100vw;
		max-width: 100vw;
		margin-inline: calc(50% - 50vw);
		margin-top: 18px;
		border: 0;
		border-radius: 0;
		box-shadow: none;
	}
	.tm-device-notch { display: none; }
	.tm-device-screen { height: min(680px, 72svh); }
}

/* Oznaka "Demo" — bez okvira treba jasan signal da je ovo prikaz.
   pointer-events: none je OBAVEZNO: dodir mora da prođe do iframe-a
   (isti razlog kao kod guard-a — Chrome mobilni kešira hit-test). */
.tm-device-badge { display: none; }
@media (max-width: 781px) {
	.tm-device-badge {
		display: inline-block;
		position: absolute;
		top: 12px;
		right: 14px;
		z-index: 3;
		padding: 5px 12px;
		border-radius: 999px;
		background: var(--tm-primary);
		color: var(--tm-primary-text);
		font-family: var(--tm-font-heading);
		font-weight: 500;
		font-size: 0.75rem; /* 12px */
		line-height: 1.3;
		letter-spacing: .08em;
		text-transform: uppercase;
		pointer-events: none;
	}
}

.tm-device-guard { display: none; }

/* ── Magnet: kad scroll stigne blizu demo-a, viewport ga privuče na vrh ──
   (ceo vidljiv ispod headera — poravnanje koristi globalni scroll-padding).
   proximity = privlači samo u blizini, ostatak stranice skroluje normalno. */
@media (max-width: 899px) {
	html { scroll-snap-type: y proximity; }
	.tm-device { scroll-snap-align: start; }

	/* Providan čuvar preko demo-a dok NIJE usidren: dodir na njemu = scroll
	   stranice (magnet radi). Kad se usidri, čuvar nestane — dodiri idu u
	   NETAKNUT iframe, pa unutrašnji scroll radi od prvog poteza.
	   (pointer-events na samom iframe-u ne diramo — Chrome mobilni kešira
	   hit-test i traži tap da ga osveži.) */
	.tm-device:not(.is-docked) .tm-device-guard {
		display: block;
		position: absolute;
		inset: 0;
		z-index: 2;
	}
}

/* ═══ ZAVRŠNI CTA ═══ */
.tm-cta-final .tm-card {
	padding: clamp(28px, 5vw, 56px);
	background:
		radial-gradient(circle at 85% 15%, rgba(61, 187, 124, .12), transparent 55%),
		var(--tm-surface);
}
.tm-cta-final h2 { margin: 0 0 10px; max-width: 15em; }
.tm-cta-final .tm-intro { margin: 0; }

/* ═══ RAZNO ═══ */
.tm-divider {
	border: none;
	border-top: 1px solid var(--tm-border);
	margin: 0;
}


/* ══ Vežbe — biblioteka (Etapa 4) ══════════════════════════ */
.tm-backlink { margin: 0 0 18px; }
.tm-backlink a {
	color: var(--tm-muted);
	text-decoration: none;
	font-size: 0.875rem; /* 14px */
}
.tm-backlink a:hover { color: var(--tm-text); }

.tm-vezbe-sub { margin-top: 40px; }
.tm-vezbe-sub h2 {
	font-size: 1.0625rem; /* 17px */
	margin: 0;
}

/* Kartice kategorija (Gde treniraš?) */
.tm-vezbe-cats {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
	margin-top: 16px;
}
.tm-vezbe-cats a.tm-card {
	display: block;
	text-decoration: none;
	color: var(--tm-text);
	transition: border-color .2s ease, transform .2s ease;
}
.tm-vezbe-cats a.tm-card:hover {
	border-color: var(--tm-primary);
	transform: translateY(-2px);
}
.tm-vezbe-cats h3 { margin: 0 0 6px; }
.tm-cat-count {
	color: var(--tm-muted);
	font-size: 0.875rem; /* 14px */
}

/* Čipovi (mišićne grupe, namena) */
ul.tm-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 16px 0 0;
	padding: 0;
	list-style: none;
}
ul.tm-chips a {
	display: inline-block;
	padding: 8px 14px;
	border: 1px solid var(--tm-border);
	border-radius: 999px;
	background: var(--tm-card);
	color: var(--tm-text);
	text-decoration: none;
	font-size: 0.875rem; /* 14px */
	transition: border-color .2s ease, color .2s ease;
}
ul.tm-chips a:hover {
	border-color: var(--tm-primary);
	color: var(--tm-primary);
}

/* Arhivske kartice vežbi */
.tm-vezbe-grid .tm-card-tags,
.tm-vezbe-grid .tm-card-tags a {
	color: var(--tm-muted);
	font-size: 0.8125rem; /* 13px */
	text-decoration: none;
}
.tm-vezbe-grid .tm-card-tags a:hover { color: var(--tm-primary); }
.tm-vezbe-grid h2 a { text-decoration: none; color: inherit; }
.tm-vezbe-grid h2 a:hover { color: var(--tm-primary); }

/* Video okvir — 16:9, i za iframe i za <video> i za placeholder */
.tm-video {
	position: relative;
	aspect-ratio: 16 / 9;
	margin: 22px 0;
	border: 1px solid var(--tm-border);
	border-radius: 14px;
	overflow: hidden;
	background: var(--tm-card);
}
.tm-video iframe,
.tm-video video {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}
.tm-video.is-placeholder {
	display: grid;
	place-items: center;
	background-size: cover;
	background-position: center;
}
.tm-video.is-placeholder span {
	padding: 8px 16px;
	border-radius: 999px;
	background: rgba(18, 16, 13, 0.75);
	color: var(--tm-muted);
	font-size: 0.875rem; /* 14px */
}

/* Pravilno / Nepravilno */
.tm-vezba-tehnika {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	margin-top: 26px;
}
.tm-vezba-tehnika h2 {
	font-size: 1.0625rem; /* 17px */
	margin: 0;
}

@media (max-width: 781px) {
	.tm-vezbe-cats { grid-template-columns: 1fr; }
	.tm-vezba-tehnika { grid-template-columns: 1fr; }
}