/* expy home — MOBILE. Tap-to-open BOTTOM SHEETS, tidy header, no UI overlap.
   CONDIZIONE: `(max-width:640px), (hover:none)` — finestra stretta OPPURE puntatore touch.
   E' la stessa identica condizione di `isTouch` in chrome-content.js e della media query in
   header-v2.css: sono tre punti che devono restare allineati, o le sheet vengono costruite
   dal JS senza che il CSS le stili (tablet) o restano non costruite mentre il CSS le
   presuppone (finestra stretta col mouse). Vedi il commento esteso in chrome-content.js. */

/* accordion toggle + its caret are desktop-hidden by default */
#btn-acc{display:none}
.acc-caret{display:none}
/* X close button only exists on the mobile sheets */
.cc-x{display:none}

@media (max-width:640px),(hover:none){
  /* ── TOP BAR ── la pillola header ora e' l'header ricostruito a mano `.xh`: misure e
     comportamento mobile stanno in header-v2.css (144px fissi, cresce solo in altezza).
     Qui non serve piu' nulla: le tre righe che comprimevano il contenitore Framer
     `.framer-o5bwp7-container` sono state tolte il 2026-08-09, quell'elemento non esiste
     piu' in index-v2.ejs (unica view che carica questo foglio). ── */
  /* freeze the menu items on touch → tapping Contact / Utility (and every other menu link) never
     slides/wobbles the label before navigating; it stays perfectly fixed, exactly like CAMBIA
     LINGUA. Framer drives a press "wobble" via inline transforms (scaleX + translateX) on the
     inner text spans; in the centered pill that width change re-lays-out the text (~38px jump).
     We override EVERY transform/transition/animation inside a nav link, and hide the duplicated
     rolling label so no text-swap can show. (Mobile only — desktop keeps its hover roll.) */
  nav a,
  nav a *{transform:none!important;transition:none!important;animation:none!important}
  nav a .framer-v35kk8{display:none!important}
  /* on tap framer toggles a `.hover` variant on the link that adds padding-left:44px (the visible
     lateral "swap") + reveals/slides a small icon pill. Force the hover variant to match rest → 0
     movement, and hide the hover-only decorative icon (menu items show pure text at rest, so this
     is invisible except during the press) so the item stays perfectly still, like CAMBIA LINGUA. */
  nav a.hover,
  nav a:hover{padding:0!important}
  nav a svg{display:none!important}

  /* BUSINESS button — short label + arrow, SAME height as the header pill, top-right */
  #cc-biz{top:22px;right:16px;height:44px;padding:0 14px;gap:8px;align-items:center;border-radius:8px}
  #cc-biz .biz-full{display:none}
  #cc-biz .biz-short{display:inline;font-size:11px;letter-spacing:.14em}
  #cc-biz .arrow svg{width:12px;height:12px}

  /* email + instagram now live in the burger menu → hide the separate chip */
  #cc-social{display:none!important}

  /* ── COMANDI A SINISTRA, IN ALTO (2026-08-12, su richiesta) ────────────────────────────
     Musica e filtri restano sulla stessa x di prima (14px) e salgono sotto la pillola
     dell'header: la pillola chiusa e' 44 alta a y=22, quindi finisce a 66 → il primo tondo
     parte da 82, il secondo da 132 (50 = 42 di tondo + 8 d'aria, lo stesso passo di prima).
     L'ordine e' quello di prima letto dal basso: musica sopra, filtri sotto.
     A menu APERTO la pillola arriva a y=285 e li' coprirebbe tutti e due: mentre e' aperto i
     comandi si fanno da parte, com'e' gia' per l'hero (regola "mai due elementi accavallati").
     La radio si apre a destra della nota, sulla stessa riga. */
  #cc-music{left:14px;top:82px;bottom:auto;width:42px;height:42px;border-radius:50%}
  #cc-radio{left:64px;top:82px;bottom:auto}
  /* il fumetto scende SOTTO il tasto (prima stava sopra, che ora sarebbe fuori schermo) e
     resta agganciato alla colonna dei comandi */
  #cc-music-tip{left:14px;top:184px;bottom:auto;width:min(238px,calc(100vw - 28px))}
  body.music-open #cc-music-tip{opacity:0;pointer-events:none}
  body.music-open #cc-hero{opacity:0;pointer-events:none;transition:opacity .3s ease}
  body.chrome-open #cc-music,body.chrome-open #cc-radio{opacity:0;pointer-events:none;transition:opacity .3s ease}
  body.burger-open #cc-music,body.burger-open #cc-radio,
  body.burger-open #cc-music-tip,body.burger-open .expy-side-buttons{opacity:0;pointer-events:none;transition:opacity .3s ease}
  /* Al tap su un POI il tasto musica se ne va in dissolvenza e torna alla chiusura della card,
     esattamente come il tasto filtri qui sotto (`body.poi-open .expy-side-buttons`). Su desktop
     resta dov'e': li' la card non gli finisce addosso. Richiesta 2026-08-12. */
  body.poi-open #cc-music,body.poi-open #cc-radio,
  body.poi-open #cc-music-tip{opacity:0;pointer-events:none;transition:opacity .3s ease}

  /* hero glass — sale appena sopra la fila PER TE / NOVITÀ (bottom:14 + 44 di pillola + aria).
     Titolo piu' piccolo del desktop: a 375px il nowrap deve stare dentro lo schermo. */
  #cc-hero{bottom:74px;padding:16px 20px 18px;gap:11px;border-radius:18px;max-width:calc(100vw - 24px);transition:opacity .35s ease}
  #cc-quote{font-size:17px}
  #cc-enter{padding:10px 24px;font-size:11px}
  /* burger open → fade the hero out; fade back in on close */
  body.burger-open #cc-hero{opacity:0;pointer-events:none}

  /* ── SIDE CONTROLS ── il tondo dei filtri apre la fila verso destra. Dal 2026-08-12 sta in
     ALTO a sinistra, sotto il tasto musica (82 + 42 + 8 = 132), non piu' sopra la pillola
     PER TE: vedi il blocco dei comandi qui sopra per le misure. ── */
  #btn-acc{display:flex;position:relative;overflow:visible}
  .acc-caret{display:none}   /* no arrow on the filter button */
  .expy-side-buttons{left:14px;top:132px;bottom:auto;transform:none;gap:8px;flex-direction:row;align-items:center}
  .expy-side-buttons:not(.expanded) .expy-side-btn:not(#btn-acc){display:none}
  .expy-side-btn{width:42px;height:42px}

  /* ── COLLAPSED PILLS (bottom) — FIXED buttons, never morph. Tapping opens a SEPARATE sheet. ── */
  #cc-msg{left:14px;bottom:14px;width:auto;height:44px;padding:0 16px;transform-origin:center;overflow:visible}
  #cc-msg .m-head{justify-content:center;height:100%;gap:0}
  #cc-msg .m-head .cc-note{position:absolute;top:-9px;left:-8px;width:22px;height:24px;
    background:none;border:0;-webkit-backdrop-filter:none;backdrop-filter:none;
    animation:ccPop .5s cubic-bezier(.34,1.56,.64,1)}
  #cc-msg .m-head .cc-note svg{width:16px;height:16px;filter:drop-shadow(0 1px 2px rgba(0,0,0,.55))}
  #cc-msg .m-head .m-label{display:none}
  /* "PER TE" perfectly centered in the pill: justify-content on .m-head centers the box, and the
     left padding balances the trailing space that letter-spacing adds after the last letter */
  #cc-msg .m-head .m-label-short{display:inline;font-size:12px;letter-spacing:.14em;padding-left:.14em;color:#fff;white-space:nowrap;text-shadow:0 1px 4px rgba(0,0,0,.55)}
  /* Il corpo del messaggio vive nella SHEET, non nella pillola: il JS ce lo sposta all'avvio.
     Se non ha fatto in tempo (finestra ristretta DOPO il caricamento: `isTouch` e' deciso una
     volta sola) qui resta comunque fuori dal flusso, altrimenti in hover allarga la pillola
     fino a 361px e copre NOVITA'. Nella sheet il selettore e' `#cc-msg-sheet .m-body`, che
     questa regola non tocca. */
  #cc-msg .m-body{display:none}

  #cc-news{right:14px;bottom:14px;width:auto;height:44px;padding:0 16px;overflow:visible}
  /* center "NOVITÀ" in the pill: override the desktop space-between + balance letter-spacing */
  #cc-news .cc-bar{position:static;height:100%;padding:0;justify-content:center}
  #cc-news .cc-bar .lbl-wrap{gap:0}
  #cc-news .cc-bar .lbl-short{padding-left:.18em}
  #cc-news .news-bang{position:absolute;top:-8px;left:-7px;width:20px;height:22px;flex-direction:column;gap:2px;
    background:none;border:0;-webkit-backdrop-filter:none;backdrop-filter:none;
    animation:ccPop .5s cubic-bezier(.34,1.56,.64,1)}
  #cc-news .cc-bar .lbl-short{display:inline}
  #cc-news .cc-bar .news-arrow{display:none}
  /* touch: tapping a pill triggers a sticky :hover that would expand it (desktop behaviour).
     Neutralize it → tapping does NOTHING to the pill, only the separate sheet opens. */
  #cc-msg,#cc-news{transition:none!important}
  #cc-msg:hover{height:44px!important;padding:0 16px!important}
  #cc-news:hover{width:auto!important;height:44px!important}
  /* keep the SHORT "NEWS" label on tap — never swap to "LATEST NEWS" (that widened the pill) */
  #cc-news:hover .cc-bar .lbl-long,#cc-news.open .cc-bar .lbl-long{display:none!important}
  #cc-news:hover .cc-bar .lbl-short,#cc-news.open .cc-bar .lbl-short{display:inline!important}

  /* ── BOTTOM SHEET (dedicated element) — slides up/down via TRANSFORM only, on a full-width
     fixed panel. No morph of the pill → open AND close are always smooth. Backdrop taps to close. ── */
  .cc-sheet-backdrop{position:fixed;inset:0;z-index:79;background:rgba(0,0,0,.45);opacity:0;pointer-events:none;transition:opacity .4s ease}
  .cc-sheet-backdrop.on{opacity:1;pointer-events:auto}
  .cc-sheet{position:fixed;left:0;right:0;bottom:0;z-index:80;
    transform:translateY(101%);transition:transform .5s cubic-bezier(.22,1,.36,1);
    background:rgba(12,14,15,.5);-webkit-backdrop-filter:blur(30px) saturate(1.35);backdrop-filter:blur(30px) saturate(1.35);
    border:1px solid rgba(255,255,255,.12);border-radius:24px 24px 0 0;box-shadow:0 -18px 50px rgba(0,0,0,.5);
    display:flex;flex-direction:column;overflow:hidden;color:#f4f1ea}
  .cc-sheet.open{transform:translateY(0)}
  /* misura, cerchio, segno e hover arrivano da .expy-x (chrome-content.css): identica alla X
     del pannello "Create your own explorable world" e a quella della card POI. Qui solo la
     posizione. 2026-08-12. */
  .cc-sheet-x{top:14px;right:14px;z-index:5}
  /* message sheet — opens only as tall as its (short) copy needs */
  #cc-msg-sheet{height:auto;max-height:82vh;overflow-y:auto;padding:18px 20px 24px}
  .cc-sheet-head{display:flex;align-items:center;gap:10px;margin-bottom:4px;flex:none}
  .cc-sheet-head .cc-sheet-icon{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:8px;
    background:var(--cc-glass2);border:1px solid var(--cc-bd)}
  .cc-sheet-head .cc-sheet-icon svg{width:17px;height:17px}
  .cc-sheet-head .cc-sheet-title{font-size:17px;font-weight:700;letter-spacing:.02em;color:#fff}
  /* EXPY TEAM + copy indented to line up under the "A" of the title (past the icon) */
  #cc-msg-sheet .m-body{display:flex;flex-direction:column;margin-left:40px}
  #cc-msg-sheet .m-sub{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:#8b9099;margin:2px 0 12px}
  #cc-msg-sheet .m-copy{font-size:15px;line-height:1.65;color:rgba(244,241,234,.85)}
  #cc-msg-sheet .m-copy b{color:#fff}
  /* news sheet — photo fills the TOP fully; copy is bigger and scrolls INSIDE its own box
     (thin light scrollbar) so the layout below never shifts */
  #cc-news-sheet{height:72vh;padding:0}
  #cc-news-sheet .cc-sheet-x{top:12px;right:12px}
  #cc-news-sheet .cc-body{position:relative;flex:1;min-height:0;opacity:1;pointer-events:auto}
  #cc-news-sheet .news-slides{position:absolute;inset:0;width:100%}
  #cc-news-sheet .news-slide__inner{grid-template-columns:1fr;grid-template-rows:38% 62%;height:100%}
  #cc-news-sheet .news-slide__img{border-radius:24px 24px 0 0;overflow:hidden}
  #cc-news-sheet .news-slide__content{padding:14px 22px 34px;gap:6px;display:flex;flex-direction:column;min-height:0}
  #cc-news-sheet .news-eyerow{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
  #cc-news-sheet .news-slide__content .eyebrow{font-size:11px}
  #cc-news-sheet .news-tag{display:inline;font-size:10px;letter-spacing:.16em;color:#fff;opacity:.65;white-space:nowrap}
  #cc-news-sheet .news-slide__content .venue{font-size:19px;margin-bottom:2px}
  #cc-news-sheet .news-slide__content p{font-size:14px;line-height:1.55;flex:1;min-height:0;overflow-y:auto;padding-right:8px;
    scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.22) transparent}
  #cc-news-sheet .news-slide__content p::-webkit-scrollbar{width:4px}
  #cc-news-sheet .news-slide__content p::-webkit-scrollbar-thumb{background:rgba(255,255,255,.22);border-radius:4px}
  #cc-news-sheet .news-slide__content p::-webkit-scrollbar-track{background:transparent}
  #cc-news-sheet .news-link{margin-top:8px}
  #cc-news-sheet .news-dots{left:22px;bottom:14px}
  #cc-news-sheet .news-hint{display:none}

  /* while a sheet is open: fade out the header + business button + hero */
  body.chrome-open .xh,
  body.chrome-open #cc-hero,
  body.chrome-open #cc-biz{opacity:0;pointer-events:none;transition:opacity .3s ease}

  /* tapping a POI / avatar fades the two pills + the filter button (reappear when the card closes) */
  body.poi-open #cc-msg,
  body.poi-open #cc-news,
  body.poi-open .expy-side-buttons{opacity:0;pointer-events:none;transition:opacity .3s ease}

  #expy-poi-card{bottom:40px}   /* POI popup sits lower on the screen */
}

/* Telefono ORIZZONTALE (schermo basso): il menu aperto e' alto 263px e a 844x390 arrivava
   addosso alla colonna dei comandi a sinistra e al fumetto della musica — misurato il
   2026-08-10: `.xh` sopra `#cc-music` per 32x42px, sopra i comandi mappa per 32x23px e sopra
   il fumetto per 144x77px. Mentre il menu e' aperto quei tre si fanno da parte, esattamente
   come gia' fa l'hero (`body.burger-open #cc-hero`). Fuori dal blocco mobile di proposito:
   `body.burger-open` esiste solo a menu aperto, quindi la regola non tocca nient'altro. */
@media (max-height:520px){
  body.burger-open .expy-side-buttons,
  body.burger-open #cc-music,
  body.burger-open #cc-radio,
  body.burger-open #cc-music-tip{opacity:0;pointer-events:none;transition:opacity .3s ease}
}

/* very small phones */
@media (max-width:380px){
  #cc-quote{font-size:16px}
  #cc-biz .biz-short{font-size:10px}
}

/* ── SOTTO I 370px: il titolo della card va a capo ────────────────────────────────────────
   Fino al 2026-08-12 qui la card si stringeva a `100vw - 128` per non entrare nella colonna
   dei due tondi di sinistra, e il fumetto della musica saliva per non farsi toccare dalla card
   cresciuta in altezza. Quei due vincoli non esistono piu': musica e filtri stanno in ALTO,
   e in fondo allo schermo la card ha tutta la larghezza. Resta solo il ritorno a capo del
   titolo, che a 320px serve comunque (il nowrap la terrebbe larga per forza). */
@media (max-width:369px){
  #cc-quote{white-space:normal;text-align:center;line-height:1.18}
}