/*
 * TieLabs Split Row - layout CSS only.
 *
 * Napomena: pojedinacne kartice koriste ISTE klase koje vec koristi tema
 * (.grid-item, .tie-standard, .thumb-overlay, .thumb-content, .thumb-meta,
 * .thumb-title, .thumb-desc) - te klase se vec stiliziraju globalnim CSS-om
 * teme, tako da izgledaju identicno ostalim news blokovima/sliderima.
 * Ovaj fajl samo raspored (grid) - kolika je koja celija i razmak medju njima.
 */

/* --------------------------------------------------------------------
 * [tie_split_row] - kombinovani red: 1 veliki post (lijevo, 50%) +
 * mreza N postova (desno, 50%) - isti CSS Grid princip kao Slider #14
 * na sajtu (4 kolone / 2 reda, prva celija spaja 2x2).
 * ------------------------------------------------------------------*/
.tsr-native-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-template-rows: repeat(2, 1fr);
	grid-auto-rows: 1fr;
	gap: 4px;
	width: 100%;
	min-height: 460px;
	margin: 0 0 20px 0;
}

.tsr-native-grid .tsr-hero-cell {
	grid-column: 1 / 3;
	grid-row: 1 / 3;
}

/* Tema po defaultu sakriva .thumb-desc (opacity:0) i otkriva ga samo za
   prvi element unutar odredjenih "tie-slider-XX" wrapper-a (npr. Slider #14).
   Radimo isto za nas "hero" element da izgleda potpuno identicno. */
.tsr-hero-cell .thumb-desc,
.tsr-standalone-single .thumb-desc {
	opacity: 1;
	max-height: 100px;
	margin-top: 5px;
}

/* Ako nema lijeve (hero) kartice, mreza od 4 popunjava sve 4 kolone u 1 red */
.tsr-native-grid.tsr-no-hero {
	grid-template-rows: repeat(1, 1fr);
	min-height: 233px;
}

@media (max-width: 782px) {
	.tsr-native-grid {
		grid-template-columns: repeat(2, 1fr);
		grid-template-rows: auto;
		min-height: 0;
	}
	.tsr-native-grid .tsr-hero-cell {
		grid-column: 1 / 3;
		grid-row: auto;
		min-height: 260px;
	}
	.tsr-native-grid .tsr-small-cell {
		min-height: 160px;
	}
}


/* --------------------------------------------------------------------
 * [tie_single_post] - samostalna verzija za poseban 50% WIDTH blok
 * ------------------------------------------------------------------*/
.tsr-standalone-single {
	width: 100%;
	margin: 0 0 20px 0;
}

.tsr-standalone-single .grid-item {
	min-height: 400px;
	height: 100%;
}

/* --------------------------------------------------------------------
 * [tie_posts_grid] - samostalna verzija za poseban 50% WIDTH blok
 * ------------------------------------------------------------------*/
.tsr-standalone-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 4px;
	width: 100%;
	margin: 0 0 20px 0;
}

.tsr-standalone-grid .grid-item {
	min-height: 190px;
}

.tsr-standalone-grid-3 {
	grid-template-columns: repeat(3, 1fr);
}

.tsr-standalone-grid-1 {
	grid-template-columns: 1fr;
}

@media (max-width: 782px) {
	.tsr-standalone-grid,
	.tsr-standalone-grid-3 {
		grid-template-columns: repeat(2, 1fr);
	}
}