/* ============================================================
   Canella & Santos — Estilos do HUB de eventos (index.html)
   Reaproveita o design system de evento.css e adiciona os
   componentes proprios da pagina de listagem.
   ============================================================ */

/* ====== HERO DO HUB (centralizado) ====== */
.hub-hero{
  text-align: center;
  padding: 60px 6vw 40px;
  max-width: 860px;
  margin: 0 auto;
}
.hub-hero .hero-tag{ margin: 0 auto 28px; }

h1.hub-title{
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(40px, 6vw, 76px);
  line-height: 1.0;
  letter-spacing: -0.025em;
  margin: 0 0 24px;
  color: var(--ink);
  animation: fadeUp .9s .2s backwards ease-out;
}
h1.hub-title em{
  font-style: italic;
  font-weight: 400;
  color: var(--coral-deep);
  position: relative;
  white-space: nowrap;
}
h1.hub-title em::after{
  content:"";
  position: absolute;
  left: 0; right: 0;
  bottom: 6px;
  height: 10px;
  background: rgba(79, 195, 209, 0.4);
  z-index: -1;
  border-radius: 4px;
}
.hub-lead{
  font-size: 19px;
  color: var(--ink-soft);
  margin: 0 auto;
  max-width: 600px;
  animation: fadeUp .9s .35s backwards ease-out;
}

/* ====== SECAO DE EVENTOS ====== */
.events{
  padding: 40px 6vw 80px;
}
.events-head{
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 40px;
  flex-wrap: wrap;
}
.events-head .section-eyebrow{ margin-bottom: 0; }
.events-count{
  font-size: 14px;
  color: var(--ink-soft);
}
.events-count strong{ color: var(--coral-deep); font-weight: 600; }

.events-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: 32px;
}

/* ====== CARD DE EVENTO ====== */
.event-card{
  display: flex;
  flex-direction: column;
  background: white;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  position: relative;
  transition: transform .3s ease, box-shadow .3s ease;
  animation: fadeUp .8s backwards ease-out;
}
.event-card:hover{
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
}
/* faixa de cor no topo (alterna coral/teal) */
.event-card::before{
  content:"";
  display: block;
  height: 6px;
  background: var(--coral);
}
.event-card[data-accent="teal"]::before{ background: var(--teal); }

.event-card-body{
  padding: 36px 34px 0;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.event-top{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 22px;
}

.event-status{
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 14px;
  background: var(--coral-soft);
  color: var(--coral-deep);
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.event-status .pulse{
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--coral);
  box-shadow: 0 0 0 0 rgba(251, 80, 99, 0.7);
  animation: pulse 2s infinite;
}
/* estados nao-abertos */
.event-status.is-lotado,
.event-status.is-encerrado{
  background: rgba(26, 31, 46, 0.06);
  color: var(--ink-soft);
}
.event-status.is-lotado .pulse,
.event-status.is-encerrado .pulse{
  background: var(--ink-soft);
  animation: none;
  box-shadow: none;
}

.event-date-badge{
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 56px;
  padding: 8px 10px;
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  line-height: 1;
  text-align: center;
}
.event-date-badge .d-day{
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 600;
  color: var(--ink);
}
.event-date-badge .d-month{
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-soft);
  margin-top: 3px;
}

.event-title{
  font-family: var(--font-serif);
  font-size: 28px;
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.02em;
  margin: 0 0 14px;
  color: var(--ink);
}
.event-desc{
  font-size: 15px;
  color: var(--ink-soft);
  margin: 0 0 24px;
}

.event-meta{
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}
.event-meta-row{
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: var(--ink-soft);
}
.event-meta-row .ico{
  width: 18px;
  text-align: center;
  flex-shrink: 0;
}
.event-meta-row strong{ color: var(--ink); font-weight: 500; }

.event-foot{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 6px;
  padding: 22px 34px 30px;
}
.event-cta{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 15px;
  color: var(--ink);
  transition: color .25s ease, gap .25s ease;
}
.event-cta::after{ content:"\2192"; transition: transform .25s ease; }
.event-card:hover .event-cta{ color: var(--coral-deep); }
.event-card:hover .event-cta::after{ transform: translateX(4px); }

.event-card.is-disabled{ opacity: 0.72; }
.event-card.is-disabled:hover{ transform: none; box-shadow: var(--shadow-md); }
.event-card.is-disabled .event-cta{ color: var(--ink-soft); }
.event-card.is-disabled .event-cta::after{ content:""; }

/* ====== ESTADO VAZIO ====== */
.events-empty{
  text-align: center;
  padding: 60px 24px;
  background: white;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  color: var(--ink-soft);
}
.events-empty .emoji{ font-size: 40px; display:block; margin-bottom: 16px; }
.events-empty h3{
  font-family: var(--font-serif);
  font-size: 24px;
  font-weight: 500;
  color: var(--ink);
  margin: 0 0 8px;
}
.events-empty p{ margin: 0; font-size: 15px; }

/* ====== RESPONSIVE ====== */
@media (max-width: 540px){
  .hub-hero{ padding: 40px 6vw 24px; }
  .events-grid{ grid-template-columns: 1fr; gap: 24px; }
  .event-card-body{ padding: 28px 24px 0; }
  .event-foot{ padding: 20px 24px 26px; }
}