/* ===== NAV-HEIGHT VAR  (desktop 64, mobile 56) ===== */
:root{ --nav-h:64px }
@media(max-width:768px){ :root{ --nav-h:56px } }

/* ─── SLIDER FLEX con bordo Matrix + caption ───────────────────────── */
.blog-slider-outer{
  position:fixed;
  top:calc(var(--nav-h) + 20px);
  left:50%;transform:translateX(-50%);
  width:80vw;height:20vw;
  display:flex;justify-content:center;align-items:center;
  z-index:50;
}

/* galleria flex */
.slider-flex{display:flex;gap:10px;width:100%;height:100%}
.slider-item{position:relative;flex:1 1 10%;transition:flex-basis .5s ease}

/* thumbnail */
.slider-thumb{
  width:100%;height:100%;object-fit:cover;
  border-radius:10px;
  border:3px solid #00ff41;                /* matrix border */
  filter:brightness(.82);
  transition:filter .5s ease;
}

/* espansione + illuminazione */
.slider-item.active,
.slider-item:hover{flex-basis:30%}
.slider-item.active .slider-thumb,
.slider-item:hover  .slider-thumb{
  filter:brightness(1.08) saturate(1.1)
}

/* caption arrotondata all’interno dell’immagine */
.slider-caption{
  position:absolute;bottom:0;left:0;right:0;
  padding:1.6rem 1.8rem 1.1rem;
  border-radius:0 0 10px 10px;             /* ↘ ↙ stessi angoli della thumb */
  background:linear-gradient(0deg,
              #031408cc 0%,               /* 80 % opacità in basso */
              #03140888 70%,              /* 53 % al centro        */
              transparent 100%);
  color:#00ff41;text-shadow:0 0 9px #00ff41;
  font-family:'Share Tech Mono',monospace;
  opacity:0;transition:opacity .4s;
}

.slider-item.active .slider-caption,
.slider-item:hover  .slider-caption{opacity:1}

/* titolo evidenziato, preview più tenue */
.matrix-slider-title{
  font-size:1.6rem;                        /* più grande */
  font-weight:800;color:#e4ffe4;margin-bottom:.35rem;
}
.slider-caption > div:nth-of-type(2){      /* preview */
  font-size:.90rem;line-height:1.35em;
  color:#a0ffab;font-weight:500;
}

/* tag */
.slider-tags{margin-top:.45rem;font-size:.75em;letter-spacing:.03em}
.slider-tags span{
  border:1px solid #00ff41;padding:1px 6px;border-radius:4px;
  margin-right:6px;text-transform:uppercase
}

/* mobile */
@media(max-width:900px){
  .blog-slider-outer{height:260px}
  .slider-item.active,
  .slider-item:hover{flex-basis:40%}
}

/* ===== SCROLL ZONE ===== */
/* ▼▼  DESKTOP  ▼▼ */
.scroll-zone{
  position:relative;
  overflow-y:visible;

  /* larghezza identica allo slider */
  width:80vw;
  margin:0 auto;                       /* centro il blocco */

  /* altezza calcolata via JS, rimane */
  height:calc(100vh - var(--nav-h) - 360px - 60px);

  /* padding L-R per respiro laterale, nessun padding-top */
  padding:0;
  background:transparent;
  border: none;

  display:flex;
  justify-content:center;              /* centra #blog-articles */
}

/* ▼▼  MOBILE  ▼▼ */
@media(max-width:900px){
  .scroll-zone{
    width:80%;                          /* sempre 80 % */
    height:calc(100vh - var(--nav-h) - 200px - 60px); /* slider mobile 200 */
    padding:0 .9rem 7rem;
  }
}


/* ═════════════  STRIP ORIZZONTALE  ══════════════════════════════════ */
.desktop-scroll{
  width:80vw;
  margin:0px auto 0;
  margin-top: 10px;
  display:flex;gap:18px;
  overflow-x:auto;overflow-y:hidden;          /* nessuna barra verticale      */
  scrollbar-width:none;                       /* Firefox: nascondi orizzont.  */
}
.desktop-scroll::-webkit-scrollbar{display:none} /* Chrome/Edge/Safari        */
.desktop-scroll::-webkit-scrollbar-track{background:#061106}
.desktop-scroll::-webkit-scrollbar-thumb{
  background:#00ff41;border-radius:6px;box-shadow:0 0 6px #00ff41
}

/* ═════════════  ICON-CARD  ══════════════════════════════════════════ */
.desktop-card{
  flex:0 0 180px;height:180px;position:relative;
  background:#0f2410;border:3px solid #00ff41;border-radius:18px;
  box-shadow:0 0 18px #00ff4160;cursor:pointer;
  transition:border-color .18s,box-shadow .22s;   /* niente translate/scale   */
}
.desktop-card:hover,
.desktop-card:focus{
  border-color:#4eff97;
  box-shadow:0 0 42px #00ff41c0;                 /* alone Matrix             */
  outline:none;
}
.desktop-card img{
  width:100%;height:100%;object-fit:cover;border-radius:15px;
  filter:brightness(.88);transition:filter .25s;
}
.desktop-card:hover img{filter:brightness(1.05)}

/* caption titolo */
.desktop-caption{
  position:absolute;left:0;right:0;bottom:0;
  padding:.45rem .6rem;
  background:rgba(3,20,8,.85);
  color:#00ff41;font-family:'Share Tech Mono';
  font-size:.78rem;font-weight:700;letter-spacing:.03em;
  border-radius:0 0 15px 15px;text-align:center;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

/* tag multipli mai fuori dalla card */
.desktop-cat{
  position:absolute;top:6px;left:6px;
  display:flex;flex-wrap:wrap;gap:4px;
  max-width:calc(100% - 12px);
  pointer-events:none;
}
.desktop-cat span{
  background:rgba(3,20,8,.55);
  border:1px solid #00ff41;border-radius:4px;
  padding:1px 6px 2px;font-size:.60rem;
  font-family:'Share Tech Mono';color:#00ff41;
  text-transform:uppercase;white-space:nowrap;
}



/* ===== DOCK ===== */
.dock-matrix{position:fixed;left:50%;transform:translateX(-50%);bottom:70px;z-index:200;
  background:#081208e6;border:2.4px solid #00ff41;border-radius:24px;padding:.7em 2.6em;display:flex;gap:1.8em;align-items:end;box-shadow:0 12px 50px #00ff4130,0 0 22px #00ff41e0}
.dock-btn{width:64px;height:64px;border-radius:19px;border:2px solid #00ff41cc;background:#173118;display:flex;align-items:center;justify-content:center;transition:transform .18s cubic-bezier(.33,1.7,.45,1.05);cursor:pointer;position:relative}
.dock-btn svg{width:48px;height:48px}
.dock-btn .lbl{
  position:absolute;bottom:-22px;left:50%;transform:translateX(-50%);
  font-family:'Share Tech Mono',monospace;font-size:.72em;font-weight:700;
  letter-spacing:.03em;text-transform:uppercase;
  color:#00ff41;opacity:0;transition:opacity .15s,bottom .15s
}
.dock-btn:hover .lbl,.dock-btn:focus .lbl{opacity:1;bottom:-30px}
.dock-btn:hover,.dock-btn:focus{transform:translateY(-16px) scale(1.35);background:#1eff84;box-shadow:0 22px 66px #00ff41b7}
.dock-btn.active{background:#1eff84}

.search-btn svg{width:30px;height:30px}
.dock-search{width:0;opacity:0;border:2px solid #00ff41;background:#0c1f0e;color:#00ff41;border-radius:8px;font-family:'Share Tech Mono';transition:width .25s,opacity .25s}
.dock-search.show{width:185px;opacity:1;padding:3px 12px}

/* ===== MODALE ===== */
/* ═══════════ MODALE MATRIX ════════════════════════════════════════ */
.bg-matrix-dark{
  background:#040d06 !important;          /* sfondo quasi nero-verde  */
  color:#e4ffe6;                          /* testo chiaro             */
}

/* header */
.modal-header{
  background:#0e2412;
  border-bottom:1px solid #00ff4180;
}

/* corpo scorrevole */
.modal-body{
  font-size:1rem;line-height:1.45em;
  color:#c4ffd2;
  max-height:70vh;           /* spazio per la barra Matrix         */
  overflow-y:auto;
  padding:2rem 2.4rem;
}
@media(max-width:900px){
  .modal-body{padding:1.2rem .8rem;max-height:65vh;}
}

/* evidenziazione codice */
.modal-body pre,
.modal-body code{
  background:#031408;
  color:#55ff8a;
  border-radius:6px;
  padding:.25em .55em;
}

/* ── MODALE “IN ALTO” E PIÙ LARGO ───────────────────────────────── */
.modal-top{                                /* quasi full-width, alto  */
  max-width:95vw !important;
  margin:5vh auto 0 !important;            /* 5 % dal bordo alto      */
}
@media(max-width:900px){
  .modal-top{max-width:98vw !important;margin:7vh auto 0 !important;}
}

/* ── SCROLLBAR MATRIX NEL MODALE ────────────────────────────────── */
/* Chrome / Edge / Safari */
.modal-body::-webkit-scrollbar{width:10px}
.modal-body::-webkit-scrollbar-track{background:#061106}
.modal-body::-webkit-scrollbar-thumb{
  background:#00ff41;
  border-radius:6px;
  box-shadow:0 0 6px #00ff41;
}
/* Firefox */
.modal-body{
  scrollbar-width:thin;
  scrollbar-color:#00ff41 #061106;
}



/* ═════════  MATRIX-RAIN SUL BODY QUANDO IL MODALE È APERTO ═══════════ */
/* backdrop leggermente più scuro ma non opaco */
.modal-backdrop.show{
  background:rgba(0,0,0,.45) !important;   /* 45 % invece di .5       */
}

/* pioggia Matrix sopra al backdrop (z-index 1045) */
body.matrix-rain::before{
  content:"";
  position:fixed;inset:0;pointer-events:none;
  z-index:1045;                        
  background-image:
    repeating-linear-gradient(transparent 0 2px, rgba(0,255,65,.25) 2px 4px),
    linear-gradient(to bottom, rgba(0,255,65,.16), transparent 70%);
  animation:rain .7s linear infinite;
}
@keyframes rain{from{background-position:0 0,0 0}to{background-position:0 10px,0 0}}

/*───────────────────────────────────────────────────────────────
  MOBILE & TABLET  ≤ 900 px
───────────────────────────────────────────────────────────────*/
@media (max-width:900px){

  /* slider: più largo, più basso, tag sempre dentro */
  .blog-slider-outer{width:94vw;height:70vw}             /* 42 vw ≈ 16:9 “flat” */
  .slider-item{overflow:hidden}                          /* blocca fuoriuscite  */
  .slider-item.active,
  .slider-item:hover{flex-basis:42%}                     /* card attiva più ampia */

  .slider-tags{display:flex;flex-wrap:wrap;gap:4px;
               max-height:1.2em;overflow:hidden}
  .slider-tags span{font-size:.68em;padding:1px 5px}

  /* lista news: stessa larghezza dello slider, no rimbalzi */
  .scroll-zone{width:94vw;
               height:calc(100vh - var(--nav-h) - 42vw - 60px); 
               margin-top:50px;}
  .desktop-scroll{overscroll-behavior-x:contain;padding-bottom:6px;padding-top: 15px;}

  /* card icone leggermente ridotte          */
  .desktop-card{flex:0 0 150px;height:150px}
  .desktop-caption{font-size:.72rem}
  .desktop-cat span{font-size:.55rem;padding:1px 4px}

  /* dock compatto */
  .dock-matrix{padding:.55em 1.9em;gap:1.3em;bottom:58px}
  .dock-btn{width:52px;height:52px}
  .dock-btn svg{width:32px;height:32px}
  .dock-search.show{width:165px}

  .blog-slider-outer{
    top:calc(var(--nav-h) + 30px);
  }
}

/*───────────────────────────────────────────────────────────────
  PHONE  ≤ 600 px
───────────────────────────────────────────────────────────────*/
@media (max-width:600px){

  .blog-slider-outer{width:100vw;height:55vw;top:calc(var(--nav-h) + 80px)}
  .slider-item.active,
  .slider-item:hover{flex-basis:48%}              /* ― un po’ più grossa     */
  .matrix-slider-title{font-size:1.05rem}
  .slider-caption>div:nth-of-type(2){font-size:.76rem}

  .scroll-zone{width:100vw;
               height:calc(100vh - var(--nav-h) - 38vw - 50px);
               padding:0 .3rem 3rem;}
  .desktop-scroll{overscroll-behavior-x:contain;padding-bottom:6px;padding-top: 30px; padding-left: -20px;}

  .desktop-card{flex:0 0 120px;height:120px}
  .desktop-caption{font-size:.64rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .desktop-cat span{font-size:.48rem;padding:0 4px}

  .dock-matrix{padding:.38em 1.3em;gap:0.8em;bottom:40px;border-radius:18px}
  .dock-btn{width:30px;height:30px}
  .dock-btn svg{width:20px;height:20px}
  .dock-btn .lbl{font-size:.64em;bottom:-18px}
  .dock-search.show{width:100px}
}