:root {
	--bg: #0b0b0d;
	--card: #141418;
	--border: #2a2b31;
	--logo: #CCCCCC;
}
/* Add to your CSS */
.bg-background {
	background-color: var(--bg)
}

.bg-card {
	background-color: var(--card)
}

.border-border {
	border-color: var(--border)
}
/* mobile full-bleed + overflow guard */
html, body { max-width: 100%; overflow-x: hidden; }
.hero-section-bg { background-size: cover; background-position: center; background-repeat: no-repeat; width: 100%; }
.wall-card { width: 100%; }
.wall-card img { display:block; width:100%; height:auto; }

.text-primary {
	color: #FFFFFF
}

.text-muted-foreground {
	color: #a5a5b8
}

.text-foreground {
	color: #ffffff
}

.img-skeleton {
	position: relative;
	background: #1a1b1f;
	overflow: hidden
}

.img-skeleton::after {
	content: '';
	position: absolute;
	inset: 0;
	transform: translateX(-100%);
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .08), transparent);
	animation: shimmer 1.2s infinite
}
/* Ensure card images fully show and hide the skeleton once loaded */
.wall-card img { display:block; width:100%; height:auto; }
.masonry .wall-card img {
	width: 100%;
	height: auto;
	object-fit: cover;
	object-position: center;
}
.wall-card img.loaded + .img-skeleton { display:none; }

/* If you want to skip the skeleton entirely: uncomment next line */
/* .img-skeleton { display:none !important; } */
/* Mobile safety net: if something still misfires, don't show the skeleton */

@keyframes shimmer {
	100% {
		transform: translateX(100%)
	}
}

.masonry {
	column-gap: .5rem;
	columns: 2
}
@media (max-width: 768px) {
  .masonry { columns: 2 !important; column-gap: .5rem !important; }
  .masonry .wall-card { margin-bottom: .5rem !important; border-radius: 14px; overflow: hidden; }
  .masonry .wall-card img { height: auto !important; max-height: none !important; }
  .img-skeleton { display:none !important; }
}
@media(min-width:1024px) {
  .img-skeleton { display:none !important; }
}

@media(min-width:768px) {
	.masonry {
		columns: 3
	}
}

@media(min-width:1024px) {
	.masonry {
		columns: 4
	}
}

.wall-card {
    
	break-inside: avoid;
	margin-bottom: .5rem;
	border: 1px solid var(--border);
	border-radius: 14px;
	overflow: hidden;
	background: rgba(255, 255, 255, .02)
}

.btn {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	padding: .6rem 1rem;
	border-radius: .75rem;
	border: 1px solid var(--border);
	background: #ffffff;
	color: #000;
	font-weight: 600
}

.btn:hover {
	filter: brightness(1.05)
}

.btn-ghost {
	background: transparent;
	color: #fff
}

.btn-ghost:hover {
	background: rgba(255, 255, 255, .06)
}

.hero-section-bg {
	background-size: cover;
	background-position: center
}

.tags-bar a {
	border: 1px solid var(--border);
	background: var(--bg);
	padding: .25rem .75rem;
	border-radius: 9999px
}