@charset "UTF-8";
/* =========================================================================
   EVENTI & TORNEI — stili specifici
   dipende dalle variabili di main.css
   ======================================================================== */
/* ===============  sticky footer globale  ================= */
html, body {
  height: 100%;                 /* 1) occupa tutto il viewport */
}
body {
  display: flex;                /* 2) contenitore flessibile verticale */
  flex-direction: column;
}
main.container {                /* 3) il blocco centrale prende lo spazio */
  flex: 1 0 auto;               /*    restituendo “spinta” al footer      */
}
.footer {                       /* (già definito in main.css) */
  flex-shrink: 0;               /* evita di comprimersi                  */
}

/* ---------- HERO ------------------------------------------------------ */
.hero--events {
  background: linear-gradient(135deg, rgba(0,0,0,.7), rgba(0,0,0,.55)),
              url("../images/logo.png") center/cover;
  color: var(--sr-text);
  padding: var(--sp-xl) var(--sp-md);
  text-align: center;
}
.hero__inner { max-width: 720px; margin: 0 auto; }
.hero__title { font-size: clamp(2rem, 1.5rem + 2vw, 2.75rem); margin: 0; }
.hero__subtitle { font-size: var(--fs-lg); margin-top: var(--sp-sm); opacity: .85; }

/* ---------- GRIGLIA CARD --------------------------------------------- */
.event-grid {
  display: grid;
  gap: var(--sp-lg);
  grid-template-columns: repeat(auto-fit, minmax(min(var(--card-max),100%), 1fr));
}

/* ---------- CARD ------------------------------------------------------ */
.event-card {
  background: var(--sr-surface);
  border-radius: var(--radius-md);
  box-shadow: var(--sr-shadow-light);
  padding: var(--sp-lg) var(--sp-md);
  display: flex;
  flex-direction: column;
  transition: transform .2s, box-shadow .2s;
}
.event-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--sr-shadow-deep);
}

/* header titolo */
.event-card h3 {
  font-family: var(--font-heading);
  font-size: var(--fs-lg);
  margin: 0 0 var(--sp-sm);
  color: var(--sr-text);
}

/* info paragrafo */
.event-card p {
  margin: 0 0 var(--sp-xs);
  font-size: var(--fs-base);
  color: var(--sr-text);
}
.event-card p strong { color: var(--sr-muted); font-weight: 600; }

/* badge/tag per stato */
.tag {
  display: inline-block;
  padding: 0.2em 0.6em;
  font-size: .75rem;
  text-transform: uppercase;
  border-radius: 999px;
  letter-spacing: .03em;
}
.tag--red   { background: var(--sr-primary); color: #fff; }
.tag--gray  { background: rgba(255,255,255,.12); color: var(--sr-light); }

/* pulsantiera */
.event-card .btn {
  margin-top: var(--sp-sm);
  width: 100%;
}

/* ---------- RESPONSIVE fine tuning ----------------------------------- */
@media (min-width: 600px) {
  /* carta un po’ più ampia, max definito in :root di main.css */
  .event-grid {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  }
}