/* 
 * Events Grid Layout
 */
 
.eg-grid-wrap { position: relative; }
.eg-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.eg-card {
  position: relative;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0,0,0,.06);
  background: #fff;
  transition: transform .2s ease, box-shadow .2s ease;
}
.eg-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(0,0,0,.1);
}

.eg-card a.eg-link { 
    position: absolute;
    inset: 0; 
    z-index: 3;
    border: 0 !important;
}
.eg-card a.eg-link:focus { 
    outline: 2px solid #333; 
    outline-offset: -2px; 
}

.eg-thumb {
  position: relative;
  padding-top: 58%; /* ~16:9 */
  overflow: hidden;
}
.eg-thumb > span {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  transition: transform .35s ease;
  will-change: transform;
}
.eg-card:hover .eg-thumb > span { 
    transform: scale(1.06); 
}

.eg-body { 
    padding: 16px 16px 18px; 
}
.eg-title {
  margin: 0 0 8px;
  font-family: var(--e-global-typography-primary-font-family), Sans-serif;
  font-weight: var(--e-global-typography-primary-font-weight);
  font-size: 1.3rem;
  color: var(--e-global-color-primary); 
  line-height: 1.35;
  position: relative; 
  display: inline-block;
}
.eg-title::after {
  content: "";
  position: absolute; left: 0; bottom: -4px;
  height: 2px; width: 100%;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .35s ease;
}
.eg-card:hover .eg-title::after { 
    transform: scaleX(1); 
}

.eg-meta {
  font-size: .92rem; 
  color: #666; 
  margin-bottom: 10px;
  display: flex;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: nowrap;
}

.eg-meta > span {
    display: flex;
    width: 50%;
    justify-content: flex-start;
    align-items: baseline;
    align-content: flex-start;
	gap: 5px;
}

.eg-excerpt { 
    color: #333; 
    font-size: .95rem; 
}

.eg-loader { 
    text-align: center; 
    padding: 18px 8px; 
    color: #777; 
    font-size: .95rem;
}



/* 
 * Homepage Upcoming Event Layout
 */
.next-event-card {
	display: grid;
	gap: 14px;
	background: #fff;
	overflow: hidden;
    grid-template-columns: 30% 70%;
}
.next-event-card__thumb {
	  overflow: hidden;
}
.next-event-card__thumb img {
	display: block; 
	width: 100%; 
	height: 100%; 
	object-fit: cover;
	transition: all 200ms linear;
}
.next-event-card:hover .next-event-card__thumb img {
	transform: scale(1.2);
	transform-origin: center;
}
.next-event-card__body { 
	padding: 14px 16px 16px; 
	display: grid; 
	gap: 8px;
}
.next-event-card__title { 
	margin: 0; 
	font-family: var(--e-global-typography-primary-font-family), Sans-serif;
    font-weight: var(--e-global-typography-primary-font-weight);
    color: var(--e-global-color-primary); 
	margin-bottom: 15px;
}
.next-event-card__title a { 
	text-decoration: none; 
	color: inherit;
	transition: all 200ms linear;
}
.next-event-card__title a:hover { 
	text-decoration: underline; 
}
.next-event-card__meta { 
	color: #555; 
	font-family: var(--e-global-typography-text-font-family), Sans-serif;
	font-size: .85rem; 
	display: flex; 
	flex-wrap: wrap; 
	gap: 6px; 
	align-items: center;
    justify-content: space-between;
}
.next-event-card__excerpt { 
	margin: 15px 0;
}
.next-event-card__sep { 
	opacity: .6; 
}
.next-event-card  i.primary {
	color: var(--e-global-color-primary); 
}
.next-event-card  i.secondary {
	color: var(--e-global-color-secondary); 
}
.next-event-card  i.accent {
	color: var(--e-global-color-accent); 
}

.event-alert {
  padding: 16px 20px;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.4;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 15px 0;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

.event-alert-full {
  background: #fff3f3;
  border: 1px solid #f5c2c2;
  color: #b71c1c;
}

.event-availability {
	text-align: right;
}

/* .event-alert-full::before {
  content: "⚠️";
  font-size: 20px;
  flex-shrink: 0;
} */


/* 
 * Devices
 */
@media (max-width: 1024px) {
    .eg-grid { 
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px)  {
    .eg-grid { 
        grid-template-columns: 1fr; 
    }
}