/* ==========================================================================
   Open Day — aggiunte allo stile del doposcuola (style.css resta identico,
   cosi' le due pagine condividono token, componenti e comportamento).
   ========================================================================== */

/* Segnaposto per i dati non ancora confermati (date, orari, prenotazione).
   Deve saltare all'occhio: va tolto prima della pubblicazione. */
.tbd {
  display: inline-block;
  padding: 0 .3em;
  border: 1.5px dashed #d62828;
  border-radius: 4px;
  background: rgba(214, 40, 40, .08);
  color: #b51f1f;
  font: inherit;
  line-height: inherit;
  white-space: nowrap;
}

/* --- hero ------------------------------------------------------------------
   La foto e' specchiata: i bambini stanno a destra e il prato libero a
   sinistra ospita il titolo. Velatura da sinistra invece che dall'alto,
   perche' il prato e' chiaro anche in cima. */
.hero--openday .hero__photo { object-position: 70% center; }
.hero--openday .h1 { font-size: clamp(46px, 7.2vw, 104px); }
.hero--openday .h1__script { font-size: 1.04em; }
.hero--openday .hero__photo + .hero__veil {
  background:
    linear-gradient(to right, rgba(20, 33, 70, .62) 0%, rgba(20, 33, 70, .38) 34%, rgba(20, 33, 70, 0) 62%),
    linear-gradient(to bottom, rgba(20, 33, 70, .4) 0%, rgba(20, 33, 70, 0) 24%);
}
.hero--openday .hero__body { justify-content: flex-start; align-items: flex-start; flex-direction: column; gap: var(--sp-40); }
.hero--openday .hero__side { width: 380px; }
.hero__eyebrow {
  align-self: flex-start;
  background: var(--yellow);
  color: var(--midnight);
}

/* --- le date (variante delle metriche) ------------------------------------ */
.metric__num .tbd { font-size: .62em; border-width: 2px; vertical-align: middle; }
.metric--blue .tbd,
.footer .tbd { color: #ffd5d5; border-color: #ff9c9c; background: rgba(255, 156, 156, .12); }

/* --- le tre scuole -------------------------------------------------------- */
.scuole { padding: var(--sp-80) var(--sp-40) var(--sp-24); display: flex; flex-direction: column; gap: var(--sp-64); }
.livelli { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-24); align-items: stretch; }
.livello {
  display: flex;
  flex-direction: column;
  gap: var(--sp-24);
  padding: var(--sp-12) var(--sp-12) var(--sp-32);
}
.livello--pink { background: var(--pink); }
.livello--yellow { background: var(--yellow); }
.livello--blue { background: var(--midnight); color: var(--cloud); }
.livello__photo { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-s); }
.livello__head { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-12); padding-inline: var(--sp-12); }
.livello__head .pill { background: var(--cloud); color: var(--midnight); }
.livello__head .h3 { font-size: clamp(30px, 2.8vw, 40px); line-height: 1.1; }
.attivita { display: flex; flex-direction: column; padding-inline: var(--sp-12); }
.attivita li {
  display: flex;
  gap: var(--sp-16);
  padding-block: var(--sp-16);
  border-top: .4px solid currentColor;
}
.attivita img { width: 24px; height: 24px; flex: none; margin-top: 2px; }
.attivita b { display: block; font-size: 18px; line-height: 1.35; }
.attivita span { display: block; margin-top: 2px; }
.livello--pink .attivita span,
.livello--yellow .attivita span { color: #3d4a6e; }
.livello--blue .attivita span { color: var(--soft-gray); }
.attivita a { text-decoration: underline; text-underline-offset: 3px; }

/* rimando al doposcuola: informazione di servizio, tono minore */
.ponte {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-24);
  background: var(--ice);
  padding: var(--sp-24) var(--sp-24) var(--sp-24) var(--sp-32);
}
.ponte p { max-width: 720px; }

/* --- teatro: il mazzo di card senza l'effigie ------------------------------ */
.values--teatro .deck .value { height: 360px; }
.values--teatro .head__text p { max-width: 760px; margin-inline: auto; }
.values__credit { position: relative; z-index: 1; text-align: center; }

/* --- yoga al nido: riusa il riquadro rosa dei contatti --------------------- */
.contact--yoga .contact__head { gap: var(--sp-24); }
.contact--yoga .pill { background: var(--cloud); }
.contact--yoga .h2 { line-height: 1.1; }
.contact--yoga .contact__head > p { max-width: 560px; font-size: 18px; line-height: 1.5; }
.fasi { display: flex; flex-wrap: wrap; gap: var(--sp-8); }
.fasi .pill { font-size: 14px; padding: 4px var(--sp-12); }

@media (max-width: 1200px) {
  .livelli { grid-template-columns: 1fr; max-width: 640px; margin-inline: auto; }
}

@media (max-width: 760px) {
  .hero--openday .hero__side { width: 100%; }
  .hero--openday .hero__photo { object-position: 78% center; }
  .hero--openday .hero__photo + .hero__veil {
    background: linear-gradient(to bottom, rgba(20, 33, 70, .66) 0%, rgba(20, 33, 70, .45) 45%, rgba(20, 33, 70, .1) 80%);
  }
  .scuole { padding: var(--sp-48) var(--sp-16) var(--sp-24); gap: var(--sp-40); }
  .livelli { gap: var(--sp-12); }
  .ponte { flex-direction: column; align-items: flex-start; padding: var(--sp-24); }
  .values--teatro .deck .value { height: auto; }
  .metric__num .tbd { font-size: .7em; }
}
.contact--yoga .contact__media img { object-position: center 18%; }

/* etichetta delle attivita' nuove del 2027/28 (yoga, teatro, cucina) */
.nuovo {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 8px;
  border-radius: var(--r-l);
  background: var(--midnight);
  color: var(--cloud);
  font-family: var(--font-body);
  font-size: 12px;
  font-style: normal;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  vertical-align: 2px;
}
.pill .nuovo { margin: 0 8px 0 -8px; }
.livello__nota { font-size: 14px; opacity: .8; }

/* su telefono le etichette lunghe (es. "Novità · Nido integrato · ottobre e
   novembre") devono poter andare a capo, altrimenti sforano lo schermo */
@media (max-width: 760px) {
  .pill { white-space: normal; max-width: 100%; }
}

/* titoli su piu' righe: righe bilanciate, e a capo dove li farebbe una
   persona (.a-capo sempre, .a-capo-m solo su telefono) */
.h1, .h2, .h3, .h5, .h6, .h7 { text-wrap: balance; }
.a-capo-m { display: none; }
@media (max-width: 760px) { .a-capo-m { display: inline; } }

/* card degli open day su telefono: compatte, senza il vuoto fra la data e
   il titolo che dava l'altezza minima pensata per il desktop */
@media (max-width: 760px) {
  .metrics .metric { min-height: 0; gap: var(--sp-16); }
}

/* teatro su telefono: le cinque card diventano un carosello orizzontale,
   la successiva si intravede a destra per far capire che si scorre */
@media (max-width: 760px) {
  .values--teatro .deck {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: var(--sp-12);
    margin-inline: calc(var(--sp-16) * -1);
    padding: var(--sp-8) var(--sp-16) var(--sp-16);
    scroll-padding-inline: var(--sp-16);
  }
  .values--teatro .deck::-webkit-scrollbar { display: none; }
  .values--teatro .deck .value {
    flex: 0 0 78%;
    width: 78%;
    min-height: 300px;
    scroll-snap-align: start;
  }
}

/* --- prenota la visita: il modulo sta nel piede, al posto dei pulsanti ---- */
.form--footer { flex: none; color: var(--midnight); gap: var(--sp-24); }
.form[hidden] { display: none; }
.prenota-contatti__azioni { display: flex; flex-wrap: wrap; gap: var(--sp-12); }
.form--footer .consent a { color: var(--midnight); }
.form__esito { padding: var(--sp-12) var(--sp-16); border-radius: var(--r-s); background: var(--ice); }
.form__esito--errore { background: #fde8e8; color: #8a1c1c; }
.btn:disabled { opacity: .6; cursor: wait; }

/* barra fissa di prenotazione: solo su telefono, un riquadro (non una
   pillola, che si confondeva con le etichette) con le date e l'azione.
   Compare dopo la prima schermata, vedi lo script in fondo alla pagina. */
.prenota-bar { display: none; }
@media (max-width: 760px) {
  .prenota-bar {
    position: fixed;
    left: var(--sp-12);
    right: var(--sp-12);
    bottom: calc(var(--sp-12) + env(safe-area-inset-bottom, 0px));
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-12);
    padding: var(--sp-12) var(--sp-12) var(--sp-12) var(--sp-16);
    border-radius: var(--r-m);
    background: var(--midnight);
    color: var(--cloud);
    box-shadow: 0 10px 30px rgba(20, 33, 70, .35);
    transform: translateY(150%);
    opacity: 0;
    pointer-events: none;
    transition: transform .3s ease, opacity .3s ease;
  }
  .prenota-bar.is-visibile { transform: none; opacity: 1; pointer-events: auto; }
  .prenota-bar__testo { display: flex; flex-direction: column; gap: 2px; }
  .prenota-bar__testo small { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--yellow); }
  .prenota-bar__testo b { font-size: 18px; line-height: 1.2; }
  .prenota-bar .btn__icon { width: 40px; height: 40px; }
}

/* il modulo e' un riquadro chiaro dentro il piede blu: segnaposto in rosso pieno */
.form--footer .tbd { color: #b51f1f; border-color: #d62828; background: rgba(214, 40, 40, .08); }

/* logo ufficiale (versione bianca) nel menu e nel piede */
.brand--logo img { display: block; height: 46px; width: auto; }
.footer__logo { display: block; align-self: flex-start; height: 64px; width: auto; }
@media (max-width: 760px) {
  .brand--logo img { height: 38px; }
  .footer__logo { height: 52px; }
}

/* pulsante "Prenota questa data" in fondo a ogni card: la card cresce in
   altezza invece di comprimere il testo, e il titolo resta allineato */
@media (min-width: 761px) { .metrics .metric { height: auto; min-height: 400px; } }
.metric__text .metric__btn { margin-top: var(--sp-8); font-size: 15px; padding-left: var(--sp-16); }

/* dicitura sulle foto ricreate con l'IA */
.footer__nota { margin-top: var(--sp-12); font-size: 13px; opacity: .7; max-width: 640px; margin-inline: auto; }


/* --- apertura a scorrimento ------------------------------------------------ */
.hero--openday .hero__photo { opacity: 0; transition: opacity 1s ease; }
.hero--openday .hero__photo.is-attiva { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .hero--openday .hero__photo { transition: none; } }

/* apertura su desktop: alta quanto lo schermo (senza superare 880px) e con
   titolo e pulsante spinti in basso, sempre dentro la prima schermata */
@media (min-width: 761px) {
  .hero--openday { min-height: 0; height: clamp(560px, calc(100svh - 48px), 880px); }
  .hero--openday .hero__body { margin-top: auto; padding-bottom: var(--sp-40); gap: var(--sp-32); }
}
/* stessa logica su telefono: titolo e pulsante in basso, dentro la prima schermata */
@media (max-width: 760px) {
  .hero--openday { min-height: 0; height: clamp(540px, calc(100svh - 24px), 900px); }
  .hero--openday .hero__body { margin-top: auto; padding-bottom: var(--sp-16); }
}
/* telefono: pillola, titolo e testo piu' vicini tra loro */
@media (max-width: 760px) {
  .hero--openday .hero__body { gap: var(--sp-16); }
  .hero--openday .hero__side { gap: var(--sp-20, 20px); }
}
/* inquadratura per foto su telefono (--pos-m nell'HTML di ogni foto) */
@media (max-width: 760px) {
  .hero--openday .hero__photo { object-position: var(--pos-m, 78% center); }
}

/* FAQ: link leggibili dentro le risposte */
.faq__list details p a { color: var(--midnight); text-decoration: underline; text-underline-offset: 3px; }

/* --- movimento discreto ----------------------------------------------------
   Entrate allo scroll, parallasse leggera nell'apertura, microeffetti al
   passaggio del mouse. Si usano le proprieta' "translate" e "scale" (non
   "transform") per non toccare le rotazioni gia' presenti, per esempio nel
   mazzo del teatro. Tutto spento con "riduci movimento"; senza JavaScript
   la classe .anim non c'e' e la pagina resta statica e visibile. */
.anim .rivela { opacity: 0; translate: 0 22px; transition: opacity .7s ease, translate .7s cubic-bezier(.2, .7, .2, 1); }
.anim .rivela.visto { opacity: 1; translate: 0 0; }

.hero--openday .hero__photo { scale: 1.12; will-change: translate; }

.metric, .livello, .value, .faq__list details, .ponte {
  transition: translate .25s ease, box-shadow .25s ease, opacity .7s ease;
}
@media (hover: hover) {
  .metric:hover, .livello:hover, .ponte:hover { translate: 0 -4px; box-shadow: 0 14px 30px rgba(36, 59, 121, .12); }
  .faq__list details:hover { translate: 4px 0; }
  .btn .btn__icon { transition: translate .2s ease; }
  .btn:hover .btn__icon { translate: 3px -3px; }
}
@media (prefers-reduced-motion: reduce) {
  .anim .rivela { opacity: 1; translate: none; transition: none; }
  .hero--openday .hero__photo { scale: 1; }
  .metric:hover, .livello:hover, .ponte:hover, .faq__list details:hover, .btn:hover .btn__icon { translate: none; }
}
.field__nota { font-size: 13px; color: var(--charcoal); }

/* niente righe finali di una o due parole: il browser ridistribuisce le ultime righe */
p, li, dd, dt, figcaption, blockquote, label, small { text-wrap: pretty; }

/* "Novita'": il testo e' tutto maiuscolo, quindi il bollino si taglia
   sull'altezza delle maiuscole e il testo resta centrato in verticale */
@supports (text-box: trim-both cap alphabetic) {
  .nuovo { text-box: trim-both cap alphabetic; padding-top: 5px; padding-bottom: 5px; line-height: 1; vertical-align: 1px; }
}