/* Hover and reveal styles for category details */
.cat-card { position: relative; }

/* By default keep the header and intro visible; hide detailed specs until hover.
	 Use opacity/transform transitions for smooth animation rather than display toggles. */
.cat-card .meta-specs,
.cat-card .meta h4,
.cat-card .meta p.meta-detail,
.cat-card .judging-criteria {
	display: block; /* ensure layout consistent, visibility controlled via opacity */
	opacity: 0;
	transform: translateY(8px);
	transition: opacity 240ms cubic-bezier(.2,.9,.2,1), transform 240ms cubic-bezier(.2,.9,.2,1);
	pointer-events: none;
}

/* When hovered, reveal the detailed nodes smoothly */
.cat-card:hover .meta-specs,
.cat-card:hover .meta h4,
.cat-card:hover .meta p.meta-detail,
.cat-card:hover .judging-criteria {
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
}

/* Touch-specific open styles removed — resetting mobile tap-to-open behavior. */

/* Fade/slide out the title and intro when details show */
.cat-card .meta > h3,
.cat-card .meta > p:first-of-type {
	transition: opacity 180ms ease, transform 180ms ease;
}
.cat-card:hover .meta > h3,
.cat-card:hover .meta > p:first-of-type {
	opacity: 0;
	transform: translateY(-6px);
	pointer-events: none;
}

/* Note: details are shown only on hover-capable devices; touch devices will not auto-show details. */

.meta-specs { margin-top: 12px; font-size: 14px; color: #111; }
.meta-specs dt { display: block; font-weight: 700; margin: 8px 0 4px 0; }
.meta-specs dd { display: block; margin: 0 0 10px 8px; }
.judging-criteria { margin-top: 8px; padding-left: 18px; color: var(--c-text-2); }

.cat-card .meta { transition: all 0.18s ease; }
.cat-card .meta .meta-block {
	/* hidden by default, revealed on hover with smooth transition */
	opacity: 0;
	transform: translateY(8px);
	transition: opacity 240ms cubic-bezier(.2,.9,.2,1), transform 240ms cubic-bezier(.2,.9,.2,1);
	pointer-events: none;
}

/* On devices that support hover, render .meta as an absolute overlay above the image */
@media (hover: hover) and (pointer: fine) {
	.cat-card { overflow: hidden; }

	/* Keep .meta in-flow so h3/p are visible before hover; use a pseudo-element for the overlay background. */
	.cat-card .meta {
		position: absolute;
		padding: 22px;
		box-sizing: border-box;
		color: var(--c-text); /* use theme text color by default (visible on dark theme) */
		z-index: 10;
		-webkit-backdrop-filter: blur(2px);
		backdrop-filter: blur(2px);
		transition: color 200ms ease, transform 260ms cubic-bezier(.2,.9,.2,1);
		transform: translateY(0);
		overflow: hidden;
	}

	/* overlay background that fades in on hover */
	.cat-card .meta::before {
		content: "";
		position: absolute;
		inset: 0;
		background: rgba(204,204,204,0.6);
		opacity: 0;
		transition: opacity 240ms cubic-bezier(.2,.9,.2,1);
		z-index: 12;
		pointer-events: none;
	}
	.cat-card:hover .meta::before {
		opacity: 1;
	}

	/* switch text color on hover to dark for contrast against the light overlay */
	.cat-card:hover .meta { color: #111; transform: translateY(14px); }

	/* ensure image sits under the card content */
	.cat-card .bg { position: relative; z-index: 1; }
	.cat-card .bg img { display: block; width: 100%; height: auto; }

	/* Bring detailed nodes above the overlay */
	.cat-card .meta-specs,
	.cat-card .meta h4,
	.cat-card .meta p.meta-detail,
	.cat-card .judging-criteria {
		position: relative;
		z-index: 20;
	}

	/* Position meta-block as an overlay container and reveal on hover */
	.cat-card .meta .meta-block {
		position: absolute;
		inset: 0;
		padding: 0 22px;
		box-sizing: border-box;
		z-index: 20;
		display: block; /* ensure it's present for transitions */
	}

	.cat-card:hover .meta .meta-block {
		position: relative;
		opacity: 1;
		transform: translateY(0);
		pointer-events: auto;
	}
}

.categories.en .reveal .cat-card .meta .meta-block{
	padding: 0;
}