/* Fun and School - prototipo. Mediaera srl.
   Motivo portante: l'eta' come asse. La scala 2->19 e' insieme
   navigazione, filtro e codice cromatico del catalogo. */

:root{
  --ink:#10172E;
  --paper:#FFFFFF;
  --mist:#EDF0F7;
  --line:#D7DDEB;
  --muted:#5B6480;
  --action:#FF5A1F;

  --age-1:#9EC5FF;
  --age-2:#6FA3FB;
  --age-3:#4078ED;
  --age-4:#2B51C9;
  --age-5:#1D2F8F;

  --shell:min(1140px, 92vw);
  --r:4px;
}

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:"Instrument Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,.display{
  font-family:"Bricolage Grotesque","Instrument Sans",system-ui,sans-serif;
  font-weight:600;
  letter-spacing:-0.02em;
  line-height:1.05;
  margin:0;
}

a{color:inherit}
img{max-width:100%;display:block}

.shell{width:var(--shell);margin-inline:auto}

/* ---------- avviso prototipo ---------- */
.proto{
  background:var(--ink);color:#C9D2E8;
  font-size:13px;line-height:1.5;padding:9px 0;
}
.proto strong{color:#fff;font-weight:600}

/* ---------- testata ---------- */
.top{border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--paper);z-index:30}
.top .shell{display:flex;align-items:center;gap:28px;min-height:70px}
.brand{font-family:"Bricolage Grotesque",sans-serif;font-weight:700;font-size:19px;letter-spacing:-0.03em;text-decoration:none;white-space:nowrap}
.brand span{color:var(--action)}
.top nav{margin-left:auto;display:flex;gap:20px;flex-wrap:wrap}
.top nav a{font-size:14.5px;text-decoration:none;color:var(--muted);padding:4px 0;border-bottom:1.5px solid transparent}
.top nav a:hover,.top nav a:focus-visible{color:var(--ink);border-bottom-color:var(--action)}
.lang{font-size:13px;color:var(--muted);text-decoration:none;border:1px solid var(--line);padding:4px 9px;border-radius:var(--r)}
.lang:hover{border-color:var(--ink);color:var(--ink)}

/* ---------- hero ---------- */
.hero{padding:76px 0 8px}
.hero h1{font-size:clamp(38px,6.2vw,76px);max-width:16ch}
.hero .sub{margin:22px 0 0;font-size:clamp(17px,2vw,21px);color:var(--muted);max-width:52ch}

/* ---------- la scala d'eta' ---------- */
.scala{padding:54px 0 74px}
.scala .intro{font-size:15px;color:var(--muted);margin:0 0 20px}
.rail{display:grid;grid-template-columns:repeat(5,1fr);gap:4px}
.seg{
  text-decoration:none;display:block;padding:18px 16px 20px;
  border-top:5px solid var(--c);background:var(--mist);
  transition:background .14s ease, transform .14s ease;
}
.seg:hover,.seg:focus-visible{background:#E2E8F5;transform:translateY(-3px)}
.seg .anni{font-family:"Bricolage Grotesque",sans-serif;font-size:27px;font-weight:600;letter-spacing:-0.03em;display:block}
.seg .nome{display:block;margin-top:8px;font-size:14.5px;line-height:1.35}
.seg .cls{display:block;margin-top:6px;font-size:12.5px;color:var(--muted);line-height:1.35}

/* ---------- sezioni ---------- */
.sez{padding:62px 0;border-top:1px solid var(--line)}
.sez h2{font-size:clamp(26px,3.4vw,38px);max-width:20ch}
.sez .occhio{font-size:15px;color:var(--muted);margin:14px 0 0;max-width:58ch}

/* ---------- righe servizio (una riga per servizio, come da brief) ---------- */
.righe{margin-top:34px;border-top:1px solid var(--line)}
.riga{
  display:grid;grid-template-columns:70px 1fr auto;gap:22px;align-items:baseline;
  padding:22px 0;border-bottom:1px solid var(--line);text-decoration:none;
}
.riga:hover{background:var(--mist)}
.riga .eta{font-family:"Bricolage Grotesque",sans-serif;font-size:15px;font-weight:600;color:var(--c)}
.riga h3{font-size:21px}
.riga p{margin:6px 0 0;font-size:15px;color:var(--muted);max-width:60ch}
.riga .vai{font-size:14px;color:var(--muted);white-space:nowrap}
.riga:hover .vai{color:var(--action)}

/* ---------- filtri catalogo ---------- */
.filtri{display:flex;gap:9px;flex-wrap:wrap;margin:28px 0 8px;align-items:center}
.filtri .et{font-size:13px;color:var(--muted);margin-right:4px}
.chip{
  font-size:14px;text-decoration:none;padding:7px 14px;border:1px solid var(--line);
  border-radius:40px;color:var(--ink);background:var(--paper);white-space:nowrap;
}
.chip:hover{border-color:var(--ink)}
.chip.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.chip.on .pal{background:#fff}
.pal{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--c);margin-right:7px;vertical-align:1px}
.conteggio{font-size:14px;color:var(--muted);margin:18px 0 0}

/* ---------- schede corso ---------- */
.griglia{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:1px;background:var(--line);margin-top:26px;border:1px solid var(--line)}
.card{background:var(--paper);padding:26px 24px 24px;text-decoration:none;display:flex;flex-direction:column;gap:12px}
.card:hover{background:var(--mist)}
.card .fascia{font-size:13px;font-weight:600;color:var(--c)}
.card h3{font-size:22px}
.card p{margin:0;font-size:15px;color:var(--muted)}
.card .meta{margin-top:auto;padding-top:14px;border-top:1px solid var(--line);font-size:13.5px;color:var(--muted);display:flex;gap:14px;flex-wrap:wrap}

/* ---------- turni ---------- */
.turni{margin-top:30px;border-top:1px solid var(--line)}
.turno{display:grid;grid-template-columns:1.1fr 1fr .9fr auto;gap:20px;align-items:center;padding:20px 0;border-bottom:1px solid var(--line)}
.turno .quando{font-weight:600}
.turno .dove,.turno .quanto{font-size:15px;color:var(--muted)}
.turno .prezzo{font-family:"Bricolage Grotesque",sans-serif;font-size:21px;font-weight:600;white-space:nowrap}
.stato{font-size:13px;display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.stato::before{content:"";width:8px;height:8px;border-radius:50%;background:#2E9E5B}
.stato.ultimi::before{background:var(--action)}
.stato.ultimi{color:var(--action);font-weight:600}
.stato.esaurito::before{background:#9AA3B8}
.stato.esaurito{color:var(--muted)}

/* ---------- calendario settimanale ---------- */
.week{display:grid;grid-template-columns:repeat(6,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-top:30px}
.giorno{background:var(--paper);padding:16px 14px;min-height:170px}
.giorno h3{font-size:14px;font-weight:600;color:var(--muted);margin-bottom:14px}
.slot{border-left:3px solid var(--age-3);padding:3px 0 3px 10px;margin-bottom:14px}
.slot.evento{border-left-color:var(--action)}
.slot .ora{font-family:"Bricolage Grotesque",sans-serif;font-weight:600;font-size:15px}
.slot .tit{font-size:13.5px;line-height:1.35;margin-top:2px}
.slot .ta{font-size:12px;color:var(--muted);margin-top:3px}

/* ---------- eventi ---------- */
.eventi{margin-top:16px;border-top:1px solid var(--line)}
.ev{display:grid;grid-template-columns:150px 1fr auto;gap:22px;padding:22px 0;border-bottom:1px solid var(--line);align-items:start}
.ev .data{font-family:"Bricolage Grotesque",sans-serif;font-weight:600;font-size:17px}
.ev .data small{display:block;font-family:"Instrument Sans",sans-serif;font-weight:400;font-size:13.5px;color:var(--muted);margin-top:3px}
.ev h3{font-size:19px}
.ev p{margin:6px 0 0;font-size:15px;color:var(--muted);max-width:62ch}

/* ---------- welfare ---------- */
.portali{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);margin-top:30px}
.portale{background:var(--paper);padding:26px 24px}
.portale h3{font-size:20px}
.portale .mod{font-size:13px;color:var(--action);font-weight:600;margin-top:6px}
.portale ol{margin:16px 0 0;padding-left:19px;font-size:15px;color:var(--muted)}
.portale ol li{margin-bottom:7px}
.portale .nota{font-size:13.5px;color:var(--muted);margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}

/* ---------- riquadro ---------- */
.box{background:var(--mist);padding:30px 28px;margin-top:34px}
.box h3{font-size:20px;margin-bottom:10px}
.box p{margin:0;font-size:15px;color:var(--muted);max-width:66ch}

/* ---------- azioni ---------- */
.cta{display:inline-block;margin-top:26px;background:var(--action);color:#fff;text-decoration:none;
     padding:14px 26px;font-weight:600;font-size:16px;border-radius:var(--r)}
.cta:hover{background:#E84A12}
.cta.ghost{background:transparent;color:var(--ink);border:1.5px solid var(--ink)}
.cta.ghost:hover{background:var(--ink);color:#fff}

/* ---------- briciole ---------- */
.bricio{font-size:14px;color:var(--muted);padding-top:34px}
.bricio a{text-decoration:none}
.bricio a:hover{color:var(--action)}

/* ---------- piede ---------- */
.foot{border-top:1px solid var(--line);margin-top:70px;padding:46px 0 60px;font-size:14px;color:var(--muted)}
.foot .cols{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:34px}
.foot h4{font-family:"Bricolage Grotesque",sans-serif;font-size:14px;font-weight:600;color:var(--ink);margin:0 0 12px}
.foot a{text-decoration:none}
.foot a:hover{color:var(--action)}
.foot ul{list-style:none;margin:0;padding:0}
.foot li{margin-bottom:7px}
.foot .fine{margin-top:34px;padding-top:22px;border-top:1px solid var(--line);font-size:13px;display:flex;gap:16px;flex-wrap:wrap}

:focus-visible{outline:2.5px solid var(--action);outline-offset:3px}

@media (max-width:900px){
  .rail{grid-template-columns:repeat(2,1fr)}
  .week{grid-template-columns:repeat(2,1fr)}
  .turno{grid-template-columns:1fr 1fr;row-gap:12px}
  .foot .cols{grid-template-columns:1fr}
}
@media (max-width:620px){
  body{font-size:16px}
  .top .shell{flex-wrap:wrap;gap:12px;padding:12px 0}
  .top nav{order:3;width:100%;margin-left:0;gap:14px}
  .rail{grid-template-columns:1fr}
  .week{grid-template-columns:1fr}
  .riga{grid-template-columns:1fr;gap:6px}
  .riga .vai{display:none}
  .ev{grid-template-columns:1fr;gap:8px}
  .hero{padding:48px 0 4px}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
  .seg:hover{transform:none}
}