/* =====================================================
   VSIX Meeting 2026 – Stylesheet
   ===================================================== */

/* ── Variabili CSS ── */
:root {
  --color-navy:    #293745;
  --color-steel:   #375b76;
  --color-slate:   #484f5a;
  --color-midgray: #637082;
  --color-ltgray:  #bec4cd;
  --color-yellow:  #F5C842;
  --color-footer:  #1a2530;
  --color-white:   #ffffff;

  --color-networking:   #78aae6;
  --color-welcome-gift: #dc78b4;

  /* Rampa cromatica delle sezioni: si schiarisce avvicinandosi allo sponsor
     (sempre bianco), poi torna a scurirsi verso il footer — lo sponsor
     diventa un punto luce al centro della pagina invece di un'interruzione. */
  --color-tone-1: #2f4d66; /* about */
  --color-tone-2: #375b76; /* agenda */
  --color-tone-3: #a9c1d1; /* workshops */
  --color-tone-4: #dde7ee; /* speakers */
  --color-tone-5: #a9c1d1; /* partecipanti */
  --color-tone-6: #375b76; /* venue */

  /* Ink scuro per le sezioni chiare (agenda, workshops, speakers, partecipanti) */
  --color-tone-ink: #16232e;

  /* Tipografia */
  --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;

  /* Spacing */
  --space-xs:  0.5rem;
  --space-sm:  1rem;
  --space-md:  1.5rem;
  --space-lg:  2.5rem;
  --space-xl:  4rem;
  --space-2xl: 6rem;

  /* Layout */
  --container-max: 1200px;
  --container-pad: 1.5rem;

  /* Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-full: 9999px;

  /* Transizioni */
  --transition-fast: 150ms ease;
  --transition-base: 300ms ease;
  --transition-slow: 500ms ease;

  /* Header */
  --header-h: 72px;
}

/* ── Reset ── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-h);
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100svh;
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--color-white);
  background-color: var(--color-navy);
  overflow-x: hidden;
}

/* Spinge il footer in fondo alla viewport quando il contenuto è poco (es. /gallery vuota) */
body > main {
  flex: 1;
}

img, svg {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

ul {
  list-style: none;
}

button {
  cursor: pointer;
  font-family: inherit;
  border: none;
  background: none;
}

/* ── Utility ── */
.container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.mono {
  font-family: var(--font-mono);
  font-size: 0.875rem;
  letter-spacing: 0.02em;
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
}

/* ── Bottoni ── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-sans);
  font-weight: 600;
  border-radius: var(--radius-sm);
  transition: background-color var(--transition-fast),
              color var(--transition-fast),
              transform var(--transition-fast),
              box-shadow var(--transition-fast);
  white-space: nowrap;
  text-decoration: none;
  line-height: 1;
}

.btn:focus-visible {
  outline: 2px solid var(--color-yellow);
  outline-offset: 3px;
}

.btn--sm  { font-size: 0.8125rem; padding: 0.5rem 1rem; }
.btn--md  { font-size: 0.9375rem; padding: 0.75rem 1.5rem; }
.btn--lg  { font-size: 1rem;      padding: 0.875rem 1.875rem; }

.btn--pill { border-radius: var(--radius-full); }

.btn--yellow {
  background-color: var(--color-yellow);
  color: var(--color-navy);
}
.btn--yellow:hover {
  background-color: #e8b900;
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(245, 200, 66, 0.35);
}

.btn--outline {
  background-color: rgba(255,255,255,0.06);
  color: var(--color-white);
  border: 1.5px solid rgba(255,255,255,0.45);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
}
.btn--outline:hover {
  border-color: var(--color-white);
  background-color: rgba(255,255,255,0.08);
  transform: translateY(-1px);
}

/* ── Badge ── */
.badge {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: var(--radius-full);
  padding: 0.2em 0.75em;
  line-height: 1.6;
}

.badge--accredito     { background: rgba(155,164,178,0.2); color: var(--color-ltgray); border: 1px solid rgba(155,164,178,0.3); }
.badge--networking    { background: rgba(55,91,118,0.4);   color: #a8c8e0;             border: 1px solid rgba(55,91,118,0.6); }
.badge--workshop      { background: rgba(99,112,130,0.3);  color: var(--color-ltgray); border: 1px solid rgba(99,112,130,0.4); }
.badge--pranzo        { background: rgba(72,79,90,0.4);    color: var(--color-ltgray); border: 1px solid rgba(72,79,90,0.6); }
.badge--plenaria      { background: rgba(55,91,118,0.3);   color: #a8c8e0;             border: 1px solid rgba(55,91,118,0.5); }
.badge--tavola-rotonda{ background: rgba(245,200,66,0.15); color: var(--color-yellow); border: 1px solid rgba(245,200,66,0.4); }
.badge--aperitivo     { background: rgba(155,164,178,0.15);color: var(--color-ltgray); border: 1px solid rgba(155,164,178,0.25); }

/* ── Section base ── */
.section {
  padding-block: var(--space-2xl);
  position: relative;
  overflow: hidden;
}

.section > .container {
  position: relative;
  z-index: 1;
}

/* ── Filigrana decorativa di sezione ── */
.section__watermark {
  position: absolute;
  top: 50%;
  /* niente transform statico qui: il centraggio verticale (yPercent -50) e il
     parallasse sono gestiti insieme da GSAP in site_animations.js, altrimenti
     l'inline style di GSAP sovrascriverebbe questo transform */
  width: clamp(500px, 60vw, 1400px);
  max-width: none; /* il reset globale "img { max-width:100% }" altrimenti la ricomprime al contenitore */
  height: auto;
  opacity: 0.05;
  z-index: 0;
  pointer-events: none;
  user-select: none;
  will-change: transform; /* parallasse GSAP — senza, su mobile lo scrub può non ricomporre il layer */
  /* le icone sorgente sono piccole (~400-450px) e vengono ingrandite parecchio:
     un leggero blur smorza l'effetto seghettato (aliasing) dell'upscaling */
  filter: blur(0.6px);
}

.section__watermark--left  { left: clamp(-30px, -2vw, 10px); }
.section__watermark--right { right: clamp(-30px, -2vw, 10px); }

/* su sfondi scuri la filigrana (nera) va invertita in bianco per restare leggibile */
.section__watermark--invert { filter: invert(1) brightness(2) blur(0.6px); }

@media (max-width: 768px) {
  .section__watermark { width: clamp(320px, 90vw, 700px); opacity: 0.05; }
}

.section-header {
  margin-bottom: var(--space-xl);
  text-align: center;
}

.section-title {
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--color-white);
}

/* ════════════════════════════════════════════════
   NAVIGATION
   ════════════════════════════════════════════════ */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  height: var(--header-h);
  overflow: hidden; /* evita che backdrop-filter sbordi visivamente */
  /* isola il backdrop-filter nel proprio layer di compositing: alcuni
     browser lo "sbordano" fuori dai bordi dell'elemento dopo un reflow
     (es. ripristino dello scroll al refresh) senza questo hint */
  transform: translateZ(0);
  transition: background-color var(--transition-base),
              backdrop-filter var(--transition-base),
              box-shadow var(--transition-base);
}

.site-header.scrolled {
  background-color: rgba(41, 55, 69, 0.96);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 1px 0 rgba(255,255,255,0.06);
}

.site-header.nav-open {
  background-color: rgba(41, 55, 69, 0.97);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  gap: var(--space-lg);
}

.nav__logo {
  flex-shrink: 0;
  transition: opacity var(--transition-fast);
}
.nav__logo:hover { opacity: 0.8; }

.nav__logo-img {
  height: 52px;
  width: auto;
}

/* nav__desktop – link visibili su desktop, nascosti su mobile */
.nav__desktop {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  list-style: none;
}

/* nav__menu – overlay mobile (fuori dall'header, sempre display:none tranne quando .open) */
.nav__menu {
  display: none;
  position: fixed;
  top: 0;
  left: 0; right: 0; bottom: 0;
  background: rgba(41,55,69,0.97);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  padding: calc(var(--header-h) + 0.5rem) var(--space-md) var(--space-md);
  flex-direction: column;
  align-items: stretch;
  gap: 0.25rem;
  overflow-y: auto;
  z-index: 99;
  list-style: none;
}

.nav__menu.open {
  display: flex;
}

.nav__link {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  color: rgba(255,255,255,0.8);
  padding: 0.4rem 0.75rem;
  border-radius: var(--radius-sm);
  transition: color var(--transition-fast), background-color var(--transition-fast);
}
.nav__link:hover,
.nav__link--active {
  color: var(--color-white);
  background-color: rgba(255,255,255,0.07);
}

.nav__link--active {
  color: var(--color-yellow) !important;
  background-color: transparent;
}

.nav__cta {
  margin-left: 0.5rem;
  padding: 0.5rem 1.25rem;
  border-radius: var(--radius-full);
}

/* Voce Sponsor in evidenza nel nav */
.nav__link--sponsor {
  color: var(--color-yellow) !important;
  font-weight: 600;
}
.nav__link--sponsor:hover {
  background-color: rgba(245, 200, 66, 0.12) !important;
}

/* Pulsante chiudi menu – visibile solo mobile (dentro il menu) */
.nav__close-item {
  display: none;
}

.nav__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  margin-left: auto;
  border-radius: var(--radius-sm);
  color: rgba(255,255,255,0.7);
  transition: color var(--transition-fast), background-color var(--transition-fast);
}

.nav__close:hover {
  color: var(--color-white);
  background-color: rgba(255,255,255,0.1);
}

/* Burger – nascosto su desktop */
.nav__burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 36px;
  height: 36px;
  padding: 6px;
  border-radius: var(--radius-sm);
  background: transparent;
  transition: background-color var(--transition-fast);
}
.nav__burger:hover { background-color: rgba(255,255,255,0.08); }

/* Con tutte le voci del nav (incl. VENOG) il desktop nav va in overflow prima
   dei 768px del breakpoint "mobile" generale: qui switchiamo prima al burger,
   senza toccare il resto delle regole mobile-only (quelle restano a 768px). */
@media (max-width: 1150px) {
  .nav__burger { display: flex; }
  .nav__desktop { display: none; }
}

.nav__burger span {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--color-white);
  border-radius: 2px;
  transition: transform var(--transition-base), opacity var(--transition-base);
}
.nav__burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__burger.open span:nth-child(2) { opacity: 0; }
.nav__burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ════════════════════════════════════════════════
   HERO
   ════════════════════════════════════════════════ */
.hero {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  padding-top: var(--header-h);
}

.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero__bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  will-change: transform; /* parallasse GSAP */
}

.hero__overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, rgba(15,20,26,0.16), transparent 42px),
    linear-gradient(
      135deg,
      rgba(41, 55, 69, 0.88) 0%,
      rgba(41, 55, 69, 0.72) 50%,
      rgba(55, 91, 118, 0.60) 100%
    );
}

.hero__content {
  position: relative;
  z-index: 1;
  margin-top: 100px;
}

.hero__content > * {
  max-width: 780px;
}

.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  color: var(--color-ltgray);
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--radius-full);
  padding: 0.4em 1em;
  margin-bottom: var(--space-md);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  opacity: 0; /* stato iniziale GSAP */
  transform: translateY(20px);
}

.hero__badge-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-yellow);
  animation: pulse-dot 2s ease-in-out infinite;
  flex-shrink: 0;
}

@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.5; transform: scale(0.8); }
}

.hero__title {
  font-size: clamp(2.5rem, 7vw, 5rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.03em;
  margin-bottom: var(--space-sm);
  opacity: 0;
  transform: translateY(30px);
}

.hero__subtitle {
  font-size: clamp(1rem, 2.5vw, 1.35rem);
  font-weight: 400;
  color: rgba(255,255,255,0.75);
  margin-bottom: var(--space-md);
  opacity: 0;
  transform: translateY(20px);
}

.hero__organizer {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.8125rem;
  color: rgba(255,255,255,0.5);
  margin-bottom: var(--space-lg);
  opacity: 0;
}

.hero__organizer-logo {
  height: 28px;
  width: auto;
  opacity: 0.7;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-bottom: var(--space-xl);
  opacity: 0;
  transform: translateY(20px);
}

/* Countdown */
.countdown {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius-md);
  padding: var(--space-sm) var(--space-md);
  opacity: 0;
  transform: translateY(20px);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
}

.countdown__unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 52px;
}

.countdown__value {
  font-family: var(--font-mono);
  font-size: 2rem;
  font-weight: 500;
  line-height: 1;
  color: var(--color-yellow);
  letter-spacing: -0.02em;
}

.countdown__label {
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-ltgray);
  margin-top: 0.25rem;
}

.countdown__sep {
  font-family: var(--font-mono);
  font-size: 1.5rem;
  color: var(--color-midgray);
  padding-bottom: 1rem;
  align-self: center;
}

/* Freccia scroll */
.hero__scroll {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  color: rgba(255,255,255,0.4);
  transition: color var(--transition-base);
  animation: bounce-arrow 2.5s ease-in-out infinite;
}
.hero__scroll:hover { color: var(--color-white); }

@keyframes bounce-arrow {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%       { transform: translateX(-50%) translateY(6px); }
}

/* ════════════════════════════════════════════════
   GALLERY (teaser homepage)
   ════════════════════════════════════════════════ */
.gallery-teaser {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  overflow: hidden;
  text-align: center;
}

.gallery-teaser__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.gallery-teaser__bg-img {
  position: absolute;
  top: -55%;
  left: 0;
  width: 100%;
  height: 210%; /* oversize: copre il traslato del parallasse (stessa intensità dell'hero) senza scoprire il bordo */
  object-fit: cover;
  object-position: center center;
  will-change: transform; /* parallasse GSAP */
}

.gallery-teaser__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(41, 55, 69, 0.90) 0%,
    rgba(41, 55, 69, 0.78) 50%,
    rgba(72, 79, 90, 0.70) 100%
  );
}

.gallery-teaser__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 640px;
  padding-block: var(--space-2xl);
}

.gallery-teaser__text {
  color: rgba(255,255,255,0.8);
  font-size: 1.0625rem;
  line-height: 1.6;
  margin-bottom: var(--space-md);
}

/* ════════════════════════════════════════════════
   ABOUT
   ════════════════════════════════════════════════ */
.section--about {
  background-color: var(--color-tone-1);
  background-image:
    linear-gradient(to top, rgba(15,20,26,0.16), transparent 42px),
    repeating-linear-gradient(
      45deg,
      transparent,
      transparent 18px,
      rgba(255,255,255,0.03) 18px,
      rgba(255,255,255,0.03) 19px
    );
}

.about__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
  align-items: start;
}

.about__text {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.about__content {
  color: rgba(255,255,255,0.78);
  font-size: 1.0625rem;
  line-height: 1.75;
  white-space: pre-line; /* mantiene gli a capo scritti in admin senza HTML */
}

.about__content a {
  color: var(--color-yellow);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.about__content a:hover { color: #e8b900; }

/* ════════════════════════════════════════════════
   AGENDA
   ════════════════════════════════════════════════ */
.section--agenda {
  background-color: var(--color-tone-2);
  background-image: linear-gradient(to top, rgba(15,20,26,0.16), transparent 42px);
}

.timeline {
  position: relative;
  max-width: 850px;
  margin-inline: auto;
}

/* Linea verticale */
.timeline::before {
  content: '';
  position: absolute;
  left: 140px;
  top: 0; bottom: 0;
  width: 2px;
  background: linear-gradient(to bottom, transparent, var(--color-steel) 5%, var(--color-steel) 95%, transparent);
}

.timeline__item {
  display: grid;
  grid-template-columns: 140px 1fr;
  align-items: start;
  gap: var(--space-lg);
  padding-block: var(--space-md);
  position: relative;
  opacity: 0;
  transform: translateY(24px);
}

/* Pallino sulla linea */
.timeline__item::before {
  content: '';
  position: absolute;
  left: 134px;
  /* allineato al centro della prima riga di testo: padding-block + (line-height 1.5rem / 2) - raggio pallino */
  top: calc(var(--space-md) + 0.75rem - 7px);
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--color-navy);
  border: 2px solid var(--color-steel);
  transition: border-color var(--transition-base), background-color var(--transition-base);
}

.timeline__item--featured::before {
  border-color: var(--color-yellow);
  background: rgba(245,200,66,0.15);
  width: 16px;
  height: 16px;
  left: 133px;
}

.timeline__item--featured .timeline__content {
  background: rgba(245,200,66,0.05);
  border-color: rgba(245,200,66,0.25);
}

.timeline__time {
  font-size: 1rem;
  text-align: right;
  padding-right: 1.75rem; /* spazio per il pallino ::before che inizia a 134px */
  color: var(--color-ltgray);
  line-height: 1.5;
}

.timeline__content {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius-md);
  padding: var(--space-xs) var(--space-md);
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  transition: border-color var(--transition-base);
}
.timeline__content:hover { border-color: rgba(255,255,255,0.15); }

.timeline__title {
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--color-white);
  line-height: 1.35;
}

.timeline__speaker,
.timeline__note {
  font-size: 0.875rem;
  color: var(--color-ltgray);
  line-height: 1.5;
}

.timeline__note a {
  color: var(--color-yellow);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.timeline__note a:hover { color: #e8b900; }

.timeline__participants {
  list-style: none;
  margin-top: 0.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.timeline__participants li {
  font-size: 1rem;
  color: #cdd1d8; /* via di mezzo tra --color-white (title) e --color-ltgray (note) */
}

.timeline__speaker-name {
  color: #cdd1d8;
  font-weight: 500;
}

.timeline__speaker-meta {
  font-style: italic;
  color: #cdd1d8;
}

/* ════════════════════════════════════════════════
   WORKSHOP
   ════════════════════════════════════════════════ */
.section--workshops {
  background-color: var(--color-tone-3);
  background-image:
    linear-gradient(to top, rgba(15,20,26,0.16), transparent 42px),
    radial-gradient(
      circle,
      rgba(15,20,26,0.08) 1px,
      transparent 1px
    );
  background-size: auto, 24px 24px;
}

.section-subtitle {
  font-size: 1rem;
  color: rgba(255,255,255,0.55);
  margin-top: 0.75rem;
}

.workshops-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
}

.workshop-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius-lg);
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  transition: border-color var(--transition-base), transform var(--transition-base), box-shadow var(--transition-base);
  opacity: 0;
  transform: translateY(24px);
}

.workshop-card:hover {
  border-color: rgba(245,200,66,0.35);
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0,0,0,0.3);
}

.workshop-card__number {
  font-size: 2.5rem;
  font-weight: 500;
  color: rgba(245,200,66,0.2);
  line-height: 1;
  letter-spacing: -0.04em;
}

.workshop-card__time {
  align-self: flex-start;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--color-navy);
  background: var(--color-yellow);
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
}

.workshop-card__speakers-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  font-size: 0.875rem;
}

.workshop-card__sponsor {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(255,255,255,0.07);
  margin-top: 0.6rem;
}

.workshop-card__sponsor-logo-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  width: 180px;
  box-sizing: border-box;
}

.workshop-card__sponsor-logo {
  max-height: 100%;
  max-width: 100%;
  object-fit: contain;
}

.workshop-card__body {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  flex: 1;
}

.workshop-card__title {
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--color-white);
  line-height: 1.3;
}

.workshop-card__desc {
  font-size: 1rem;
  color: var(--color-ltgray);
  line-height: 1.7;
  flex: 1;
}

.workshop-card__meta {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(255,255,255,0.07);
  margin-top: auto;
}

.workshop-card__speaker {
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--color-ltgray);
}

.workshop-card__company {
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--color-ltgray);
  font-style: italic;

}

/* ════════════════════════════════════════════════
   NETWORKING ONE-TO-ONE
   ════════════════════════════════════════════════ */

.section--meeting-tool {
  background-color: var(--color-tone-4);
  background-image: linear-gradient(to top, rgba(15,20,26,0.16), transparent 42px);
}

.section--meeting-tool .section-title { color: var(--color-tone-ink); }

.meeting-tool__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2xl);
  align-items: center;
}

.meeting-tool__text {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.meeting-tool__lead {
  color: rgba(22,35,46,0.72);
  font-size: 1.0625rem;
  line-height: 1.7;
  margin-block: var(--space-md);
}

.meeting-tool__features {
  list-style: none;
  padding: 0;
  margin-block: var(--space-lg) var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.meeting-tool__features li {
  color: rgba(22,35,46,0.72);
}

.meeting-tool__features li::before,
.meeting-tool__features li::after {
  content: '–';
  color: var(--color-yellow);
}

.meeting-tool__features li::before { margin-right: 0.4em; }
.meeting-tool__features li::after { margin-left: 0.4em; }

/* ════════════════════════════════════════════════
   SPEAKERS
   ════════════════════════════════════════════════ */
.section--speakers {
  background-color: var(--color-tone-4);
  background-image:
    linear-gradient(to top, rgba(15,20,26,0.16), transparent 42px),
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 23px,
      rgba(15,20,26,0.04) 23px,
      rgba(15,20,26,0.04) 24px
    ),
    repeating-linear-gradient(
      90deg,
      transparent,
      transparent 23px,
      rgba(15,20,26,0.04) 23px,
      rgba(15,20,26,0.04) 24px
    );
}

.speakers-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-md);
}

/* Card speaker */
.speaker-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius-lg);
  padding: var(--space-md);
  text-align: center;
  cursor: pointer;
  transition: transform var(--transition-base),
              box-shadow var(--transition-base),
              border-color var(--transition-base);
  opacity: 0;
  transform: translateY(20px);
}

.speaker-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0,0,0,0.35);
  border-color: rgba(245,200,66,0.45);
}

.speaker-card:focus-visible {
  outline: 2px solid var(--color-yellow);
  outline-offset: 2px;
}

/* Contenitore esagonale — usa un wrapper con clip-path */
.speaker-card__photo-wrap {
  width: 104px;
  height: 104px;
  margin-inline: auto;
  margin-bottom: var(--space-sm);
  position: relative;
  flex-shrink: 0;
}

/* Bordo esagonale: pseudo-elemento leggermente più grande */
.speaker-card__photo-wrap::before {
  content: '';
  position: absolute;
  inset: -3px;
  background: rgba(255,255,255,0.15);
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  transition: background var(--transition-base);
}

.speaker-card:hover .speaker-card__photo-wrap::before {
  background: var(--color-yellow);
}

.speaker-card__photo-inner {
  width: 100%;
  height: 100%;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  overflow: hidden;
  background: var(--color-steel);
  position: relative;
}

.speaker-card__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}

/* Placeholder iniziali quando manca la foto */
.speaker-card__initials {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  font-weight: 700;
  color: rgba(255,255,255,0.6);
  background: var(--color-steel);
}

.speaker-card__name {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--color-white);
  margin-bottom: 0.2rem;
  line-height: 1.3;
}

.speaker-card__role {
  font-size: 0.8125rem;
  color: var(--color-ltgray);
  line-height: 1.4;
}

.speaker-card__company {
  font-size: 0.8125rem;
  color: var(--color-yellow);
  font-weight: 500;
  margin-top: 0.2rem;
}

/* Modale speaker */
.speaker-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-md);
}

.speaker-modal[hidden] { display: none; }

.speaker-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.7);
  backdrop-filter: blur(4px);
}

.speaker-modal__box {
  position: relative;
  z-index: 1;
  background: var(--color-slate);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  max-width: 780px;
  width: 100%;
  display: flex;
  gap: var(--space-lg);
  align-items: flex-start;
  box-shadow: 0 24px 64px rgba(0,0,0,0.5);
}

.speaker-modal__close {
  position: absolute;
  top: var(--space-sm);
  right: var(--space-sm);
  color: var(--color-ltgray);
  padding: 0.4rem;
  border-radius: var(--radius-sm);
  transition: color var(--transition-fast), background-color var(--transition-fast);
}
.speaker-modal__close:hover {
  color: var(--color-white);
  background-color: rgba(255,255,255,0.08);
}

.speaker-modal__photo-wrap {
  flex-shrink: 0;
  width: 200px;
  height: 200px;
  position: relative;
}

.speaker-modal__photo-wrap::before {
  content: '';
  position: absolute;
  inset: -3px;
  background: var(--color-steel);
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}

.speaker-modal__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  display: block;
  position: relative;
}

.speaker-modal__name {
  font-size: 1.125rem;
  font-weight: 700;
  margin-bottom: 0.2rem;
}

.speaker-modal__role {
  font-size: 0.875rem;
  color: var(--color-ltgray);
  margin-bottom: var(--space-sm);
}

.speaker-modal__bio {
  font-size: 0.875rem;
  color: rgba(255,255,255,0.75);
  line-height: 1.7;
  margin-bottom: var(--space-sm);
}

.speaker-modal__socials {
  display: flex;
  gap: 0.75rem;
}
.speaker-modal__socials a {
  color: var(--color-ltgray);
  transition: color var(--transition-fast);
}
.speaker-modal__socials a:hover { color: var(--color-yellow); }

/* ════════════════════════════════════════════════
   SPONSORS
   ════════════════════════════════════════════════ */
.section--sponsors {
  background-color: var(--color-white);
  background-image: linear-gradient(to top, rgba(15,20,26,0.16), transparent 42px);
}

.section--sponsors .section-title {
  color: var(--color-navy);
}

.sponsors__tier {
  margin-bottom: var(--space-2xl);
}

/* ── Divider a "pill" sopra ogni tier sponsor ── */
.sponsors__tier-label {
  position: relative;
  width: 100%;
  max-width: 640px;
  margin: 0 auto var(--space-md);
}

.sponsors__tier-label .sponsors__tier-shadow {
  overflow: hidden;
  height: 20px;
}

.sponsors__tier-label .sponsors__tier-shadow::after {
  content: '';
  display: block;
  margin: -25px auto 0;
  width: 100%;
  height: 25px;
  border-radius: 125px / 12px;
  box-shadow: 0 0 8px rgba(var(--tier-rgb), 0.35);
}

.sponsors__tier-label .sponsors__tier-pill {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-bottom: -16px;
  background: var(--color-white);
  border: 1px solid rgba(var(--tier-rgb), 0.5);
  border-radius: var(--radius-full);
  box-shadow:
    0 0 10px rgba(var(--tier-rgb), 0.35),
    0 2px 6px rgba(0,0,0,0.15);
  padding: 8px 28px;
}

.sponsors__tier-label .sponsors__tier-pill span {
  color: rgb(var(--tier-rgb));
  font-family: var(--font-mono);
  font-weight: 600;
  letter-spacing: 0.12em;
  font-size: 0.8125rem;
  text-transform: uppercase;
  white-space: nowrap;
}

.sponsors__tier-label--platinum    { --tier-rgb: 93,122,153; }
.sponsors__tier-label--gold        { --tier-rgb: 184,134,11; }
.sponsors__tier-label--silver      { --tier-rgb: 124,136,150; }
.sponsors__tier-label--special     { --tier-rgb: 184,134,11; }
.sponsors__tier-label--networking  { --tier-rgb: 168,61,130; }

.sponsors__logos {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: center;
  gap: var(--space-xl);
}

.sponsors__logo-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.sponsors__logo-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  transition: padding .2s;
}
.sponsors__logo-wrap img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
  opacity: 0.85;
  transition: opacity var(--transition-base);
}
.sponsors__logo-wrap:hover img { opacity: 1; }

.sponsors__name-fallback {
  color: var(--color-navy);
  font-weight: 600;
  font-size: 0.9375rem;
  text-align: center;
}

.sponsors__logo-caption {
  font-size: 0.8125rem;
  color: rgba(41,55,69,0.6);
  text-align: center;
}

/* Dimensioni contenitore per tier */
.sponsors__logos--platinum .sponsors__logo-wrap { width: 220px; height: 80px; }
.sponsors__logos--gold     .sponsors__logo-wrap { width: 190px; height: 80px; }
.sponsors__logos--silver   .sponsors__logo-wrap { width: 170px; height: 70px; }
.sponsors__logos--special  .sponsors__logo-wrap { width: 170px; height: 70px; }
.sponsors__logos--networking   .sponsors__logo-wrap { width: 170px; height: 70px; }

/* Placeholder temporanei (da rimuovere quando arrivano i loghi reali) */
.sponsor-placeholder {
  background: rgba(41,55,69,0.05);
  border: 1px dashed rgba(41,55,69,0.2);
  border-radius: var(--radius-sm);
  padding: 1rem 2rem;
  font-size: 0.8125rem;
  color: rgba(41,55,69,0.35);
}

.sponsors__cta {
  text-align: center;
  margin-top: var(--space-xl);
  padding-top: var(--space-xl);
  border-top: 1px solid rgba(41,55,69,0.1);
}

.sponsors__cta p {
  font-size: 1.0625rem;
  color: rgba(41,55,69,0.75);
  margin-bottom: var(--space-sm);
}

/* ════════════════════════════════════════════════
   VENOG
   ════════════════════════════════════════════════ */
.section--venog {
  background-color: var(--color-tone-3);
  background-image:
    linear-gradient(to top, rgba(15,20,26,0.16), transparent 42px),
    radial-gradient(
      circle,
      rgba(15,20,26,0.08) 1px,
      transparent 1px
    );
  background-size: auto, 24px 24px;
}

.section--venog .section-title { color: var(--color-tone-ink); }

.venog__content {
  max-width: 720px;
  margin-inline: auto;
  color: rgba(22,35,46,0.72);
  font-size: 1.0625rem;
  line-height: 1.7;
  text-align: center;
  white-space: pre-line; /* mantiene gli a capo scritti in admin senza HTML */
}

.venog__content a {
  color: #b8860b;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.venog__content a:hover { color: #96700a; }

/* ════════════════════════════════════════════════
   PARTECIPANTI
   ════════════════════════════════════════════════ */
.section--partecipanti {
  background-color: var(--color-tone-5);
  background-image: linear-gradient(to top, rgba(15,20,26,0.16), transparent 42px);
}

.partecipanti__stats {
  display: flex;
  gap: var(--space-lg);
  justify-content: center;
  margin-bottom: var(--space-xl);
}

.partecipanti__stat-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius-md);
  padding: var(--space-lg) var(--space-xl);
  min-width: 160px;
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
}

.partecipanti__stat-number {
  font-size: 3rem;
  font-weight: 700;
  line-height: 1;
  color: var(--color-yellow);
  font-variant-numeric: tabular-nums;
}

.partecipanti__stat-label {
  font-size: 0.875rem;
  color: var(--color-ltgray);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.partecipanti__table-wrap {
  max-width: 860px;
  margin: 0 auto;
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
}

.partecipanti__toggle {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--radius-sm);
  color: rgba(255,255,255,0.8);
  cursor: pointer;
  font-size: 0.9375rem;
  padding: 0.75rem 1.25rem;
  width: 100%;
  transition: background 0.2s, color 0.2s;
}

.partecipanti__toggle:hover {
  background: rgba(255,255,255,0.09);
  color: #fff;
}

.partecipanti__toggle-icon {
  margin-left: auto;
  transition: transform 0.3s ease;
  flex-shrink: 0;
}

.partecipanti__toggle[aria-expanded="true"] .partecipanti__toggle-icon {
  transform: rotate(180deg);
}

.partecipanti__table-container {
  margin-top: 0.5rem;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.partecipanti__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

.partecipanti__table thead tr {
  background: rgba(255,255,255,0.06);
}

.partecipanti__table th {
  padding: 0.75rem 1rem;
  text-align: left;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--color-ltgray);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.partecipanti__table td {
  padding: 0.6rem 1rem;
  color: rgba(255,255,255,0.82);
  border-bottom: 1px solid rgba(255,255,255,0.05);
}

.partecipanti__table tbody tr:last-child td {
  border-bottom: none;
}

.partecipanti__table tbody tr:hover td {
  background: rgba(255,255,255,0.04);
}

.partecipanti__note {
  font-size: 0.8125rem;
  color: rgba(255,255,255,0.5);
  padding: 0.75rem 1rem 0;
}

.partecipanti__loading {
  text-align: center;
  color: var(--color-ltgray);
  padding: 1.5rem !important;
  font-style: italic;
}

@media (max-width: 768px) {
  .partecipanti__stats {
    flex-direction: column;
    align-items: center;
  }

  .partecipanti__stat-card {
    width: 100%;
    max-width: 260px;
  }

  .partecipanti__table th:first-child,
  .partecipanti__table td:first-child {
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* ════════════════════════════════════════════════
   VENUE
   ════════════════════════════════════════════════ */
.section--venue {
  background-color: var(--color-tone-6);
  background-image:
    linear-gradient(to top, rgba(15,20,26,0.16), transparent 42px),
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 23px,
      rgba(255,255,255,0.03) 23px,
      rgba(255,255,255,0.03) 24px
    ),
    repeating-linear-gradient(
      90deg,
      transparent,
      transparent 23px,
      rgba(255,255,255,0.03) 23px,
      rgba(255,255,255,0.03) 24px
    );
}

.venue__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-xl);
  align-items: start;
}

.venue__name {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}

.venue__address {
  font-size: 0.9375rem;
  color: var(--color-ltgray);
  line-height: 1.6;
  margin-bottom: var(--space-lg);
}

.venue__directions {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.venue__direction-item {
  display: flex;
  gap: var(--space-sm);
  align-items: flex-start;
}

.venue__direction-icon {
  font-size: 1.25rem;
  flex-shrink: 0;
  margin-top: 0.1rem;
  width: 1.5rem;
  text-align: center;
}

.venue__direction-item strong {
  display: block;
  font-size: 0.9375rem;
  color: var(--color-white);
  margin-bottom: 0.2rem;
}

.venue__direction-item p {
  font-size: 0.875rem;
  color: var(--color-ltgray);
  line-height: 1.55;
}

.venue__map {
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.08);
}

.venue__map iframe {
  display: block;
  filter: invert(90%) hue-rotate(180deg); /* dark map */
}

/* ════════════════════════════════════════════════
   TESTI SCURI PER LE SEZIONI CHIARE
   Agenda, workshops, speakers e partecipanti hanno ora uno sfondo chiaro
   (rampa cromatica): i colori chiaro-su-scuro delle rispettive card/testi
   vanno invertiti per restare leggibili.
   ════════════════════════════════════════════════ */

/* Workshops */
.section--workshops .section-subtitle { color: rgba(22,35,46,0.6); }
.section--workshops .workshop-card { background: linear-gradient(160deg, #f3f6fa 0%, #dce4ee 100%); border-color: rgba(22,35,46,0.1); overflow: hidden; }
.section--workshops .workshop-card__meta { border-top-color: rgba(22,35,46,0.12); }
.section--workshops .workshop-card__sponsor {
  background: var(--color-white);
  margin: 0.6rem calc(-1 * var(--space-md)) calc(-1 * var(--space-md));
  padding: 0.75rem var(--space-md);
  border-top-color: rgba(22,35,46,0.12);
  justify-content: center;
}
.section--workshops .workshop-card__title { color: var(--color-tone-ink); }
.section--workshops .workshop-card__desc { color: rgba(22,35,46,0.68); }
.section--workshops .workshop-card__speaker,
.section--workshops .workshop-card__company { color: rgba(22,35,46,0.65); }
.section--workshops .section-title { color: var(--color-tone-ink); }

/* Speakers */
.section--speakers .speaker-card {
  background: rgba(197,211,219,0.5);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-color: rgba(22,35,46,0.14);
}
.section--speakers .speaker-card__photo-wrap::before { background: rgba(22,35,46,0.18); }
.section--speakers .speaker-card__name { color: var(--color-tone-ink); }
.section--speakers .speaker-card__role { color: rgba(22,35,46,0.65); }
.section--speakers .speaker-card__company { color: #b8860b; }
.section--speakers .section-title { color: var(--color-tone-ink); }

/* Partecipanti */
.section--partecipanti .partecipanti__stat-card { background: rgba(22,35,46,0.05); border-color: rgba(22,35,46,0.14); }
.section--partecipanti .partecipanti__stat-number { color: #b8860b; }
.section--partecipanti .partecipanti__stat-label { color: rgba(22,35,46,0.6); }
.section--partecipanti .partecipanti__toggle { background: rgba(22,35,46,0.05); border-color: rgba(22,35,46,0.18); color: rgba(22,35,46,0.8); }
.section--partecipanti .partecipanti__toggle:hover { background: rgba(22,35,46,0.09); color: var(--color-tone-ink); }
.section--partecipanti .partecipanti__table-container { border-color: rgba(22,35,46,0.14); }
.section--partecipanti .partecipanti__table thead tr { background: rgba(22,35,46,0.07); }
.section--partecipanti .partecipanti__table th { color: rgba(22,35,46,0.6); border-bottom-color: rgba(22,35,46,0.14); }
.section--partecipanti .partecipanti__table td { color: rgba(22,35,46,0.82); border-bottom-color: rgba(22,35,46,0.08); }
.section--partecipanti .partecipanti__table tbody tr:hover td { background: rgba(22,35,46,0.05); }
.section--partecipanti .partecipanti__note { color: rgba(22,35,46,0.55); }
.section--partecipanti .partecipanti__loading { color: rgba(22,35,46,0.6); }
.section--partecipanti .section-title { color: var(--color-tone-ink); }

/* ════════════════════════════════════════════════
   CONFINI DIAGONALI TRA SEZIONI
   Ogni sezione (tranne la prima, la hero) ha un taglio diagonale in alto
   che rivela il bordo inferiore (con ombra) della sezione precedente.
   L'inclinazione alterna verso per dare ritmo, in ordine fisso di pagina.
   ════════════════════════════════════════════════ */
.section--about,
.section--workshops,
.section--sponsors,
.section--venue {
  clip-path: polygon(0 0, 100% 24px, 100% 100%, 0 100%);
  margin-top: -24px;
}
.section--agenda,
.section--speakers,
.section--venog,
.section--partecipanti,
.section--meeting-tool {
  clip-path: polygon(0 24px, 100% 0, 100% 100%, 0 100%);
  margin-top: -24px;
}
.site-footer {
  position: relative;
  clip-path: polygon(0 24px, 100% 0, 100% 100%, 0 100%);
  margin-top: -24px;
}

/* ════════════════════════════════════════════════
   BANNER MEETING TOOL FISSO
   ════════════════════════════════════════════════ */

.meeting-tool-banner {
  position: fixed;
  left: var(--space-md);
  top: 50%;
  transform: translateY(-50%) translateX(-120%);
  z-index: 900;
  background: var(--color-navy);
  border: 1px solid rgba(245,200,66,0.4);
  border-radius: var(--radius-md);
  padding: var(--space-sm) var(--space-md);
  max-width: 260px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.4);
  opacity: 0;
  transition: transform 0.5s cubic-bezier(0.34,1.56,0.64,1), opacity 0.4s ease;
}

.meeting-tool-banner.is-visible {
  transform: translateY(-50%) translateX(0);
  opacity: 1;
}

.meeting-tool-banner.is-hidden {
  transform: translateY(-50%) translateX(-120%);
  opacity: 0;
  pointer-events: none;
}

.meeting-tool-banner__close {
  position: absolute;
  top: 8px;
  right: 10px;
  background: none;
  border: none;
  color: var(--color-ltgray);
  cursor: pointer;
  font-size: 0.75rem;
  line-height: 1;
  padding: 2px 4px;
  transition: color var(--transition-fast);
}

.meeting-tool-banner__close:hover { color: var(--color-white); }

.meeting-tool-banner__label {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-yellow);
  margin-bottom: 0.25rem;
}

.meeting-tool-banner__text {
  font-size: 0.875rem;
  color: var(--color-ltgray);
  line-height: 1.4;
  margin-bottom: var(--space-sm);
}

.meeting-tool-banner__cta {
  display: block;
  text-align: center;
  background: var(--color-yellow);
  color: var(--color-navy);
  font-weight: 700;
  font-size: 0.875rem;
  padding: 0.5rem 1rem;
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: opacity var(--transition-fast);
}

.meeting-tool-banner__cta:hover { opacity: 0.88; }

/* ════════════════════════════════════════════════
   FOOTER
   ════════════════════════════════════════════════ */
.site-footer {
  background-color: var(--color-footer);
  padding-block: var(--space-lg) var(--space-md);
}

.footer__grid {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-sm);
}

.footer__brand { flex-shrink: 0; }

.footer__socials {
  flex: 1;
  display: flex;
  justify-content: center;
  gap: var(--space-sm);
}

.footer__logo {
  height: 48px;
  width: auto;
}

.footer__socials a {
  color: var(--color-midgray);
  transition: color var(--transition-fast);
  display: flex;
}
.footer__socials a:hover { color: var(--color-yellow); }

.footer__nav-title {
  font-size: 0.6875rem;
  font-family: var(--font-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-midgray);
  margin-bottom: var(--space-sm);
}

.footer__nav ul {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.footer__nav a {
  font-size: 0.875rem;
  color: rgba(255,255,255,0.6);
  transition: color var(--transition-fast);
}
.footer__nav a:hover { color: var(--color-white); }

.footer__contact p {
  font-size: 0.875rem;
  color: rgba(255,255,255,0.6);
  line-height: 1.6;
  margin-bottom: 0.5rem;
}

.footer__contact a {
  color: var(--color-ltgray);
  transition: color var(--transition-fast);
}
.footer__contact a:hover { color: var(--color-yellow); }

.footer__org,
.footer__prev {
  margin-top: var(--space-sm) !important;
  padding-top: var(--space-sm);
  border-top: 1px solid rgba(255,255,255,0.06);
}

.footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding-top: var(--space-md);
  border-top: 1px solid rgba(255,255,255,0.06);
  font-size: 0.8125rem;
  color: var(--color-midgray);
}

.footer__legal {
  display: flex;
  gap: var(--space-md);
}

.footer__legal a {
  color: var(--color-midgray);
  transition: color var(--transition-fast);
}
.footer__legal a:hover { color: var(--color-white); }

/* ════════════════════════════════════════════════
/* ════════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════════ */

/* Tablet – ≤ 1024px */
@media (max-width: 1024px) {
  .speakers-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .footer__grid {
    flex-wrap: wrap;
  }
}

/* Tablet piccolo – ≤ 768px */
@media (max-width: 768px) {
  :root {
    --space-2xl: 4rem;
    --space-xl: 2.5rem;
  }

  /* backdrop-filter sull'header fixed è attivo per tutta la durata dello
     scroll (non solo quando un elemento entra in viewport): su mobile
     può far cadere il frame rate abbastanza da far interrompere di colpo
     lo scroll con inerzia (fling). Sostituito con uno sfondo pieno */
  .site-header.scrolled {
    background-color: rgba(41, 55, 69, 0.98);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  /* backdrop-filter è pesante per il compositor su mobile: durante uno scroll
     veloce (fling) più elementi sfocati che entrano in viewport possono far
     cadere il frame rate abbastanza da far interrompere di colpo la momentum
     scroll di Safari/Chrome iOS. Disattivato ovunque su mobile, mantenendo
     gli sfondi semi-trasparenti già presenti sotto ogni elemento */
  .btn--outline,
  .nav__menu,
  .hero__badge,
  .countdown,
  .speaker-modal__backdrop,
  .partecipanti__stat-card,
  .partecipanti__table-wrap,
  .section--speakers .speaker-card {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  /* Il padding dei loghi sponsor è configurabile da /admin per singolo sponsor
     (fino a 40px) e su schermi stretti risulta sproporzionato: lo ricomprimiamo */
  .sponsors__logo-wrap {
    padding: 6px !important;
  }

  /* Nav mobile */
  .nav__burger {
    display: flex;
  }

  .nav__desktop {
    display: none;
  }

  .nav__close-item {
    display: flex;
    justify-content: flex-end;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    margin-bottom: 0.25rem;
  }

  .nav__link {
    padding: 0.75rem 1rem;
    font-size: 1rem;
  }

  .nav__cta {
    margin-left: 0;
    margin-top: 0.5rem;
    text-align: center;
    justify-content: center;
  }

  /* Hero */
  .hero__content {
    margin-top: var(--space-lg);
    text-align: center;
  }

  .hero__badge {
    text-align: center;
  }

  .hero__actions {
    flex-direction: column;
    align-items: center;
  }

  .countdown {
    gap: 0.5rem;
    padding: 0.75rem 1rem;
  }

  .countdown__value { font-size: 1.5rem; }
  .countdown__unit { min-width: 38px; }

  /* About */
  .about__grid {
    grid-template-columns: 1fr;
  }

  /* Agenda */
  .timeline::before { left: 100px; }
  .timeline__item { grid-template-columns: 100px 1fr; gap: var(--space-sm); }
  .timeline__item::before { left: 94px; }
  .timeline__item--featured::before { left: 93px; }
  .timeline__time { padding-right: 1.5rem; }

  /* Speakers */
  .speakers-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Workshop */
  .workshops-grid {
    grid-template-columns: 1fr;
  }

  /* Venue */
  .venue__grid {
    grid-template-columns: 1fr;
  }

  /* Footer: logo e LinkedIn sulla stessa riga (logo a sinistra, icona a destra),
     contatti sulla riga sotto */
  .footer__grid {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "brand socials"
      "contact contact";
    align-items: center;
    gap: var(--space-lg);
  }

  .footer__brand { grid-area: brand; }
  .footer__socials { grid-area: socials; flex: 0; }
  .footer__contact { grid-area: contact; }

  .footer__bottom {
    flex-direction: column;
    text-align: center;
    gap: 0.75rem;
  }

  /* Modale */
  .speaker-modal__box {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: var(--space-md);
  }
}

/* Mobile – ≤ 480px */
@media (max-width: 480px) {
  :root { --container-pad: 1rem; }

  .speakers-grid {
    grid-template-columns: 1fr;
    max-width: 320px;
    margin-inline: auto;
  }

  .countdown {
    flex-wrap: wrap;
    justify-content: center;
  }

  .countdown__sep { display: none; }

  .timeline::before { display: none; }
  .timeline__item {
    grid-template-columns: 1fr;
    gap: 0.4rem;
  }
  .timeline__item::before { display: none; }
  .timeline__time { text-align: left; }
}

/* ════════════════════════════════════════════════
   ANIMAZIONI CSS (complemento a GSAP)
   ════════════════════════════════════════════════ */

/* Stato iniziale per ScrollTrigger reveal – gestito da animations.js.
   Le classi .is-visible vengono aggiunte via JS come fallback no-JS. */
@media (prefers-reduced-motion: reduce) {
  .hero__badge,
  .hero__title,
  .hero__subtitle,
  .hero__organizer,
  .hero__actions,
  .countdown,
  .timeline__item,
  .speaker-card {
    opacity: 1 !important;
    transform: none !important;
  }

  .hero__bg-img {
    will-change: auto;
  }

  @keyframes bounce-arrow { from, to { transform: translateX(-50%); } }
  @keyframes pulse-dot    { from, to { opacity: 1; transform: scale(1); } }
}

/* ════════════════════════════════════════════════
   GALLERY (pagina /gallery)
   ════════════════════════════════════════════════ */
.gallery-page {
  padding-top: calc(var(--header-h) + var(--space-2xl));
  min-height: 60vh;
}

.gallery-page__bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.gallery-page__bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0.05;
}

.gallery-page__empty {
  text-align: center;
  color: var(--color-ltgray);
  padding-block: var(--space-xl);
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--space-sm);
}

.gallery-grid__item {
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: rgba(255,255,255,0.04);
}

.gallery-grid__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-base);
}

.gallery-grid__item:hover img {
  transform: scale(1.05);
}