.filter-bar-39272ddc {
	position: sticky;
	top: 73px;
	z-index: 40;
	background: #fff;
	border-bottom: 1px solid var(--line, #e2e8f0);
	padding: 18px 0;
}
body.admin-bar .filter-bar-39272ddc {
	top: calc(73px + var(--wp-admin--admin-bar--height, 32px));
}
@media screen and (max-width: 782px) {
	body.admin-bar .filter-bar-39272ddc {
		top: calc(73px + 46px);
	}
}

.filter-row-39272ddc {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	flex-wrap: wrap;
}

.pills-39272ddc {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}

.tag-pill-39272ddc {
	cursor: pointer;
	padding: 6px 16px;
	border-radius: 999px;
	font-size: 14px;
	background-color: var(--e-global-color-accent, #edf2f7);
	color: var(--e-global-color-text, #4a5568);
	transition: all 0.2s ease-in-out;
}

.tag-pill-39272ddc.active,
.tag-pill-39272ddc:hover {
	background-color: var(--e-global-color-primary, #3182ce);
	color: #fff;
}

.search-box-39272ddc {
	display: flex;
	align-items: center;
	gap: 8px;
	border: 1.5px solid var(--line, #cbd5e0);
	border-radius: 999px;
	padding: 9px 16px;
	min-width: 240px;
}

.search-box-39272ddc input,
.search-box-39272ddc input[type=text]{
	border: none !important;
	outline: none !important;
	box-shadow: none !important;
	font-size: 14px;
	width: 100%;
	background: transparent;
	padding: 0;
	margin: 0;
}

.search-box-39272ddc svg {
	color: var(--ink-soft, #718096);
	flex: none;
}

.study-grid-39272ddc {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 18px;
	margin-top: 36px;
}

/* Flip card container. The outer element only establishes the 3D
   perspective; all of the original card's visible styling (border,
   radius, padding, background) now lives on .card-face-39272ddc so
   the front face keeps the exact same look as before. */
.study-card-39272ddc {
	perspective: 1200px;
}

.card-flip-inner-39272ddc {
	position: relative;
	display: grid;
	transform-style: preserve-3d;
	transition: transform var(--flip-duration-39272ddc, 600ms) cubic-bezier(0.4, 0.2, 0.2, 1);
	width: 100%;
	height: 100%;
}

.study-card-39272ddc:hover .card-flip-inner-39272ddc {
	transform: rotateY(180deg);
}

.study-card-39272ddc.flipped-39272ddc .card-flip-inner-39272ddc {
	transform: rotateY(180deg);
}

.card-face-39272ddc {
	grid-area: 1 / 1;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	display: flex;
	flex-direction: column;
	gap: 12px;
	border: 1px solid var(--line, #cbd5e0);
	border-radius: 16px;
	padding: 22px;
	background-color: #fff;
	transition: box-shadow 0.2s ease;
}

.study-card-39272ddc:hover .card-face-39272ddc {
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.card-back-39272ddc {
	transform: rotateY(180deg);
}

.card-face-39272ddc .src-39272ddc {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 12px;
	font-weight: 700;
	color: var(--teal-deep, #008080);
	letter-spacing: .04em;
	text-transform: uppercase;
}

.card-face-39272ddc .src-39272ddc svg {
	width: 15px;
	height: 15px;
}

.card-face-39272ddc h4 {
	font-size: 15px;
	font-weight: 700;
	line-height: 1.4;
	margin: 0;
}

.card-face-39272ddc .desc-gr-39272ddc {
	font-size: 13.5px;
	line-height: 1.5;
	color: var(--ink-soft, #718096);
	margin: 0;
}

.card-face-39272ddc .desc-en-39272ddc {
	font-size: 13.5px;
	line-height: 1.5;
	color: var(--ink-soft, #718096);
	margin: 0;
}

.card-face-39272ddc .cat-39272ddc {
	font-size: 12px;
	color: var(--ink-soft, #718096);
}

.card-face-39272ddc .cat-39272ddc + h4 {
	margin-top: -8px;
}

.card-face-39272ddc a.link-39272ddc {
	font-size: 13.5px;
	font-weight: 700;
	color: var(--ink, #1a202c);
	margin-top: auto;
	text-decoration: none;
	transition: color 0.2s;
}

.card-face-39272ddc a.link-39272ddc:hover {
	color: var(--teal-deep, #008080);
}

.count-line-39272ddc {
	font-size: 13.5px;
	color: var(--ink-soft, #718096);
	margin-top: 30px;
}

@media (max-width: 980px) {
	.study-grid-39272ddc {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 640px) {
	.study-grid-39272ddc {
		grid-template-columns: 1fr;
	}
	.filter-row-39272ddc {
		flex-direction: column;
		align-items: flex-start;
	}
}
