/* =========================================================================
 * B3 — PROIZVODI: per-kategorija ILUSTRACIJA umjesto FA ikone.
 *
 * Stock `.circle` = 50px okrugli zeleni (#316747) badge s bijelom FA ikonom.
 * Kad item ima featured image, b03-product-icons.php crta `.circle.blato-b03-
 * illustration > img.blato-b03-img`. Ovdje ga stiliziramo: okrugla slika u
 * zelenom okviru (zadržan identitet dizajna), object-fit: cover, responsivno.
 *
 * FA fallback `.circle` (bez .blato-b03-illustration) NE diramo — ostaje
 * stock 50px badge.
 *
 * Breakpointi usklađeni s temom: desktop ≥1024, tablet 768–1023, mobitel ≤767.
 * ========================================================================= */

/* --- Ilustracijski krug (zamjena ikone) --- */
.service-item .circle.blato-b03-illustration {
	display: inline-block;
	width: 96px;
	height: 96px;
	line-height: 0;              /* poništi stock line-height:60px */
	padding: 0;
	margin: 0 auto 18px;
	border-radius: 50%;
	overflow: hidden;
	background-color: #ffffff;   /* podloga za transparentne PNG ilustracije */
	border: 3px solid #316747;   /* zeleni okvir — zadržan identitet dizajna */
	box-sizing: border-box;
	vertical-align: middle;
}

/* Hover: zadrži zeleni okvir (parent .circle:hover postavlja tamnu pozadinu,
   ali slika ionako prekriva krug — fiksiramo okvir radi konzistentnosti). */
.service-item .circle.blato-b03-illustration:hover,
.service-item .circle.blato-b03-illustration:focus {
	background-color: #ffffff;
	border-color: #2d2d2d;
}

/* --- Sama slika: popuni krug, izreži po sredini --- */
.service-item .circle.blato-b03-illustration img.blato-b03-img,
.service-item .circle.blato-b03-illustration img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: 100%;
	object-fit: cover;
	object-position: center center;
	border-radius: 50%;
	margin: 0;
	padding: 0;
}

/* --- Custom IKONA (media upload, `_blato_product_icon`): ikona se NE reže
   (object-fit: contain), s malim unutarnjim razmakom da "diše". --- */
.service-item .circle.blato-b03-iconwrap {
	display: inline-block;
	width: 96px;
	height: 96px;
	line-height: 0;
	padding: 16px;
	margin: 0 auto 18px;
	border-radius: 50%;
	overflow: hidden;
	background-color: #ffffff;
	border: 3px solid #316747;
	box-sizing: border-box;
	vertical-align: middle;
}
.service-item .circle.blato-b03-iconwrap:hover,
.service-item .circle.blato-b03-iconwrap:focus {
	background-color: #ffffff;
	border-color: #2d2d2d;
}
.service-item .circle.blato-b03-iconwrap img.blato-b03-iconimg,
.service-item .circle.blato-b03-iconwrap img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: 100%;
	object-fit: contain;
	object-position: center center;
	margin: 0;
	padding: 0;
}

/* --- Tablet 768–1023px --- */
@media only screen and (min-width: 768px) and (max-width: 1023px) {
	.service-item .circle.blato-b03-illustration,
	.service-item .circle.blato-b03-iconwrap {
		width: 90px;
		height: 90px;
		margin-bottom: 16px;
	}
}

/* --- Mobitel ≤767px --- */
@media only screen and (max-width: 767px) {
	.service-item .circle.blato-b03-illustration,
	.service-item .circle.blato-b03-iconwrap {
		width: 84px;
		height: 84px;
		margin-bottom: 14px;
	}
}