/**
 * Default CSS for Profile Prototyping
 * Main stylesheet for profile page components
 *
 * Following Difford's Guide UI/UX Rules:
 * - Grid gutter: 16px
 * - Max width: 1248px
 * - Breakpoints: small (≤639px), medium (640-1023px), large (≥1024px)
 * - Typography: EB Garamond (headings), Alegreya SC (body)
 * - Spacing multiples: 0.25x, 0.5x, 1x, 1.5x, 2x of 16px
 */

/* ============================================
   CSS Variables
   ============================================ */
:root {
	--gutter: 16px;
	--max-width: 1280px;

	/* Spacing (multiples of gutter) */
	--space-quarter: 4px;    /* 0.25x */
	--space-half: 8px;       /* 0.5x */
	--space-1: 16px;         /* 1x */
	--space-1-5: 24px;       /* 1.5x */
	--space-2: 32px;         /* 2x */

	/* Border radius (multiples of gutter) */
	--radius-eighth: 2px;    /* 0.125x */
	--radius-quarter: 4px;   /* 0.25x */
	--radius-half: 8px;      /* 0.5x */
	--radius-1: 16px;        /* 1x */

	/* Typography */
	--font-heading: 'Heading default', Georgia, serif;
	--font-body: 'Body default', Georgia, serif;

	/* Font sizes */
	--font-xs: 0.75rem;
	--font-sm: 0.875rem;
	--font-base: 1rem;
	--font-lg: 1.25rem;
	--font-xl: 1.5rem;
}

/* ============================================
   NOTE: Global styles (*, body, etc.) are handled by core CSS
   This file only contains component-specific styles
   ============================================ */

/* ============================================
   Profile Header Component
   ============================================ */

.profile-header-container {
	margin-bottom: var(--space-1);
	position: relative;
	width: 100%;
}

/* Hero/Header Image */
.profile-hero {
	width: 100%;
	aspect-ratio: 16 / 9;
	overflow: visible;
	position: relative;
}

.profile-hero-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Profile Avatar */
.profile-avatar-container {
	position: absolute;
	bottom: 0;
	left: var(--space-1);
	transform: translateY(50%);
	z-index: 10;
}

.profile-avatar {
	width: 160px;
	height: 160px;
	border-radius: 50%;
	border: var(--radius-quarter) solid white;
	object-fit: cover;
}

/* User Info Section */
.profile-info-section {
	padding: 92px var(--space-1) 0 var(--space-1);
}

.profile-name-location {
	margin-bottom: var(--space-quarter);
}

.profile-name {
	font-family: var(--font-heading);
	font-size: var(--font-xl);
	font-weight: 500;
	line-height: 1.1;
	margin: 0 var(--space-half) 0 0;
	color: #333;
	display: inline-block;
	vertical-align: baseline;
}

.profile-location {
	display: inline;
	color: #333;
	font-size: var(--font-base);
	vertical-align: baseline;
}

.profile-stats {
	color: #333;
	font-size: var(--font-base);
}

.profile-stat-separator {
	margin: 0 var(--space-quarter);
}

.profile-occupation {
	color: #333;
	font-size: var(--font-base);
}

/* Action Buttons */
.profile-actions {
	display: flex;
	gap: var(--space-half);
	margin-top: var(--space-1);
	margin-bottom: var(--space-1);
}

/* Override button component styles for profile actions */
.profile-actions .dg-component-button.profile-action-primary {
	flex: 1;
}

.profile-actions .dg-component-button.profile-action-secondary {
	flex: 1;
	background: #e5e5e5;
	color: #333;
}

.profile-actions .dg-component-button.profile-action-secondary:hover {
	background: #d0d0d0;
}

.profile-actions .dg-component-button.profile-action-menu {
	width: 48px;
	min-width: 48px;
	padding: var(--space-half);
	background: #e5e5e5;
	color: #333;
}

.profile-actions .dg-component-button.profile-action-menu:hover {
	background: #d0d0d0;
}

/* Badges Section */
.profile-badges {
	display: flex;
	flex-wrap: wrap;
	column-gap: var(--space-1);
	row-gap: 0;
	font-size: var(--font-sm);
}

.profile-badge-item {
	display: flex;
	align-items: center;
	gap: var(--space-half);
	flex-shrink: 0;
	white-space: nowrap;
}

.profile-badge-icon {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
	display: flex;
	align-items: center;
}

.profile-badge-icon img {
	max-width: 16px;
	max-height: 16px;
}

.profile-badge-info {
	display: flex;
	flex-direction: row;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--space-quarter);
	min-width: 0;
	flex: 1;
}

.profile-badge-name {
	font-weight: 400;
	color: #333;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.profile-badge-rank,
.profile-badge-link {
	color: #1779ba;
	text-decoration: underline;
	font-weight: 500;
	white-space: nowrap;
	flex-shrink: 0;
}

.profile-badge-rank:hover,
.profile-badge-link:hover {
	text-decoration: none;
}

.profile-badge-rank:visited,
.profile-badge-link:visited {
	color: #0b4063;
}

/* Navigation Tabs */
.profile-nav-tabs-container {
	margin-top: var(--space-1);
}

.profile-nav-tabs {
	display: flex;
	gap: 0;
	margin: 0;
	padding: var(--space-1);
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	position: relative;
	mask-image: linear-gradient(to right,
		transparent,
		black var(--space-1),
		black calc(100% - var(--space-1)),
		transparent);
	-webkit-mask-image: linear-gradient(to right,
		transparent,
		black var(--space-1),
		black calc(100% - var(--space-1)),
		transparent);
}

.profile-nav-tab {
	padding: var(--space-half) var(--space-1);
	text-align: center;
	text-decoration: none;
	color: #333;
	font-weight: 500;
	font-size: var(--font-sm);
	transition: all 0.2s;
	white-space: nowrap;
	flex-shrink: 0;
	align-content: center;
}

.profile-nav-tab svg {
	width: 1rem;
	height: 1rem;
	vertical-align: middle;
	margin-right: 0.5rem;
}

.profile-nav-tab:hover {
	color: #333;
	background: #f9f9f9;
	text-decoration: none;
}

.profile-nav-tab:visited {
	color: #333;
}

.profile-nav-tab.active {
	color: #1779ba;
	box-shadow: inset 0 -3px 0 0 #1779ba;
	background: #e8f4f8;
}

.profile-nav-tab.active:visited {
	color: #1779ba;
}

/* ============================================
   Profile Sticky Header Component
   ============================================ */

.profile-sticky-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	background: white;
	border-bottom: 1px solid rgba(0,0,0,.06);
	box-shadow: 0 4px .5rem -.5rem rgba(0,0,0,.2);
	z-index: 100;
	opacity: 0;
	transform: translateY(-100%);
	transition: opacity 0.3s ease, transform 0.3s ease;
}

.profile-sticky-header.visible {
	opacity: 1;
	transform: translateY(0);
}

.profile-sticky-content {
	max-width: var(--max-width);
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--space-1);
	gap: var(--space-1);
}

.profile-sticky-avatar-name {
	display: flex;
	align-items: center;
	gap: var(--space-half);
	min-width: 0;
	width: 100%;
}

.profile-sticky-avatar {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	object-fit: cover;
	flex-shrink: 0;
}

.profile-sticky-info {
	display: flex;
	flex-direction: column;
	min-width: 0;
	width: 100%;
}

.profile-sticky-name {
	font-family: var(--font-heading);
	font-size: var(--font-lg);
	font-weight: 500;
	color: #333;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	line-height: 1.1;
}

.profile-sticky-stats {
	color: #333;
	font-size: var(--font-xs);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.profile-sticky-actions {
	display: flex;
	gap: var(--space-half);
	flex-shrink: 0;
}

.profile-sticky-tabs {
	display: flex;
	gap: 0;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.profile-sticky-tabs::-webkit-scrollbar {
	display: none;
}

.profile-sticky-tab {
	padding: var(--space-half) var(--space-1);
	text-decoration: none;
	color: #333;
	font-weight: 700;
	font-size: var(--font-sm);
	white-space: nowrap;
	flex-shrink: 0;
	transition: all 0.2s;
}

.profile-sticky-tab:hover {
	color: #333;
	background: #f9f9f9;
	text-decoration: none;
}

.profile-sticky-tab:visited {
	color: #333;
}

.profile-sticky-tab.active {
	color: #1779ba;
	box-shadow: inset 0 -3px 0 0 #1779ba;
	background: #e8f4f8;
}

.profile-sticky-tab.active:visited {
	color: #1779ba;
}

/* ============================================
   Profile Content Component
   ============================================ */

.profile-content {
	position: relative;
	max-width: var(--max-width);
	width: 100%;
	margin: 0 auto var(--space-2);
	padding: 0 var(--space-1) var(--space-2);
}

.profile-feed-item {
	margin-bottom: var(--space-2);
}

.profile-feed-section {
	max-width: 568px;
}

.profile-post-section {
	max-width: 568px;
	margin-bottom: var(--space-2);
	padding: var(--space-1);
	background: #f5f5f5;
	border-radius: var(--radius-eighth);
}

.profile-post-section h2 {
	font-family: var(--font-heading);
	font-size: var(--font-xl);
	font-weight: 500;
	line-height: 1.1;
	margin: 0 0 var(--space-1) 0;
	color: #333;
}

.profile-post-section form .dg-component-textarea {
	margin-bottom: var(--space-1);
}

.profile-feed-published-cocktail {
	padding: var(--space-1);
	border: 1px solid #e0e0e0;
	border-radius: calc(var(--space-1) * 0.5);
	background: #fafafa;
}

.profile-feed-published-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: var(--space-1);
}

.profile-feed-published-label {
	font-weight: 500;
	color: #333;
}

.profile-feed-published-time {
	font-size: var(--font-sm);
	color: #666;
}

/* ============================================
   Collection Detail Component
   ============================================ */

.collection-detail-header {
	display: flex;
	gap: var(--space-1);
	align-items: center;
	margin-bottom: var(--space-2);
}

.collection-detail-image {
	width: 80px;
	height: 80px;
	object-fit: cover;
	border-radius: var(--radius-quarter);
	flex-shrink: 0;
}

.collection-detail-image--placeholder {
	background: linear-gradient(135deg, #e0e0e0 0%, #f5f5f5 100%);
}

.collection-detail-info {
	display: flex;
	flex-direction: column;
}

.collection-detail-name {
	font-family: var(--font-heading);
	font-size: var(--font-xl);
	font-weight: 500;
	margin: 0;
	color: #333;
	line-height: 1.1;
}

.collection-detail-creator,
.collection-detail-count {
	font-size: var(--font-sm);
	color: #333;
	margin: 0;
}

/* ============================================
   Collections Component
   ============================================ */

.collection-card {
	margin-bottom: var(--space-2);
}

.collection-card:last-child {
	margin-bottom: 0;
}

.collection-header {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: var(--space-half);
	margin-bottom: var(--space-1);
}

.dg-component-button--collection-edit-btn {
	margin-left: auto;
}

.profile-nav-tab--with-edit {
	padding-right: var(--space-half);
}

.dg-component-button--profile-nav-edit-btn {
	vertical-align: middle;
	margin-left: var(--space-1);
}

.dg-component-button--profile-nav-edit-btn svg {
	margin-right: 0;
}

.collection-name {
	font-family: var(--font-heading);
	font-size: var(--font-xl);
	font-weight: 500;
	margin: 0;
	color: #333;
}

.collection-meta {
	font-size: var(--font-sm);
	color: #333;
	margin: 0;
}

.collection-view-link {
	margin-left: var(--space-quarter);
	color: #1779ba;
	text-decoration: underline;
}

.collection-view-link svg {
	width: 1em;
	height: 1em;
	vertical-align: middle;
}

.collection-view-link:hover {
	text-decoration: none;
}

.collection-body {
	display: flex;
	gap: var(--space-1);
}

.collection-image-link {
	display: block;
	flex: 1 0 calc(33.333% - 0.666rem);
}

.collection-image-link:hover {
	opacity: 0.7;
}

.collection-image {
	aspect-ratio: 1 / 1;
	overflow: hidden;
	border-radius: var(--radius-quarter);
	background: #f0f0f0;
}

.collection-image-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.collection-image-placeholder {
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, #e0e0e0 0%, #f5f5f5 100%);
}

.collection-items-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-template-rows: repeat(2, 1fr);
	gap: var(--space-1);
}

.collection-item {
	aspect-ratio: 1 / 1;
	overflow: hidden;
	border-radius: var(--radius-quarter);
	background: radial-gradient(circle, #fff 50%, #f3f3f3 100%);
}

.collection-item-link,
.collection-item-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	padding: var(--space-half);
}

.collection-item-icon {
	max-width: 100%;
	max-height: 100%;
	object-fit: cover;
	mix-blend-mode: multiply;
}

.collection-item-link:hover .collection-item-icon {
	opacity: 0.7;
}

.collection-item-more {
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: var(--font-base);
	font-weight: 500;
	color: #1779ba;
	text-decoration: none;
	text-align: center;
}

.collection-item-more:hover {
	color: #1779ba;
}

/* ============================================
   Responsive Breakpoints
   ============================================ */

/* Small (Mobile): 639px and below */
@media (max-width: 639px) {
	.profile-nav-tabs-container {
		position: relative;
		z-index: 1;
	}
	.profile-nav-tabs-container:before {
		content: '';
		position: absolute;
		z-index: 0;
		top: var(--space-1);
		bottom: var(--space-1);
		left: 0;
		width: 100%;
		background: rgba(0,0,0,0.03);
	}

	.profile-nav-tab:not(:first-child) {
		border-left: 3px solid white;
	}

	.collection-name {
		width: 100%;
	}

	.collection-detail-header {
		flex-direction: column;
	}

	.collection-detail-info {
		width: 100%;
	}

	.collection-detail-image {
		width: 100%;
		height: auto;
	}

	.collection-body {
		flex-direction: column;
	}

	.collection-image-link {
		flex: 0 0 auto;
		width: 100%;
		max-width: none;
	}

	.collection-image {
		aspect-ratio: 16 / 9;
	}

	.collection-items-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* Medium (Tablet): 640px - 1023px */
@media (min-width: 640px) {
	.profile-header-container {
		max-width: var(--max-width);
		margin: 0 auto var(--space-1);
		border-radius: 0;
		overflow: visible;
	}

	.profile-hero {
		aspect-ratio: 8 / 3;
		border-radius: 0;
	}

	.profile-avatar-container {
		left: var(--space-1);
	}

	.profile-avatar {
		width: 160px;
		height: 160px;
	}

	.profile-info-section {
		padding: var(--space-1) var(--space-2) 0 192px;
	}

	.profile-name {
		font-size: 2rem;
	}

	.profile-actions {
		max-width: 500px;
	}

	.profile-badge-item {
		width: auto;
	}

	.profile-sticky-content {
		padding: var(--space-1);
	}

	.profile-sticky-avatar-name {
		gap: var(--space-1);
	}

	.profile-sticky-avatar {
		width: 48px;
		height: 48px;
	}

	.profile-sticky-tab {
		font-size: var(--font-base);
	}
}

/* Large (Desktop): 1024px and above */
@media (min-width: 1024px) {
	.profile-header-container {
		max-width: var(--max-width);
		margin-bottom: 0;
		padding-left: var(--space-1);
		padding-right: var(--space-1);
	}

	.profile-hero {
		aspect-ratio: 8 / 3;
	}

	.profile-hero-image {
		border-radius: 0 0 0.25rem 0.25rem;
	}

	.profile-avatar-container {
		left: var(--space-2);
	}

	.profile-avatar {
		width: 240px;
		height: 240px;
	}

	.profile-info-section {
		padding-left: 304px;
	}

	.profile-nav-tabs {
		margin: 0 0 0 288px;
	}

	.profile-content {
		padding-left: calc(304px + var(--space-1));
	}

	.profile-sticky-header {
		border-bottom: none;
		box-shadow: none;
		background: transparent;
		z-index: 10;
		pointer-events: none;
	}

	.profile-sticky-content {
		max-width: var(--max-width);
		flex-direction: row;
		justify-content: flex-start;
		padding: var(--space-2) 0;
		gap: 0;
		pointer-events: none;
	}

	.profile-sticky-avatar-name {
		position: relative;
		z-index: 1;
		width: 320px;
		max-width: 320px;
		padding: 0 var(--space-2) 0 1rem;
		flex-direction: column;
		align-items: flex-start;
		gap: var(--space-1);
		pointer-events: auto;
	}

	.profile-sticky-avatar-name::before {
		content: '';
		position: absolute;
		top: 0;
		left: 1rem;
		right: var(--space-2);
		aspect-ratio: 16 / 9;
		background-image: var(--profile-hero-image);
		background-size: cover;
		background-position: center;
		border-radius: 0.25rem;
		z-index: -1;
	}

	.profile-sticky-avatar {
		width: 144px;
		height: 144px;
		margin-top: 25%;
		margin-left: var(--space-1);
		border: var(--radius-quarter) solid white;
	}

	.profile-sticky-info {
		gap: 0;
		width: auto;
	}

	.profile-sticky-name {
		font-size: var(--font-xl);
	}

	.profile-sticky-stats {
		font-size: var(--font-sm);
	}

	.profile-sticky-actions {
		width: 100%;
	}
}

/* ============================================
   Dark Mode Support
   ============================================ */

html[data-theme="dark"] .profile-name {
	color: #f5f5f5;
}

html[data-theme="dark"] .profile-location,
html[data-theme="dark"] .profile-stats {
	color: #b3b3b3;
}

html[data-theme="dark"] .profile-occupation {
	color: #e5e5e5;
}

html[data-theme="dark"] .profile-actions .dg-component-button.profile-action-secondary {
	background: #404040;
	color: #e5e5e5;
}

html[data-theme="dark"] .profile-actions .dg-component-button.profile-action-secondary:hover {
	background: #4a4a4a;
}

html[data-theme="dark"] .profile-actions .dg-component-button.profile-action-menu {
	background: #404040;
	color: #e5e5e5;
}

html[data-theme="dark"] .profile-actions .dg-component-button.profile-action-menu:hover {
	background: #4a4a4a;
}

html[data-theme="dark"] .profile-badge-name {
	color: #e5e5e5;
}

html[data-theme="dark"] .profile-badge-rank,
html[data-theme="dark"] .profile-badge-link {
	color: #4da3ff;
}

html[data-theme="dark"] .profile-badge-rank:visited,
html[data-theme="dark"] .profile-badge-link:visited {
	color: #6fb3ff;
}

html[data-theme="dark"] .profile-feed-published-cocktail {
	border-color: #404040;
	background: #2a2a2a;
}

html[data-theme="dark"] .profile-feed-published-label {
	color: #e5e5e5;
}

html[data-theme="dark"] .profile-feed-published-time {
	color: #999;
}

html[data-theme="dark"] .profile-nav-tab:not(:first-child) {
	border-left-color: #1a1a1a;
}

html[data-theme="dark"] .profile-nav-tabs-container::before {
	background: rgba(0, 0, 0, 0.2);
}

html[data-theme="dark"] .profile-nav-tabs {
	border-bottom-color: #404040;
}

html[data-theme="dark"] .profile-nav-tabs::before {
	background: linear-gradient(to right, #2a2a2a, transparent);
}

html[data-theme="dark"] .profile-nav-tabs::after {
	background: linear-gradient(to left, #2a2a2a, transparent);
}

html[data-theme="dark"] .profile-nav-tab {
	color: #b3b3b3;
	background: transparent;
}

html[data-theme="dark"] .profile-nav-tab:hover {
	color: #e5e5e5;
	background: rgba(255, 255, 255, 0.05);
}

html[data-theme="dark"] .profile-nav-tab:visited {
	color: #b3b3b3;
}

html[data-theme="dark"] .profile-nav-tab.active {
	color: #4da3ff;
	box-shadow: inset 0 -3px 0 0 #4da3ff;
	background: #1a2f3d;
}

html[data-theme="dark"] .profile-nav-tab.active:visited {
	color: #4da3ff;
}

html[data-theme="dark"] .profile-sticky-header {
	background: #1a1a1a;
	border-bottom-color: #404040;
}

@media (min-width: 1024px) {
	html[data-theme="dark"] .profile-sticky-header {
		background: transparent;
	}
}

html[data-theme="dark"] .profile-sticky-name {
	color: #f5f5f5;
}

html[data-theme="dark"] .profile-sticky-stats {
	color: #b3b3b3;
}

html[data-theme="dark"] .profile-sticky-tab {
	color: #b3b3b3;
}

html[data-theme="dark"] .profile-sticky-tab:hover {
	color: #e5e5e5;
	background: rgba(255, 255, 255, 0.05);
}

html[data-theme="dark"] .profile-sticky-tab:visited {
	color: #b3b3b3;
}

html[data-theme="dark"] .profile-sticky-tab.active {
	color: #4da3ff;
	box-shadow: inset 0 -3px 0 0 #4da3ff;
	background: #1a2f3d;
}

html[data-theme="dark"] .profile-sticky-tab.active:visited {
	color: #4da3ff;
}

html[data-theme="dark"] .profile-avatar,
html[data-theme="dark"] .profile-sticky-avatar {
	border-color: #1a1a1a;
}

/* Collections Dark Mode */
html[data-theme="dark"] .collection-detail-name,
html[data-theme="dark"] .collection-detail-creator,
html[data-theme="dark"] .collection-detail-count {
	color: #f5f5f5;
}

html[data-theme="dark"] .collection-name {
	color: #f5f5f5;
}

html[data-theme="dark"] .collection-meta {
	color: #f5f5f5;
}

html[data-theme="dark"] .collection-view-link {
	color: #4da3ff;
}

html[data-theme="dark"] .collection-image {
	background: #2a2a2a;
}

html[data-theme="dark"] .collection-image-placeholder {
	background: linear-gradient(135deg, #333 0%, #2a2a2a 100%);
}

html[data-theme="dark"] .collection-item {
	background: radial-gradient(circle, #f3f3f3 50%, #b3b3b3 100%);
}

html[data-theme="dark"] .collection-item-more {
	color: #4da3ff;
}

html[data-theme="dark"] .collection-item-more:hover {
	color: #4da3ff;
}

html[data-theme="dark"] .profile-post-section {
	background: #2a2a2a;
}

html[data-theme="dark"] .profile-post-section h2 {
	color: #f5f5f5;
}
/* ============================================
   Badges Component
   ============================================ */

.profile-badges-heading {
	margin-bottom: var(--space-1-5);
}

.profile-badges-heading .profile-section-title {
	font-family: var(--font-heading);
	font-size: var(--font-xl);
	line-height: 1.1;
	margin: 0 0 var(--space-quarter);
	color: #333;
}

.profile-badges-heading .profile-section-title svg {
	width: 1.25rem;
	height: 1.25rem;
	vertical-align: middle;
	margin-right: var(--space-quarter);
}

.profile-badges-heading p {
	margin: 0;
	font-size: var(--font-sm);
	color: #666;
}

.profile-badges-heading p a {
	text-decoration: underline;
	color: #1779ba;
}

.profile-badges-heading p a:hover {
	text-decoration: none;
}

.badge-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-1);
}

.badge-card {
	display: flex;
	gap: var(--space-1);
	border-radius: var(--radius-quarter);
}

.badge-card-icon {
	flex-shrink: 0;
	width: 48px;
	height: 48px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.badge-card-icon img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.badge-card-icon .svg-badge {
	display: block;
	width: 48px;
	height: 48px;
}

.badge-card-icon .svg-badge svg {
	width: 100%;
	height: 100%;
}

.badge-card-icon-placeholder {
	color: #999;
}

.badge-card-icon-placeholder svg {
	width: 48px;
	height: 48px;
}

.badge-card-body {
	flex: 1;
	min-width: 0;
}

.badge-card-title {
	font-family: var(--font-heading);
	font-size: var(--font-lg);
	line-height: 1.1;
	margin: 0 0 var(--space-quarter);
	color: #333;
}

.badge-card-category {
	display: block;
	font-family: var(--font-body);
	font-weight: 500;
	color: #333;
}

.badge-card-about {
	color: #333;
	margin: 0 0 var(--space-1);
	line-height: 1.1;
}

.badge-card-score {
	display: flex;
	align-items: center;
	gap: var(--space-half);
	flex-wrap: wrap;
	color: #333;
}

.badge-card-score-value {
	color: inherit;
}

.badge-card-rank {
	text-decoration: underline;
	color: #1779ba;
}

.badge-card-rank:hover {
	text-decoration: none;
}

.badge-card-tag {
	display: inline-block;
	padding: 2px var(--space-quarter);
	border-radius: var(--radius-eighth);
	font-size: var(--font-sm);
	line-height: 1.1;
	border: 2px solid currentColor;
	text-transform: capitalize;
}

.badge-card-tag--bronze {
	color: #cd7f32;
}

.badge-card-tag--silver {
	color: #888;
}

.badge-card-tag--gold {
	color: #d4a017;
}

/* Medium screens: 2-column grid */
@media (min-width: 640px) {
	.badge-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* ============================================
   Badges Component - Dark Mode
   ============================================ */

html[data-theme="dark"] .profile-badges-heading .profile-section-title {
	color: #e0e0e0;
}

html[data-theme="dark"] .profile-badges-heading p {
	color: #999;
}

html[data-theme="dark"] .profile-badges-heading p a {
	color: #4da3ff;
}

html[data-theme="dark"] .badge-card-title {
	color: #e0e0e0;
}

html[data-theme="dark"] .badge-card-category {
	color: #e0e0e0;
}

html[data-theme="dark"] .badge-card-about {
	color: #e0e0e0;
}

html[data-theme="dark"] .badge-card-score {
	color: #e0e0e0;
}