/* ═══════════════════════════════════════════
   SPEMME — SPONSOR
   Condiviso da sponsor.html (landing)
   e da TUTTE le pagine sponsor-*.html (dettaglio)
═══════════════════════════════════════════ */

/* ─── SEZIONI ─── */
.sp-section {
  padding:       4.5rem 0;
  border-bottom: 1px solid rgba(201,168,76,.09);
}
.sp-label {
  font-family:    var(--font-label);
  font-size:      var(--fs-label);
  letter-spacing: .3em;
  color:          var(--gold);
  text-transform: uppercase;
  margin-bottom:  .8rem;
}
.sp-h2 {
  font-family:   var(--font-display);
  font-size:     clamp(1.8rem, 3vw, 2.4rem);
  font-weight:   300;
  margin-bottom: 2.5rem;
}
.sp-h2 em { font-style: italic; color: var(--gold-light); }

/* Il pitch dell'APS è testo fornito dal cliente e va letto per intero:
   a 820px le righe arrivavano a 102 caratteri. */
.sp-text p {
  font-size:     var(--fs-base);
  line-height:   1.8;
  color:         var(--text-light);
  margin-bottom: 1.2rem;
  max-width:     var(--measure);
}
.sp-text p:first-child { font-size: 1rem; }
.sp-text p strong { color: var(--gold-light); font-weight: 400; }
.sp-text em       { font-style: italic; color: var(--gold-pale); }

/* ─── INTRO: ASIDE DATI + TESTO ─── */
.sp-intro {
  display:               grid;
  grid-template-columns: 290px 1fr;
  gap:                   5rem;
  padding:               5rem 0;
  border-bottom:         1px solid rgba(201,168,76,.09);
}
.sp-aside {
  border:     1px solid rgba(201,168,76,.15);
  padding:    2rem;
  background: rgba(13,59,62,.2);
  height:     fit-content;
}
.sp-aside-title {
  font-family:    var(--font-label);
  font-size:      var(--fs-label);
  letter-spacing: .3em;
  color:          var(--gold);
  text-transform: uppercase;
  margin-bottom:  1.5rem;
  padding-bottom: .8rem;
  border-bottom:  1px solid rgba(201,168,76,.15);
}
.sp-row { margin-bottom: 1.1rem; }
.sp-row-label {
  font-family:    var(--font-label);
  font-size:      var(--fs-micro);
  letter-spacing: .2em;
  color:          var(--text-dim);
  text-transform: uppercase;
  margin-bottom:  .22rem;
}
.sp-row-value {
  font-family: var(--font-display);
  font-size:   var(--fs-base);
  line-height: 1.45;
  word-break:  break-word;
}

.sp-aside .btn { margin-top: 1rem; }

/* Badge RUNTS */
.sp-badge {
  display:        inline-block;
  font-family:    var(--font-label);
  font-size:      var(--fs-micro);
  letter-spacing: .2em;
  text-transform: uppercase;
  color:          var(--gold);
  border:         1px solid rgba(201,168,76,.3);
  background:     rgba(201,168,76,.07);
  padding:        .45rem .8rem;
  margin-bottom:  1.5rem;
}

/* ─── BENEFICI / OBIETTIVI ─── */
.sp-benefit-grid {
  display:               grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap:                   1rem;
}
.sp-benefit {
  position:   relative;
  border:     1px solid rgba(201,168,76,.1);
  background: rgba(13,59,62,.12);
  padding:    1.8rem 1.6rem;
  overflow:   hidden;
  transition: background var(--transition-normal), border-color var(--transition-normal);
}
.sp-benefit:hover {
  background:   rgba(13,59,62,.3);
  border-color: rgba(201,168,76,.25);
}
.sp-benefit-num {
  font-family: var(--font-display);
  font-style:  italic;
  font-size:   3.4rem;
  color:       rgba(201,168,76,.09);
  position:    absolute;
  top: .1rem; right: .9rem;
  line-height: 1;
}
.sp-benefit-title {
  font-family:   var(--font-display);
  font-size:     1.15rem;
  margin-bottom: .5rem;
  position:      relative;
}
.sp-benefit-text {
  font-size:   var(--fs-sm);
  line-height: 1.75;
  color:       var(--text-dim);
  position:    relative;
}

/* ─── ELENCO SPONSOR / SOSTENITORI ─── */
.sp-grid {
  display:               grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap:                   1rem;
}
.sp-item {
  position:        relative;
  display:         flex;
  flex-direction:  column;
  border:          1px solid rgba(201,168,76,.12);
  background:      rgba(13,59,62,.16);
  padding:         2.2rem 2rem;
  overflow:        hidden;
  text-decoration: none;
  color:           inherit;
  transition:      background var(--transition-normal), border-color var(--transition-normal);
}
.sp-item:hover {
  background:   rgba(13,59,62,.38);
  border-color: rgba(201,168,76,.3);
}
/* ─── MARCHIO DELLO SPONSOR ───────────────────
   Fascia d'altezza fissa in cima a ogni card. I loghi hanno proporzioni
   lontanissime fra loro — il lockup MAK e' 4.5:1, la papera Golduck e'
   verticale — e senza un'altezza comune le card partirebbero sfalsate.
   Chi un logo non ce l'ha (APS, slot libero) riempie la fascia con un
   marchio tipografico alto uguale, cosi' la griglia resta allineata.
   Ha sostituito il monogramma-filigrana `.sp-item-mono`: dietro a un logo
   vero l'iniziale sbiadita era solo rumore. Sta nella cronologia git. */
.sp-item-logo {
  flex:            0 0 84px;   /* la card e' flex column: senza basis si schiaccia */
  height:          84px;
  display:         flex;
  align-items:     center;
  justify-content: flex-start;
  margin-bottom:   1.6rem;
  position:        relative;
}
/* max-* invece di width/height: ogni logo tiene le sue proporzioni e si
   ferma quando tocca il primo dei due lati della fascia. */
.sp-item-logo img {
  max-width:  min(100%, 260px);   /* i lockup larghi (MAK) prenderebbero
                                     tutta la card e schiaccerebbero gli
                                     altri marchi: il tetto li riporta a
                                     un peso ottico simile alla papera */
  max-height: 100%;
  width:      auto;
  height:     auto;
  object-fit: contain;
  opacity:    .9;              /* il bianco pieno sul petrolio e' troppo duro */
  transition: opacity var(--transition-normal);
}
.sp-item:hover .sp-item-logo img { opacity: 1; }

/* Marchio tipografico per chi non ha un file logo */
.sp-item-logo-mark {
  flex:            0 0 auto;
  width:           84px;
  height:          84px;
  display:         flex;
  align-items:     center;
  justify-content: center;
  border:          1px solid rgba(201,168,76,.22);
  font-family:     var(--font-display);
  font-style:      italic;
  font-size:       2.6rem;
  line-height:     1;
  color:           var(--gold);
  transition:      border-color var(--transition-normal), color var(--transition-normal);
}
.sp-item:hover .sp-item-logo-mark {
  border-color: rgba(201,168,76,.45);
  color:        var(--gold-light);
}
/* Slot libero: quadrato tratteggiato, come il bordo della card vuota */
.sp-item-logo-mark--empty {
  border-style: dashed;
  color:        rgba(201,168,76,.45);
}
.sp-item-logo-mark--empty svg { width: 24px; height: 24px; }
.sp-item-role {
  font-family:    var(--font-label);
  font-size:      var(--fs-micro);
  letter-spacing: .22em;
  color:          var(--gold);
  text-transform: uppercase;
  margin-bottom:  .6rem;
  position:       relative;
}
.sp-item-name {
  font-family:   var(--font-display);
  font-size:     1.5rem;
  font-weight:   300;
  line-height:   1.2;
  margin-bottom: .6rem;
  position:      relative;
}
.sp-item-desc {
  font-size:     var(--fs-sm);
  line-height:   1.75;
  color:         var(--text-dim);
  margin-bottom: 1.4rem;
  position:      relative;
}
.sp-item-link {
  /* bersaglio minimo per il dito: cresce l'area, non il disegno */
  display:        inline-flex;
  align-items:    center;
  min-height:     44px;
  font-family:    var(--font-label);
  font-size:      var(--fs-micro);
  letter-spacing: .2em;
  text-transform: uppercase;
  color:          var(--gold);
  margin-top:     auto;
  position:       relative;
}

/* Slot libero per futuri sponsor */
.sp-item--empty {
  border-style: dashed;
  background:   transparent;
  align-items:  flex-start;
  justify-content: center;
}
.sp-item--empty .sp-item-name { color: var(--text-dim); font-style: italic; }

/* ─── DATI FISCALI ─── */
.sp-fiscal {
  display:               grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap:                   1px;
  border:                1px solid rgba(201,168,76,.12);
  background:            rgba(201,168,76,.12);
}
.sp-fiscal-cell {
  background: var(--petrolio-dark);
  padding:    1.5rem 1.6rem;
}
.sp-fiscal-label {
  font-family:    var(--font-label);
  font-size:      var(--fs-micro);
  letter-spacing: .22em;
  color:          var(--gold);
  text-transform: uppercase;
  margin-bottom:  .5rem;
}
.sp-fiscal-value {
  font-family: var(--font-display);
  font-size:   1.02rem;
  line-height: 1.5;
  word-break:  break-word;
}

/* ─── CTA FINALE ─── */
/* Il riquadro dei recapiti in fondo alla pagina è ora `.contatti-band`, in
   css/base.css: lo stesso blocco esisteva qui, in show.css e — senza nessuno
   stile — in concerti.html. Da qui è nato il disegno del componente (bordo
   dorato tenue, filo in sfumatura sul bordo alto); i recapiti però non sono
   più una fila che va a capo come capita. Vedi la nota in base.css.
   `.sp-cta-actions` resta: la usa anche il pitch in cima alla pagina. */
.sp-cta-actions {
  display:    flex;
  flex-wrap:  wrap;
  gap:        1rem;
  align-items: center;
  margin-top: 2rem;
}
.sp-cta-actions .btn-whatsapp { margin-top: 0; }

/* ─── BACK LINK ─── */
/* 44px è il bersaglio minimo per il dito: era 19px. Il riempimento
   verticale compensa, così il comando non cresce a video. */
.sp-back {
  display:         inline-flex;
  align-items:     center;
  min-height:      44px;
  /* bersaglio minimo per il dito: la grafica non cambia, cresce
     solo l'area che risponde al tocco */
  min-height:     44px;
  gap:             .5rem;
  font-family:     var(--font-label);
  font-size:       var(--fs-micro);
  letter-spacing:  .2em;
  text-transform:  uppercase;
  color:           var(--text-dim);
  text-decoration: none;
  margin-bottom:   3rem;
  transition:      color .2s;
}
.sp-back:hover { color: var(--gold); }

/* ─── RESPONSIVE ─── */
@media (max-width: 900px) {
  .sp-intro { grid-template-columns: 1fr; gap: 3rem; }
  .sp-aside { order: -1; }
}
@media (max-width: 600px) {
  /* Il gradino per telefono: la misura sta in base.css. Erano 3,5rem tarati a
     occhio, ora è la stessa di tutti gli altri fogli. */
  .sp-intro,
  .sp-section       { padding: var(--sez-y) 0; }
  .sp-benefit-grid  { grid-template-columns: 1fr; }
}