/* ==================== CERTIFICATES: «Галерея» в стиле «Сертификаты» (mytoy_new.pen → «Сертификаты (new)») ==================== */

/* .certificates > figure.certificates__item (a.certificates__link > img + figcaption.certificates__caption).
   Разметку строит inc/certificates.php. Ровная сетка: --cert-cols в ряд (3 / 3 / 2), плитка высотой --cert-height,
   радиус 12; скан вписан целиком (contain) на сером фоне — документ не обрезается. Клик — лайтбокс (assets/lightbox.js). */

.certificates{
	display: grid;
	grid-template-columns: repeat(var(--cert-cols), minmax(0, 1fr));
	gap: var(--cert-gap);
	margin: 0;
}

.certificates .certificates__item{
	display: flex;
	flex-direction: column;
	gap: var(--cert-caption-gap);
	margin: 0;
}

.certificates .certificates__link{
	display: flex;
	align-items: center;
	justify-content: center;
	height: var(--cert-height);
	box-sizing: border-box;
	padding: var(--cert-pad);
	border-radius: var(--radius-xl);
	background: var(--color-surface);
	overflow: hidden;
	cursor: zoom-in;
	transition: box-shadow .2s ease;
}

.certificates .certificates__link:hover{
	box-shadow: var(--card-shadow-hover);
}

.certificates .certificates__image{
	display: block;
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
	box-shadow: 0 2px 8px rgba(0, 0, 0, .08);
	transition: transform .3s ease;
}

.certificates .certificates__link:hover .certificates__image{
	transform: scale(1.03);
}

.certificates .certificates__caption{
	margin: 0;
	font-size: var(--cert-caption-size);
	line-height: 1.4;
	color: var(--color-text-2);
	text-align: center;
}