/**
 * Class Toppers — public page styling.
 *
 * Reads the active theme's own design tokens (--color-*, --font-*,
 * --radius-card, --shadow-*, --space-*) wherever they exist — matching
 * kidzone-theme's style.css :root block — and falls back to sane
 * defaults via var(--token, fallback) so this still renders acceptably
 * on a theme that doesn't define them. No separate UI framework, no
 * hardcoded palette duplicating the theme's own.
 */

.eduerp-ctop {
	max-width: var( --container-max, 1180px );
	margin-inline: auto;
	padding-inline: var( --space-md, 1.75rem );
	padding-block: var( --space-lg, 3rem );
	font-family: var( --font-body, inherit );
	color: var( --color-ink, inherit );
}

.eduerp-ctop-hero {
	text-align: center;
	margin-bottom: var( --space-lg, 3rem );
	padding: var( --space-lg, 3rem ) var( --space-md, 1.75rem );
	border-radius: var( --radius-card, 22px );
	background: linear-gradient( 135deg, var( --color-cream, #fff6ec ) 0%, var( --color-cream-dark, #eaf6f1 ) 100% );
	box-shadow: var( --shadow-soft, 0 8px 24px rgba(0,0,0,.06) );
}

.eduerp-ctop-eyebrow {
	font-family: var( --font-display, inherit );
	font-size: var( --fs-eyebrow, 0.85rem );
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var( --color-coral-dark, var( --color-coral, #e85536 ) );
	margin: 0 0 0.5rem;
}

.eduerp-ctop-hero h1 {
	font-family: var( --font-display, inherit );
	font-size: var( --fs-h1, clamp( 2.2rem, 4vw, 3.2rem ) );
	margin: 0 0 0.5rem;
	color: var( --color-ink, inherit );
}

.eduerp-ctop-subtitle {
	font-size: var( --fs-body, 1.05rem );
	color: var( --color-ink-soft, #5b6b7a );
	margin: 0;
}

.eduerp-ctop-breadcrumb {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	justify-content: center;
	flex-wrap: wrap;
	margin-bottom: var( --space-md, 1.75rem );
	font-size: var( --fs-small, 0.9rem );
}

.eduerp-ctop-crumb {
	background: none;
	border: none;
	cursor: pointer;
	font: inherit;
	color: var( --color-ink-soft, #5b6b7a );
	padding: 0.25rem 0.4rem;
	border-radius: 999px;
}

.eduerp-ctop-crumb--active,
.eduerp-ctop-crumb--current {
	color: var( --color-coral-dark, var( --color-coral, #e85536 ) );
	font-weight: 700;
}

.eduerp-ctop-crumb-sep {
	color: var( --color-ink-soft, #5b6b7a );
}

.eduerp-ctop-status {
	text-align: center;
	color: var( --color-ink-soft, #5b6b7a );
	padding: 2rem 0;
}

.eduerp-ctop-status:empty {
	display: none;
}

.eduerp-ctop-grid {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 160px, 1fr ) );
	gap: var( --space-sm, 1rem );
}

.eduerp-ctop-tile {
	display: block;
	width: 100%;
	text-align: center;
	background: var( --color-white, #fff );
	border: none;
	border-radius: var( --radius-card, 16px );
	box-shadow: var( --shadow-soft, 0 8px 24px rgba(0,0,0,.08) );
	padding: var( --space-md, 1.5rem ) var( --space-sm, 1rem );
	cursor: pointer;
	font: inherit;
	font-weight: 700;
	font-family: var( --font-display, inherit );
	color: var( --color-ink, inherit );
	transition: transform .18s ease, box-shadow .18s ease;
}

.eduerp-ctop-tile:hover,
.eduerp-ctop-tile:focus-visible {
	transform: translateY( -4px );
	box-shadow: var( --shadow-lift, 0 14px 32px rgba(0,0,0,.14) );
	outline: none;
}

.eduerp-ctop-cards {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 260px, 1fr ) );
	gap: var( --space-md, 1.5rem );
}

.eduerp-ctop-card {
	position: relative;
	background: var( --color-white, #fff );
	border-radius: var( --radius-card, 18px );
	box-shadow: var( --shadow-soft, 0 8px 24px rgba(0,0,0,.08) );
	padding: var( --space-md, 1.5rem );
	text-align: center;
	transition: transform .18s ease, box-shadow .18s ease;
}

.eduerp-ctop-card:hover {
	transform: translateY( -4px );
	box-shadow: var( --shadow-lift, 0 14px 32px rgba(0,0,0,.14) );
}

.eduerp-ctop-card--1 { order: 2; }
.eduerp-ctop-card--2 { order: 1; }
.eduerp-ctop-card--3 { order: 3; }

.eduerp-ctop-medal {
	font-size: 2rem;
	line-height: 1;
	margin-bottom: 0.5rem;
}

.eduerp-ctop-photo {
	width: 88px;
	height: 88px;
	border-radius: 50%;
	object-fit: cover;
	margin: 0 auto 0.75rem;
	display: block;
	background: var( --color-cream-dark, #eee );
	border: 3px solid var( --color-cream, #fff );
	box-shadow: var( --shadow-soft, 0 4px 12px rgba(0,0,0,.1) );
}

.eduerp-ctop-name {
	font-family: var( --font-display, inherit );
	font-weight: 700;
	font-size: 1.05rem;
	margin: 0 0 0.15rem;
	color: var( --color-ink, inherit );
}

.eduerp-ctop-meta {
	font-size: var( --fs-small, 0.85rem );
	color: var( --color-ink-soft, #5b6b7a );
	margin: 0 0 0.6rem;
}

.eduerp-ctop-stats {
	display: flex;
	justify-content: center;
	gap: 0.75rem;
	flex-wrap: wrap;
	font-size: var( --fs-small, 0.85rem );
	margin-bottom: 0.5rem;
}

.eduerp-ctop-stat strong {
	display: block;
	font-family: var( --font-display, inherit );
	font-size: 1.05rem;
	color: var( --color-ink, inherit );
}

.eduerp-ctop-badge {
	display: inline-block;
	margin-top: 0.5rem;
	background: var( --color-sun, #ffc93c );
	color: var( --color-ink, #1e2a38 );
	font-weight: 700;
	font-size: 0.72rem;
	padding: 0.3rem 0.7rem;
	border-radius: var( --radius-pill, 999px );
}

.eduerp-ctop-logo {
	width: 32px;
	height: 32px;
	object-fit: contain;
	margin: 0 auto 0.5rem;
	display: block;
}

.eduerp-ctop-year {
	font-size: 0.72rem;
	color: var( --color-ink-soft, #5b6b7a );
}

@media ( max-width: 600px ) {
	.eduerp-ctop-grid,
	.eduerp-ctop-cards {
		grid-template-columns: repeat( auto-fill, minmax( 130px, 1fr ) );
	}
}