@charset "utf-8";
/* CSS Document */

/* Wrapper */
.wrapper {
  text-align: center;
  padding: 30px;
  flex: 1;
}

/* Griglia eventi */
.grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr); /* 6 colonne su desktop */
  gap: 18px;
  justify-content: center;
  margin: 20px auto 40px;
  max-width: 1200px;
}

/* Pulsanti evento (tasselli) */
.event-button {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  border: 1px solid #ddd;
  border-radius: 12px;
  padding: 12px;
  transition: all 0.3s ease;
  box-shadow: 0 2px 5px rgba(0,0,0,0.08);
  height: 150px;
  min-width: 150px;
  color: #fff; /* testo bianco di default */
}

/* Hover comune */
.event-button:hover {
  filter: brightness(1.15); /* schiarisce mantenendo il colore */
  box-shadow: 0 4px 8px rgba(0,0,0,0.15);
  transform: translateY(-2px);
}

.event-button:hover .city,
.event-button:hover .date {
  color: #111; /* testo scuro */
}

/* Logo società (tondo) */
.event-logo {
  width: 55px;
  height: 55px;
  border-radius: 50%;
  margin-bottom: 8px;
  object-fit: cover;
  border: 2px solid #eee;
  background: #fff;
}

/* Testo città */
.event-button .city {
  font-size: 0.95rem;
  font-weight: 600;
  margin-bottom: 3px;
  text-align: center;
}

/* Data */
.event-button .date {
  font-size: 0.8rem;
  text-align: center;
  opacity: 0.9;
}

/* Divider centrato */
.divider {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #666;
  font-weight: 600;
  font-size: 1rem;
  margin: 30px auto 15px;
  max-width: 500px;
}

.divider::before,
.divider::after {
  content: "";
  flex: 1;
  border-bottom: 1px solid #ccc;
}

.divider span {
  padding: 0 10px;
  white-space: nowrap;
  background: #fff; /* stesso sfondo pagina */
}

/* Varianti colore */
.gray     { background: #f9f9f9; color: #333; }
.blue     { background: #3B82F6; }
.green    { background: #10B981; }
.amber    { background: #F59E0B; }
.red      { background: #EF4444; }
.violet   { background: #8B5CF6; }
.cyan     { background: #06B6D4; }
.lime     { background: #84CC16; }
.sky      { background: #0EA5E9; }
.pink     { background: #EC4899; }
.orange   { background: #F97316; }
.indigo   { background: #6366F1; }
.navy     { background: #1E40AF; }
.fuchsia  { background: #D946EF; }
.rose     { background: #DB2777; }

/* Stato disabilitato */
.disabled {
  pointer-events: none;
  opacity: 0.6;
}

/* 📱 Responsive */
@media (max-width: 1024px) {
  .grid {
    grid-template-columns: repeat(3, 1fr); /* tablet */
    max-width: 800px;
  }
}

@media (max-width: 600px) {
  .grid {
    grid-template-columns: repeat(2, 1fr); /* mobile */
    max-width: 400px;
  }
}

/* Titolo pagina */
.page-title {
  text-align: center;
  font-size: 2.2rem;
  font-weight: 700;
  margin: 2rem 0;
  color: #333;
  border: none;
}
/* Pulsante nel divider */
.divider-button {
  display: inline-block;
  background: #6B7280;   /* grigio neutro */
  color: #fff;
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
  padding: 8px 18px;
  border-radius: 25px;
  transition: all 0.3s ease;
}

.divider-button:hover {
  background: #9CA3AF;   /* grigio più chiaro in hover */
  color: #111;           /* testo scuro */
}