/**
 * POM Certificates — frontend carousel styles.
 *
 * Uses theme design tokens when available (--color-green-800, --transition, etc.).
 */

.pom-certificates {
	--pom-cert-gap: clamp(1rem, 2.2vw, 1.875rem);
	--pom-cert-item-min: clamp(9.5rem, 16vw, 14rem);
	--pom-cert-item-max: clamp(11.5rem, 20vw, 17.5rem);
	--pom-cert-accent: var(--color-green-800, #006838);
	--pom-cert-accent-soft: rgba(0, 104, 56, 0.12);
	--pom-cert-gold: var(--color-gold, #c8a951);
	--pom-cert-surface: var(--color-white, #fff);
	--pom-cert-ease: var(--transition, 0.3s ease);

	position: relative;
	width: 100%;
	max-width: none;
	margin-inline: auto;
}

.pom-certificates__viewport {
	position: relative;
	width: 100%;
	overflow: hidden;
}

.pom-certificates__track {
	overflow: hidden;
	width: 100%;
	padding: 0.35rem 0 0.65rem;
}

.pom-certificates__rail {
	display: flex;
	align-items: stretch;
	gap: var(--pom-cert-gap);
	width: max-content;
	will-change: transform;
}

.pom-certificates__rail.is-marquee {
	animation: pom-cert-marquee var(--marquee-duration, 40s) linear infinite;
}

.pom-certificates:hover .pom-certificates__rail.is-marquee,
.pom-certificates:focus-within .pom-certificates__rail.is-marquee {
	animation-play-state: paused;
}

@keyframes pom-cert-marquee {
	from {
		transform: translate3d(0, 0, 0);
	}
	to {
		transform: translate3d(-50%, 0, 0);
	}
}

.pom-certificates__item {
	flex: 0 0 auto;
	width: clamp(var(--pom-cert-item-min), 16vw, var(--pom-cert-item-max));
	max-width: var(--pom-cert-item-max);
}

.pom-certificates__figure {
	margin: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: clamp(7.5rem, 14vw, 11rem);
	padding: clamp(1rem, 2.2vw, 1.65rem);
	border-radius: clamp(12px, 1.2vw, 16px);
	background: linear-gradient(180deg, #ffffff 0%, #ffffff 100%);
	border: 1px solid rgba(0, 104, 56, 0.1);
	box-shadow:
		0 1px 2px rgba(29, 43, 35, 0.04),
		0 10px 24px rgba(29, 43, 35, 0.06);
	transition:
		transform var(--pom-cert-ease),
		box-shadow var(--pom-cert-ease),
		border-color var(--pom-cert-ease);
}

.pom-certificates__item:hover .pom-certificates__figure,
.pom-certificates__item:focus-within .pom-certificates__figure {
	transform: translateY(-6px);
	border-color: rgba(0, 104, 56, 0.22);
	box-shadow:
		0 2px 4px rgba(29, 43, 35, 0.05),
		0 16px 32px rgba(0, 104, 56, 0.12);
}

.pom-certificates__img {
	display: block;
	width: 100%;
	height: auto;
	max-height: clamp(5.5rem, 11vw, 8.5rem);
	object-fit: contain;
	opacity: 0.92;
	transition:
		transform 0.45s ease,
		opacity 0.45s ease;
	will-change: transform, opacity;
}

.pom-certificates__item:hover .pom-certificates__img,
.pom-certificates__item:focus-within .pom-certificates__img {
	opacity: 1;
	transform: scale(1.04);
}

.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}

@media (max-width: 48rem) {
	.pom-certificates__item {
		width: clamp(8rem, 34vw, 11rem);
	}

	.pom-certificates__figure {
		min-height: clamp(6.5rem, 22vw, 9rem);
	}

	.pom-certificates__img {
		max-height: clamp(4.5rem, 14vw, 6.5rem);
	}
}

@media (max-width: 30rem) {
	.pom-certificates__item {
		width: clamp(7.5rem, 44vw, 10rem);
	}
}

@media (prefers-reduced-motion: reduce) {
	.pom-certificates__rail.is-marquee {
		animation: none !important;
		transform: none !important;
	}

	.pom-certificates__img,
	.pom-certificates__figure {
		transition: none;
	}

	.pom-certificates__item:hover .pom-certificates__figure,
	.pom-certificates__item:focus-within .pom-certificates__figure,
	.pom-certificates__item:hover .pom-certificates__img,
	.pom-certificates__item:focus-within .pom-certificates__img {
		transform: none;
	}
}

/* Standalone certificates section (if used outside social block) */
.pom-section--certificates {
	padding-block: 0;
	background: transparent;
	overflow-x: clip;
}

.pom-section--certificates > .container {
	padding-block: clamp(2.5rem, 5vw, 4rem);
}

.pom-section--certificates .pom-certificates-wrap {
	width: 100vw;
	max-width: 100vw;
	margin-inline: calc(50% - 50vw);
	padding-inline: var(--shell-pad-start, var(--container-px));
	padding-block: clamp(1rem, 2vw, 1.5rem);
	background:
		linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, #f4f8f5 55%, #eef4f0 100%);
}

.pom-certificates-band {
	position: relative;
	width: 100vw;
	max-width: 100vw;
	margin-inline: calc(50% - 50vw);
	padding-block: clamp(1.75rem, 3.5vw, 2.75rem) clamp(2rem, 4vw, 3rem);
	background:
		linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, #f4f8f5 55%, #eef4f0 100%);
}

.pom-certificates-band::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	border-radius: 0;
	background: linear-gradient(90deg, transparent 0%, var(--color-green-700, #007a42) 18%, var(--color-green-800, #006838) 50%, var(--color-green-700, #007a42) 82%, transparent 100%);
	opacity: 0.85;
}

.pom-certificates-band__head {
	position: relative;
	z-index: 1;
}

.pom-certificates-band .section-label {
	margin-bottom: 0.5rem;
}

.pom-certificates-band .section-headline {
	max-width: min(40rem, 100%);
	margin-inline: auto;
	margin-bottom: clamp(1.25rem, 2.5vw, 1.75rem);
}

.pom-certificates-band .pom-certificates-wrap {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: none;
	margin-inline: auto;
	padding-inline: var(--shell-pad-start, var(--container-px));
	padding-block: clamp(0.5rem, 1.5vw, 1rem) 0;
	background: transparent;
	border: 0;
	box-shadow: none;
	border-radius: 0;
}

#social {
	overflow-x: clip;
}

#social .pom-certificates-band + .container {
	padding-top: clamp(1.5rem, 3vw, 2.5rem);
	border-top: 1px solid rgba(0, 104, 56, 0.12);
}

#social .pom-certificates-band + .container::before {
	content: "";
	display: block;
	width: clamp(3rem, 8vw, 4.5rem);
	height: 3px;
	margin: 0 auto clamp(1.25rem, 2.5vw, 1.75rem);
	border-radius: 999px;
	background: var(--color-green-800, #006838);
	opacity: 0.35;
}

#social .pom-certificates-band + .pom-social-reels,
#social .pom-certificates-band + .container .pom-social-reels {
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
}

#social .pom-certificates-band + .pom-social-reels::before,
#social .pom-certificates-band + .container .pom-social-reels::before {
	display: none;
}

#certificates .pom-certificates {
	margin-block: 0;
}