/* ===== EVENTS COMPONENT STYLES ===== */

/* ===== EVENTS GRID VARIABLES ===== */
:root {
  --event-card-min-width: 380px;
  --event-card-gap: 20px;
  --event-card-size: 320px;
  --event-card-image-height: 160px;
  --event-card-content-padding: 1rem;
  --event-card-border: 1px solid #e5e7eb;
}

/* ===== EVENTS GRID ===== */
#events {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--event-card-min-width), 1fr));
  gap: var(--event-card-gap);
  padding: 0 0 var(--spacing-6xl) 0;
  width: 100%;
}

.event {
  background: var(--color-bg-light);
  border: var(--event-card-border);
  width: 100%;
  height: var(--event-card-size);
  display: flex;
  flex-direction: column;
  cursor: pointer;
  min-width: 0; /* Allow shrinking */
}

.event {
  background: var(--color-bg-light);
  border: var(--event-card-border);
  width: 100%;
  height: var(--event-card-size);
  display: flex;
  flex-direction: column;
  cursor: pointer;
  min-width: 0; /* Allow shrinking */
  position: relative;
}

.event img {
  width: 100%;
  height: var(--event-card-image-height);
  object-fit: cover;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}

.event::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--event-card-image-height);
  background: rgba(0, 0, 0, 0.2);
  z-index: 2;
  pointer-events: none;
}

.event-no-image {
  width: 100%;
  height: var(--event-card-image-height);
  background: var(--color-primary);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
}

.event-content {
  padding: 0 var(--event-card-content-padding) var(--event-card-content-padding) var(--event-card-content-padding);
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 0.75rem;
}

.event-header {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 0;
  margin-top: 0.75rem;
}

.event-location-date {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.event-city {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.city-icon {
  width: 12px;
  height: 12px;
  object-fit: contain;
  flex-shrink: 0;
  max-width: 12px;
  max-height: 12px;
}

.city-name {
  color: var(--color-primary);
  font-size: 0.875rem;
  font-weight: 300;
  font-family: var(--font-family-primary);
}

.event-date {
  color: var(--color-text-secondary);
  font-size: 0.875rem;
  font-weight: 300;
  font-family: var(--font-family-primary);
  margin-left: 0.5rem;
}

.event-title {
  font-family: var(--font-family-primary);
  font-weight: var(--font-weight-semibold);
  font-size: 1rem;
  color: var(--color-text-primary);
  line-height: 1.3;
  margin: 0;
  flex: 1;
}

.event-button {
  background: var(--color-primary);
  color: var(--color-white);
  border: 2px solid var(--color-white);
  padding: var(--spacing-md) var(--spacing-xl);
  border-radius: var(--border-radius-none);
  font-family: var(--font-family-primary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-normal);
  cursor: pointer;
  transition: all var(--transition-normal);
  align-self: flex-start;
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-sm);
  text-decoration: none;
  min-height: 40px;
}

.event-button:hover {
  background: var(--color-primary-hover);
  border-color: var(--color-primary);
  transform: translateY(-2px);
}

.button-chevron {
  content: '';
  width: 20px;
  height: 28px;
  background: url('../../images/chevron-right.png') no-repeat center;
  background-size: contain;
  display: inline-block;
  vertical-align: middle;
}

.button-text {
  white-space: nowrap;
}

/* ===== RESPONSIVE BREAKPOINTS ===== */
@media (max-width: 767px) {
  #events {
    grid-template-columns: 1fr;
    gap: var(--event-card-gap);
    padding: 1rem 0;
  }
  
  .event {
    min-width: 0;
    max-width: 100%;
  }
}

/* Tablet - 2 columns */
@media (min-width: 768px) and (max-width: 1023px) {
  #events {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
}

/* Desktop - 3 columns */
@media (min-width: 1024px) {
  #events {
    grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
    gap: 20px;
  }
}