@charset "utf-8";
/* styleCalendarioModerno.css — Calendario Shuri-Te — responsive fluid */

body {
  background: linear-gradient(180deg, #e1e1e1 0%, #f0e8dc 50%, #e1e1e1 100%) fixed;
  font-family: "Times New Roman", Times, serif;
  color: #000;
}
img, video { max-width: 100%; height: auto; }

/* --- RESET div.container (calendario.css forza text-align:center, rompe gli allineamenti Bootstrap) --- */
div.container {
  text-align: left;
}

/* --- HERO --- */
.hero-video { border-radius: 14px; }
.hero-wrapper { position: relative; }
.hero-video-media, .hero-gif-fallback { display: block; width: 100%; border-radius: .5rem; }
.hero-gif-fallback { display: none; }

/* --- CONTAINER --- */
#contenuto {
  background: linear-gradient(180deg, rgba(255,253,251,0.95) 0%, rgba(255,243,232,0.95) 50%, rgba(253,242,228,0.95) 100%);
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.06);
  padding: clamp(0.5rem, 3vw, 1.5rem);
  overflow-x: hidden;
}
#bodyPageGallery { background: transparent; overflow-x: hidden; }

/* --- BOTTONI --- */
.quick-links {
  display: flex; justify-content: center; gap: clamp(0.35rem, 2vw, 1rem);
  flex-wrap: wrap; margin-bottom: 1rem;
}
.cta-link {
  display: inline-block; margin-top: .35rem;
  padding: .45rem .85rem; border-radius: 999px;
  border: 1px solid #b25f2f;
  background: linear-gradient(180deg, #fff3e8 0%, #ffe3cd 100%);
  color: #7a1f00; text-decoration: none !important;
  font-weight: 700; letter-spacing: .01em; transition: all .2s ease;
  white-space: nowrap;
}
.cta-link:hover, .cta-link:focus {
  color: #fff !important;
  background: linear-gradient(180deg, #a84b18 0%, #7a2f0a 100%);
  border-color: #7a2f0a; transform: translateY(-1px);
}

/* --- PAGE TITLE --- */
.page-title-box {
  margin: .35rem 0 1rem; padding: .5rem 0;
  border: none;
  background: transparent;
  box-shadow: none;
}
.page-title-box h1 {
  color: #7a1f00; text-align: center; margin: 0;
  padding-left: 0; padding-right: 0;
  font-size: clamp(1.2rem, 4.5vw, 1.85rem);
  font-weight: 800;
  letter-spacing: .03em;
  text-shadow: 1px 1px 0 rgba(255,255,255,0.6);
}

/* --- ANNI PRECEDENTI --- */
.anniPrecedenti {
  margin: 0 0 1rem; padding: .8rem 1rem;
  border: 2px solid #c68a5e; border-radius: 12px;
  background: #fffaf5; text-align: center;
}

.anni-title {
  color: #7a1f00;
  font-size: clamp(0.95rem, 2.5vw, 1.1rem);
  font-weight: 700;
  margin: 0 0 .6rem;
}

.anni-grid {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: .45rem;
}

.anno-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 56px;
  padding: .4rem .7rem;
  border: 2px solid #c68a5e;
  border-radius: 999px;
  background: linear-gradient(180deg, #fffdfb 0%, #ffe3cd 100%);
  color: #7a1f00;
  text-decoration: none;
  font-weight: 600;
  font-size: clamp(0.82rem, 1.6vw, .95rem);
  transition: all .2s ease;
  white-space: nowrap;
  cursor: pointer;
}

.anno-pill:hover, .anno-pill:focus {
  color: #fff;
  background: linear-gradient(180deg, #a84b18 0%, #7a2f0a 100%);
  border-color: #7a2f0a;
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(0,0,0,0.12);
  text-decoration: none;
  font-style: normal;
}

/* --- MESE --- */
.mese-section { margin-bottom: 1.5rem; }
.mese-section h3 {
  color: #fff; background: linear-gradient(135deg, #8b2a00 0%, #7a1f00 100%);
  padding: .55rem 1rem; border-radius: 10px 10px 0 0;
  text-align: center; margin: 0;
  font-size: clamp(0.9rem, 2.5vw, 1.15rem); letter-spacing: .02em;
}

/* --- EVENT CARDS --- */
.eventi-grid {
  display: flex; flex-direction: column; gap: .5rem;
  padding: clamp(0.3rem, 1vw, .5rem); background: #fffefc;
  border: 1px solid #ecd5c2; border-top: none; border-radius: 0 0 10px 10px;
}

.evento-card {
  display: flex; flex-wrap: wrap; align-items: flex-start;
  gap: .4rem clamp(0.4rem, 1.5vw, .75rem);
  padding: .6rem clamp(0.4rem, 1.5vw, .85rem);
  border-radius: 8px; background: #fff;
  border: 1px solid #f0e2d4; transition: box-shadow 0.2s;
  overflow-wrap: break-word; word-break: break-word;
}
.evento-card:hover { box-shadow: 0 2px 10px rgba(0,0,0,0.07); }

.evento-card.karate {
  background: linear-gradient(135deg, #fdf2e4 0%, #fefaf6 100%);
  border-left: 4px solid #b22222;
}
.evento-card.taichi { border-left: 4px solid #7a1f00; }
.evento-card.shurite {
  background: linear-gradient(135deg, #f0ebe3 0%, #fefaf6 100%);
  border-left: 4px solid #8b4513;
}

.evento-data {
  font-weight: 700; color: #7a1f00; white-space: nowrap;
  flex: 0 0 auto; font-size: clamp(0.75rem, 1.8vw, .9rem);
}
.evento-arte {
  font-weight: 700; text-transform: uppercase; color: #fff;
  background: #7a1f00; padding: .12rem .45rem;
  border-radius: 999px; text-align: center;
  flex: 0 0 auto; white-space: nowrap;
  font-size: clamp(0.65rem, 1.4vw, .82rem);
}
.evento-arte.karate-badge { background: #b22222; }
.evento-arte.shurite-badge { background: #8b4513; }

.evento-dettagli {
  flex: 1 1 160px; min-width: 0;
  font-size: clamp(0.8rem, 1.6vw, .93rem);
  line-height: 1.45; overflow-wrap: break-word; word-break: break-word;
}

.evento-icons {
  display: flex; gap: .4rem; align-items: center;
  margin-left: auto; flex: 0 0 auto;
}
.evento-icons img { height: clamp(19px, 2.8vw, 26px); width: auto; opacity: 0.7; }
.evento-icons a:hover img { opacity: 1; }

/* --- RESET a:hover corsivo e p width fissi (calendario.css) --- */
/* Reset globale p: calendario.css forza width:800px + margin-left:50px */
p {
  width: auto !important;
  max-width: 100%;
  margin-left: 0 !important;
  margin-right: 0;
  padding-left: .5rem;
  padding-right: .5rem;
}

/* Reset corsivo hover su TUTTI i link */
a:hover, a:focus {
  font-style: normal !important;
  text-decoration: none;
}
a:not(.cta-link):not(.anno-pill):not(.social-link-card):hover {
  text-decoration: underline;
}

/* --- SPECIAL CARD --- */
.special-card {
  background: linear-gradient(180deg, #fffdfb 0%, #fff3e8 100%);
  border: 2px solid #c68a5e; border-radius: 12px;
  padding: 1.2rem clamp(0.5rem, 3vw, 1.25rem);
  margin-bottom: 1.5rem; text-align: center;
  box-shadow: 0 4px 14px rgba(0,0,0,0.07);
}
.special-card h2 { color: #7a1f00; margin-bottom: .75rem; font-size: clamp(0.95rem, 3vw, 1.2rem); }
.special-card h3 { color: #7a1f00; margin: .7rem 0 .3rem; font-size: clamp(0.88rem, 2.5vw, 1.05rem); }
.special-card p { margin: .2rem 0; font-size: clamp(0.85rem, 1.5vw, .95rem); }
.special-card hr { border-color: #d7b28d; margin: .5rem 0 .75rem; }
.special-card em { color: #8b2a00; }

/* ============================================================
   OVERRIDE MOBILE — correggono i valori fissi di calendario.css
   Copre smartphone portrait + landscape e tablet piccoli
   ============================================================ */
@media (max-width: 991.98px) {
  /* --- RESET BODY BACKGROUND (calendario.css imposta bg.jpg) --- */
  body {
    BACKGROUND-IMAGE: none;
    background-image: none;
    background-size: auto;
  }

  /* --- RESET WIDTH FISSI DA calendario.css --- */
  #bodyPageGallery {
    width: 100% !important;
    max-width: 100%;
    margin-top: 0;
    background-image: none;
    background-attachment: scroll;
    overflow-x: hidden;
  }

  #calendar {
    width: 100% !important;
    max-width: 100%;
  }

  /* --- RESET PARAGRAFI (calendario.css: width 800px + margin-left 50px) --- */
  p {
    width: auto !important;
    max-width: 100%;
    margin-left: 0 !important;
    margin-right: 0;
    padding-left: .5rem;
    padding-right: .5rem;
    font-size: clamp(0.85rem, 3.5vw, 1rem);
  }

  /* --- RESET HEADINGS (calendario.css: h1 padding-left 150px, h3 padding-left 60px) --- */
  h1 {
    padding-left: 0 !important;
    padding-right: 0;
    text-align: center;
  }

  h3 {
    padding-left: 0 !important;
    padding-right: 0;
    text-align: center;
    text-shadow: 1px 1px 2px #563404;
  }

  /* --- HR --- */
  hr {
    width: 90%;
    max-width: 100%;
  }

  /* --- MESE HEADER --- */
  .mese-section h3 {
    font-size: clamp(0.9rem, 3.5vw, 1.1rem);
    padding: .5rem .75rem;
  }

  /* --- QUICK LINKS --- */
  .quick-links {
    gap: .4rem;
  }

  .cta-link {
    padding: .4rem .7rem;
    font-size: clamp(0.8rem, 3vw, .9rem);
  }

  /* --- ANNI PRECEDENTI --- */
  .anniPrecedenti {
    padding: .5rem .7rem;
    margin-left: 0;
  }

  /* --- SPECIAL CARD --- */
  .special-card {
    padding: .9rem .7rem;
  }

  .special-card h2 {
    font-size: clamp(0.95rem, 4vw, 1.15rem);
  }

  .special-card h3 {
    font-size: clamp(0.85rem, 3.5vw, 1rem);
  }

  .special-card p {
    font-size: clamp(0.82rem, 3vw, .93rem);
  }

  /* --- PAGE TITLE --- */
  .page-title-box {
    padding: .5rem .7rem;
  }

  .page-title-box h1 {
    font-size: clamp(1rem, 4.5vw, 1.3rem);
  }

  /* --- CONTAINER --- */
  #contenuto {
    padding: .5rem .6rem;
    border-radius: 8px;
  }

  /* --- EVENT CARDS: colonna piena su mobile --- */
  .evento-card {
    flex-direction: column;
    align-items: stretch;
    gap: .35rem;
    padding: .6rem .7rem;
  }

  .evento-data {
    white-space: normal;
    font-size: clamp(0.85rem, 3.8vw, 1rem);
  }

  .evento-arte {
    align-self: flex-start;
    font-size: clamp(0.7rem, 3vw, .85rem);
  }

  .evento-dettagli {
    flex: 1 1 auto;
    font-size: clamp(0.82rem, 3.2vw, .95rem);
    line-height: 1.5;
    min-width: 0;
  }

  .evento-icons {
    margin-left: 0;
    align-self: flex-end;
  }

  .evento-icons img {
    height: clamp(22px, 5vw, 28px);
  }

  /* --- ANNI PRECEDENTI: pill più compatte --- */
  .anni-grid {
    gap: .35rem;
  }

  .anno-pill {
    padding: .35rem .55rem;
    font-size: clamp(0.8rem, 3vw, .9rem);
    min-width: 48px;
  }

  /* --- FOOTER --- */
  .site-footer p {
    padding-left: .5rem !important;
    padding-right: .5rem !important;
    font-size: clamp(0.78rem, 3vw, .9rem) !important;
    overflow-wrap: break-word;
    word-break: break-word;
  }

  .footer-logos {
    gap: .5rem;
  }

  .loghiInfo2 {
    max-height: 42px;
  }
}

/* --- OVERRIDE PER SCHERMI MOLTO PICCOLI (< 400px) --- */
@media (max-width: 399px) {
  .evento-card {
    padding: .5rem .55rem;
    gap: .25rem;
  }

  .evento-dettagli {
    font-size: clamp(0.78rem, 3.8vw, .9rem);
  }

  .evento-data {
    font-size: clamp(0.8rem, 4vw, .9rem);
  }

  .evento-arte {
    font-size: clamp(0.7rem, 3.2vw, .82rem);
  }

  .cta-link {
    padding: .35rem .55rem;
    font-size: .8rem;
  }

  .evento-icons img {
    height: clamp(20px, 5.5vw, 26px);
  }

  #contenuto {
    padding: .35rem .4rem;
  }
}