.custom-pill {
	border: 1px solid #1d1d1fe6;
	border-radius: 23px;
	color: #1d1d1f;
	vertical-align: middle;
	padding: 6px 16px;
	font-size: 14px;
	line-height: 1.42859;
	font-weight: 400;
	letter-spacing: -0.016em;
	font-family: "SF Pro Text", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
	color: inherit;
	text-decoration: none;
	margin-top: 10px;
}

body[data-color-scheme="dark"] .custom-pill {
	border-color: #e2e2e0e6;
	color: #e2e2e0;
}

.custom-pill:hover {
	text-decoration: none;
	border-width: 2px;
	padding: 5px 15px;
}

/* ========== Grid ========== */
#main section.section {
	padding-top: 4em;
	padding-bottom: 4em;
}

@media only screen and (max-width: 734px) {
	#main section.section {
		padding-top: 3em;
		padding-bottom: 3em;
	}
}

.tile-content {
	min-width: 100%;
}

/* ========== Design Campaign ========== */

.tile-design-campaign {
	position: relative;
	background-image: url("/events/images/dc-light-tile-bg_2x.jpg");
	min-height: 300px;
	border: 1px solid var(--card-border-color);
	overflow: hidden;
}

body[data-color-scheme="dark"] .tile-design-campaign {
	background-image: url("/events/images/dc-dark-tile-bg_2x.jpg");
}

.grid-justify-self-end {
	justify-self: end;
}

@media only screen and (max-width: 1068px) {
	.tile-design-campaign {
		min-height: 300px;
	}
}

@media only screen and (max-width: 734px) {
	.tile-design-campaign {
		min-height: 400px;
	}
}

.tile-design-campaign .tile-content {
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.tile-design-campaign .tile-design-campaign-p {
	max-width: 500px;
}

.tile-design-campaign .place-self-center {
	place-self: center;
}

.tile-design-campaign .tile-content .grid {
	place-content: center;
}

@media only screen and (max-width: 734px) {
	.tile-design-campaign .tile-content .grid {
		place-content: flex-start;
		text-align: center;
	}
}

/* ========== Dynamic Events ========== */

:root {
	--sc-gallery-card-width: 310px !important;
	/* --sk-tile-padding: 1.5em; */
	/* --tile-custom-gap: 1em; */
}

body[data-color-scheme="light"] {
	--event-icon-color: #000;
}

body[data-color-scheme="dark"] {
	--event-icon-color: #fff;
}

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

.section-events .tile .event-icon {
	color: var(--sk-glyph-red) !important;
	font-size: 40px;
	margin-bottom: 0.5em;
	margin-left: -0.2em;
}

.section-events .tile .event-icon.event-icon-bw {
	color: var(--sk-body-text-color) !important;
}

.section-events a {
	/* Allows bg colors to show up */
	display: block !important;
}

.section-events .tile h4,
.section-events .tile h5,
.section-events .tile p:not(.link),
.section-events a.tile:hover {
	/* Allows bg colors to show up */
	text-decoration: none !important;
	color: var(--sk-body-text-color) !important;
}

.section-events .tile:hover .link {
	/* Allows bg colors to show up */
	text-decoration: underline;
}

.topic-icon {
	font-size: 28px;
	color: var(--event-icon-color) !important;
	margin-bottom: 0.5em;
}

/* ========== Dynamic Events - 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;
}