/* ZOKKU Hub page (HUBW, 24 Oct 2026). Loaded after site.css by hub.html only. Phone first.
   Colours of home B: the Hub is the house, so its opening is the house field (salvia, night green in dark mode), the
   long sections sit on paper, the Library on night like the Hub's own panel. Every picture and film on this page is a
   capture of the real ZOKKU Hub (work/strumenti/hub-sito, regenerated by the interface pipeline). */

/* ---------- Opening: the house field, the title, the Hub at work ---------- */
.hb-testa{background:var(--house);color:var(--house-fg);--fg:var(--house-fg);--fg-2:var(--house-fg);--btn-bg:var(--house-fg);--btn-fg:var(--house);padding:clamp(28px,5vw,64px) var(--margine) clamp(40px,6vw,96px)}
.hb-testa-in{max-width:1680px;margin-inline:auto;display:grid;grid-template-columns:minmax(0,1fr);row-gap:20px}
.hb-occhiello{font-family:var(--mono);font-size:14px;letter-spacing:.02em}
.hb-testa h1{font-size:clamp(56px,16vw,164px);letter-spacing:-.045em;line-height:.9}
.hb-lato p{font-size:var(--s-lead);line-height:1.35;max-width:34ch}
.hb-lato .azioni{margin-top:24px;display:flex;flex-wrap:wrap;align-items:center;gap:8px 20px}
.hb-lato p.hb-sistema{margin-top:16px;font-size:var(--s-small);line-height:1.5;max-width:44ch}
.hb-testa .lnk{min-height:48px}

/* the window: a capture, framed like a window on the field */
.hb-film{position:relative;margin:0}
.hb-film video,.hb-film img{width:100%;height:auto;border-radius:10px;background:#F6F6F5;box-shadow:0 0 0 1px color-mix(in srgb,currentColor 22%,transparent),0 40px 80px -48px rgba(0,0,0,.6)}
.hb-film figcaption{margin-top:12px;font-size:var(--s-xs);line-height:1.45;max-width:70ch}
.hb-pausa{position:absolute;z-index:2;left:10px;bottom:calc(10px + var(--hb-dida,0px));display:inline-flex;align-items:center;gap:8px;min-width:44px;min-height:44px;padding:0 16px 0 14px;border-radius:var(--r-s);background:rgba(10,10,10,.66);color:#F6F6F5;font-size:15px;font-weight:500;transition:transform var(--t-press) var(--ease-out),background var(--t-hover) ease}
.hb-pausa:active{transform:scale(.96)}
.hb-pausa:focus-visible{outline:3px solid #F6F6F5;outline-offset:2px;box-shadow:0 0 0 7px rgba(10,10,10,.8)}
@media (hover:hover) and (pointer:fine){.hb-pausa:hover{background:rgba(10,10,10,.9)}}
.hb-schermo{position:relative}

@media (min-width:1000px){
  .hb-testa-in{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);align-items:start}
  .hb-occhiello,.hb-testa h1{grid-column:1 / -1}
  .hb-lato{grid-column:1 / span 3;padding-top:28px}
  .hb-testa .hb-film{grid-column:4 / span 9;margin-top:28px}
}

/* ---------- Sections ---------- */
.hb-sez{padding-block:clamp(64px,8vw,120px)}
.hb-sez h2{font-size:var(--s-head)}
.hb-sez .hb-intro{margin-top:16px;font-size:var(--s-lead);line-height:1.35;max-width:40ch}
.hb-carta{background:var(--bg);color:var(--fg)}
.hb-notte{background:var(--zk-notte);color:#F6F6F5;--fg-2:#CFCFCA}
.hb-casa{background:var(--house);color:var(--house-fg);--fg-2:var(--house-fg)}

.hb-voce{display:grid;grid-template-columns:minmax(0,1fr);row-gap:20px;margin-top:clamp(40px,6vw,88px)}
.hb-voce h3{font-size:var(--s-lead);line-height:1.2;letter-spacing:-.01em}
.hb-voce p{margin-top:10px;color:var(--fg-2);max-width:46ch;text-wrap:pretty}
/* SITE11: a second heading in the same column (VST3 and CLAP after Update all) starts a new block, not a line of the paragraph */
.hb-testo > * + h3{margin-top:clamp(32px,4vw,44px)}
.hb-voce ul.hb-chip{margin-top:16px;display:flex;flex-wrap:wrap;gap:8px}
.hb-chip li{font-size:14px;line-height:1;padding:7px 10px;border-radius:999px;box-shadow:inset 0 0 0 1px color-mix(in srgb,currentColor 28%,transparent);white-space:nowrap}
.hb-quadro{margin:0}
.hb-quadro img{width:100%;height:auto;border-radius:var(--r-m);box-shadow:0 0 0 1px var(--tile-2),0 24px 50px -32px rgba(10,10,10,.4)}
.hb-notte .hb-quadro img{box-shadow:0 0 0 1px rgba(246,246,245,.14),0 24px 50px -32px rgba(0,0,0,.6)}
.hb-quadro.hb-stretto{max-width:440px}
.hb-quadro figcaption{margin-top:10px;font-size:var(--s-xs);color:var(--fg-2)}
.hb-due{display:grid;grid-template-columns:minmax(0,1fr);gap:12px}

@media (min-width:900px){
  .hb-voce{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);align-items:center}
  .hb-voce > .hb-testo{grid-column:1 / span 4}
  .hb-voce > .hb-quadro,.hb-voce > .hb-due,.hb-voce > .hb-film{grid-column:6 / span 7}
  .hb-voce.inv > .hb-testo{grid-column:9 / span 4;grid-row:1}
  .hb-voce.inv > .hb-quadro,.hb-voce.inv > .hb-due,.hb-voce.inv > .hb-film{grid-column:1 / span 7;grid-row:1}
  .hb-voce > .hb-quadro.hb-stretto{grid-column:7 / span 4;justify-self:center}
  .hb-voce > .hb-film.hb-largo{grid-column:1 / -1}
  .hb-due{grid-template-columns:1fr 1fr;align-items:start}
}

/* ---------- Quiet by design ---------- */
.hb-calma{margin-top:clamp(32px,4vw,56px);display:grid;grid-template-columns:minmax(0,1fr);gap:22px 32px}
.hb-calma li b{display:block;font-weight:500;font-size:19px}
.hb-calma li span{display:block;margin-top:4px;font-size:var(--s-small);line-height:1.45}
@media (min-width:700px){.hb-calma{grid-template-columns:1fr 1fr}}
@media (min-width:1100px){.hb-calma{grid-template-columns:repeat(4,minmax(0,1fr))}}
.hb-fonte{margin-top:36px;font-size:var(--s-xs);line-height:1.5;max-width:70ch}
@media (max-width:699px){.hb-pausa{padding:0;justify-content:center;left:8px;bottom:8px;background:rgba(10,10,10,.55)}.hb-pausa span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}}