/*
 * UoG Games reusable component hooks.
 *
 * Keep global colours, fonts, spacing and page layout in Elementor Site
 * Settings. Only behaviour or presentation that is awkward to express
 * natively in Elementor should live here.
 */

/* Smooth card lift used on interactive cards. */
.uog-card-lift {
	transition: transform 180ms ease, box-shadow 180ms ease;
}

@media (hover: hover) and (pointer: fine) {
	.uog-card-lift:hover {
		transform: translateY(-5px);
	}
}

/* Optional image zoom within a card without changing the card dimensions. */
.uog-media-zoom {
	overflow: hidden;
}

.uog-media-zoom img {
	transition: transform 350ms ease;
}

@media (hover: hover) and (pointer: fine) {
	.uog-media-zoom:hover img {
		transform: scale(1.035);
	}
}

/*
 * Add this class to an Elementor Loop Grid when we want cards to become a
 * horizontal, touch-friendly scroll strip on mobile.
 */
@media (max-width: 767px) {
	.uog-mobile-scroll .elementor-loop-container {
		display: grid !important;
		grid-auto-flow: column;
		grid-auto-columns: minmax(82%, 1fr);
		grid-template-columns: none !important;
		overflow-x: auto;
		overscroll-behavior-inline: contain;
		scroll-snap-type: inline mandatory;
		scrollbar-width: thin;
		padding-bottom: 0.75rem;
	}

	.uog-mobile-scroll .e-loop-item {
		scroll-snap-align: start;
	}
}

/* Respect visitors who prefer reduced animation. */
@media (prefers-reduced-motion: reduce) {
	.uog-card-lift,
	.uog-media-zoom img {
		transition: none !important;
	}
}

/*
 * Helpful utility when a decorative Elementor container should never capture
 * clicks/taps over real content.
 */
.uog-decoration {
	pointer-events: none;
	user-select: none;
}


/* -------------------------------------------------------------------------
 * Step 9: reusable Loop Item card helpers
 * ---------------------------------------------------------------------- */

.uog-loop-card {
	height: 100%;
	overflow: hidden;
}

.uog-loop-card .elementor-widget-theme-post-featured-image img,
.uog-course-loop-card .elementor-widget-image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.uog-card-media {
	position: relative;
	overflow: hidden;
}

.uog-event-card-date {
	position: absolute;
	left: 14px;
	bottom: 14px;
	z-index: 2;
	min-width: 64px;
}

.uog-event-card-date .elementor-shortcode {
	line-height: 1;
}

.uog-card-tag .elementor-shortcode,
.uog-card-meta .elementor-shortcode {
	display: inline-block;
}

.uog-course-loop-card .elementor-widget-image {
	overflow: hidden;
}

@media (max-width: 767px) {
	.uog-event-card-date {
		left: 12px;
		bottom: 12px;
	}
}