/* ==================== CERTIFICATES (gallery style «Сертификаты», page /sertifikaty/, product tab) ==================== */

/* Markup — webmaster_render_certificates() (inc/certificates.php):
   div.certificates > div.certificates__row--slots (3 cells: figure--portrait | div.certificates__stack > 1–2 figure--small)
                    | div.certificates__row--wide (2 × figure--wide).
   figure > a.certificates__link (lightbox, assets/lightbox.js) > img + figcaption. Sizes — --cert-*. */

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

.certificates .certificates__row{
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	align-items: start;
	gap: var(--cert-gap);
}

.certificates .certificates__row--wide{
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.certificates .certificates__item{
	display: flex;
	flex-direction: column;
	margin: 0;
}

.certificates .certificates__link{
	display: block;
	overflow: hidden;
	background: var(--color-border);
	cursor: zoom-in;
}

.certificates .certificates__item--portrait .certificates__link{
	aspect-ratio: var(--cert-portrait-ratio);
}

.certificates .certificates__item--wide .certificates__link{
	aspect-ratio: var(--cert-wide-ratio);
}

/* Stack of 1–2 landscape photos — the height of a portrait photo, split in half. */
.certificates .certificates__stack{
	display: grid;
	grid-template-rows: repeat(2, minmax(0, 1fr));
	gap: var(--cert-gap);
	aspect-ratio: var(--cert-portrait-ratio);
}

.certificates .certificates__item--small{
	min-height: 0;
}

.certificates .certificates__item--small .certificates__link{
	flex: 1 1 auto;
	min-height: 0;
}

.certificates .certificates__image{
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top;
	transition: transform .3s;
}

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

.certificates .certificates__caption{
	margin: var(--cert-caption-gap) 0 0;
	font-size: var(--cert-caption-size);
	line-height: 1.2;
	text-align: center;
	color: var(--color-black);
	opacity: .7;
}

/* ≤600px (mockup 320): one column of equal-width photos, landscape ones — all of the small size. */
@media (max-width: 600px){
	.certificates .certificates__row,
	.certificates .certificates__stack{
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: var(--cert-gap);
		aspect-ratio: auto;
	}

	.certificates .certificates__row,
	.certificates .certificates__stack,
	.certificates .certificates__item{
		width: 100%;
	}

	.certificates .certificates__item{
		max-width: var(--cert-mobile-width);
	}

	.certificates .certificates__item--small .certificates__link{
		aspect-ratio: var(--cert-wide-ratio);
	}
}