/* =============================================================================
   WRVishnu Certifications — Public CSS v2.0
   Matches reference mockup: logo left | name + provider right
   ============================================================================= */

:root {
	--wrvishnu-cert-gap:          14px;
	--wrvishnu-cert-radius:       12px;
	--wrvishnu-cert-shadow:       0 2px 8px rgba(0,0,0,.07);
	--wrvishnu-cert-shadow-hover: 0 6px 18px rgba(0,0,0,.13);
	--wrvishnu-cert-transition:   all .22s cubic-bezier(.4,0,.2,1);
	--wrvishnu-cert-bg:           #ffffff;
	--wrvishnu-cert-border:       #e2e8f0;
	--wrvishnu-cert-name-color:   #1a202c;
	--wrvishnu-cert-prov-color:   #718096;
}

/* ── Section ───────────────────────────────────────────────────────────────── */
.wrvishnu-cert-section { width: 100%; }
.wrvishnu-cert-section-title {
	font-size:     1.25rem;
	font-weight:   700;
	margin:        0 0 16px;
	color:         var(--wrvishnu-cert-name-color);
}

/* ── Grid ──────────────────────────────────────────────────────────────────── */
.wrvishnu-cert-grid {
	display:               grid;
	gap:                   var(--wrvishnu-cert-gap);
	grid-template-columns: repeat(1, 1fr);
	margin: 0; padding: 0; list-style: none;
}
@media (min-width: 480px) {
	.wrvishnu-cert-cols-2,
	.wrvishnu-cert-cols-3,
	.wrvishnu-cert-cols-4,
	.wrvishnu-cert-cols-5,
	.wrvishnu-cert-cols-6 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 768px) {
	.wrvishnu-cert-cols-3 { grid-template-columns: repeat(3,1fr); }
	.wrvishnu-cert-cols-4 { grid-template-columns: repeat(4,1fr); }
	.wrvishnu-cert-cols-5 { grid-template-columns: repeat(5,1fr); }
	.wrvishnu-cert-cols-6 { grid-template-columns: repeat(6,1fr); }
}

/* ── Card ──────────────────────────────────────────────────────────────────── */
.wrvishnu-cert-item {
	display:     flex;
	align-items: center;
	gap:         14px;
	padding:     14px 16px;
	background:  var(--wrvishnu-cert-bg);
	border:      1px solid var(--wrvishnu-cert-border);
	border-radius: var(--wrvishnu-cert-radius);
	box-shadow:  var(--wrvishnu-cert-shadow);
	transition:  var(--wrvishnu-cert-transition);
	min-height:  76px;
}
.wrvishnu-cert-item:hover {
	transform:    translateY(-2px);
	box-shadow:   var(--wrvishnu-cert-shadow-hover);
	border-color: #c3d9f0;
}

/* ── Logo shapes ───────────────────────────────────────────────────────────── */
.wrvishnu-cert-logo-wrap {
	flex-shrink:     0;
	overflow:        hidden;
	display:         flex;
	align-items:     center;
	justify-content: center;
	background:      #f0f4f8;
}
.wrvishnu-cert-logo-circle    { width:60px; height:60px; border-radius:50%; }
.wrvishnu-cert-logo-square    { width:60px; height:60px; border-radius:8px; }
.wrvishnu-cert-logo-rectangle { width:84px; height:52px; border-radius:6px; }

.wrvishnu-cert-logo { width:100%; height:100%; object-fit:contain; display:block; }
.wrvishnu-cert-logo-rectangle .wrvishnu-cert-logo { object-fit:cover; }

/* ── Text ──────────────────────────────────────────────────────────────────── */
.wrvishnu-cert-info {
	display:        flex;
	flex-direction: column;
	gap:            3px;
	min-width:      0;
}
.wrvishnu-cert-name {
	display:     block;
	font-weight: 600;
	font-size:   .93rem;
	line-height: 1.35;
	color:       var(--wrvishnu-cert-name-color);
	word-break:  break-word;
}
.wrvishnu-cert-provider {
	display:     block;
	font-size:   .8rem;
	color:       var(--wrvishnu-cert-prov-color);
	line-height: 1.3;
}

/* ── Misc ──────────────────────────────────────────────────────────────────── */
.wrvishnu-cert-empty { color:#9ca3af; font-style:italic; }

@media (prefers-reduced-motion:reduce) {
	.wrvishnu-cert-item { transition:none; }
	.wrvishnu-cert-item:hover { transform:none; }
}

/* ── Logo-only mode ─────────────────────────────────────────────────────────── */
.wrvishnu-cert-logo-only {
	justify-content: center;
	padding:         12px;
}
.wrvishnu-cert-logo-only .wrvishnu-cert-logo-wrap {
	margin: 0 auto;
}
/* Slightly larger logos when text is hidden */
.wrvishnu-cert-mode-logo_only .wrvishnu-cert-logo-circle    { width:72px; height:72px; }
.wrvishnu-cert-mode-logo_only .wrvishnu-cert-logo-square    { width:72px; height:72px; }
.wrvishnu-cert-mode-logo_only .wrvishnu-cert-logo-rectangle { width:100px; height:62px; }