/* INSEGNE BRESCIA - v65 - pagina GALLERIA completa
   Stessa impostazione della galleria del sito attuale: tutte le categorie in una pagina,
   miniature originali, elenco delle categorie a lato sempre visibile. */
@font-face{
  font-family:'Montserrat'; font-style:normal; font-weight:300 900; font-display:swap;
  src:url('../fonts/montserrat-latin-a5ec5492.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Montserrat'; font-style:normal; font-weight:300 900; font-display:swap;
  src:url('../fonts/montserrat-latin-ext-a63797c1.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
:root{
  --navy:#070a13; --navy-2:#0b1030; --blue:#1f46ff; --violet:#7d2cff; --orange:#ff8a00;
  --bg:#f6f7fb; --text:#0b1020; --muted:#54607a; --line:rgba(11,16,32,.1);
  --ease:cubic-bezier(.22,.8,.24,1); --ease-out:cubic-bezier(.16,1,.3,1);
  --top-h:68px;
}
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{ margin:0; background:var(--bg); color:var(--text); font-family:'Montserrat',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif; line-height:1.5; }
img{ max-width:100%; }
.g-wrap{ width:min(1280px, 100% - 32px); margin-inline:auto; }

/* barra in alto */
.g-top{ position:sticky; top:0; z-index:60; background:rgba(7,10,19,.94); backdrop-filter:saturate(1.4) blur(12px); -webkit-backdrop-filter:saturate(1.4) blur(12px); border-bottom:1px solid rgba(255,255,255,.08); }
.g-top-in{ height:var(--top-h); display:flex; align-items:center; gap:18px; }
.g-brand img{ height:40px; width:auto; display:block; }
.g-back{ margin-left:auto; color:rgba(255,255,255,.82); text-decoration:none; font-weight:600; font-size:14px; }
.g-back:hover{ color:#fff; }
.g-cta{ display:inline-block; background:var(--orange); color:#fff; text-decoration:none; font-weight:800; font-size:13px; letter-spacing:.04em; padding:11px 18px; border-radius:999px; box-shadow:0 8px 22px rgba(255,138,0,.3); transition:transform .32s var(--ease), box-shadow .32s var(--ease); white-space:nowrap; text-align:center; }
.g-cta:hover{ transform:translateY(-2px); box-shadow:0 12px 28px rgba(255,138,0,.38); }

/* introduzione */
.g-intro{ background:radial-gradient(900px 420px at 15% 0%, rgba(31,70,255,.3), transparent 60%), linear-gradient(180deg,var(--navy),var(--navy-2)); color:#fff; padding:clamp(40px,6vw,72px) 0 clamp(32px,4.5vw,50px); }
.g-pre{ margin:0 0 6px; font-size:clamp(16px,1.8vw,22px); font-weight:600; opacity:.85; }
.g-title{ margin:0; font-size:clamp(40px,7vw,80px); line-height:.98; font-weight:900; letter-spacing:-.02em; }
.g-title span{ font-weight:300; color:var(--orange); }
.g-text{ max-width:720px; font-size:clamp(15px,1.4vw,18px); color:rgba(255,255,255,.82); margin:18px 0 0; }
.g-text strong{ color:#fff; }

/* impaginazione: contenuto + elenco categorie a lato */
.g-layout{ display:grid; grid-template-columns:minmax(0,1fr) 290px; gap:clamp(24px,3vw,44px); align-items:start; padding-bottom:clamp(40px,6vw,80px); }
.g-side{ position:sticky; top:calc(var(--top-h) + 20px); margin-top:clamp(28px,3.5vw,44px); }
.g-side-in{ background:#fff; border-radius:16px; box-shadow:0 10px 30px rgba(11,16,32,.08); padding:18px 14px 16px; max-height:calc(100vh - var(--top-h) - 40px); overflow:auto; }
.g-side-title{ margin:0 8px 8px; font-size:12px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
.g-cats{ list-style:none; margin:0 0 14px; padding:0; }
.g-cats a{ position:relative; display:flex; justify-content:space-between; gap:10px; padding:8px 10px 8px 22px; border-radius:10px; color:var(--text); text-decoration:none; font-size:13.5px; font-weight:600; line-height:1.3; transition:background-color .2s linear, color .2s linear; }
.g-cats a small{ color:var(--muted); font-weight:600; font-size:12px; }
.g-cats a::before{ content:""; position:absolute; left:9px; top:50%; width:6px; height:6px; margin-top:-3px; border-radius:50%; background:transparent; transition:background-color .2s linear, transform .3s var(--ease); }
.g-cats a:hover{ background:rgba(31,70,255,.06); }
.g-cats a.is-active{ background:var(--navy-2); color:#fff; }
.g-cats a.is-active small{ color:rgba(255,255,255,.7); }
.g-cats a.is-active::before{ background:var(--orange); transform:scale(1.2); }
.g-side-cta{ display:block; margin:0 6px; }

/* categorie e miniature */
.g-cat{ padding-top:clamp(28px,3.5vw,44px); scroll-margin-top:calc(var(--top-h) + 12px); }
.g-cat-head{ display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; margin-bottom:14px; padding-bottom:10px; border-bottom:2px solid var(--line); }
.g-cat-head h2{ margin:0; font-size:clamp(19px,2.2vw,27px); font-weight:900; letter-spacing:-.01em; }
.g-cat-head span{ font-size:13px; font-weight:700; color:var(--muted); }
.g-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(185px,1fr)); gap:clamp(10px,1.2vw,16px); }
.g-thumb{ position:relative; display:block; aspect-ratio:3/2; overflow:hidden; border-radius:8px; background:#dde3ee; box-shadow:0 4px 14px rgba(11,16,32,.12); border:3px solid #fff; transition:transform .32s var(--ease), box-shadow .32s var(--ease); }
.g-thumb img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .8s var(--ease-out); }
.g-thumb-over{ position:absolute; inset:0; display:flex; flex-direction:column; justify-content:flex-end; gap:2px; padding:10px 12px; color:#fff; background:linear-gradient(180deg, rgba(7,10,19,0) 35%, rgba(7,10,19,.85) 100%); opacity:0; transition:opacity .3s var(--ease); }
.g-thumb-over strong{ font-size:13px; font-weight:800; line-height:1.2; }
.g-thumb-over span{ font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--orange); }
.g-thumb:hover, .g-thumb:focus-visible{ transform:translateY(-3px); box-shadow:0 12px 28px rgba(11,16,32,.2); }
.g-thumb:hover img, .g-thumb:focus-visible img{ transform:scale(1.06); }
.g-thumb:hover .g-thumb-over, .g-thumb:focus-visible .g-thumb-over{ opacity:1; }
.g-thumb:focus-visible{ outline:3px solid var(--orange); outline-offset:2px; }
.g-loading{ text-align:center; color:var(--muted); font-weight:600; padding:60px 0; }

.site-footer{ background:#070d1f; color:rgba(255,255,255,.7); font-size:.8rem; text-align:center; padding:22px 16px 26px; line-height:1.6; }
.site-footer p{ margin:0; }
.site-footer a{ color:rgba(255,255,255,.85); text-decoration:underline; margin:0 .35em; }

/* tablet e telefono: l'elenco delle categorie diventa una barra in alto */
@media (max-width: 900px){
  .g-layout{ grid-template-columns:minmax(0,1fr); gap:0; }
  .g-side{ order:-1; position:sticky; top:var(--top-h); z-index:50; margin:0 -16px; }
  .g-side-in{ border-radius:0; box-shadow:0 6px 16px rgba(11,16,32,.08); padding:10px 12px; max-height:none; overflow:visible; display:flex; align-items:center; }
  .g-side-title, .g-side-cta{ display:none; }
  .g-cats{ display:flex; gap:8px; overflow-x:auto; margin:0; scrollbar-width:none; }
  .g-cats::-webkit-scrollbar{ display:none; }
  .g-cats a{ white-space:nowrap; padding:8px 13px; border:1px solid var(--line); border-radius:999px; }
  .g-cats a::before{ display:none; }
  .g-cat{ scroll-margin-top:calc(var(--top-h) + 64px); }
}
@media (max-width: 760px){
  :root{ --top-h:58px; }
  .g-brand img{ height:32px; }
  .g-top .g-cta{ display:none; }
  .g-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px; }
  .g-thumb-over{ opacity:1; background:linear-gradient(180deg, rgba(7,10,19,0) 50%, rgba(7,10,19,.8) 100%); }
  .g-thumb-over span{ display:none; }
}
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ transition-duration:.001ms!important; }
}
