/* ==========================================================================
   Sociocrazia Mediterranea — Stile Pagina di Cortesia
   ========================================================================== */

:root {
  --font-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --bg-primario: #fcfbf9;
  --bg-scheda: #ffffff;
  --testo-principale: #182631;
  --testo-secondario: #4d5c68;
  --testo-muto: #7b8893;
  --primario: #1b4965;
  --primario-hover: #123348;
  --accento: #cb6838;
  --bordo: #e5ded5;
  --raggio: 24px;
  --raggio-pill: 9999px;
  --bordeaux-logo: #621835;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg-primario: #11171d;
    --bg-scheda: #1a222a;
    --testo-principale: #edf2f6;
    --testo-secondario: #b1c0cd;
    --testo-muto: #7a8b9a;
    --primario: #5fa8d3;
    --primario-hover: #7fc0e6;
    --accento: #e6804f;
    --bordo: #2c3a47;
  }
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body.pagina-cortesia {
  font-family: var(--font-base);
  background-color: var(--bg-primario);
  color: var(--testo-principale);
  line-height: 1.6;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3rem 1.2rem;
  background-image: radial-gradient(circle at 50% 12%, rgba(98, 24, 53, 0.05) 0%, transparent 65%);
}

.contenitore-cortesia {
  width: 100%;
  max-width: 780px;
  margin: 0 auto;
}

.scheda-cortesia {
  background-color: var(--bg-scheda);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
  padding: 3.5rem 3rem;
  text-align: center;
  box-shadow: 0 16px 40px rgba(27, 73, 101, 0.07);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.box-logo-ecosistemi {
  background-color: var(--bordeaux-logo) !important;
  border-radius: 30px !important;
  padding: 1.5rem 2.8rem !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 10px 30px rgba(98, 24, 53, 0.25) !important;
  margin-bottom: 2rem;
  max-width: 100%;
}

.box-logo-ecosistemi img {
  max-height: 160px;
  width: auto;
  display: block;
}

.badge-progetto {
  display: inline-block;
  background-color: rgba(98, 24, 53, 0.1);
  color: #621835;
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0.35rem 1rem;
  border-radius: var(--raggio-pill);
  margin-bottom: 1.2rem;
}

@media (prefers-color-scheme: dark) {
  .badge-progetto {
    background-color: rgba(230, 128, 79, 0.2);
    color: var(--accento);
  }
}

.titolo-principale {
  font-size: 2.6rem;
  font-weight: 800;
  letter-spacing: -0.025em;
  color: var(--testo-principale);
  margin-bottom: 0.5rem;
  line-height: 1.2;
}

.sottotitolo {
  font-size: 1.25rem;
  color: var(--testo-secondario);
  margin-bottom: 2.2rem;
  font-weight: 500;
}

.descrizione-cortesia {
  font-size: 1.05rem;
  color: var(--testo-secondario);
  max-width: 640px;
  margin-bottom: 2rem;
  text-align: left;
}

.descrizione-cortesia p {
  margin-bottom: 1rem;
}

.box-in-arrivo {
  background: linear-gradient(135deg, rgba(27, 73, 101, 0.04) 0%, rgba(98, 24, 53, 0.04) 100%);
  border: 1px dashed var(--bordo);
  border-radius: 14px;
  padding: 1.2rem 1.6rem;
  margin-bottom: 2.2rem;
  display: flex;
  align-items: center;
  gap: 1.2rem;
  text-align: left;
  max-width: 640px;
  width: 100%;
}

.icona-lavori {
  font-size: 2rem;
  flex-shrink: 0;
}

.testo-lavori strong {
  display: block;
  font-size: 1rem;
  color: var(--testo-principale);
  margin-bottom: 0.2rem;
}

.testo-lavori p {
  font-size: 0.92rem;
  color: var(--testo-secondario);
  margin: 0;
  line-height: 1.5;
}

.azioni-cortesia {
  margin-bottom: 2.5rem;
}

.btn-contatto {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background-color: var(--primario);
  color: #ffffff !important;
  font-weight: 600;
  font-size: 1.05rem;
  padding: 0.9rem 2.2rem;
  border-radius: var(--raggio-pill);
  text-decoration: none;
  transition: all 0.2s ease;
  box-shadow: 0 4px 14px rgba(27, 73, 101, 0.2);
}

.btn-contatto:hover {
  background-color: var(--primario-hover);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(27, 73, 101, 0.3);
  text-decoration: none;
}

.footer-cortesia {
  border-top: 1px solid var(--bordo);
  padding-top: 1.6rem;
  width: 100%;
}

.footer-cortesia .copyright {
  font-size: 0.9rem;
  color: var(--testo-muto);
  margin-bottom: 0.3rem;
  font-weight: 500;
}

.footer-cortesia .licenza {
  font-size: 0.8rem;
  color: var(--testo-muto);
}

.footer-cortesia a {
  color: var(--primario);
  text-decoration: none;
}

.footer-cortesia a:hover {
  text-decoration: underline;
}

@media (max-width: 640px) {
  .scheda-cortesia {
    padding: 2.2rem 1.4rem;
  }
  .titolo-principale {
    font-size: 1.9rem;
  }
  .sottotitolo {
    font-size: 1.05rem;
  }
  .box-logo-ecosistemi {
    padding: 1.2rem 1.8rem !important;
  }
  .box-logo-ecosistemi img {
    max-height: 120px;
  }
  .box-in-arrivo {
    flex-direction: column;
    text-align: center;
  }
  .descrizione-cortesia {
    text-align: center;
  }
}