:root {
	--sc-gallery-card-width: 310px !important;
}

.section-hero-img {
	/* display: flex;
	justify-content: center;
	align-items: center; */
	height: 735px;
	overflow: hidden;
	background-color: #f5f5f7;
	background-image: url("/design/images/lun/hero-glass-s-lb_2x.jpg");
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	color: #fff !important;
}

body[data-color-scheme="light"] .section-hero-img {
	background-image: url("/design/images/lun/hero-glass-s-la_2x.jpg");
}

body[data-color-scheme="dark"] .section-hero-img {
	background-image: url("/design/images/lun/hero-glass-s-lb_2x.jpg");
}

@media only screen and (max-width: 734px) {
	.section-hero-img {
		/* align-items: flex-start; */
		/* height: 540px; */
		/* align-items: flex-start; */
		background-position: center;
		padding-top: 2em !important;
	}

	body[data-color-scheme="light"] .section-hero-img {
		background-image: url("/design/images/lun/hero-glass-s-la-small_2x.jpg");
	}

	body[data-color-scheme="dark"] .section-hero-img {
		background-image: url("/design/images/lun/hero-glass-s-lb-small_2x.jpg");
	}

	/* .section-hero-img h1 {
		font-size: 23px;
	} */
}

body[data-color-scheme="light"] .section-events .tile {
	/* --sk-tile-background: #fff !important; */
	/* --sk-tile-background: rgba(255, 255, 255, 0.3) !important; */
	background-color: rgba(0, 0, 0, 0.2) !important;
	color: #fff !important;
}

body[data-color-scheme="dark"] .section-events .tile {
	/* --sk-tile-background: #000 !important; */
	background-color: rgba(0, 0, 0, 0.2) !important;
	color: #fff !important;
}

.section-events h5:lang(ko) {
	word-break: break-word;
}

.section-events a {
	/* border: 3px solid; */
	display: block !important;
}

.event-icon {
	color: #fff !important;
	font-size: 40px;
	margin-bottom: 0.5em;
	margin-left: -0.2em;
}

.thumbnail {
	/* height: 180px; */
	aspect-ratio: 16/9;
	margin-bottom: 0.5em;
}

.thumbnail + h5 {
	font-size: 15px;
	color: #666666;
}
body[data-color-scheme="dark"] .thumbnail + h5 {
	color: #d2d2d7;
}

.section-features .card-media {
	/* max-height: 188px; */
	aspect-ratio: 16/9;
	overflow: hidden;
}

.ada-image {
	border-bottom: 1px solid var(--bg-fill) !important;
}

.sf-tile-icon {
	font-size: 48px;
	margin-bottom: 0.5em;
	color: #fff;
}

.tile-pathways {
	background: linear-gradient(to bottom, #0055c7 0%, #0071e3 100%);
}

/* Skeleton Loading Styles */
.skeleton-card {
	pointer-events: none;
	cursor: default;
}

.skeleton-shimmer {
	background: linear-gradient(
		90deg,
		rgba(255, 255, 255, 0.1) 0%,
		rgba(255, 255, 255, 0.2) 50%,
		rgba(255, 255, 255, 0.1) 100%
	);
	background-size: 200% 100%;
	animation: shimmer 2s infinite;
	border-radius: 4px;
	margin-bottom: 0.5em;
}

body[data-color-scheme="dark"] .skeleton-shimmer {
	background: linear-gradient(
		90deg,
		rgba(255, 255, 255, 0.05) 0%,
		rgba(255, 255, 255, 0.15) 50%,
		rgba(255, 255, 255, 0.05) 100%
	);
	background-size: 200% 100%;
}

.skeleton-title {
	height: 20px;
	width: 90%;
	margin-bottom: 0.75em;
}

.skeleton-date {
	height: 14px;
	width: 50%;
	margin-bottom: 0.75em;
}

.skeleton-detail {
	height: 12px;
	width: 100%;
	margin-bottom: 0.3em;
}

@keyframes shimmer {
	0% {
		background-position: -200% 0;
	}
	100% {
		background-position: 200% 0;
	}
}

/* Hide skeleton when loading is complete */
[data-loading="false"] .skeleton-card {
	display: none;
}