/* =================================================================
   Cards — identično The Creative Independent .explore-blocks
================================================================= */

.explore-blocks {
	display: flex;
	flex-wrap: wrap;
	gap: var(--gap);
}

/* ---- Osnovna kartica ---------------------------------------- */
.explore-blocks .box {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 1rem;
	width: 100%;
	height: var(--card-size);
	padding: var(--gap);
	border: 1px dotted transparent;
	text-decoration: none;
	line-height: var(--line-height);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
	color: var(--color);
}

.explore-blocks .box:hover {
	border-style: solid;
	text-decoration: none;
}

/* Type badge */
.explore-blocks .box > .type {
	padding: 2px 4px;
	align-self: flex-start;
	margin-bottom: -0.5rem;
	font-size: 0.875rem;
}

/* Title */
.explore-blocks .box > .title {
	font-size: inherit;
	font-weight: inherit;
	margin: 0;
	line-height: var(--line-height);
}

/* Meta / datum */
.explore-blocks .box > .date {
	flex: 1;
	display: flex;
	align-items: flex-end;
	font-size: 0.875rem;
	opacity: 0.75;
}

/* ---- Boje i stilovi po CPT-u -------------------------------- */

/* Autori — focuses: plavo-siva pozadina, beli tekst */
.explore-blocks .box.autori {
	color: white;
	background-color: var(--color-autori);
	border-color: var(--border-color);
}
.explore-blocks .box.autori .type {
	color: var(--color-autori);
	background: white;
}

/* Radovi — approaches: narandžasta pozadina, beli tekst */
.explore-blocks .box.radovi {
	color: white;
	background-color: var(--color-radovi);
	border-color: var(--border-color);
}
.explore-blocks .box.radovi .type {
	color: white;
	background: black;
}

/* Manifestacije — questions: tamno plava, beli tekst */
.explore-blocks .box.manifestacije {
	color: white;
	background-color: var(--color-manifestacije);
	border-color: var(--border-color);
}
.explore-blocks .box.manifestacije .type {
	color: white;
	background: black;
}

/* Institucije — tips: svetlo zelena, crni tekst */
.explore-blocks .box.institucije {
	background-color: var(--color-institucije);
	border-color: var(--border-color);
}
.explore-blocks .box.institucije .type {
	color: white;
	background: black;
}

/* Publikacije — guides: krem pozadina */
.explore-blocks .box.publikacije {
	background-color: var(--color-publikacije);
	border-color: var(--border-color);
}
.explore-blocks .box.publikacije .type {
	color: white;
	background: black;
}
/* Naslov publikacije — kao TCI guides */
.explore-blocks .box.publikacije .title {
	color: #f8f8ea;
	background-color: #2f2f2f;
	padding: 3px 6px;
	box-decoration-break: clone;
	-webkit-box-decoration-break: clone;
	align-self: flex-start;
}

/* Predavanja — transmissions: svetlo plava */
.explore-blocks .box.predavanja {
	background-color: var(--color-predavanja);
	border-color: var(--border-color);
}
.explore-blocks .box.predavanja .type {
	color: white;
	background: black;
}

/* Resursi — series: žuta */
.explore-blocks .box.resursi {
	background-color: var(--color-resursi);
	border-color: var(--border-color);
}
.explore-blocks .box.resursi .type {
	color: white;
	background: black;
}

/* ---- Kartica sa slikom (featured image kao background) ------ */
/* Kada kartica ima background-image, type badge dobija
   kontrast osiguranje */
.explore-blocks .box[style*="background-image"] .type {
	background: rgba(0,0,0,0.75);
	color: white;
}

.explore-blocks .box[style*="background-image"] .title {
	background: rgba(0,0,0,0.6);
	color: white;
	padding: 2px 4px;
	box-decoration-break: clone;
	-webkit-box-decoration-break: clone;
}

.explore-blocks .box[style*="background-image"] .date {
	background: rgba(0,0,0,0.5);
	color: white;
	padding: 2px 4px;
	align-self: flex-end;
}

/* ---- Fallback za nepoznate tipove (npr. post) --------------- */
.explore-blocks .box:not(.autori):not(.radovi):not(.manifestacije):not(.institucije):not(.publikacije):not(.predavanja):not(.resursi) {
	border-color: var(--border-color);
}

/* ---- Desktop: 270×270 grid ---------------------------------- */
@media screen and (min-width: 640px) {
	.explore-blocks .box {
		width: var(--card-size);
	}
}