/* =========================================================================
 * 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.
 * ========================================================================= */

/* --- Link oko ikone (13.7.: cijela ikona vodi na rubriku) --- */
.service-item .blato-b03-link {
	display: inline-block;
	line-height: 0;
	text-decoration: none;
	border: 0;
	outline: none;
}
.service-item .blato-b03-link .circle {
	transition: transform 0.2s ease;
}
.service-item .blato-b03-link:hover .circle,
.service-item .blato-b03-link:focus .circle {
	transform: scale(1.06);
}
.service-item .blato-b03-link:focus-visible {
	outline: 2px solid #316747;
	outline-offset: 4px;
	border-radius: 50%;
}

/* --- Ilustracijski krug (zamjena ikone) — BEZ ruba (13.7.) --- */
.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: 0;                   /* rub uklonjen na zahtjev klijenta */
	box-sizing: border-box;
	vertical-align: middle;
}

.service-item .circle.blato-b03-illustration:hover,
.service-item .circle.blato-b03-illustration:focus {
	background-color: #ffffff;
	border: 0;
}

/* --- 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: 8px;                /* manje jer nema ruba — ikona veća/čišća */
	margin: 0 auto 18px;
	border-radius: 50%;
	overflow: hidden;
	background-color: #ffffff;
	border: 0;                   /* rub uklonjen na zahtjev klijenta (13.7.) */
	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: 0;
}
.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;
	}
}