/* ---- fotky klientov -------------------------------------------------- */
.mk-cs{
	--mk-cs-accent:#FF6A3A;
	--mk-cs-border:rgba(255,255,255,.10);
	--mk-cs-ease:cubic-bezier(.22,.61,.36,1);
	display:grid;
	grid-template-columns:repeat(3,minmax(0,1fr));
	gap:clamp(14px,1.6vw,22px);
	width:100%;
	max-width:1320px;
	margin-inline:auto;
}
.mk-cs *{box-sizing:border-box;}

.mk-cs-card{margin:0;min-width:0;}

.mk-cs-media{
	position:relative;
	display:block;
	aspect-ratio:4/5;
	overflow:hidden;
	border:1px solid var(--mk-cs-border);
	border-radius:18px;
	background:#181A1C;
	transition:border-color .45s var(--mk-cs-ease),transform .45s var(--mk-cs-ease),box-shadow .45s var(--mk-cs-ease);
}
.mk-cs-media img{
	width:100%;
	height:100%;
	object-fit:cover;
	display:block;
	transition:transform .8s var(--mk-cs-ease);
}
/* Gradient je na pseudo-prvku media, nie na vlastnom <span>:
   samostatnemu prvku téma background-image rušila až do prepočtu štýlov. */
.mk-cs .mk-cs-media::after{
	content:"";
	position:absolute;
	inset:0;
	z-index:1;
	background-image:linear-gradient(180deg,rgba(16,16,16,.86) 0%,rgba(16,16,16,.44) 18%,rgba(16,16,16,0) 40%,rgba(16,16,16,0) 64%,rgba(16,16,16,.5) 86%,rgba(16,16,16,.88) 100%);
	pointer-events:none;
}
.mk-cs-veil{display:none;}
.mk-cs-card:hover .mk-cs-media{
	border-color:rgba(255,106,58,.45);
	transform:translateY(-6px);
	box-shadow:0 24px 54px rgba(0,0,0,.5);
}
.mk-cs-card:hover .mk-cs-media img{transform:scale(1.05);}

/* značka klienta v spodnej časti fotky */
.mk-cs-brand{
	position:absolute;
	z-index:2;
	left:clamp(22px,2.2vw,32px);
	right:clamp(22px,2.2vw,32px);
	top:clamp(22px,2.2vw,30px);
	z-index:2;
	display:flex;
	flex-direction:column;
	align-items:flex-start;
	gap:9px;
}
.mk-cs-logo{
	/* široké aj takmer štvorcové značky majú podobnú optickú veľkosť:
	   široké narazia na max-width, štvorcové na max-height */
	width:auto!important;
	height:auto!important;
	max-height:clamp(32px,3.2vw,46px)!important;
	max-width:clamp(84px,7.4vw,104px)!important;
	object-fit:contain!important;
	display:block;
	filter:drop-shadow(0 2px 10px rgba(0,0,0,.6));
}
.mk-cs-name{
	font-family:'Unbounded',sans-serif;
	font-size:clamp(16px,1.4vw,20px);
	font-weight:600;
	line-height:1.2;
	letter-spacing:.01em;
	color:#fff;
	text-shadow:0 2px 12px rgba(0,0,0,.6);
}
.mk-cs-note{
	position:absolute;
	left:50%;
	bottom:clamp(20px,2vw,28px);
	transform:translateX(-50%);
	z-index:2;
	max-width:calc(100% - 36px);
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
	display:inline-block;
	padding:5px 11px;
	border:1px solid rgba(255,255,255,.22);
	border-radius:999px;
	background:rgba(16,16,16,.45);
	backdrop-filter:blur(6px);
	-webkit-backdrop-filter:blur(6px);
	font-family:'Poppins',sans-serif;
	font-size:11px;
	font-weight:500;
	letter-spacing:.1em;
	text-transform:uppercase;
	color:#fff;
	transition:background-color .4s var(--mk-cs-ease),border-color .4s var(--mk-cs-ease);
}
.mk-cs-card:hover .mk-cs-note{
	background:var(--mk-cs-accent);
	border-color:var(--mk-cs-accent);
	color:#101010;
}

@media (max-width:1024px){
	.mk-cs{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:600px){
	.mk-cs{grid-template-columns:minmax(0,1fr);}
	.mk-cs-media{aspect-ratio:4/4.4;}
}
@media (prefers-reduced-motion:reduce){
	.mk-cs-media,.mk-cs-media img,.mk-cs-note{transition:none;}
	.mk-cs-card:hover .mk-cs-media{transform:none;}
	.mk-cs-card:hover .mk-cs-media img{transform:none;}
}