/* ============================================================
   NTBLDO — Design tokens
   Estratti dal prototipo React. Sono la fonte di verità visiva:
   non reinventare la palette, non introdurre un framework CSS.
   ============================================================ */

/* I caratteri arrivano da public/css/fonts.css, caricato prima di questo file
   nel layout. Qui c'era un @import verso i server di Google: è stato tolto
   per non comunicare l'IP dei visitatori a terzi. Vedi fonts.css. */

:root {
  /* Superfici — il sito è nero, non grigio scuro */
  --ink:    #050505;   /* sfondo base */
  --ink-2:  #0E0E0E;   /* card, pannelli */
  --ink-3:  #161616;   /* input, stati hover */

  /* Testo */
  --paper:  #F7F7F7;   /* testo principale */
  --muted:  #7A7A7A;   /* testo secondario, label */
  --chrome: #C7C7C7;   /* dettagli metallici, animazione rig */
  --line:   rgba(247, 247, 247, 0.12);  /* bordi: sempre translucidi, mai grigio pieno */

  /* Accenti — usati per gli stati, non per decorare */
  --red:    #FF4D4D;   /* sold out, show day, deadline */
  --green:  #8FE0A8;   /* on sale, venue visit */
  --blue:   #8FB6E0;   /* production meeting, client request */
  --violet: #C79CF0;   /* artist hold */
  --amber:  #F7F7F7;   /* coming soon (volutamente uguale a paper) */
}

/* ------------------------------------------------------------
   Tipografia
   Tre famiglie, ruoli separati e non interscambiabili.
   ------------------------------------------------------------ */

body {
  font-family: 'Manrope', sans-serif;   /* corpo del testo */
  background: var(--ink);
  color: var(--paper);
}

h1, h2 {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 600;
  text-transform: uppercase;   /* i titoli sono SEMPRE maiuscoli */
  letter-spacing: 0.005em;
  line-height: 0.96;           /* molto stretto: è parte del carattere del sito */
  margin: 0;
}

/* IBM Plex Mono è riservato a: etichette, pill di stato, tag, dati tecnici.
   Mai per il corpo del testo. Sempre uppercase con letter-spacing largo. */
.mono-label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Scale fluide: i titoli respirano molto tra mobile e desktop */
.hero-title       { font-size: clamp(64px, 14vw, 140px); }
.event-hero-title { font-size: clamp(48px,  9vw,  96px); }
.page-title       { font-size: clamp(32px,  6vw,  52px); }
.section-title    { font-size: clamp(26px,  4vw,  38px); }

/* ------------------------------------------------------------
   Regole di forma
   ------------------------------------------------------------ */

/* Nessun angolo arrotondato, da nessuna parte. border-radius: 0.
   È una scelta deliberata: il sito ha un'estetica da flight case. */

/* Larghezza massima del contenuto e padding di sezione */
.section  { padding: 64px 32px; max-width: 1240px; margin: 0 auto; width: 100%; }
.page-top { padding-top: 96px; }

/* ------------------------------------------------------------
   Pill di stato biglietti
   ------------------------------------------------------------ */

.pill {
  display: inline-flex;
  align-items: center;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  padding: 5px 11px;
  border: 1px solid var(--line);
  border-radius: 0;
  text-transform: uppercase;
}
.pill-green { color: var(--green); border-color: rgba(143, 224, 168, 0.4); }  /* On Sale */
.pill-red   { color: var(--red);   border-color: rgba(255,  77,  77, 0.4); }  /* Sold Out */
.pill-amber { color: var(--amber); border-color: var(--line); }               /* Coming Soon */
.pill-muted { color: var(--muted); border-color: var(--line); }               /* Postponed, Cancelled */

/* Chip del calendario — st-* mappano sui tipi di slot, vedi SPEC.md */
.st-red    { color: var(--red);    border-color: rgba(255,  77,  77, 0.4); }
.st-amber  { color: var(--amber);  border-color: var(--line); }
.st-blue   { color: var(--blue);   border-color: rgba(143, 182, 224, 0.4); }
.st-violet { color: var(--violet); border-color: rgba(199, 156, 240, 0.4); }
.st-green  { color: var(--green);  border-color: rgba(143, 224, 168, 0.4); }
.st-muted  { color: var(--muted);  border-color: var(--line); }

/* ------------------------------------------------------------
   Hero della pagina evento — attenzione, qui il prototipo aveva un bug
   ------------------------------------------------------------ */

.event-hero {
  position: relative;
  padding: 130px 32px 70px;
  overflow: hidden;
  min-height: 64vh;          /* l'immagine ha bisogno di spazio verticale reale */
  display: flex;
  align-items: flex-end;     /* il contenuto sta in basso, sopra la parte scura */
}

.event-hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

/* Il gradiente parte leggero e scurisce solo dove sta il testo.
   Un gradiente uniformemente pesante (era 0.4 → 0.92) annulla la foto. */
.event-hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(5, 5, 5, 0.25) 0%,
    rgba(5, 5, 5, 0.55) 45%,
    rgba(5, 5, 5, 0.90) 100%);
}

.event-hero-inner {
  position: relative;
  max-width: 760px;
  z-index: 1;
  text-shadow: 0 1px 24px rgba(0, 0, 0, 0.55);  /* leggibilità su foto chiare */
}

/* IMPORTANTE — la lezione da portarsi dietro.
   Il contenitore dell'immagine di copertina deve prendere `position` dal
   foglio di stile, non da uno stile inline. Nel prototipo un
   `style="position: relative"` inline vinceva sul `position: absolute` qui
   sopra, il box collassava ad altezza zero e l'immagine spariva — mentre il
   gradiente di fallback (che non aveva stile inline) si vedeva benissimo.
   In Blade: passa la classe, non lo stile. */
.cover-media { position: relative; }   /* default, sovrascrivibile dai contenitori */

/* ------------------------------------------------------------
   Fallback quando manca l'artwork
   Gradiente scuro deterministico, scelto in base allo slug.
   Vedi gradientFor() nel prototipo. Serve a far sembrare
   intenzionale l'assenza di immagine.
   ------------------------------------------------------------ */

/* linear-gradient(135deg, #242424, #050505 60%)
   linear-gradient(135deg, #1c1c1c, #050505 60%)
   linear-gradient(135deg, #2a2a2a, #050505 60%)
   linear-gradient(135deg, #1a1a1a, #050505 60%)
   linear-gradient(135deg, #212121, #050505 60%)
   linear-gradient(135deg, #292929, #050505 55%) */

/* ------------------------------------------------------------
   Breakpoint
   Il prototipo usa due soglie sole. Rispettale.
   ------------------------------------------------------------ */

/* @media (max-width: 800px) — griglie a due colonne diventano a una */
/* @media (max-width: 640px) — padding ridotti, nav mobile a menu */