/* ═══════════════════════════════════════════════════════════
   CBASCO — Certificates Page
   - Robust against any image aspect ratio (object-fit: contain in fixed-aspect frame)
   - Slideshow + sidebar metadata + thumbnails
   - Lightbox with zoom/pan
═══════════════════════════════════════════════════════════ */

.cbcert-main { padding: 0; }

/* ───── HERO ───── */
.cbcert-hero {
	position: relative;
	padding: 5rem 1.5rem 3.5rem;
	overflow: hidden;
	text-align: center;
	border-bottom: 1px solid var(--cb-border);
}
.cbcert-hero-title {
	font-size: clamp(2rem, 5vw, 3.4rem);
	font-weight: 900;
	line-height: 1.2;
	margin-bottom: 1rem;
	background: linear-gradient(135deg, #ddeef8 20%, var(--cb-steel, #6aaecc) 60%, #c0d8ee 100%);
	-webkit-background-clip: text; -webkit-text-fill-color: transparent;
	background-clip: text;
}
.cbcert-hero-title em {
	font-style: normal;
	background: linear-gradient(90deg, var(--cb-steel, #6aaecc), var(--cb-steel-l, #a0d0e8));
	-webkit-background-clip: text; -webkit-text-fill-color: transparent;
	background-clip: text;
}
.cbcert-hero-lede {
	max-width: 620px;
	margin: 0 auto 1.5rem;
	color: var(--cb-text-body);
	font-size: .95rem;
	line-height: 2;
	font-weight: 300;
}
.cbcert-hero-count {
	display: inline-flex;
	align-items: baseline;
	gap: .55rem;
	background: rgba(106,174,204,.08);
	border: 1px solid var(--cb-border);
	padding: .5rem 1.4rem;
	border-radius: 100px;
}
.cbcert-hero-num {
	font-size: 1.8rem;
	font-weight: 900;
	color: var(--cb-steel-l);
}
.cbcert-hero-lbl {
	font-size: .82rem;
	color: var(--cb-muted);
}

/* ───── SLIDESHOW ───── */
.cbcert-slideshow-sec { padding: 4rem 0; }

.cbcert-stage {
	position: relative;
	max-width: 1180px;
	margin: 0 auto;
}

/* SLIDE — uses CSS Grid with two columns (image + meta). The container has a fixed
   min-height so slides of different image sizes appear in a uniform area. */
.cbcert-slides {
	position: relative;
	min-height: 600px;
}
.cbcert-slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	visibility: hidden;
	transition: opacity .5s ease, visibility 0s linear .5s, transform .5s ease;
	transform: translateY(20px);
	pointer-events: none;
}
.cbcert-slide.is-active {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	transition: opacity .5s ease, visibility 0s linear 0s, transform .5s ease;
	pointer-events: auto;
}
.cbcert-slide-grid {
	display: grid;
	grid-template-columns: 380px 1fr;
	gap: 2.5rem;
	align-items: start;
	min-height: 600px;
}

/* IMAGE FRAME — fixed aspect ratio (3:4 portrait) + object-fit:contain ensures
   any image dimensions render nicely without distortion */
.cbcert-frame {
	position: relative;
	width: 100%;
	aspect-ratio: 3 / 4;
	border: none;
	padding: 0;
	background: transparent;
	cursor: zoom-in;
	font-family: inherit;
}
.cbcert-frame-glow {
	position: absolute;
	inset: -12px;
	border-radius: var(--cb-r-lg);
	background:
		radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--cb-acc) 26%, transparent), transparent 60%);
	filter: blur(28px);
	opacity: .9;
	transition: opacity var(--cb-tr-fast);
	z-index: 0;
}
.cbcert-frame:hover .cbcert-frame-glow { opacity: 1; }
.cbcert-frame-inner {
	position: relative;
	z-index: 1;
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, var(--cb-bg-3), var(--cb-bg-4));
	border: 1px solid var(--cb-border);
	border-radius: var(--cb-r-lg);
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 12px;
	box-shadow:
		0 18px 50px rgba(0,0,0,.4),
		inset 0 1px 0 rgba(255,255,255,.05);
	transition: border-color var(--cb-tr-fast), box-shadow var(--cb-tr-fast), transform var(--cb-tr-fast);
}
.cbcert-frame:hover .cbcert-frame-inner {
	border-color: var(--cb-acc);
	transform: translateY(-3px);
	box-shadow:
		0 24px 60px rgba(0,0,0,.5),
		0 0 32px color-mix(in srgb, var(--cb-acc) 18%, transparent);
}
.cbcert-frame-inner img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	display: block;
	border-radius: var(--cb-r-sm);
	box-shadow: 0 8px 24px rgba(0,0,0,.3);
}
.cbcert-frame-badge {
	position: absolute;
	top: -8px;
	right: 14px;
	z-index: 2;
	background: linear-gradient(135deg, var(--cb-acc), color-mix(in srgb, var(--cb-acc) 70%, black));
	color: var(--cb-bg, #0d1117);
	font-size: .68rem;
	font-weight: 900;
	letter-spacing: .08em;
	padding: .35rem .85rem;
	border-radius: 100px;
	box-shadow: 0 8px 22px rgba(0,0,0,.4);
}
.cbcert-frame-zoom {
	position: absolute;
	bottom: 14px;
	left: 14px;
	z-index: 2;
	width: 38px; height: 38px;
	background: rgba(13,17,23,.88);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	border: 1px solid color-mix(in srgb, var(--cb-acc) 32%, transparent);
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--cb-acc);
	opacity: 0;
	transform: scale(.85);
	transition: opacity var(--cb-tr-fast), transform var(--cb-tr-fast);
}
.cbcert-frame:hover .cbcert-frame-zoom {
	opacity: 1;
	transform: scale(1);
}

/* META */
.cbcert-meta {
	padding-top: .5rem;
	display: flex;
	flex-direction: column;
	gap: .55rem;
}
.cbcert-meta-eyebrow {
	font-family: 'JetBrains Mono', monospace;
	font-size: .68rem;
	font-weight: 700;
	color: var(--cb-acc);
	letter-spacing: .04em;
	text-transform: uppercase;
}
.cbcert-meta-title {
	font-size: clamp(1.4rem, 2.6vw, 1.9rem);
	font-weight: 900;
	color: var(--cb-highlight);
	margin: 0 0 1rem;
	line-height: 1.35;
}
.cbcert-meta-row {
	display: flex;
	align-items: flex-start;
	gap: .55rem;
	font-size: .85rem;
	color: var(--cb-text-body);
	line-height: 1.85;
}
.cbcert-meta-row svg {
	color: var(--cb-acc);
	flex-shrink: 0;
	margin-top: 4px;
}
.cbcert-meta-row strong { color: var(--cb-text); font-weight: 700; margin-left: 4px; }

.cbcert-meta-desc {
	color: var(--cb-text-body);
	font-size: .9rem;
	line-height: 2;
	margin: 1rem 0;
	padding: 1rem 1.2rem;
	background: rgba(13,17,23,.45);
	border-right: 3px solid var(--cb-acc);
	border-radius: var(--cb-r-sm);
}

.cbcert-highlights {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: .6rem;
}
.cbcert-highlights li {
	display: flex;
	align-items: center;
	gap: .55rem;
	padding: .6rem .85rem;
	background: var(--cb-bg-2);
	border: 1px solid var(--cb-border);
	border-radius: var(--cb-r-sm);
	font-size: .82rem;
	color: var(--cb-text);
	transition: border-color var(--cb-tr-fast), background var(--cb-tr-fast);
}
.cbcert-highlights li:hover {
	border-color: color-mix(in srgb, var(--cb-acc) 36%, var(--cb-border));
	background: color-mix(in srgb, var(--cb-acc) 6%, var(--cb-bg-2));
}
.cbcert-hl-icon { font-size: 1.1rem; flex-shrink: 0; }

.cbcert-zoom-btn {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	margin-top: 1.2rem;
	padding: .7rem 1.3rem;
	background: linear-gradient(135deg, var(--cb-acc), color-mix(in srgb, var(--cb-acc) 70%, black));
	color: var(--cb-bg, #0d1117);
	border: none;
	border-radius: 100px;
	font-family: inherit;
	font-size: .88rem;
	font-weight: 700;
	cursor: pointer;
	transition: transform var(--cb-tr-fast), box-shadow var(--cb-tr-fast);
	width: max-content;
	box-shadow: 0 8px 22px color-mix(in srgb, var(--cb-acc) 25%, transparent);
}
.cbcert-zoom-btn:hover {
	transform: translateY(-2px);
	box-shadow: 0 14px 32px color-mix(in srgb, var(--cb-acc) 40%, transparent);
}

/* NAV ARROWS */
.cbcert-nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 48px; height: 48px;
	background: rgba(13,17,23,.7);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border: 1px solid var(--cb-border);
	border-radius: 50%;
	color: var(--cb-text);
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: all var(--cb-tr-fast);
	z-index: 10;
	padding: 0;
}
.cbcert-nav:hover {
	background: rgba(13,17,23,.92);
	border-color: var(--cb-steel);
	color: var(--cb-steel-l);
	transform: translateY(-50%) scale(1.06);
}
.cbcert-nav--prev { right: -24px; }
.cbcert-nav--next { left: -24px; }

/* THUMBNAILS */
.cbcert-thumbs {
	display: flex;
	flex-wrap: wrap;
	gap: .8rem;
	justify-content: center;
	margin-top: 3rem;
}
.cbcert-thumb {
	display: flex;
	align-items: center;
	gap: .7rem;
	background: var(--cb-bg-2);
	border: 1px solid var(--cb-border);
	border-radius: var(--cb-r-md);
	padding: .55rem .85rem .55rem .55rem;
	cursor: pointer;
	transition: all var(--cb-tr-fast);
	font-family: inherit;
	max-width: 280px;
	text-align: right;
}
.cbcert-thumb:hover {
	transform: translateY(-2px);
	border-color: var(--cb-border-hover);
}
.cbcert-thumb.is-active {
	background: color-mix(in srgb, var(--cb-acc) 14%, var(--cb-bg-2));
	border-color: var(--cb-acc);
	box-shadow: 0 6px 18px color-mix(in srgb, var(--cb-acc) 18%, transparent);
}
.cbcert-thumb img {
	width: 48px;
	height: 60px;
	object-fit: cover;
	border-radius: var(--cb-r-sm);
	border: 1px solid var(--cb-border);
	flex-shrink: 0;
}
.cbcert-thumb-info {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}
.cbcert-thumb-info small {
	font-size: .65rem;
	font-weight: 700;
	color: var(--cb-acc);
	letter-spacing: .06em;
	text-transform: uppercase;
}
.cbcert-thumb-info strong {
	font-size: .78rem;
	font-weight: 700;
	color: var(--cb-text);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 180px;
}

.cbcert-counter {
	display: flex;
	justify-content: center;
	align-items: baseline;
	gap: .35rem;
	margin-top: 1.5rem;
	font-family: 'JetBrains Mono', monospace;
	color: var(--cb-text-2);
	font-size: .9rem;
}
.cbcert-counter #cbcert-current { color: var(--cb-steel-l); font-weight: 800; font-size: 1.1rem; }
.cbcert-counter-sep { color: var(--cb-muted); }
.cbcert-counter-total { color: var(--cb-muted); }

/* ═══════════════════════════════════════════════════════════
   LIGHTBOX
═══════════════════════════════════════════════════════════ */
.cbcert-lb {
	position: fixed;
	inset: 0;
	z-index: 99500;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	justify-content: stretch;
	visibility: hidden;
	opacity: 0;
	pointer-events: none;   /* HARD-GUARANTEE clicks pass through when closed.
	                          * Even during the fade-out transition delay, the
	                          * lightbox MUST NOT block clicks on the header
	                          * menu / lang switcher / apps icons sitting at
	                          * lower z-index. */
	transition: opacity .35s ease, visibility 0s linear .35s;
}
.cbcert-lb[aria-hidden="false"] {
	visibility: visible;
	opacity: 1;
	pointer-events: auto;
	transition: opacity .35s ease, visibility 0s linear 0s;
}
.cbcert-lb-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(4,7,12,.96);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}

.cbcert-lb-toolbar {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1rem 1.4rem;
	background: rgba(13,17,23,.85);
	border-bottom: 1px solid rgba(106,174,204,.15);
	color: var(--cb-text);
}
.cbcert-lb-title {
	font-size: .9rem;
	font-weight: 700;
	color: var(--cb-highlight);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	flex: 1;
	min-width: 0;
}
.cbcert-lb-tools {
	display: flex;
	gap: .4rem;
	align-items: center;
	flex-wrap: wrap;
}
.cbcert-lb-btn {
	width: 36px; height: 36px;
	background: rgba(106,174,204,.12);
	border: 1px solid rgba(106,174,204,.3);
	border-radius: 10px;
	color: var(--cb-text);
	cursor: pointer;
	font-family: inherit;
	font-size: 1rem;
	font-weight: 700;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: all var(--cb-tr-fast);
	padding: 0;
}
.cbcert-lb-btn:hover {
	background: rgba(106,174,204,.26);
	border-color: var(--cb-steel);
	color: var(--cb-steel-l);
}
.cbcert-lb-back {
	width: auto;
	gap: .4rem;
	padding: 0 .9rem;
	font-size: .82rem;
	background: rgba(200,88,120,.14);
	border-color: rgba(200,88,120,.35);
	color: #ff8aa8;
}
.cbcert-lb-back:hover {
	background: rgba(200,88,120,.26);
	border-color: rgba(200,88,120,.6);
	color: #ffb0c2;
}
.cbcert-lb-count {
	font-family: 'JetBrains Mono', monospace;
	font-size: .9rem;
	color: var(--cb-text-2);
	min-width: 56px;
	text-align: center;
}
.cbcert-lb-count strong { color: var(--cb-steel-l); margin-left: 2px; }
.cbcert-lb-sep { color: var(--cb-muted); }

.cbcert-lb-viewport {
	position: relative;
	z-index: 1;
	flex: 1;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: grab;
	touch-action: none;
}
.cbcert-lb-viewport.is-dragging { cursor: grabbing; }
.cbcert-lb-img {
	max-width: none;
	max-height: none;
	width: auto;
	height: auto;
	display: block;
	transform-origin: center center;
	will-change: transform;
	user-select: none;
	-webkit-user-drag: none;
	pointer-events: none;
	transition: none;
	box-shadow: 0 24px 60px rgba(0,0,0,.6);
	border-radius: var(--cb-r-sm);
}

.cbcert-lb-zoom-pill {
	position: absolute;
	bottom: 1.4rem;
	left: 50%;
	transform: translateX(-50%);
	background: rgba(13,17,23,.88);
	border: 1px solid rgba(106,174,204,.3);
	border-radius: 100px;
	padding: .4rem 1.1rem;
	font-family: 'JetBrains Mono', monospace;
	font-size: .75rem;
	color: var(--cb-steel-l);
	z-index: 3;
	opacity: 0;
	transition: opacity .3s ease;
	pointer-events: none;
}
.cbcert-lb-zoom-pill.is-visible { opacity: 1; }

.cbcert-lb-hint {
	position: absolute;
	bottom: 4rem;
	left: 50%;
	transform: translateX(-50%);
	background: rgba(106,174,204,.1);
	border: 1px solid rgba(106,174,204,.2);
	color: var(--cb-muted);
	font-size: .72rem;
	padding: .45rem 1rem;
	border-radius: 100px;
	white-space: nowrap;
	z-index: 3;
	pointer-events: none;
	opacity: 1;
	transition: opacity .6s ease;
}
.cbcert-lb-hint.is-hidden { opacity: 0; }

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════════════════ */
@media (max-width: 980px) {
	.cbcert-slide-grid { grid-template-columns: 1fr; gap: 1.5rem; }
	.cbcert-slides { min-height: 0; }
	.cbcert-slide { position: relative; }
	.cbcert-slide:not(.is-active) { display: none; }
	.cbcert-frame {
		max-width: 360px;
		margin: 0 auto;
	}
	.cbcert-nav--prev { right: -18px; }
	.cbcert-nav--next { left: -18px; }
}
@media (max-width: 720px) {
	.cbcert-hero { padding: 3.5rem 1rem 2.8rem; }
	.cbcert-slideshow-sec { padding: 2.5rem 0; }
	.cbcert-nav { width: 40px; height: 40px; }
	.cbcert-nav--prev { right: 8px; }
	.cbcert-nav--next { left: 8px; }
	.cbcert-frame { max-width: 280px; }
	.cbcert-highlights { grid-template-columns: 1fr; }
	.cbcert-thumb { max-width: 100%; }
	.cbcert-thumb-info strong { max-width: 140px; }

	.cbcert-lb-toolbar { flex-wrap: wrap; padding: .7rem .9rem; gap: .6rem; }
	.cbcert-lb-title { flex: 1 1 100%; font-size: .82rem; }
	.cbcert-lb-tools { width: 100%; justify-content: center; }
	.cbcert-lb-btn { width: 32px; height: 32px; font-size: .9rem; }
	.cbcert-lb-back { width: auto; }
	.cbcert-lb-back span { display: none; }
	.cbcert-lb-hint { font-size: .68rem; padding: .35rem .8rem; bottom: 3.2rem; }
}
@media (max-width: 420px) {
	.cbcert-frame { max-width: 240px; }
	.cbcert-meta-title { font-size: 1.2rem; }
	.cbcert-zoom-btn { width: 100%; justify-content: center; font-size: .82rem; }
}