/* =========================================================
   Kurs Post widgeti (Single Post predložak)
   ========================================================= */

/* Kurs Post Title - widget ispisuje tag (h1/h2/h3/div) koji se bira u
   postavkama; svaki tag automatski dobiva odgovarajuću Kurs Global Font
   ulogu iz clamp() skale. Elementorova Typography kontrola u widgetu i
   dalje radi puni override po pojedinoj instanci (veći specifičnost). */
.kurs-post-title {
	margin: 0 0 16px;
	line-height: 1.2;
	font-family: var( --kurs-font-family-heading );
}

h1.kurs-post-title {
	font-size: var( --kurs-font-h1 );
}

h2.kurs-post-title {
	font-size: var( --kurs-font-h2 );
}

h3.kurs-post-title,
div.kurs-post-title {
	font-size: var( --kurs-font-h3 );
}

.kurs-featured-image {
	width: 100%;
	height: 420px;
	background-size: cover;
	background-position: center;
	border-radius: 0;
}

.kurs-post-meta {
	font-family: var( --kurs-font-family-body );
	font-size: var( --kurs-font-text-small );
	color: #666666;
	margin: 0 0 24px;
}

.kurs-post-content {
	font-family: var( --kurs-font-family-body );
	line-height: 1.7;
	font-size: var( --kurs-font-text-base );
}

.kurs-post-content p {
	margin: 0 0 20px;
}

.kurs-post-content img {
	max-width: 100%;
	height: auto;
	border-radius: 8px;
}

.kurs-post-content h2,
.kurs-post-content h3,
.kurs-post-content h4 {
	margin: 32px 0 16px;
}

.kurs-post-content blockquote {
	border-left: 3px solid #cccccc;
	margin: 24px 0;
	padding: 8px 20px;
	font-style: italic;
	color: #555555;
}

.kurs-post-excerpt {
	font-family: var( --kurs-font-family-body );
	font-size: var( --kurs-font-text-small );
	line-height: 1.6;
	color: #555555;
	margin: 0 0 16px;
}

.kurs-read-more {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var( --kurs-font-family-body );
	font-size: var( --kurs-font-nav );
	font-weight: 600;
	text-decoration: none;
	color: #111111;
}

.kurs-read-more svg,
.kurs-read-more i {
	width: 12px;
	height: 12px;
	font-size: 12px;
}

@media ( max-width: 600px ) {
	.kurs-featured-image {
		height: 240px;
	}
	/* .kurs-post-content veličina fonta se više ne mijenja ovdje ručno -
	   var(--kurs-font-text-base) je clamp() i sam se fluidno smanjuje. */
}

/* =========================================================
   Kurs Featured Image kao POZADINA (hero sekcija)
   - Zamjena za Elementor Container pozadinu, koja bez Pro verzije
     ne podržava dinamičku istaknutu sliku (Dynamic Tags su Pro).
   - Upotreba: Kurs Featured Image widget (Prikaz -> Pozadina) i sadržaj
     (npr. naslov) stavi u ISTI Container. Na tom Containeru, pod
     Advanced -> CSS Classes, upiši "kurs-hero-wrap". Na Container sa
     sadržajem (npr. naslovom) upiši "kurs-hero-content".
   ========================================================= */

.kurs-hero-wrap {
	position: relative;
	overflow: hidden;
}

/* Elementor svakom elementu (pa i omotaču ovog widgeta) po defaultu daje
   "position: relative". To bi "presrelo" naš position:absolute + inset:0
   prije nego stigne do kurs-hero-wrap (najbliži pozicionirani predak bi
   postao uski omotač widgeta, koji nema drugog sadržaja pa kolabira na
   0x0). Zato ovdje isključujemo relative SAMO na omotaču koji sadrži
   pozadinsku (--bg) sliku, tako da inset:0 djeluje na kurs-hero-wrap. */
.elementor-widget-kurs_featured_image:has( .kurs-featured-image--bg ) {
	position: static !important;
}

.kurs-featured-image--bg {
	position: absolute !important;
	inset: 0 !important;
	width: auto !important;
	height: auto !important;
	margin: 0 !important;
	border-radius: 0 !important;
	z-index: 0 !important;
}

.kurs-hero-content {
	position: relative;
	z-index: 1;
}