/* ===============================
   GLOBAL
=============================== */
body {
  font-family: 'Roboto Slab', serif;
  margin: 0;
  padding: 0;
  background: #fff0f0;
  color: #111;
}

/* immagini sempre responsive ovunque */
img {
  max-width: 100%;
  height: auto;
}

/* ===============================
   HEADER
=============================== */
header {
  background: #b22234;
  color: white;
  padding: 16px 20px;   /* prima era 40px */
  text-align: center;
}

header h1 {
  margin: 0;
  font-size: 30px;      /* prima era 42px */
  font-family: 'Anton', sans-serif;
  letter-spacing: 0.5px;
  font-weight: 400;     /* non bold */
}

.catchphrase{
  font-family: 'Roboto Slab', serif;
  font-size: 20px;
  font-weight: 400;
  line-height: 1.5;
  max-width: 820px;
  margin: 12px auto 6px auto;
  color: #ffffff;
}

.site{
  font-family: 'Roboto Slab', serif;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.85);
}


/* ===============================
   NAVBAR
=============================== */
nav {
  background: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 15px;
  margin-top: 20px;
  border-radius: 6px;
  gap: 30px;
}

nav ul {
  list-style: none;
  display: flex;
  margin: 0;
  padding: 0;
}

nav li {
  position: relative;
  margin: 0 18px;
}

nav a {
  color: #0033a0;
  text-decoration: none;
  font-weight: bold;
  font-size: 17px;
  position: relative;
}

/* underline animation */
nav a::after {
  content: '';
  display: block;
  height: 2px;
  width: 0;
  background: #b22234;
  transition: width 0.3s;
  position: absolute;
  bottom: -5px;
  left: 0;
}

nav a:hover::after {
  width: 100%;
}

/* Dropdown menu */
nav li ul {
  max-height: 0;
  overflow: hidden;
  position: absolute;
  top: 35px;
  left: 0;
  background: #ffffff;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  border-radius: 8px;
  min-width: 190px;
  z-index: 10;
  transition: max-height 0.4s ease;
  display: flex;
  flex-direction: column;
}

nav li:hover > ul {
  max-height: 500px;
  padding: 10px 0;
}

nav li ul li a {
  padding: 12px 22px;
  display: block;
  font-size: 15px;
  white-space: nowrap;
  border-bottom: 1px solid #e0e0e0;
  transition: background 0.25s ease, color 0.25s ease;
}

nav li ul li:last-child a {
  border-bottom: none;
}

nav li ul li a:hover {
  border-radius: 6px;
  background: #b22234;
  color: #ffffff;
  box-shadow: 0 0 10px rgba(178,34,52,0.6);
}

/* Social icons */
.social-icons img {
  width: 24px;
  height: 24px;
  transition: transform 0.2s;
}

.social-icons img:hover {
  transform: scale(1.15);
}

/* ===============================
   HERO SECTION (LOGO)
=============================== */
.hero-section {
  width: 100%;
  max-width: 680px;   /* prima 1200px */
  margin: 18px auto 6px auto;
  text-align: center;
  padding: 0 20px;
}


.hero-logo img {
  width: min(80vw, 420px); /* responsive: max 360px, su piccoli scala */
  height: auto;
  object-fit: contain;      /* NON taglia mai il logo */
  display: block;
  margin: 0 auto;
}

/* ===============================
   CONTENT
=============================== */
.content {
  max-width: 640px;   /* prima 1000px */
  margin: 0 auto;
  padding: 16px 20px 36px 20px;
  text-align: center;
}


.content h2 {
  font-family: 'Anton', sans-serif;
  color: #b22234;
  font-size: 40px;
  margin: 10px 0 15px 0;
}

.content p {
  font-size: 18px;
  line-height: 1.6;
  margin: 0;
}

/* ===============================
   FOOTER
=============================== */
footer {
  text-align: center;
  padding: 20px;
  background: #b22234;
  color: white;
  margin-top: 40px;
}

/* ===============================
   RESPONSIVE
=============================== */
@media (max-width: 768px) {
  header h1 { font-size: 32px; }

  nav { flex-wrap: wrap; }
  nav ul { flex-direction: column; }
  nav li { margin: 10px 0; }

  .hero-logo img { width: min(90vw, 420px); }

  .content h2 { font-size: 30px; }
  .content p { font-size: 16px; }
}

@media (max-width: 480px) {
  .hero-logo img { width: min(95vw, 320px); }
  .content h2 { font-size: 24px; }
  .content p { font-size: 14px; }
}


/* ===============================
   MENU MOBILE LATERALE (slide-in)
=============================== */

/* ===============================
   HAMBURGER ELEGANTE CON ETICHETTA
=============================== */

.hamburger{
  display:none;
  align-items:center;
  gap:10px;
  padding:8px 12px;
  border:1px solid rgba(178,34,52,.45);
  border-radius:14px;
  background:#fff;
  cursor:pointer;
  box-shadow:0 6px 18px rgba(0,0,0,.08);
}

/* scritta "Menu" */
.hamburger-label{
  font-family:'Roboto Slab',serif;
  font-size:14px;
  font-weight:700;
  letter-spacing:.4px;
  color:#b22234;
}

/* contenitore linee */
.hamburger-lines{
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:8px;
}

/* tre linee sottili */
.hamburger-lines span{
  display:block;
  width:18px;
  height:2px;
  background:#b22234;
  border-radius:2px;
}

/* visibile solo su mobile */
@media (max-width: 768px){
  .hamburger{ display:inline-flex; }
}


/* overlay */
.menu-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: 9998;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.menu-overlay.open {
  display: block;
  opacity: 1;
}

/* pannello laterale */
.side-menu {
  position: fixed;
  top: 0;
  right: 0;
  width: min(86vw, 340px);
  height: 100vh;
  background: #ffffff;
  z-index: 9999;
  transform: translateX(100%);
  transition: transform 0.25s ease;
  box-shadow: -10px 0 24px rgba(0,0,0,0.18);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.side-menu.open {
  transform: translateX(0);
}

.side-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
}

.side-title {
  font-family: 'Anton', sans-serif;
  font-size: 22px;
  color: #b22234;
  letter-spacing: 1px;
}

.side-close {
  border: 0;
  background: #fff;
  cursor: pointer;
  font-size: 20px;
  padding: 8px 10px;
  border-radius: 10px;
}

.side-close:hover {
  background: #fff0f0;
}

.side-list {
  list-style: none;
  margin: 0;
  padding: 0;
  overflow: auto;
}

/* link principali */
.side-list a,
.side-subtoggle {
  width: 100%;
  display: block;
  text-align: left;
  padding: 12px 12px;
  border-radius: 12px;
  text-decoration: none;
  color: #0033a0;
  font-weight: 800;
  font-family: 'Roboto Slab', serif;
  background: #fff;
  border: 0;
  cursor: pointer;
}

.side-list a:hover,
.side-subtoggle:hover {
  background: #fff0f0;
}

/* sottovoci accordion */
.side-submenu {
  display: none;
  padding: 4px 0 10px 10px;
}

.side-submenu.open {
  display: block;
}

.side-submenu a {
  font-weight: 650;
  font-size: 15px;
  padding: 10px 12px;
  margin: 4px 0;
  border-radius: 10px;
}

/* blocca scroll pagina quando menu aperto */
.no-scroll {
  overflow: hidden;
}

/* Mostra hamburger solo su mobile, nasconde menu desktop */
@media (max-width: 768px) {
  .hamburger { display: inline-block; }

  /* se hai classi desktop-only, usale */
  .desktop-only { display: none !important; }

  nav {
    justify-content: space-between;
  }
}

/* ===============================
   HERO DI PAGINA (sfondo logo)
=============================== */
.page-hero {
  width: 100%;
  max-width: 680px;      /* coerente con la tua scelta “stretta” */
  margin: 16px auto 8px auto;
  border-radius: 12px;
  padding: 16px 18px;
  text-align: center;
  position: relative;
  overflow: hidden;

  /* sfondo = logo */
  background-image: url("../images/logo.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;

  /* leggero sfondo chiaro per far risaltare testo */
  background-color: rgba(255, 255, 255, 0.65);
  box-shadow: 0 6px 18px rgba(0,0,0,0.10);
}

.page-title {
  margin: 0;
  font-family: 'Anton', sans-serif;
  font-weight: 400;
  font-size: 30px;
  letter-spacing: 0.5px;
  color: #b22234;

  /* aiuta la leggibilità sopra il logo */
  text-shadow: 0 2px 10px rgba(255,255,255,0.85);
}

@media (max-width: 768px) {
  .page-hero {
    max-width: 92vw;
    padding: 22px 14px;
  }
  .page-title {
    font-size: 24px;
  }
}
.doc-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 18px;
}

.doc-item {
  background: #ffffff;
  border-radius: 12px;
  padding: 14px 16px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
  text-align: left;
}

.doc-item h3 {
  margin: 0 0 6px 0;
  font-size: 18px;
  font-weight: 700;
  color: #b22234;
}

.doc-link {
  display: inline-block;
  padding: 10px 12px;
  border-radius: 10px;
  background: #b22234;
  color: #fff;
  text-decoration: none;
  font-weight: 700;
}

.doc-link:hover {
  opacity: 0.92;
}

/* SOLO per documentazione.html */
.documentazione-page .doc-item{
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.documentazione-page .doc-item h3,
.documentazione-page .doc-title{
  margin: 0;
  color: #b22234;
  text-align: left;
}

.documentazione-page .doc-link{
  margin-left: auto;
  background: transparent;
  color: #b22234;
  padding: 0;
  font-weight: 700;
}

.documentazione-page .doc-link:hover{
  opacity: 0.8;
}


/* ===============================
   TESSERATI (TABella larga + Modal foto)
=============================== */

/* tabella larga: usa quasi tutta la finestra, ma resta centrata */
.table-wrap{
  width:100%;
  max-width:96vw;
  margin:10px auto 0 auto;

  /* se vuoi anche lo scroll verticale con intestazioni fisse, lascia queste 2 righe */
  max-height:65vh;
  overflow-y:auto;

  overflow-x:hidden;
}

/* tabella */
.tesserati-table{
  width:100%;
  border-collapse:collapse;
  background:#fff;
  border-radius:12px;
  overflow:hidden;
  box-shadow:0 10px 22px rgba(0,0,0,.08);
  table-layout:fixed;
}

/* intestazioni sticky (restano visibili) */
.tesserati-table thead th{
  position:sticky;
  top:0;
  z-index:2;
}

/* celle */
.tesserati-table th,
.tesserati-table td{
  border-bottom:1px solid #eee;
  padding:14px 16px;
  text-align:center;
  vertical-align:middle;
  font-size:15px;
}

.tesserati-table th{
  background:#b22234;
  color:#fff;
  font-weight:700;
  white-space:nowrap;
}

/* larghezze colonne */
.tesserati-table th:nth-child(1),.tesserati-table td:nth-child(1){width:14%;}
.tesserati-table th:nth-child(2),.tesserati-table td:nth-child(2){width:10%;}
.tesserati-table th:nth-child(3),.tesserati-table td:nth-child(3){width:12%;}
.tesserati-table th:nth-child(4),.tesserati-table td:nth-child(4){width:24%;}
.tesserati-table th:nth-child(5),.tesserati-table td:nth-child(5){width:14%;}
.tesserati-table th:nth-child(6),.tesserati-table td:nth-child(6){width:26%;}

.tesserati-table td:nth-child(4),
.tesserati-table td:nth-child(6){
  white-space:normal;
  word-break:break-word;
  text-align:left;
  line-height:1.35;
}

.tesserati-table tr:nth-child(even) td{background:#fff6f6;}

/* miniature cliccabili */
.thumb{
  width:84px;
  height:84px;
  object-fit:cover;
  border-radius:10px;
  cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease;
}
.thumb:hover{
  transform:scale(1.05);
  box-shadow:0 10px 18px rgba(0,0,0,.2);
}

/* modal immagini */
.img-modal{
  display:none;
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.65);
  z-index:4000;
  align-items:center;
  justify-content:center;
  padding:18px;
}
.img-modal.open{display:flex;}
.img-modal-inner{
  position:relative;
  max-width:min(860px,92vw);
  max-height:86vh;
}
.img-modal-content{
  display:block;
  width:100%;
  height:auto;
  max-height:86vh;
  border-radius:14px;
  box-shadow:0 18px 40px rgba(0,0,0,.55);
  object-fit:contain;
}
.img-close{
  position:absolute;
  left:50%;
  bottom:-52px;
  transform:translateX(-50%);
  width:44px;
  height:44px;
  border-radius:999px;
  border:none;
  background:rgba(255,255,255,.18);
  color:#fff;
  font-size:26px;
  cursor:pointer;
}
.img-close:hover{background:rgba(255,255,255,.28);}

/* ===============================
   HERO PAGINE INTERNE
   logo a sinistra del titolo
=============================== */
.page-hero.left-title{
  background-image:none;
}

.page-hero-inner{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:26px;           /* distanza elegante */
}

.page-hero-logo{
  width:72px;
  height:auto;
  opacity:.95;
  display:block;
}

.page-title-left{
  margin:0;
  font-family:'Anton',sans-serif;
  font-weight:400;
  font-size:34px;
  letter-spacing:1px;
  color:#b22234;
}

@media (max-width:768px){
  .page-hero-inner{gap:16px;}
  .page-hero-logo{width:54px;}
  .page-title-left{font-size:24px;}
}


/* ===============================
   MOBILE: layout più centrato e stabile (INDEX)
=============================== */
*{box-sizing:border-box;}

@media (max-width:768px){
  /* Header più compatto e meno "ballerino" */
  header{
    padding:14px 14px;
  }
  header h1{
    font-size:22px;
    line-height:1.15;
    letter-spacing:.2px;
  }
  .catchphrase,.site{
    font-size:14px;
    margin:6px 0;
  }

  /* Nav: full width, allineata bene, niente decentramenti */
  nav{
    width:100%;
    max-width:520px;
    margin:14px auto 0 auto;
    padding:10px 12px;
    border-radius:12px;
    justify-content:space-between; /* hamburger a sx, spazio a dx */
    gap:10px;
  }

  /* In mobile nascondi menu desktop e icone desktop */
  .desktop-only{
    display:none !important;
  }

  /* Hero logo più "ancorato" e responsivo */
  .hero-section{
    max-width:520px;
    margin:14px auto 0 auto;
    padding:0 12px;
  }
  .hero-logo img{
    width:min(92vw,360px);
  }

  /* ===============================
     HAMBURGER: più elegante
  =============================== */
  .hamburger{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:44px;
    height:44px;
    border:1px solid rgba(178,34,52,.55);
    background:#fff;
    border-radius:12px;
    cursor:pointer;
    padding:10px;
    box-shadow:0 6px 18px rgba(0,0,0,.08);
  }
  .hamburger span{
    display:block;
    height:3px;
    width:100%;
    background:#b22234;
    border-radius:3px;
    margin:4px 0;
    transition:transform .22s ease,opacity .22s ease;
  }
  .hamburger:hover{
    transform:translateY(-1px);
  }

  /* ===============================
     SIDE MENU: laterale pulito + font uniforme
  =============================== */
  .menu-overlay{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.45);
    z-index:9998;
    opacity:0;
    pointer-events:none;
    transition:opacity .2s ease;
  }
  .menu-overlay.open{
    opacity:1;
    pointer-events:auto;
  }

  .side-menu{
    position:fixed;
    top:0;
    right:0;
    height:100vh;
    width:min(86vw,340px);
    background:#fff;
    z-index:9999;
    transform:translateX(100%);
    transition:transform .25s ease;
    box-shadow:-14px 0 28px rgba(0,0,0,.18);
    padding:14px;
    display:flex;
    flex-direction:column;
    gap:12px;
  }
  .side-menu.open{
    transform:translateX(0);
  }

  .side-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding-bottom:10px;
    border-bottom:1px solid #eee;
  }
  .side-title{
    font-family:'Anton',sans-serif;
    font-size:20px;
    letter-spacing:.8px;
    color:#b22234;
    font-weight:400;
  }
  .side-close{
    width:40px;
    height:40px;
    border:0;
    background:#fff;
    border-radius:12px;
    cursor:pointer;
    font-size:18px;
  }
  .side-close:hover{background:#fff0f0;}

  /* Voci menu: stesso font, stessa grandezza, touch target comodo */
  .side-list{
    list-style:none;
    margin:0;
    padding:0;
    overflow:auto;
  }

  .side-list a,
  .side-subtoggle{
    width:100%;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:12px 12px;
    border-radius:14px;
    text-decoration:none;
    background:#fff;
    border:1px solid rgba(0,0,0,.06);

    font-family:'Roboto Slab',serif;
    font-size:16px;        /* UNICO */
    font-weight:700;       /* UNICO */
    color:#0033a0;
    cursor:pointer;
  }

  .side-list a:hover,
  .side-subtoggle:hover{
    background:#fff6f6;
    border-color:rgba(178,34,52,.25);
  }

  /* Sottomenu: un filo più piccolo ma coerente */
  .side-submenu{
    display:none;
    padding:8px 0 10px 10px;
  }
  .side-submenu.open{display:block;}
  .side-submenu a{
    font-size:15px;
    font-weight:600;
    padding:10px 12px;
    margin:6px 0;
    border-radius:12px;
  }

  /* blocca scroll pagina quando menu aperto */
  .no-scroll{overflow:hidden;}
}

@media (max-width:480px){
  nav{max-width:420px;}
  header h1{font-size:20px;}
  .hero-logo img{width:min(94vw,320px);}
}

@media (max-width:768px){
  .hamburger{
    display:inline-flex !important;
    align-items:center;
    justify-content:flex-start;
    gap:12px;
    padding:12px 14px;
    border-radius:999px;
    background:#fff;
    border:1px solid rgba(255,255,255,.65);
    box-shadow:0 10px 22px rgba(0,0,0,.12);
  }

  .hamburger-label{
    font-family:'Roboto Slab',serif;
    font-size:15px;
    font-weight:700;
    color:#b22234;
    line-height:1;
    white-space:nowrap;
  }

  .hamburger-lines{
    display:flex;
    flex-direction:column;
    justify-content:center;
  }

  .hamburger-lines i{
    display:block;
    width:22px;
    height:2px;
    background:#b22234;
    border-radius:2px;
    margin:6px 0;   /* distanza reale tra le linee */
  }

  /* “Paracadute”: se esiste ancora qualche .hamburger span { ... } vecchio */
  .hamburger > span{
    background:none !important;
    width:auto !important;
    height:auto !important;
    margin:0 !important;
  }
}

/* ===============================
   TESSERATI - MOBILE (cards pulite, value più largo)
=============================== */
@media (max-width: 768px){

  /* più spazio ai valori: label più stretta */
  .tesserati-table td{
    grid-template-columns: 78px 1fr !important;
    word-break: normal !important;   /* evita “verticale” */
    overflow-wrap: anywhere;         /* ma se serve va a capo bene */
  }

  /* Nome: rendilo più leggibile e non spezzarlo in modo aggressivo */
  .tesserati-table td:nth-child(1){
    font-size: 16px;
    font-weight: 700;
  }

  /* Nome: il valore (colonna 2) non deve spezzarsi lettera-per-lettera */
  .tesserati-table td:nth-child(1){
    word-break: keep-all !important;
    overflow-wrap: normal !important;
  }

  /* Catchphrase e Grado: possono andare a capo normalmente */
  .tesserati-table td:nth-child(4),
  .tesserati-table td:nth-child(6){
    overflow-wrap: anywhere !important;
    word-break: normal !important;
  }
}


  .tesserati-table td:last-child{ border-bottom:none; }

  /* Label */
  .tesserati-table td::before{
    content:"";
    font-weight:700;
    color:#0033a0;
  }

  /* Labels per colonna (6 colonne) */
 /* .tesserati-table td:nth-child(1)::before{ content:"Nome"; }
  .tesserati-table td:nth-child(2)::before{ content:"Foto"; }
  .tesserati-table td:nth-child(3)::before{ content:"Nascita"; }
  .tesserati-table td:nth-child(4)::before{ content:"Grado"; }
  .tesserati-table td:nth-child(5)::before{ content:"Risultati"; }
  .tesserati-table td:nth-child(6)::before{ content:"Catchphrase"; }

  /* Foto più bella e centrata nel value */
  .tesserati-table td:nth-child(2){
    align-items:center;
  }
  .thumb{
    width:96px;
    height:96px;
    border-radius:12px;
    object-fit:cover;
  }

  /* Su schermi molto piccoli, label più stretta */
  @media (max-width: 420px){
    .tesserati-table td{
      grid-template-columns: 96px 1fr;
      gap:10px;
    }
  }
}

/* ===============================
   TESSERATI - MOBILE ORIENTAMENTO
=============================== */

/* PORTRAIT: tabella scrollabile orizzontalmente */
@media (max-width: 768px) and (orientation: portrait){
  .table-wrap{
    width:100%;
    max-width:96vw;
    margin:0 auto;
    overflow-x:auto;
    overflow-y:visible;
    -webkit-overflow-scrolling:touch;
    padding-bottom:10px;
  }

  .tesserati-table{
    width:max-content;     /* si allarga quanto serve */
    min-width:980px;       /* base leggibile */
    table-layout:auto;
  }

  .tesserati-table th,
  .tesserati-table td{
    padding:12px 14px;
    font-size:14px;
    white-space:nowrap;
  }

  .tesserati-table td:nth-child(4),
  .tesserati-table td:nth-child(6){
    white-space:normal;
    overflow-wrap:anywhere;
  }

  .tesserati-table th:nth-child(1),
  .tesserati-table td:nth-child(1){ min-width:180px; font-weight:700; }
  .tesserati-table th:nth-child(4),
  .tesserati-table td:nth-child(4){ min-width:260px; }
  .tesserati-table th:nth-child(6),
  .tesserati-table td:nth-child(6){ min-width:320px; }
}

/* LANDSCAPE: prova ad adattare la tabella (meno scroll) */
@media (max-width: 932px) and (orientation: landscape){
  .table-wrap{
    width:100%;
    max-width:96vw;
    margin:0 auto;
    overflow-x:auto; /* se serve ancora, meglio che tagliare */
    -webkit-overflow-scrolling:touch;
    padding-bottom:8px;
  }

  .tesserati-table{
    width:100%;        /* entra nello schermo */
    min-width:0;       /* non forzare grande */
    table-layout:auto; /* più naturale */
  }

  .tesserati-table th,
  .tesserati-table td{
    padding:10px 12px;
    font-size:14px;
  }

  /* in landscape possiamo permettere un po' di a capo anche altrove */
  .tesserati-table td{
    overflow-wrap:anywhere;
  }

  /* colonne lunghe: un filo meno larghe */
  .tesserati-table th:nth-child(1),
  .tesserati-table td:nth-child(1){ min-width:150px; }
  .tesserati-table th:nth-child(4),
  .tesserati-table td:nth-child(4){ min-width:220px; }
  .tesserati-table th:nth-child(6),
  .tesserati-table td:nth-child(6){ min-width:260px; }
}

/* ===============================
   TESSERATI - MOBILE: SCROLL ORIZZONTALE REALE
=============================== */
@media (max-width: 768px){

  .table-wrap{
    width: 100%;
    max-width: 100vw;
    overflow-x: auto;                 /* abilita lo scroll */
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 12px;
  }

  .tesserati-table{
    min-width: 1100px;  /* forza la tabella a essere più larga del telefono */
    width: 1100px;
    table-layout: auto;
  }

  .tesserati-table th,
  .tesserati-table td{
    padding: 12px 14px;
    font-size: 14px;
    white-space: nowrap; /* evita testo “verticale” */
  }

  /* colonne lunghe possono andare a capo */
  .tesserati-table td:nth-child(4),
  .tesserati-table td:nth-child(6){
    white-space: normal;
    overflow-wrap: anywhere;
  }

  /* Nome più largo */
  .tesserati-table th:nth-child(1),
  .tesserati-table td:nth-child(1){
    min-width: 200px;
    font-weight: 700;
  }

  /* Grado e Catchphrase molto più larghi */
  .tesserati-table th:nth-child(4),
  .tesserati-table td:nth-child(4){
    min-width: 280px;
  }

  .tesserati-table th:nth-child(6),
  .tesserati-table td:nth-child(6){
    min-width: 360px;
  }
}

/* ===============================
   TESSERATI - MOBILE LANDSCAPE: adattata allo schermo
=============================== */
@media (max-width: 932px) and (orientation: landscape){

  .table-wrap{
    width: 100%;
    max-width: 100vw;
    overflow-x: hidden;   /* niente scroll */
    padding-bottom: 0;
  }

  .tesserati-table{
    width: 100%;          /* entra nello schermo */
    min-width: 0;         /* annulla la larghezza forzata */
    table-layout: auto;
  }

  .tesserati-table th,
  .tesserati-table td{
    padding: 8px 10px;
    font-size: 13px;
    white-space: normal;  /* può andare a capo */
  }

  /* riduciamo un po' le colonne “lunghe” */
  .tesserati-table th:nth-child(1),
  .tesserati-table td:nth-child(1){
    min-width: 140px;
  }

  .tesserati-table th:nth-child(4),
  .tesserati-table td:nth-child(4){
    min-width: 200px;
  }

  .tesserati-table th:nth-child(6),
  .tesserati-table td:nth-child(6){
    min-width: 240px;
  }
}

/* ===============================
   TESSERATI - RAFFINAMENTO MOBILE
=============================== */

/* Verticale (portrait) */
@media (max-width: 768px) and (orientation: portrait){

  /* Celle più compatte in altezza */
  .tesserati-table th,
  .tesserati-table td{
    padding: 8px 10px;   /* meno altezza */
    line-height: 1.2;
  }

  /* Thumbnail: più larga, meno alta */
  .tesserati-table .thumb{
    width: 110px;
    height: 72px;
    object-fit: cover;
    border-radius: 10px;
  }
}

/* ===============================
   TESSERATI - ULTERIORE RAFFINAMENTO MOBILE
=============================== */
@media (max-width: 768px) and (orientation: portrait){

  /* Thumbnail ancora più bassa */
  .tesserati-table .thumb{
    width: 110px;
    height: 56px;        /* più bassa */
    object-fit: cover;
    border-radius: 8px;
  }

  /* Catchphrase: più stretta e max 2 righe */
  .tesserati-table td:nth-child(6){
    max-width: 220px;           /* restringe visivamente la colonna */
    display: -webkit-box;
    -webkit-line-clamp: 2;      /* massimo 2 righe */
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}
/* ===============================
   TESSERATI - ULTRA RAFFINAMENTO MOBILE
=============================== */
@media (max-width: 768px) and (orientation: portrait){

  /* Thumbnail ancora più bassa */
  .tesserati-table .thumb{
    width: 110px;
    height: 44px;        /* ancora più bassa */
    object-fit: cover;
    border-radius: 8px;
  }

  /* Colonna Età (3ª): molto più stretta */
  .tesserati-table th:nth-child(3),
  .tesserati-table td:nth-child(3){
    min-width: 70px;
    max-width: 70px;
    text-align: center;
  }

  /* Catchphrase: resta a massimo 2 righe */
  .tesserati-table td:nth-child(6){
    max-width: 200px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}
/* SCI: colonna Livello più stretta e Materiali più ampia */
.sci-table th:nth-child(4), .sci-table td:nth-child(4){ width: 14% !important; } /* Livello più stretta */
.sci-table th:nth-child(5), .sci-table td:nth-child(5){ width: 24% !important; } /* Materiali più ampia */

/* ===============================
   CONSIGLIO DIRETTIVO
=============================== */

.board-list{
  display:flex;
  flex-direction:column;
  gap:28px;
  margin-top:24px;
}

.board-member{
  display:flex;
  align-items:flex-start;
  gap:22px;
  background:#fff;
  padding:20px;
  border-radius:14px;
  box-shadow:0 8px 18px rgba(0,0,0,.08);
}

.board-member img{
  width:120px;
  height:120px;
  object-fit:cover;
  border-radius:12px;
  background:#eee;
}

.board-text h3{
  margin:0 0 8px 0;
  font-family:'Anton', sans-serif;
  letter-spacing:1px;
  color:#b22234;
  font-size:22px;
}

.board-text p{
  margin:0;
  line-height:1.5;
  font-size:15px;
  color:#333;
}

/* Mobile */
@media (max-width: 768px){
  .board-member{
    flex-direction:column;
    align-items:center;
    text-align:center;
  }

  .board-member img{
    width:140px;
    height:140px;
  }

  .board-text h3{
    margin-top:12px;
  }
}

/* ===============================
   AVVISI – PDF THUMB + MODAL
=============================== */

/* Thumbnail PDF */
.pdf-thumb-img{
  width: 120px;
  height: auto;
  border-radius: 10px;
  box-shadow: 0 8px 16px rgba(0,0,0,.10);
  transition: transform .18s ease, box-shadow .18s ease;
}
.pdf-thumb-link:hover .pdf-thumb-img{
  transform: translateY(-2px);
  box-shadow: 0 12px 22px rgba(0,0,0,.14);
}

/* Download button image */
.download-icon{
  width: 120px;
  height: auto;
}

/* Modal PDF */
.pdf-modal{
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.6);
  z-index: 2000;
  padding: 18px;
}
.pdf-modal.open{ display:flex; }

.pdf-modal-inner{
  position: relative;
  width: min(980px, 96vw);
  height: min(82vh, 760px);
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 18px 40px rgba(0,0,0,.25);
  overflow: hidden;
}

.pdf-frame{
  width: 100%;
  height: 100%;
  border: 0;
}

.pdf-close{
  position: absolute;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 0;
  background: rgba(0,0,0,.35);
  color: #fff;
  font-size: 28px;
  line-height: 44px;
  cursor: pointer;
}
/* PDF.js - visualizzazione su smartphone */
@media (max-width: 768px) {

  .pdf-modal {
    padding: 0;
  }

  .pdf-modal-inner {
    width: 100%;
    height: 100dvh;
    border-radius: 0;
  }

  .pdf-frame {
    width: 100%;
    height: 100%;
  }

  .pdf-close {
    position: absolute;
    bottom: max(18px, env(safe-area-inset-bottom));
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    background: #b22234;
    color: white;
  }

}
/* ===============================
   AVVISI – DEFINITIVO (NO scroll orizzontale su mobile)
=============================== */

/* Wrapper SOLO per avvisi: deve stare sempre "fixato" nello schermo */
.avvisi-nota{
  text-align: center;
  font-size: 0.95rem;
  font-style: italic;
  margin: 0 auto 18px;
  padding: 0 15px;
}

.avvisi-wrap{
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: hidden !important;   /* <-- blocca lo scroll laterale */
  overflow-y: visible;
}

/* Tabella desktop (nessun casino con altri stili) */
.avvisi-table{
  width: 100%;
  table-layout: fixed;
}

.avvisi-table th,
.avvisi-table td{
  padding: 14px 14px;
  vertical-align: middle;
  font-size: 15px;
}

/* Header centrati */
.avvisi-table thead th{
  text-align: center;
  white-space: nowrap;
}

/* Colonne (desktop) - usa le tue percentuali */
.avvisi-table th:nth-child(1), .avvisi-table td:nth-child(1){ width: 4%; }   /* Data */
.avvisi-table th:nth-child(2), .avvisi-table td:nth-child(2){ width: 58%; }  /* Evento */
.avvisi-table th:nth-child(3), .avvisi-table td:nth-child(3){ width: 22%; }  /* Luogo */
.avvisi-table th:nth-child(4), .avvisi-table td:nth-child(4){ width: 8%; }   /* Programma */
.avvisi-table th:nth-child(5), .avvisi-table td:nth-child(5){ width: 6%; }   /* Download */

/* Evento desktop: una riga, centrato, ellipsis */
@media (min-width: 769px){
  .avvisi-table td,
  .avvisi-table th{
    text-align: center;
  }
.avvisi-table td.evento-cell{
  white-space: normal;
  overflow: visible;
  text-overflow: unset;
  overflow-wrap: break-word;
  word-break: normal;
  line-height: 1.4;
  display: table-cell;
}
}

/* Nascondo SOLO la scritta "Download" nell'header (colonna resta) */
.avvisi-table thead th:nth-child(5){
  color: transparent;
  text-shadow: none;
}

/* Programma e Download: contenuto centrato (icona) */
.programma-cell,
.download-cell{
  text-align: center;
}

/* Icone piccole */
.pdf-icon,
.download-icon-small{
  width: 28px;
  height: 28px;
  display: inline-block;
  vertical-align: middle;
}

/* Righe alternate: colore su tutta la riga */
.avvisi-table tbody tr:nth-child(even){
  background: #fff6f6;
}
.avvisi-table tbody tr:nth-child(even) td{
  background: transparent !important;
}






@media (max-width: 768px){

  /* Avvisi: mobile stabile, nessun overflow orizzontale */
  html, body{ overflow-x: hidden; }

  .avvisi-table thead{ display:none; }

  .avvisi-table,
  .avvisi-table tbody{
    display:block;
    width:100%;
    max-width:100%;
  }

  .avvisi-table tr{
    display:block;
    width:100%;
    max-width:100%;
    margin:10px 0;
    border-radius:12px;
    overflow:hidden;
    background:#fff;
    box-shadow:0 10px 22px rgba(0,0,0,.08);
  }

  .avvisi-table td{
    display:grid;
    grid-template-columns: 82px 1fr;
    gap:10px;
    align-items:start;              /* <-- allinea le label tutte a sinistra/alto */
    width:100%;
    max-width:100%;
    padding:10px 10px;
    border:none;
    border-bottom:1px solid #eee;
    overflow:hidden;
    text-align:left;
    font-size:12px;                 /* <-- base come Data */
    line-height:1.35;
  }

  .avvisi-table td:last-child{ border-bottom:none; }

  /* Label (Data/Evento/Luogo/Programma/Download) allineate a sinistra */
  .avvisi-table td::before{
    font-weight:700;
    color:#0033a0;
    font-size:12px;
    white-space:nowrap;
    justify-self:start;
    text-align:left;
  }

  .avvisi-table td:nth-child(1)::before{ content:"Data"; }
  .avvisi-table td:nth-child(2)::before{ content:"Evento"; }
  .avvisi-table td:nth-child(3)::before{ content:"Luogo"; }
  .avvisi-table td:nth-child(4)::before{ content:"Programma"; }
  .avvisi-table td:nth-child(5)::before{ content:"Download"; }

  /* EVENTO: stesso font-size di Data + va a capo se serve */
  .avvisi-table td.evento-cell{
    font-family: inherit;           /* <-- uguale a Data */
    font-size:12px !important;      /* <-- forzato */
    font-weight:400 !important;     /* <-- non “gigante” */
    white-space:normal !important;  /* <-- VA A CAPO */
    overflow:visible !important;
    text-overflow:unset !important;
    overflow-wrap:anywhere;
    word-break:break-word;
  }

  /* LUOGO: deve leggersi bene e rimanere allineato a sinistra */
  .avvisi-table td.luogo-cell{
    font-size:12px;
    white-space:normal;
    overflow-wrap:anywhere;
    word-break:break-word;
  }

  /* Programma / Download: icone visibili (cliccabili) */
  .programma-cell,
  .download-cell{
    text-align:left;
  }

  .programma-cell a,
  .download-cell a{
    display:inline-flex;
    align-items:center;
    gap:10px;
  }

  .pdf-icon,
  .download-icon-small{
    width:28px;
    height:28px;
    display:inline-block;
    vertical-align:middle;
  }
}


/* Landscape: si allarga SOLO perché lo schermo è più largo */
@media (max-width: 900px) and (orientation: landscape){
  .avvisi-table td{
    grid-template-columns: 110px 1fr;
    padding: 12px 14px;
  }
  .avvisi-table td.evento-cell{
    font-size: 14px;
  }
}

/* AVVISI: su desktop usa quasi tutta la pagina */
@media (min-width: 769px){
  .avvisi-wrap{
    max-width: 96vw !important;
    width: 96vw !important;
    margin: 0 auto;
  }
}
@media (min-width: 769px){
  /* wrapper Avvisi: centrato e non deve mai sforare */
  .avvisi-wrap{
    width: 96vw !important;
    max-width: 96vw !important;
    margin: 0 auto !important;
    overflow-x: hidden !important;
  }

  /* tabella: deve stare dentro al wrapper */
  .avvisi-table{
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* AVVISI - larghezza desktop definitiva */
@media (min-width: 769px){
  .avvisi-wrap{
    width: 80vw !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
  }
}


/* AVVISI: svincola la pagina dai limiti di .content (solo qui) */
.avvisi-content{
  max-width: 100% !important;
  width: 100% !important;
}

/* wrapper tabella avvisi: centrato e piena larghezza */
@media (min-width: 769px){
  .avvisi-wrap{
    width: 96vw !important;
    max-width: 96vw !important;
    margin: 0 auto !important;
    overflow-x: hidden !important;
  }
  .avvisi-table{
    width: 100% !important;
    max-width: 100% !important;
  }
}

@media (max-width: 768px){
  /* Evento mobile: stesso font delle altre celle e va a capo */
  .avvisi-table td.evento-cell{
    font-size: 12px !important;     /* come Data */
    font-weight: 500 !important;
    white-space: normal !important; /* va a capo */
    overflow: visible !important;
    text-overflow: unset !important;
    word-break: break-word;
    overflow-wrap: anywhere;
    line-height: 1.35;
  }
}

@media (max-width: 768px){
  /* nella card mobile: download dentro al value, ben visibile */
  .avvisi-table td.download-cell{
    display: flex !important;
    align-items: center;
    gap: 10px;
  }

  .download-icon-small{
    width: 28px;
    height: 28px;
    display: inline-block;
  }
}

/* FIX AVVISI MOBILE – forzature finali */
@media (max-width: 768px){
  .avvisi-table td{
    font-size: 12px !important;          /* base uniforme (come Data) */
  }

  .avvisi-table td.evento-cell{
    font-size: 12px !important;          /* Evento come Data */
    font-weight: 500 !important;
    white-space: normal !important;      /* va a capo */
    overflow: visible !important;
    text-overflow: unset !important;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  .avvisi-table td.luogo-cell{
    font-size: 12px !important;
    white-space: normal !important;      /* Luogo va a capo se serve */
    overflow: visible !important;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  /* icona download visibile dentro la riga mobile */
  .avvisi-table td.download-cell{
    display: flex !important;
    align-items: center;
    gap: 10px;
  }

  .avvisi-table td.download-cell img.download-icon-small{
    width: 28px;
    height: 28px;
    display: inline-block !important;
  }
}

/* ===============================
   AVVISI – MOBILE (card pulite e leggibili)
   Funziona SOLO per .avvisi-table
=============================== */
@media (max-width: 768px){

  html, body{ overflow-x: hidden; }

  /* niente tabella classica */
  .avvisi-table thead{ display:none; }

  .avvisi-table,
  .avvisi-table tbody{
    display:block;
    width:100%;
    max-width:100%;
  }

  .avvisi-table tr{
    display:block;
    width:100%;
    max-width:100%;
    margin:10px 0;
    border-radius:12px;
    overflow:hidden;
    background:#fff;
    box-shadow:0 10px 22px rgba(0,0,0,.08);
  }

  /* ogni cella diventa "Label | Value" */
  .avvisi-table td{
    display:grid;
    grid-template-columns: 110px 1fr;  /* label abbastanza larga: niente troncamenti */
    gap:10px;
    align-items:start;
    width:100%;
    padding:10px 12px;
    border:none;
    border-bottom:1px solid #eee;

    /* testo base leggibile */
    font-size:12px;
    line-height:1.35;

    /* IMPORTANTISSIMO: evita “lettere verticali” */
    word-break: normal;
    overflow-wrap: anywhere;
    white-space: normal;
  }

  .avvisi-table td:last-child{ border-bottom:none; }

  /* Label a sinistra, sempre leggibili */
  .avvisi-table td::before{
    font-weight:700;
    color:#0033a0;
    font-size:12px;
    white-space:nowrap;      /* Data/Evento/Luogo/Programma/Download non si spezzano */
    text-align:left;
    justify-self:start;
  }

  .avvisi-table td:nth-child(1)::before{ content:"Data"; }
  .avvisi-table td:nth-child(2)::before{ content:"Evento"; }
  .avvisi-table td:nth-child(3)::before{ content:"Luogo"; }
  .avvisi-table td:nth-child(4)::before{ content:"Programma"; }
  .avvisi-table td:nth-child(5)::before{ content:"Download"; }

  /* Evento: stesso font di Data, va a capo SOLO se serve */
  .avvisi-table td.evento-cell{
    font-size:12px !important;
    font-weight:400 !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: anywhere;
  }

  /* Luogo: impedisce spezzamento lettera-per-lettera */
  .avvisi-table td.luogo-cell{
    font-size:12px !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: anywhere;
  }

  /* Programma / Download: icone visibili e ben allineate */
  .avvisi-table td.programma-cell,
  .avvisi-table td.download-cell{
    text-align:left;
  }

  .avvisi-table td.programma-cell a,
  .avvisi-table td.download-cell a{
    display:inline-flex;
    align-items:center;
    gap:10px;
  }

  .avvisi-table img.pdf-icon,
  .avvisi-table img.download-icon-small{
    width:28px;
    height:28px;
    display:inline-block;
    visibility:visible;
    opacity:1;
  }
}

/* ===== AVVISI MOBILE (BLINDATO) ===== */
@media (max-width: 768px){
  html, body{ overflow-x:hidden; }

  .avvisi-table thead{ display:none !important; }

  .avvisi-table,
  .avvisi-table tbody{
    display:block !important;
    width:100% !important;
    max-width:100% !important;
  }

  .avvisi-table tr{
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    margin:10px 0 !important;
    background:#fff;
    border-radius:12px;
    overflow:hidden;
    box-shadow:0 10px 22px rgba(0,0,0,.08);
  }

  /* card row */
  .avvisi-table td{
    display:grid !important;
    grid-template-columns: 120px 1fr !important; /* label più larga = niente troncamenti */
    gap:10px !important;
    align-items:start !important;

    width:100% !important;
    max-width:100% !important;

    padding:10px 12px !important;
    border:none !important;
    border-bottom:1px solid #eee !important;

    font-size:12px !important;
    line-height:1.35 !important;

    white-space:normal !important;
    word-break:normal !important;         /* STOP verticale */
    overflow-wrap:anywhere !important;
    hyphens:auto;
  }

  .avvisi-table td:last-child{ border-bottom:none !important; }

  /* label */
  .avvisi-table td::before{
    font-weight:700 !important;
    color:#0033a0 !important;
    font-size:12px !important;
    white-space:nowrap !important;
    text-align:left !important;
    justify-self:start !important;
  }

  .avvisi-table td:nth-child(1)::before{ content:"Data"; }
  .avvisi-table td:nth-child(2)::before{ content:"Evento"; }
  .avvisi-table td:nth-child(3)::before{ content:"Luogo"; }
  .avvisi-table td:nth-child(4)::before{ content:"Programma"; }
  .avvisi-table td:nth-child(5)::before{ content:"Download"; }

  /* Evento: stesso font della data, va a capo solo se serve */
  .avvisi-table td.evento-cell{
    font-size:12px !important;
    font-weight:400 !important;
  }

  /* Luogo: impedisce spezzamento carattere-per-carattere */
  .avvisi-table td.luogo-cell{
    font-size:12px !important;
    word-break:normal !important;
    white-space:normal !important;
  }

  /* icone */
  .avvisi-table td.programma-cell a,
  .avvisi-table td.download-cell a{
    display:inline-flex !important;
    align-items:center !important;
    gap:10px !important;
  }

  .avvisi-table img.pdf-icon,
  .avvisi-table img.download-icon-small{
    width:28px !important;
    height:28px !important;
    display:inline-block !important;
    visibility:visible !important;
    opacity:1 !important;
  }
}
/* MODAL IMMAGINI: X sempre visibile su mobile */
.img-close{
  position: fixed;
  top: 14px;
  right: 14px;
  z-index: 9999;

  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 999px;

  background: rgba(0,0,0,.55);
  color: #fff;
  font-size: 28px;
  line-height: 44px;
  text-align: center;

  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* ===== MODAL FOTO (MOBILE): X sempre visibile ===== */
@media (max-width: 768px){
  .img-modal.open{
    display: flex; /* nel dubbio */
  }

  .img-modal-inner{
    position: relative;
  }

  .img-close{
    position: fixed !important;
    top: calc(12px + env(safe-area-inset-top)) !important;
    right: calc(12px + env(safe-area-inset-right)) !important;
    z-index: 99999 !important;

    width: 44px !important;
    height: 44px !important;
    border: 0 !important;
    border-radius: 999px !important;

    background: rgba(0,0,0,.60) !important;
    color: #fff !important;

    font-size: 30px !important;
    line-height: 44px !important;
    text-align: center !important;

    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;

    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
}
.footer-email{
  margin-top: 6px;
  font-size: 14px;
  color: rgba(255,255,255,0.85);
}

/* ===== SOLO direzione.html ===== */
.direzione-page .dir-list{
  max-width: 1100px;
  margin: 0 auto;
  padding: 10px 0 40px;
  display: grid;
  gap: 14px;
}

.direzione-page .dir-card{
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 16px;
  align-items: center;
  background: #fff;
  border-radius: 12px;
  padding: 14px 16px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
}

.direzione-page .dir-photo{
  width: 100px;
  height: 100px;
  border-radius: 12px;
  object-fit: cover;
}

.direzione-page .dir-photo-btn{
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
}

.direzione-page .dir-role{
  color: #b22234;
  font-weight: 700;
  font-size: 30px;
}

.direzione-page .dir-name{
  margin-top: 10px;
  font-weight: 600;
}

.direzione-page .dir-actions{
  margin-top: 10px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}

.direzione-page .dir-page-link,
.direzione-page .dir-more-btn{
  display: inline-block;
  padding: 10px 12px;
  border-radius: 10px;
  background: #b22234;
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  border: 0;
  cursor: pointer;
}

.direzione-page .dir-page-link:hover,
.direzione-page .dir-more-btn:hover{
  opacity: .92;
}

/* Modal info */
.info-modal{
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(0,0,0,.6);
  z-index: 6000;
}

.info-modal.open{ display: flex; }

.info-modal-inner{
  width: min(780px, 94vw);
  background: #fff;
  border-radius: 14px;
  padding: 18px 18px 14px;
  box-shadow: 0 10px 22px rgba(0,0,0,.18);
}

.info-title{
  margin: 0 0 8px 0;
  color: #b22234;
  font-size: 20px;
}

.info-text{
  margin: 0 0 12px 0;
  line-height: 1.45;
}

.info-close{
  display: inline-block;
  padding: 10px 12px;
  border-radius: 10px;
  background: #b22234;
  color: #fff;
  font-weight: 700;
  border: 0;
  cursor: pointer;
}

/* Mobile */
@media (max-width: 768px){
  .direzione-page .dir-card{
    grid-template-columns: 90px 1fr;
    padding: 12px 12px;
  }
  .direzione-page .dir-photo{
    width: 82px;
    height: 82px;
  }
}
/* ===== SOLO direzione.html ===== */
.direzione-page .dir-list{
  max-width: 1100px;
  margin: 0 auto;
  padding: 10px 0 40px;
  display: grid;
  gap: 14px;
}

.direzione-page .dir-card{
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 16px;
  align-items: center;
  background: #fff;
  border-radius: 12px;
  padding: 14px 16px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
}

.direzione-page .dir-photo{
  width: 100px;
  height: 100px;
  border-radius: 12px;
  object-fit: cover;
}

/* Titolo ruolo: stessa “forza” tipografica del sito */
.direzione-page .dir-role{
  color: #b22234;
  font-weight: 700;
  font-size: 30px; /* se in “prima” era diverso, dimmi la misura e lo mettiamo identico */
  letter-spacing: .4px;
}

/* Nome: grande ma meno del titolo */
.direzione-page .dir-name{
  margin-top: 4px;
  font-weight: 600;
  font-size: 30px;
}

/* Bottone info centrato sotto ruolo+nome */
.direzione-page .dir-actions.centered{
  margin-top: 10px;
  display: flex;
  justify-content: center;
}

/* Foto modal: X sempre visibile su mobile */
@media (max-width: 768px){
  .direzione-page .dir-card{
    grid-template-columns: 90px 1fr;
    padding: 12px 12px;
  }
  .direzione-page .dir-photo{
    width: 82px;
    height: 82px;
  }

  /* forza X del modal foto come karate mobile */
  .img-close{
    position: fixed !important;
    top: calc(12px + env(safe-area-inset-top)) !important;
    right: calc(12px + env(safe-area-inset-right)) !important;
    z-index: 99999 !important;
    width: 44px !important;
    height: 44px !important;
    border-radius: 999px !important;
    background: rgba(0,0,0,.60) !important;
    color: #fff !important;
    font-size: 30px !important;
    line-height: 44px !important;
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
}

/* =========================================
   SOLO direzione.html (Consiglio Direttivo)
   Non impatta altre pagine
========================================= */

/* Titolo pagina: garantisce che NON ci sia logo background */
.direzione-page .page-hero.left-title{
  background-image: none !important;
}

/* Card elenco direttivo: tipografia più “importante” */
.direzione-page .board-text h3{
  font-family: 'Anton', sans-serif;  /* coerente con titoli forti del sito */
  font-size: 22px;                   /* più grande di prima */
  letter-spacing: 0.6px;
}

.direzione-page .board-name{
  font-family: 'Roboto Slab', serif;
  font-size: 16px;                   /* proporzionato */
  font-weight: 600;
  margin-top: 6px;
}

/* Bottone info centrato sotto ruolo+nome */
.direzione-page .board-actions{
  margin-top: 10px;
  display: flex;
  justify-content: center;
}

/* Modal foto: X in basso al centro SOLO in direzione */
.direzione-page .img-close{
  position: fixed !important;
  left: 50% !important;
  transform: translateX(-50%) !important;

  /* poco sopra il bordo basso: visibile sopra la foto */
  bottom: calc(18px + env(safe-area-inset-bottom)) !important;

  top: auto !important;
  right: auto !important;

  z-index: 99999 !important;

  width: 46px !important;
  height: 46px !important;
  border-radius: 999px !important;

  background: rgba(0,0,0,0.60) !important;
  color: #fff !important;
  font-size: 30px !important;
  line-height: 46px !important;

  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Mobile: ancora un filo più leggibile */
@media (max-width: 768px){
  .direzione-page .board-text h3{ font-size: 24px; }
  .direzione-page .board-name{ font-size: 16px; }
}

/* ===== SOLO direzione.html: X centrata in basso SOPRA la foto ===== */
.direzione-page #imgModal .img-modal-inner{
  position: relative;
}

.direzione-page #imgModal .img-close{
  position: absolute !important;
  left: 50% !important;
  bottom: 10px !important;              /* “poco sopra il bordo” */
  transform: translateX(-50%) !important;

  top: auto !important;
  right: auto !important;

  z-index: 99999 !important;
  width: 46px !important;
  height: 46px !important;
  border-radius: 999px !important;

  background: rgba(0,0,0,0.60) !important;
  color: #fff !important;
  font-size: 30px !important;
  line-height: 46px !important;

  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Tipografia SOLO direzione */
.direzione-page .board-text h3{
  font-family: 'Anton', sans-serif;
  font-size: 24px;
  letter-spacing: .6px;
}

.direzione-page .board-name{
  font-family: 'Roboto Slab', serif;
  font-size: 16px;
  font-weight: 600;
  margin-top: 6px;
}
/* Miniature foto (tesserati + direzione + discipline): mostrare la parte alta */
.board-photo,
.dir-photo,
.tesserati-table img,
.sci-table img,
.altre-discipline-table img {
  object-position: top;
}

/* SKAI in rosso istituzionale nei testi narrativi */
.skai-red{
  color: #b22234;
  letter-spacing: 0.5px;
}

/* doppio logo nelle pagine karate */
.hero-logos{
  display:flex;
  align-items:center;
  gap:10px;
}

/* titolo speciale solo per la pagina karate */
.karate-title{
  display:flex;
  flex-direction:column;
  align-items:center;
}

.karate-subtitle{
  font-family: 'Anton', sans-serif;
  font-size:26px;
  margin-top:6px;
  letter-spacing:3px;
  color:#ffffff;
  text-shadow:0 0 6px rgba(255,255,255,0.6);
}

/* SOLO pagina karate */
.karate-page .hero-logos img:first-child{
  transform: scale(1.12);
}

.dojo-sep{
  margin:0 6px;
  opacity:0.8;
}

/* Logo Wado più grande solo nella pagina Karate */
.karate-page .hero-logos img:first-child{
  transform: scale(1.30);
  transform-origin: center;
}
.hero-logos{
  display:flex;
  align-items:center;
  gap:26px;
}

.fondatore{
  display:block;
  margin-top:4px;
  font-size:15px;
  font-weight:600;
  letter-spacing:1px;
  color:#b22234;
}
.scopo-float{
  margin: 6px 0 14px 0;
}

.scopo-float img{
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}

.scopo-float-left{
  float: left;
  width: min(290px, 42%);
  margin: 6px 18px 12px 0;
}

.scopo-float-right{
  float: right;
  width: min(290px, 42%);
  margin: 6px 0 12px 18px;
}

.scopo-clear{
  clear: both;
}

@media (max-width: 768px){
  .scopo-float-left,
  .scopo-float-right{
    float: none;
    width: 100%;
    max-width: 420px;
    margin: 16px auto;
  }
}

.lightbox-img{
  display:none;
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.9);
  z-index:9999;
  align-items:center;
  justify-content:center;
  padding:20px;
}

.lightbox-img.open{
  display:flex;
}

.lightbox-img img{
  max-width:95%;
  max-height:90vh;
  border-radius:12px;
  box-shadow:0 20px 40px rgba(0,0,0,0.5);
  object-fit:contain;
}

.lightbox-close{
  position:fixed;
  top:16px;
  right:16px;
  width:46px;
  height:46px;
  border:none;
  border-radius:999px;
  background:rgba(255,255,255,0.2);
  color:#fff;
  font-size:28px;
  cursor:pointer;
}

.info-section{
  max-width: 1400px;
  margin:0  auto;
}

.scopo-float-left,
.scopo-float-right{
  width: min(280px, 50%);
}

.scopo-float-left{
  margin: 6px 20px 12px 0;
}

.scopo-float-right{
  margin: 6px 0 12px 20px;
}


.scopo-float img{
  user-drag: none;
  -webkit-user-drag: none;
  user-select: none;
}
.scopo-page .content{
  max-width: 1200px;
}

.scopo-page .page-hero{
  max-width: 1100px;
}

.scopo-page .scopo-float-left,
.scopo-page .scopo-float-right{
  width: min(320px, 40%);
}

/* SOLO scopo.html */
.scopo-page .content{
  max-width: 1200px;
}

.scopo-page .page-hero{
  max-width: 1100px;
}

.scopo-page .info-section{
  max-width: 1120px;
  margin: 0 auto;
  text-align: left;
}

.scopo-block{
  display: flex;
  align-items: flex-start;
  gap: 28px;
  margin-bottom: 40px;
}

.scopo-block.image-right{
  flex-direction: row-reverse;
}

.scopo-block-image{
  flex: 0 0 320px;
}

.scopo-block-image img{
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.15);
  cursor: pointer;
  transition: transform .2s ease;
  -webkit-user-drag: none;
  user-select: none;
}

.scopo-block-image img:hover{
  transform: scale(1.02);
}

.scopo-block-text{
  flex: 1;
  min-width: 0;
}

.scopo-block-text p{
  margin: 0;
  line-height: 1.8;
  font-size: 1.15rem;
}

@media (max-width: 768px){
  .scopo-page .content{
    max-width: 100%;
  }

  .scopo-block,
  .scopo-block.image-right{
    flex-direction: column;
    gap: 16px;
    margin-bottom: 28px;
  }

  .scopo-block-image{
    flex: none;
    width: 100%;
    max-width: 420px;
    margin: 0 auto;
  }

}

.scopo-page .info-section h2{
  text-align: center;
  margin-bottom: 50px;
  font-size: 32px
}

}

.scopo-block-text p{
  margin: 0;
  line-height: 1.8;
  font-size: 19px;
  color: #333;
}

.scopo-block-text p::first-line{
  font-weight: 600;
}

.scopo-block-text p::first-letter{
  font-size: 1.4em;
  font-weight: 600;
}

.scopo-block{
  margin-bottom: 48px;
}

.image-protect{
  position: relative;
}

.image-protect img{
  pointer-events: none; /* disabilita click diretto */
}

.img-overlay{
  position:absolute;
  inset:0;
  z-index:2;
}

.scopo-block-special{
  margin-bottom: 48px;
}

.scopo-block-special p{
  line-height: 1.8;
  font-size: 19px;
  margin-bottom: 20px;
}

/* BLOCCO CON LOGO */
.scopo-inline{
  display: flex;
  align-items: flex-start;
  gap: 28px;
  margin-bottom: 24px;
}

.scopo-inline-image{
  flex: 0 0 300px; /* logo più piccolo rispetto alle foto */
}

.scopo-inline-image img{
  width: 100%;
  height: auto;
  border-radius: 12px;
}

/* MOBILE */
@media (max-width: 768px){
  .scopo-inline{
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .scopo-inline-image{
    max-width: 140px;
  }
}

.scopo-inline-text{
  flex: 1;
  min-width: 0;
}

.scopo-inline-text p{
  margin: 0 0 18px 0;
  line-height: 1.8;
  font-size: 19px;
  color: #333;
}

.scopo-inline-text p:last-child{
  margin-bottom: 0;
}

ù/* BLOCCO FINALE */
.scopo-final{
  margin-top: 20px;
}

/* ultima frase più forte */
.scopo-claim{
  font-weight: 600;
  font-size: 1.1em;
}

/* piccolo respiro finale */
.scopo-final .scopo-block-text p{
  margin-bottom: 18px;
}

/* ===============================
   CONTATTI - AZIONI RAPIDE
=============================== */

.contact-links{
  margin-top: 22px;
  margin-bottom: 32px;
}

.contact-actions{
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: 14px;
  width: 100%;
}

/* Pulsante/card */
.contact-action{
  flex: 1;
  min-width: 0;

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;

  padding: 16px 14px;

  background: #ffffff;
  border-radius: 12px;

  box-shadow: 0 6px 18px rgba(0,0,0,0.08);

  color: #b22234;
  text-decoration: none;

  font-family: 'Roboto Slab', serif;
  font-size: 19px;
  font-weight: 700;

  transition:
    transform .18s ease,
    box-shadow .18s ease,
    background .18s ease;
}

/* Icona */



.contact-action-icon{
  width: 30px;
  height: 30px;
  object-fit: contain;
  flex-shrink: 0;
}

.contact-action.whatsapp .contact-action-icon{
  width: 48px;
  height: 48px;
}

/* Dimensione specifica icona Google Maps */
.contact-action.maps .contact-action-icon{
  width: 48px;
  height: 48px;
}

/* Hover */
.contact-action:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(0,0,0,0.12);
  background: #fff6f6;
}

/* Mobile */
@media (max-width: 768px){

  .contact-actions{
    flex-direction: column;
  }

  .contact-action{
    width: 100%;
    min-height: 62px;

    justify-content: flex-start;

    padding-left: 22px;

    font-size: 16px;
  }

  .contact-action-icon{
    width: 32px;
    height: 32px;
  }
}

.contact-action span{
  font-size: 18x;
  font-weight: 700;
  letter-spacing: 0.3px;
}
/* Google Maps leggermente più largo */
.contact-action.maps{
  flex: 1.25;
}

/* WhatsApp e Instagram */
.contact-action.whatsapp,
.contact-action.instagram{
  flex: 1;
}

/* ===============================
   CALENDARIO KARATE - GOOGLE API
=============================== */
.calendar-page .calendar-content{
  max-width: 1180px;
  margin: 0 auto;
  padding: 8px 20px 42px;
}

.calendar-shell{
  background:#fff;
  border-radius:14px;
  box-shadow:0 8px 22px rgba(0,0,0,.09);
  overflow:hidden;
}

.calendar-toolbar{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:14px;
  padding:16px 18px;
  border-bottom:1px solid #eee;
}

.calendar-month-title{
  margin:0;
  text-align:center;
  font-family:'Anton',sans-serif;
  font-size:28px;
  font-weight:400;
  letter-spacing:.6px;
  color:#b22234;
}

.calendar-nav-btn{
  border:1px solid rgba(178,34,52,.35);
  background:#fff;
  color:#b22234;
  font-family:'Roboto Slab',serif;
  font-weight:700;
  padding:9px 13px;
  border-radius:10px;
  cursor:pointer;
}

.calendar-nav-btn:hover{ background:#fff0f0; }

.calendar-weekdays,
.calendar-grid{
  display:grid;
  grid-template-columns:repeat(7,1fr);
}

.calendar-weekdays{
  background:#b22234;
  color:#fff;
  font-weight:700;
  text-align:center;
}

.calendar-weekdays div{ padding:10px 4px; }

.calendar-day{
  min-height:128px;
  padding:8px;
  border-right:1px solid #eee;
  border-bottom:1px solid #eee;
  background:#fff;
}

.calendar-day:nth-child(7n){ border-right:0; }
.calendar-day.outside{ background:#fafafa; color:#999; }
.calendar-day.today{ box-shadow:inset 0 0 0 2px #b22234; }

.calendar-day-number{
  font-weight:700;
  color:#0033a0;
  margin-bottom:7px;
}

.calendar-day.outside .calendar-day-number{ color:#aaa; }

.calendar-event{
  display:block;
  width:100%;
  border:0;
  text-align:left;
  background:#fff0f0;
  border-left:4px solid #b22234;
  border-radius:7px;
  padding:6px 7px;
  margin:5px 0;
  font-family:'Roboto Slab',serif;
  font-size:12px;
  line-height:1.25;
  color:#111;
  cursor:pointer;
}

.calendar-event:hover{ background:#ffe4e4; }

.calendar-status{
  padding:18px;
  text-align:center;
  color:#555;
}

.calendar-status.error{ color:#b22234; font-weight:700; }

.calendar-legend{
  padding:12px 18px 16px;
  font-size:13px;
  color:#555;
  text-align:center;
}

.calendar-modal{
  display:none;
  position:fixed;
  inset:0;
  z-index:5000;
  background:rgba(0,0,0,.58);
  align-items:center;
  justify-content:center;
  padding:18px;
}

.calendar-modal.open{ display:flex; }

.calendar-modal-card{
  position:relative;
  width:min(620px,94vw);
  max-height:86vh;
  overflow:auto;
  background:#fff;
  border-radius:14px;
  padding:24px;
  box-shadow:0 18px 42px rgba(0,0,0,.3);
  text-align:left;
}

.calendar-modal-card h3{
  margin:0 42px 12px 0;
  color:#b22234;
  font-family:'Anton',sans-serif;
  font-size:26px;
  font-weight:400;
}

.calendar-modal-card p{
  margin:8px 0;
  line-height:1.5;
}

.calendar-modal-close{
  position:absolute;
  top:12px;
  right:12px;
  width:38px;
  height:38px;
  border:0;
  border-radius:50%;
  background:#b22234;
  color:#fff;
  font-size:24px;
  cursor:pointer;
}

@media (max-width:768px){
  .calendar-page .calendar-content{ padding:6px 10px 30px; }
  .calendar-toolbar{
    grid-template-columns:1fr 1fr;
  }
  .calendar-month-title{
    grid-column:1 / -1;
    grid-row:1;
    font-size:24px;
  }
  .calendar-nav-btn:first-child{ grid-column:1; grid-row:2; }
  .calendar-nav-btn:last-child{ grid-column:2; grid-row:2; }
  .calendar-weekdays{ display:none; }
  .calendar-grid{ display:block; }
  .calendar-day{
    min-height:0;
    border-right:0;
    padding:10px 12px;
  }
  .calendar-day.outside{ display:none; }
  .calendar-day:not(:has(.calendar-event)){ display:none; }
  .calendar-day-number{
    font-size:16px;
    margin-bottom:5px;
  }
  .calendar-event{
    font-size:14px;
    padding:9px 10px;
  }
}

.calendar-event.gara{
  background:#ffeb00;
  border-left-color:#f0a000;
  color:#111;
  font-weight:700;
}

.calendar-event.gara:hover{
  background:#ffe100;
}