/**
 * Long Beach Pride — Get Involved and Sponsors refinements
 * (c) HAUS XXIV, LLC · Licensed to Long Beach Pride
 *
 * Loads after pages.generated.css. Hand-tuned rules on top of the extracted
 * cascade; edit here, never in the generated file.
 */

/* ==========================================================================
   Get Involved — every way in (photo grid from the Get Involved menu)
   ========================================================================== */

.eg-group + .eg-group { margin-top: clamp(40px, 4vw, 64px); }
.eg-group .tg-h { margin-bottom: 20px; }

.eg-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(12px, 1.2vw, 18px);
	margin: 0;
	padding: 0;
	list-style: none;
}

.eg-tile {
	display: flex;
	flex-direction: column;
	height: 100%;
	border-radius: 18px;
	overflow: hidden;
	background: #fff;
	color: var(--ink);
	text-decoration: none;
	box-shadow: 0 1px 2px rgba(12, 12, 14, .05), 0 0 0 1px rgba(12, 12, 14, .06);
	transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
.eg-tile:hover {
	transform: translateY(-3px);
	box-shadow: 0 18px 36px -18px rgba(12, 12, 14, .35), 0 0 0 1px rgba(109, 40, 217, .25);
}
.eg-tile:focus-visible { outline: 3px solid #6D28D9; outline-offset: 3px; }

.eg-ph {
	position: relative;
	margin: 0;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: var(--night);
}
.eg-ph img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 1.2s var(--ease);
}
.eg-tile:hover .eg-ph img { transform: scale(1.05); }

.eg-tx {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 16px 18px 20px;
}
.eg-tx b {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	font-size: 17px;
	font-weight: 600;
	line-height: 1.25;
	letter-spacing: -.01em;
}
.eg-tx b svg {
	flex: none;
	width: 18px;
	height: 18px;
	color: #6D28D9;
	transition: transform .4s var(--ease);
}
.eg-tile:hover .eg-tx b svg { transform: translateX(3px); }
.eg-tx > span {
	font-size: 14px;
	line-height: 1.45;
	color: var(--ink-2);
}

@media (max-width: 1100px) {
	.eg-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
	.eg-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.eg-tx { padding: 12px 14px 16px; }
	.eg-tx b { font-size: 15px; }
	.eg-tx > span { font-size: 13px; }
}