/* ===== Certificate layout variants (colors come from inline CSS vars per-template) ===== */

.gm-certificate {
	max-width: 900px;
	margin: 40px auto;
	padding: 60px;
	text-align: center;
	background: #fff;
	position: relative;
	color: var(--gmc-text, #181818);
}
.gm-certificate__logo { height: 48px; width: auto; max-width: 260px; object-fit: contain; margin: 0 auto 20px; }

.gm-certificate__eyebrow { letter-spacing: 3px; text-transform: uppercase; color: var(--gmc-primary, #3C8599); font-weight: 700; font-size: 0.85rem; }
.gm-certificate__name { font-size: 2.4rem; margin: 0.3em 0; color: var(--gmc-text, #181818); }
.gm-certificate__course { font-size: 1.3rem; color: var(--gmc-text, #181818); opacity: 0.65; }
.gm-certificate__meta { display: flex; justify-content: space-between; margin-top: 50px; font-size: 0.85rem; opacity: 0.65; }
.gm-certificate__actions { margin-top: 30px; }

/* Classic: bold solid border in the primary color (original design) */
.gm-certificate--classic { border: 10px solid var(--gmc-primary, #3C8599); }

/* Modern: no border, just a thin accent rule under the content */
.gm-certificate--modern { border: none; box-shadow: 0 0 0 1px #eee; padding-bottom: 50px; }
.gm-certificate--modern::after {
	content: '';
	display: block;
	width: 80px;
	height: 4px;
	background: var(--gmc-accent, #D6FB00);
	margin: 30px auto 0;
}
.gm-certificate--modern .gm-certificate__name { font-weight: 300; letter-spacing: 1px; }

/* Elegant: thin double border with an inset accent outline */
.gm-certificate--elegant {
	border: 3px double var(--gmc-accent, #d4af37);
	outline: 1px solid var(--gmc-primary, #8a6d1f);
	outline-offset: -14px;
	padding: 70px 60px;
}
.gm-certificate--elegant .gm-certificate__name { font-style: italic; }
.gm-certificate--elegant .gm-certificate__eyebrow { letter-spacing: 5px; }

@media print {
	.gm-topbar, .gm-footer, .gm-certificate__actions { display: none !important; }
	.gm-certificate { margin: 0; }
	.gm-certificate--classic { border-width: 6px; }
}

@media (max-width: 640px) {
	.gm-certificate { padding: 30px 20px; }
	.gm-certificate--elegant { padding: 40px 24px; }
	.gm-certificate__meta { flex-direction: column; gap: 10px; }
}