:root{
  --bg: #eef0f3;                  /* grigio caldo, non bianco */
  --text: #111214;
  --muted: rgba(17,18,20,.65);

  /* card: meno bianco, più “vetro” */
  --card: rgba(255, 255, 255, 0.55);
  --card-border: rgba(17,18,20,.08);

  --shadow: 0 12px 28px rgba(0,0,0,.10);
  --radius: 16px;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }

body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  background:
    radial-gradient(900px 520px at 20% 0%, rgba(0,0,0,.05), transparent 60%),
    radial-gradient(700px 420px at 85% 18%, rgba(0,0,0,.04), transparent 55%),
    var(--bg);
  color: var(--text);
}

.container{
  max-width: 980px;
  margin: 0 auto;
  padding: 28px 16px; /* mobile */
}

h1{
  font-size: 2.05rem;
  line-height: 1.05;
  margin: 0 0 10px 0;
  letter-spacing: -0.02em;
}

.lead{
  margin: 0;
  font-size: 1.05rem;
  color: var(--muted);
}

.card{
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.hero{
  display: grid;
  grid-template-columns: 1fr; /* mobile-first */
  gap: 14px;
  align-items: start;
  margin-top: 14px;
}

.hero-card{
  padding: 16px;
}

.cta-grid{
  display: grid;
  grid-template-columns: 1fr; /* mobile-first */
  gap: 12px;
  margin-top: 12px;
}

.link-card{
  display: block;
  padding: 16px;
  text-decoration: none;
  color: inherit;
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
}

.link-card:hover{
  transform: translateY(-2px);
  background: rgba(120, 120, 130, 0.20);
  border-color: rgba(16,17,20,.16);
}

.link-card h2{
  margin: 0 0 8px 0;
  font-size: 1.1rem;
}

.link-card p{
  margin: 0;
  color: var(--muted);
}

.cta-button{
  display: block;          /* mobile: bottone full-width */
  width: 100%;
  text-align: center;
  margin-top: 16px;
  padding: 14px 16px;
  border-radius: 999px;
  background: rgba(16,17,20,.92);
  color: #fff;
  text-decoration: none;
  font-weight: 650;
  border: 1px solid rgba(16,17,20,.18);
}

.small{ font-size: .92rem; color: var(--muted); }

/* tablet/desktop */
@media (min-width: 860px){
  .container{ padding: 56px 20px; }
  h1{ font-size: 3rem; }
  .hero{ grid-template-columns: 1.2fr .8fr; gap: 28px; }
  .cta-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px; }
  .cta-button{ display: inline-block; width: auto; }
}
/* HOME LAYOUT */
.home{
  display: grid;
  gap: 18px;
  justify-items: center;   /* centra tutto */
}

.title{
  text-align: center;
  margin-top: 10px;
}

.prose{
  width: min(720px, 100%);
  padding: 18px;
  text-align: left;        /* leggibilità migliore */
}

.prose p{
  margin: 0 0 12px 0;
  line-height: 1.55;
}

.actions{
  width: min(820px, 100%);
  display: grid;
  gap: 14px;
  grid-template-columns: 1fr;
}

/* desktop: cards affiancate e allineate */
@media (min-width: 860px){
  .actions{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* SFONDO SOLO EVENTO 1 */
body.event-dan{
  background:
    linear-gradient(
      rgba(238,240,243,.55),
      rgba(238,240,243,.65)
    ),
    url("/assets/pitt.avif");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}


/* HOME LAYOUT */
.home{
  display: grid;
  gap: 18px;
  justify-items: center;   /* centra tutto */
}

.title{
  text-align: center;
  margin-top: 10px;
}

.prose{
  width: min(720px, 100%);
  padding: 18px;
  text-align: left;        /* leggibilità migliore */
  background: rgba(255,255,255,.65);
}

.prose p{
  margin: 0 0 12px 0;
  line-height: 1.55;
}

.action-card{
  padding: 18px;
  text-decoration: none;
  color: inherit;
  text-align: left;
}

.action-card h2{
  margin: 0 0 8px 0;
  font-size: 1.15rem;
}

.action-card p{
  margin: 0;
  color: var(--muted);
}

/* desktop: cards affiancate e allineate */
@media (min-width: 860px){
  .actions{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}


.prose a{
  color: #2b5cff;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.prose a:hover{
  opacity: .85;
}

@media (max-width: 600px){
  body.event-dan{
    background-position: center top;
  }

  .prose{
    background: rgba(255,255,255,.75);
  }
}

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

.event-hero{
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.event-panel{
  width: min(720px, 100%);
  background: rgba(255,255,255,.82);
  color: #111;
  padding: 22px;
  border-radius: 18px;
  box-shadow: 0 20px 40px rgba(0,0,0,.25);
  backdrop-filter: blur(6px);
}

.event-panel h1{
  margin-top: 0;
}

.event-panel p{
  line-height: 1.55;
}

/* EVENT PAGE STACK */
.event-page{
  padding: 18px 14px;
}

/* niente center verticale: crea un layout naturale */
.event-hero{
  min-height: 100svh;              /* iOS-friendly viewport */
  display: flex;
  align-items: flex-start;         /* NON center */
  justify-content: center;
  padding-top: 18px;
  padding-bottom: 24px;
}

/* pannello leggibile e stabile */
.event-panel{
  width: min(760px, 100%);
  background: rgba(255,255,255,.86);
  color: #111;
  padding: 18px;
  border-radius: 18px;
  box-shadow: 0 20px 40px rgba(0,0,0,.22);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.event-panel h1{
  margin: 0 0 12px 0;
  font-size: clamp(1.55rem, 4.5vw, 2.4rem);
  line-height: 1.08;
}

.event-panel p{
  margin: 0 0 12px 0;
  line-height: 1.55;
}

/* CTA sempre coerente e non enorme */
.event-panel .cta-button{
  margin-top: 14px;
}

/* link back pulito (non viola default) */
.back-link{
  display: inline-block;
  margin-top: 14px;
  color: rgba(17,18,20,.75);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.back-link:visited{ color: rgba(17,18,20,.75); }

/* desktop: un po' più aria */
@media (min-width: 860px){
  .event-page{ padding: 40px 20px; }
  .event-hero{ padding-top: 40px; }
  .event-panel{ padding: 22px; }
}