
:root{
  --primary:#711854;
  --accent:#B9975B;
  --bg:#ffffff;
  --text:#222;
  --heading-font:"Roboto Condensed",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial;
  --nav-font:"Sofia Sans Extra Condensed","Roboto Condensed",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial;
  --sticky-offset: 100px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial}
a{color:var(--primary);text-decoration:none}
a:hover{text-decoration:underline}
.container{max-width:1100px;margin:0 auto;padding:20px;overflow:visible}
header{position:sticky;top:0;background:#fff;z-index:70;backdrop-filter:saturate(1.1) blur(8px)}
.brand .stack{display:flex;flex-direction:column;line-height:1.12}
.brand .stack .h1{
  font-family: 'Noto Serif Display', serif;
  font-size: clamp(28px,5.2vw,56px);
  font-weight: 600;
  letter-spacing: .5px;
  color: var(--primary);
  text-transform: uppercase;
  margin: 0;
}
.brand .stack .place{
  font-family: 'Noto Serif Display', serif;
  font-size: clamp(18px,2.8vw,28px);
  font-weight: 600;
  color: var(--primary);
  text-transform: uppercase;
  margin: 0;
}
.brand .stack .subtitle{
  font-family: 'Noto Serif Display', serif;
  font-size: clamp(16px,2.4vw,22px);
  font-weight: 500;
  color: var(--accent);
  margin: 0;
}
.nav{display:flex;gap:5px;justify-content:center;align-items:center;margin-top:20px;flex-wrap:nowrap;white-space:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch}
.nav .tab{display:inline-flex;align-items:center;gap:6px;border:1.5px solid var(--primary);border-radius:999px;padding:6px 12px;font-family:var(--nav-font);font-weight:800;font-size:14px;color:var(--primary);background:#fff;box-shadow:0 1px 0 rgba(0,0,0,.03);transition:background .2s ease,color .2s ease,box-shadow .2s ease}
.nav .tab svg{width:15px;height:15px}
.nav .tab:hover,.nav .tab:focus{background:var(--primary);color:#fff;text-decoration:none;outline:none}
.nav .tab.active{background:var(--primary);color:#fff}
.countdown{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;max-width:720px;margin:18px auto;padding:10px 12px;border:2px solid var(--accent);border-radius:12px;background:#fff7ed}
.countdown .head{font-family:var(--heading-font);font-weight:800;letter-spacing:.8px;text-transform:uppercase;color:var(--primary);font-size:clamp(14px,2vw,18px)}
.countdown .units{display:flex;flex-direction:row;gap:12px;flex-wrap:wrap;align-items:center;justify-content:center}
.countdown .unit{min-width:68px;padding:8px 10px;border-radius:10px;border:1px solid #eee;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center}
.countdown .num{font-size:clamp(18px,3.2vw,24px);font-weight:800;color:var(--primary)}
.countdown .lab{font-size:12px;color:#555}
.section-title{margin:30px 0 10px;border-left:8px solid var(--accent);padding-left:12px;font-size:clamp(22px,3.2vw,34px);font-weight:800;color:var(--primary)}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.event-list{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.card{border:1px solid #eee;border-radius:14px;overflow:hidden;background:#fff;box-shadow:0 2px 8px rgba(0,0,0,.04);transition:transform .15s ease, box-shadow .15s ease}
.card:hover{transform:translateY(-2px);box-shadow:0 6px 18px rgba(0,0,0,.08)}
.card .media{width:100%;aspect-ratio:1/1;background:#f3f3f3;display:flex;align-items:center;justify-content:center;border-bottom:1px solid #eee}
.card .media img{width:100%;height:100%;object-fit:contain;object-position:center center}
.card .content{padding:12px}
.meta{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:6px}
.meta .chip{background:var(--primary);color:#fff;border:1px solid var(--primary);border-radius:999px;padding:5px 10px;font-size:13px;font-weight:700;display:inline-flex;align-items:center;gap:6px}
.meta .chip svg{width:12px;height:12px}
.title{font-family:var(--heading-font);font-size:clamp(18px,2.4vw,26px);font-weight:900;color:#111;margin:0 0 8px;text-decoration:underline;text-decoration-color:var(--accent);text-underline-offset:4px}
.card.noimg .title{font-size:clamp(22px,2.8vw,32px)}
.subtitle{margin-top:6px;font-size:clamp(14px,2vw,18px);font-weight:600;color:#333}
.footer{margin:40px 0 20px;padding-top:16px;border-top:1px solid #eee;color:#666;font-size:14px;text-align:center}
.footer .credit{display:block;margin-top:6px}
.socials{display:flex;gap:10px;align-items:center;justify-content:center}
.socials a{display:inline-flex;align-items:center;gap:8px;padding:8px 10px;border:1px solid #eee;border-radius:10px}
.date-nav{position:-webkit-sticky;position:sticky;top:var(--sticky-offset);background:#fff;z-index:60;padding:8px 0;display:flex;flex-wrap:nowrap;justify-content:center;gap:6px;white-space:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch}
.date-nav a{padding:6px 11px;border:1px solid var(--primary);border-radius:8px;color:var(--primary);font-family:var(--nav-font);font-weight:800;font-size:14px;text-transform:uppercase;letter-spacing:0}
.date-nav a:hover{background:var(--primary);color:#fff}
@media (max-width:900px){.grid{grid-template-columns:1fr 1fr}.event-list{grid-template-columns:1fr}}
@media (max-width:600px){.grid{grid-template-columns:1fr}header{flex-direction:column;align-items:flex-start}}
.date-block{position:relative;padding-top:10px}
.date-block:not(:first-of-type)::before{content:"";display:block;border-top:2px dotted var(--accent);margin:28px 0 20px}
.layout-toolbar{display:flex;gap:8px;justify-content:center;align-items:center;margin:6px 0 14px}
.layout-toolbar .btn-pill{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border:1.5px solid var(--primary);border-radius:9999px;background:#fff;color:var(--primary);font-family:var(--nav-font);font-weight:800;font-size:13px;cursor:pointer}
.layout-toolbar .btn-pill[aria-selected="true"],.layout-toolbar .btn-pill.active{background:var(--primary);color:#fff}
#orgGrid img{width:100%;height:auto;max-height:var(--org-max, clamp(560px,62vh,980px))!important;object-fit:contain}
#orgGrid .card:first-child img{max-height:var(--org-max-first, clamp(660px,72vh,1140px))!important}
#partnersGrid img{width:100%;height:auto;max-height:var(--par-max, clamp(420px,48vh,820px))!important;object-fit:contain}
.logos{display:grid;gap:18px}
#orgGrid.logos.grid{grid-template-columns:repeat(2,1fr)}
@media (min-width:1200px){#orgGrid.logos.grid{grid-template-columns:repeat(3,1fr)}}
#orgGrid.logos.list{grid-template-columns:1fr;justify-items:center}
#orgGrid.logos.list .card{width:min(900px,94vw)}
#partnersGrid.logos.grid{grid-template-columns:repeat(3,1fr)}
@media (max-width:1000px){#partnersGrid.logos.grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){#partnersGrid.logos.grid{grid-template-columns:1fr}}
#partnersGrid.logos.list{grid-template-columns:1fr;justify-items:center}
#partnersGrid.logos.list .card{width:min(900px,94vw)}
@media (max-width:600px){
  #orgGrid img{width:100%;height:auto;max-height:var(--org-max, clamp(560px,62vh,980px))!important;object-fit:contain}
  #orgGrid .card:first-child img{max-height:var(--org-max-first, clamp(660px,72vh,1140px))!important}
  #partnersGrid img{width:100%;height:auto;max-height:var(--par-max, clamp(420px,48vh,820px))!important;object-fit:contain}
}

/* Compensation for SVGs with large internal margins */
#partnersGrid img[src$="proloco.svg"]{
  transform: scale(1.18);
  transform-origin: center;
}

/* descrizione per Percorso del Gusto (piccola e in corsivo) */
.desc.pdg{margin-top:6px;font-size:13px;font-style:italic;color:#444;line-height:1.35}

/* footer credit */
.footer-credits{
  text-align:center;
  font-size:0.95rem;
  font-weight:600;
  margin:16px 0 8px;
  color:#333;
}


/* footer credit: mobile single-line tweak */
@media (max-width: 480px){
  .footer-credits{
    font-size: 0.84rem; /* just a hair smaller */
    white-space: nowrap; /* stay on one line */
  }
}
