.lgp-wrapper { width: 100%; font-family: system-ui, -apple-system, sans-serif; }

/* Hero Styles */
.lgp-hero {
	padding: 80px 20px;
	text-align: center;
	background-size: cover;
	background-position: center;
	color: #ffffff;
	border-radius: 16px;
	margin-bottom: 40px;
}
.lgp-pretitle { text-transform: uppercase; letter-spacing: 2px; font-size: 0.85rem; color: #38bdf8; font-weight: 700; display: block; margin-bottom: 8px; }
.lgp-title { font-size: 2.5rem; font-weight: 800; margin: 0 0 12px 0; line-height: 1.2; }
.lgp-desc { font-size: 1.1rem; color: #94a3b8; max-width: 600px; margin: 0 auto; }

/* Grid Layout */
.lgp-grid { display: grid; gap: 20px; }
.lgp-cols-2 { grid-template-columns: repeat(2, 1fr); }
.lgp-cols-3 { grid-template-columns: repeat(3, 1fr); }
.lgp-cols-4 { grid-template-columns: repeat(4, 1fr); }
.lgp-cols-5 { grid-template-columns: repeat(5, 1fr); }
.lgp-cols-6 { grid-template-columns: repeat(6, 1fr); }

@media (max-width: 1024px) { .lgp-grid { grid-template-columns: repeat(3, 1fr) !important; } }
@media (max-width: 640px) { .lgp-grid { grid-template-columns: repeat(1, 1fr) !important; } }

/* Card Components & Hover Effects */
.lgp-card {
	position: relative;
	height: 220px;
	border-radius: 12px;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
.lgp-card-bg {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.lgp-card-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.7) 100%);
	transition: opacity 0.3s ease;
}
.lgp-card-content { position: relative; z-index: 2; padding: 15px; text-align: center; }
.lgp-card-title { color: #ffffff; font-size: 1.25rem; font-weight: 700; margin: 0; text-shadow: 0 2px 4px rgba(0,0,0,0.5); }

/* Hover Actions */
.lgp-card:hover .lgp-card-bg { transform: scale(1.1); }
.lgp-card:hover .lgp-card-overlay { background: linear-gradient(180deg, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.85) 100%); }

/* Pagination */
.lgp-pagination { display: flex; justify-content: center; gap: 8px; margin-top: 30px; }
.lgp-pagination .page-numbers { padding: 8px 16px; border-radius: 6px; background: #f1f5f9; color: #0f172a; text-decoration: none; font-weight: 600; }
.lgp-pagination .page-numbers.current { background: #0284c7; color: #ffffff; }