/* ==========================================================================
   Globopharma — foglio di stile condiviso (Bootstrap 5)
   Nessun JS custom qui dentro: solo override e classi di utilità/componente
   pensate per essere riportate facilmente come CSS Modules / styled system
   in React. Le variabili e la tipografia di base sono in tokens.css
   (caricato prima di questo file in ogni pagina).
   ========================================================================== */

/* ---------- Utility bar + navbar ---------- */
.utility-bar{
  background: var(--ink);
  color: #B9C2BF;
  font-size: .8125rem;
  height: 40px;
}
.utility-bar a{ color: #E7B8C4; text-decoration:none; }
.utility-bar.farma a{ color: #E9CB8C; }
.utility-bar a:hover{ text-decoration:underline; }

.navbar-lab, .navbar-farma{ height:96px; }
.navbar-lab .nav-link{ color:#33403C; font-weight:500; }
.navbar-lab .nav-link.active{ color: var(--lab); font-weight:600; }
.navbar-lab .nav-link:hover{ color: var(--lab); }

.navbar-farma .nav-link{ color:#33403C; font-weight:500; }
.navbar-farma .nav-link.active{ color: var(--farma); font-weight:600; }
.navbar-farma .nav-link:hover{ color: var(--farma); }

/* Sottomenù "Prodotti" (tipologie): solo da 992px in su, al passaggio del mouse o col focus da tastiera.
   Sotto i 992px il menu è quello a hamburger e la voce "Prodotti" porta già all'elenco delle tipologie. */
.nav-item-sub{ position:relative; }
.submenu-prodotti{ display:none; margin:0; padding:.5rem 0; }
@media (min-width:992px){
  .submenu-prodotti{
    /* A bandiera: il bordo sinistro è spostato in modo che il testo delle voci parta sotto la scritta "Prodotti"
       (padding del link .5rem, padding delle voci 1.25rem, bordo 1px) */
    position:absolute; top:100%; left:calc(.5rem - 1.25rem - 1px);
    min-width:240px; background:#fff; border:1px solid var(--line); border-radius:.5rem;
    box-shadow:0 8px 24px rgba(18,24,26,.12); z-index:1030;
  }
  .nav-item-sub:hover > .submenu-prodotti,
  .nav-item-sub:focus-within > .submenu-prodotti{ display:block; }
  /* Dopo un clic su una voce il sottomenù si chiude, anche se il mouse è ancora sopra o il link ha il focus */
  .nav-item-sub.sub-chiuso > .submenu-prodotti{ display:none; }
}
.submenu-link{ display:block; padding:.5rem 1.25rem; color:#33403C; font-weight:500; font-size:.9375rem; text-decoration:none; white-space:nowrap; }
.navbar-lab .submenu-link:hover, .navbar-lab .submenu-link.active{ color:var(--lab); background:var(--lab-soft); }
.navbar-farma .submenu-link:hover, .navbar-farma .submenu-link.active{ color:var(--farma); background:var(--farma-soft); }

.logo-header{ height:40px; }
.logo-nav{ height:44px; }
.logo-footer{ height:28px; }

/* ---------- Buttons ---------- */
.btn-lab{ background: var(--lab); border-color: var(--lab); color:#fff; font-weight:600; }
.btn-lab:hover{ background: var(--lab-dark); border-color: var(--lab-dark); color:#fff; }
.btn-outline-lab{ border-color: var(--lab); color: var(--lab); font-weight:600; }
.btn-outline-lab:hover{ background: var(--lab); color:#fff; }
/* Variante senza effetto hover: resta bianco con bordo colorato */
.btn-outline-lab.btn-no-hover, .btn-outline-lab.btn-no-hover:hover, .btn-outline-lab.btn-no-hover:active{ background:#fff; border-color: var(--lab); color: var(--lab); }
.btn-outline-farma.btn-no-hover, .btn-outline-farma.btn-no-hover:hover, .btn-outline-farma.btn-no-hover:active{ background:#fff; border-color: var(--farma); color: var(--farma); }

.btn-farma{ background: var(--farma); border-color: var(--farma); color:#fff; font-weight:600; }
.btn-farma:hover{ background: var(--farma-dark); border-color: var(--farma-dark); color:#fff; }
.btn-outline-farma{ border-color: var(--farma); color: var(--farma); font-weight:600; }
.btn-outline-farma:hover{ background: var(--farma); color:#fff; }

/* ---------- Hero (photo/video background) ---------- */
.hero-lab{
  --hero-gradient: linear-gradient(115deg, rgba(48,14,26,.92) 0%, rgba(22,11,15,.80) 45%, rgba(12,9,10,.42) 100%);
  background: var(--hero-gradient), var(--lab-soft) center/cover;
  color:#fff;
}
.hero-farma{
  --hero-gradient: linear-gradient(115deg, rgba(56,38,8,.92) 0%, rgba(28,20,10,.80) 45%, rgba(14,11,8,.42) 100%);
  background: var(--hero-gradient), var(--farma-soft) center/cover;
  color:#fff;
}
/* Hero con il testo a destra (prop testoADestra di HeroDivisione): la sfumatura scura si sposta
   a destra, dove sta il testo (245deg = lo specchio orizzontale di 115deg, stesse tonalità).
   Vale a tutte le larghezze, telefono compreso: il testo è allineato a destra anche lì. */
.hero-lab.hero-destra{
  --hero-gradient: linear-gradient(245deg, rgba(48,14,26,.92) 0%, rgba(22,11,15,.80) 45%, rgba(12,9,10,.42) 100%);
}
.hero-farma.hero-destra{
  --hero-gradient: linear-gradient(245deg, rgba(56,38,8,.92) 0%, rgba(28,20,10,.80) 45%, rgba(14,11,8,.42) 100%);
}
.hero-media{
  position:absolute; inset:0; overflow:hidden; z-index:0;
}
.hero-media video, .hero-media img{
  width:100%; height:100%; object-fit:cover; display:block;
}
/* Overlay sopra il video: stesso gradiente usato come sfondo della sezione,
   necessario perché il video non è raggiunto dal background css del parent. */
.hero-video-overlay{ position:absolute; inset:0; background:var(--hero-gradient); }
.hero-full{ padding:130px var(--page-x) 170px; }
.hero-content{ max-width:660px; }
.hero-title{ font-size:2.75rem; }
.hero-compact{ min-height:300px; }
.hero-compact-overlay{
  position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(30,10,18,.78) 0%, rgba(30,10,18,.45) 55%, rgba(30,10,18,.15) 100%);
}

/* ---------- Category / product cards ---------- */
.category-card{
  border:1px solid var(--line);
  border-radius:.75rem;
  overflow:hidden;
  text-decoration:none;
  color:inherit;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.category-card:hover{
  transform:translateY(-6px);
  box-shadow:0 16px 32px rgba(15,24,26,.10);
  color:inherit;
}
.category-card .cat-visual{ height:170px; display:flex; align-items:center; justify-content:center; }
/* Descrizione: al massimo 3 righe (poi "…"). L'altezza è quella necessaria: se il testo è più corto la card è più bassa. */
.category-card .cat-desc{ display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }

/* Riquadri partner (Carlo Erba, ITW) larghi quanto una card delle categorie sotto: stessa griglia (1 colonna, 2 da 768px,
   3 da 1200px, gap 1rem) calcolata sulla larghezza della riga del titolo (100cqw = larghezza di .partner-header). */
.partner-header{ container-type:inline-size; }
.partner-box{ width:100cqw; min-height:100px; container-type:inline-size; } /* stessa altezza minima per entrambi, anche su righe diverse */
@media (min-width:768px){ .partner-box{ width:calc((100cqw - 1rem) / 2); } }
@media (min-width:1200px){ .partner-box{ width:calc((100cqw - 2rem) / 3); } }
/* Secondo logo del box con due loghi (Carlo Erba): più alto quando il box (contenuto, senza padding) è largo almeno 250px, cioè abbastanza da tenere l'etichetta
   su una riga; nei box stretti l'etichetta va su due righe e il logo resta più basso, così il box non supera i 100px. */
.partner-logo-destra{ height:32px; width:auto; max-width:100%; object-fit:contain; }
@container (min-width:250px){ .partner-logo-destra{ height:46px; } }

/* Griglia delle card delle tipologie: tutte le righe alte quanto la card più alta (grid-auto-rows:1fr), quindi card di
   righe diverse restano uguali senza riservare spazio fisso. Colonne: 2 su telefono, poi --cols-md da 768px e --cols-lg da 992px. */
.grid-tipologie{ --cols:2; display:grid; grid-template-columns:repeat(var(--cols), minmax(0, 1fr)); grid-auto-rows:1fr; gap:1rem; }
@media (min-width:768px){ .grid-tipologie{ --cols:var(--cols-md, 2); } }
@media (min-width:992px){ .grid-tipologie{ --cols:var(--cols-lg, 2); } }
.category-card.cc-lab:hover{ border-color: var(--lab); }
.category-card.cc-blue:hover{ border-color: var(--lab-blue); }
.category-card.cc-amber:hover{ border-color: var(--lab-amber); }
.category-card.cc-plum:hover{ border-color: var(--lab-plum); }
.category-card.cc-sage:hover{ border-color: var(--lab-sage); }
.category-card.cc-farma:hover{ border-color: var(--farma); }
/* Icona/illustrazione della card: leggero zoom al passaggio del mouse */
.cat-icon{ transition:transform .25s ease; }
.category-card:hover .cat-icon{ transform:scale(1.08); }
/* Freccia "Esplora →": scorre leggermente a destra in hover */
.cat-arrow{ display:inline-block; transition:transform .18s ease; }
.category-card:hover .cat-arrow{ transform:translateX(4px); }

.card-title-sm{ font-size:16px; font-weight:600; line-height:1.4; }
.card-title-md{ font-size:19px; font-weight:600; }
.product-title{ font-size:30px; line-height:1.3; }
.product-title-sm{ font-size:28px; line-height:1.3; }
.lead-desc{ font-size:15px; line-height:1.75; }
.h-section{ font-size:22px; }

/* ---------- Stat strip ---------- */
.stat-card{
  border-radius:.75rem;
  box-shadow:0 20px 44px rgba(10,18,19,.18);
  position:absolute; left:var(--page-x); right:var(--page-x); bottom:0;
  transform:translateY(50%);
  padding:32px 24px;
}
/* Numeri che compaiono con un piccolo "pop" all'apertura della pagina */
@keyframes popIn{ from{ opacity:0; transform:scale(.7); } to{ opacity:1; transform:scale(1); } }
.stat-num{ display:inline-block; animation:popIn .55s cubic-bezier(.34,1.56,.64,1) both; }
.stat-num.delay-1{ animation-delay:.05s; }
.stat-num.delay-2{ animation-delay:.15s; }
.stat-num.delay-3{ animation-delay:.25s; }
.stat-num.delay-4{ animation-delay:.35s; }
.stat-divider{ width:1px; background:var(--line); }
/* Blocco citazione: entra dal basso con un leggero fade */
@keyframes fadeInUp{ from{ opacity:0; transform:translateY(24px); } to{ opacity:1; transform:translateY(0); } }
.quote-block{ animation:fadeInUp .8s ease .15s both; max-width:880px; }
.section-quote{ padding:150px var(--page-x) 88px; }
.section-quote-lab{ background:var(--lab-soft); }
.section-quote-lab .quote-block p{ color:#2E2024; }
.section-quote-farma{ background:var(--farma-soft); }
.section-quote-farma .quote-block p{ color:#2E2410; }

/* ---------- Chips / badges ---------- */
.chip-lab{ background: var(--lab-soft); color: var(--lab-dark); font-weight:600; font-size:.75rem; border-radius:100px; padding:.3rem .75rem; }
.chip-farma{ background: var(--farma-soft); color: var(--farma-dark); font-weight:600; font-size:.75rem; border-radius:100px; padding:.3rem .75rem; }

/* ---------- Sidebar nav (category / subcategory lists) ---------- */
.side-group{ font-size:.8125rem; font-weight:700; color:var(--ink); padding:.5rem .75rem; }
.side-group.active-lab{ color: var(--lab); background: var(--lab-soft); border-radius:.375rem; }
.side-group.active-farma{ color: var(--farma); background: var(--farma-soft); border-radius:.375rem; }
.side-link{ font-size:.875rem; font-weight:500; color:#33403C; padding:.5rem .75rem .5rem 1.5rem; border-radius:.375rem; text-decoration:none; display:flex; justify-content:space-between; }
.side-link:hover{ background:#F6F8F7; }
.side-link.active-lab{ color: var(--lab); font-weight:600; background: var(--lab-soft); }
.side-link.active-farma{ color: var(--farma); font-weight:600; background: var(--farma-soft); }

/* Accordion react-bootstrap della sidebar: riporta l'aspetto leggero di .side-group / .side-link.
   Si ridefiniscono le variabili --bs-accordion-* invece di sovrascrivere ogni regola. */
.side-accordion{
  --bs-accordion-bg:transparent;
  --bs-accordion-border-width:0;
  --bs-accordion-btn-padding-x:.75rem;
  --bs-accordion-btn-padding-y:.5rem;
  --bs-accordion-body-padding-x:0;
  --bs-accordion-body-padding-y:0;
  --bs-accordion-active-bg:var(--lab-soft);
  --bs-accordion-active-color:var(--lab);
  --bs-accordion-btn-focus-box-shadow:none;
}
.side-accordion .accordion-item{ background:transparent; border:0; }
.side-accordion .accordion-button{
  font-size:.875rem; font-weight:700; color:var(--ink);
  border-radius:.375rem; box-shadow:none;
}
.side-accordion .accordion-button:not(.collapsed){ box-shadow:none; }
/* Freccia più piccola, per stare in proporzione al testo */
.side-accordion .accordion-button::after{ background-size:.75rem; width:.75rem; height:.75rem; }
/* Gruppo senza sotto-categorie: niente freccia, non c'è nulla da aprire */
.side-accordion .senza-figli .accordion-button::after{ display:none; }
/* Bordo attorno all'accordion solo sotto md (da md in su la sidebar è senza bordo).
   Classe a parte, così non cambia l'aspetto della versione farmaceutica che usa lo stesso .side-accordion */
@media (max-width: 767.98px){
  .side-accordion-bordo-mobile{ border:1px solid var(--bs-border-color); }
}
/* Variante farmaceutica: stesse variabili, colori della divisione (va dopo .side-accordion) */
.side-accordion-farma{
  --bs-accordion-active-bg:var(--farma-soft);
  --bs-accordion-active-color:var(--farma);
}

/* ---------- Product group / table ---------- */
.product-group{ border:1px solid var(--line); border-radius:.75rem; overflow:hidden; background:#fff; }
.product-group-head{ background:var(--bg-tint); border-bottom:1px solid var(--line); }
.product-group-head h3 a{ color:var(--ink); text-decoration:none; }
.product-group-head h3 a:hover{ color:var(--lab); }
.product-thumb{ width:80px; height:80px; border-radius:.5rem; background:#fff; border:1px solid var(--line); display:flex; align-items:center; justify-content:center; flex-shrink:0; color:#8A9490; font-size:.625rem; text-align:center; }

.product-table{ --bs-table-border-color:var(--line); --bs-table-hover-bg:var(--bg-tint); table-layout:fixed; }
.product-group .product-table th,
.product-group .product-table td{ padding:.75rem 1.25rem; font-size:.875rem; }
.product-group .product-table th{
  font-size:.6875rem; font-weight:600; text-transform:uppercase; letter-spacing:.06em;
  color:var(--muted); background:#fff; border-bottom:1px solid var(--line);
}
.product-table th:nth-child(1){ width:150px; }
.product-table th:nth-child(3){ width:110px; }
.product-table th:nth-child(4){ width:72px; }
.product-table td:nth-child(1){ font-weight:600; font-variant-numeric:tabular-nums; }
.product-table td:nth-child(3){ color:var(--muted); }
.product-table tbody tr:last-child td{ border-bottom:0; }
.infobtn{
  width:28px; height:28px; border-radius:100px; border:1px solid #D8DEDC; background:#fff;
  color:var(--muted); font-weight:700; font-style:italic; font-family:Georgia,serif; font-size:.8125rem;
}
.infobtn:hover{ border-color: var(--lab); color: var(--lab); background: var(--lab-soft); }

/* Mobile: miniatura del prodotto più piccola */
@media (max-width:767.98px){
  .product-thumb{ width:56px; height:56px; }
}
.spec-table th{ width:220px; }

/* ---------- Placeholder media block ---------- */
.ph-block{ background:#F6F8F7; border:1px solid var(--line); color:#8A9490; display:flex; align-items:center; justify-content:center; font-size:.8125rem; }
.media-180{ height:180px; }
.media-square-56{ width:56px; height:56px; }
.media-square-64{ width:64px; height:64px; }
.media-square-76{ width:76px; height:76px; }
.media-420{ height:420px; }
/* Immagine della pagina prodotto: riquadro quadrato, immagine intera dentro (non taglia, non sborda) */
.media-prodotto{ width:100%; aspect-ratio:1 / 1; padding:16px; overflow:hidden; }
.media-prodotto img{ max-width:100%; max-height:100%; object-fit:contain; border-radius:.5rem; }
.media-prodotto .media-prodotto-logo{ max-width:50%; opacity:.45; }
/* Variante "in alto": niente riquadro quadrato, il riquadro prende l'altezza dell'immagine che parte dall'alto (meno spazio bianco) */
.media-prodotto-alto{ aspect-ratio:auto; align-items:flex-start; }
.media-prodotto-alto img{ width:100%; height:auto; max-height:520px; }
/* Briciole di pane della pagina prodotto: una sola riga; l'ultima voce (il nome del prodotto) si accorcia con "..." */
.breadcrumb-prodotto{ flex-wrap:nowrap; }
.breadcrumb-prodotto .breadcrumb-item{ white-space:nowrap; flex-shrink:0; }
.breadcrumb-prodotto .breadcrumb-item.active{ flex-shrink:1; min-width:0; overflow:hidden; text-overflow:ellipsis; }
/* Immagine nelle card dell'elenco prodotti: altezza fissa, immagine intera dentro il riquadro */
.media-card{ height:180px; padding:8px; overflow:hidden; border:0; border-bottom:1px solid var(--line); }
/* Testo limitato a 2 righe, poi "…" */
.line-clamp-2{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
/* Riserva sempre lo spazio di 2 righe (interlinea 1.5 × 2): un nome corto non rende la card più bassa */
.item-prodotto-nome{ min-height:3em; }
.media-card img{ max-width:100%; max-height:100%; object-fit:contain; }
.media-card .media-prodotto-logo{ max-width:50%; opacity:.45; }
.media-300x200{ width:300px; height:200px; }
.media-cover-block{ width:100%; height:100%; object-fit:cover; display:block; }
.media-video-placeholder{ height:200px; background:#F6F8F7; }

/* ---------- Entry-gate split screen ---------- */
.site-header{ height:80px; box-shadow:0 2px 14px rgba(0,0,0,.10); }
.gate-row{ min-height:836px; }
.gate-panel{ position:relative; overflow:hidden; text-decoration:none; color:#fff; min-height:520px; }
.gate-panel-bg{ position:absolute; inset:0; background-size:cover; background-position:center; transition:transform .6s ease; }
.gate-panel:hover .gate-panel-bg{ transform:scale(1.07); }
/* Sfumatura di ogni foto verso il centro dello split, così le due immagini si fondono */
.gate-bg-lab{
  -webkit-mask-image:linear-gradient(to right, black 0%, black 78%, transparent 100%);
  mask-image:linear-gradient(to right, black 0%, black 78%, transparent 100%);
}
.gate-bg-farma{
  -webkit-mask-image:linear-gradient(to right, transparent 0%, black 22%, black 100%);
  mask-image:linear-gradient(to right, transparent 0%, black 22%, black 100%);
}
.gate-panel-overlay{ position:absolute; inset:0; }
.gate-panel-overlay-lab{ background:linear-gradient(0deg, rgba(30,10,18,.92) 0%, rgba(30,10,18,.5) 40%, rgba(20,8,13,.05) 68%); }
.gate-panel-overlay-farma{ background:linear-gradient(0deg, rgba(38,26,6,.92) 0%, rgba(38,26,6,.5) 40%, rgba(24,17,6,.05) 68%); }
/* Sfumatura verticale leggera in centro, sopra lo split */
.gate-center-fade{
  position:absolute; top:0; bottom:0; left:50%; transform:translateX(-50%);
  width:140px; z-index:1; pointer-events:none;
  background:linear-gradient(90deg, transparent 0%, rgba(23,16,18,.35) 50%, transparent 100%);
}
.gate-panel-content{ position:relative; z-index:1; height:100%; display:flex; flex-direction:column; justify-content:flex-end; padding:3.5rem; }
.gate-panel-content p{ max-width:400px; }
.gate-panel:hover{ color:#fff; }
.gate-panel-content .btn{ transition:transform .18s ease; }
.gate-panel:hover .gate-panel-content .btn{ transform:translateX(4px); }
.gate-chip{ font-size:.75rem; font-weight:600; padding:.3rem .75rem; border-radius:100px; color:#fff; background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.28); }
/* Larghezza fissa: la scheda non cambia dimensione tra una news e l'altra */
.gate-news-card{ width:min(620px, calc(100% - 32px)); z-index:2; border-top:4px solid var(--lab); } /* striscia colorata come .news-slide */
/* Desktop: la scheda sta sopra lo split, centrata in alto. Telefono: vedi il blocco Mobile in fondo. */
@media (min-width:768px){
  .gate-news-card{ position:absolute; top:0; left:50%; transform:translateX(-50%); margin-top:1.5rem; }
}
/* Misure ridotte del box immagine (.news-slide-media è 300x220): la regola è più specifica, quindi vince */
.news-slide-media.gate-news-thumb{ width:110px; height:80px; padding:8px; }
.gate-news-corpo{ min-width:0; } /* permette al testo di troncarsi dentro il flex */
.gate-news-titolo{
  display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden;
}
.gate-news-testo{
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}

/* Carosello della scheda news (StartLayout): pallini piccoli sotto, a destra.
   react-bootstrap scrive i pallini PRIMA delle slide: con flex li riportiamo sotto. */
#gateNewsCarousel{ display:flex; flex-direction:column; }
#gateNewsCarousel .carousel-inner{ order:0; }

/* Tutte le slide sovrapposte nella stessa cella di una griglia: il carosello
   prende l'altezza della news PIÙ LUNGA e non cambia più tra una slide e l'altra
   (le news possono avere o no il PDF, testi di una o due righe...).
   Funziona perché con "fade" le slide non attive sono solo trasparenti.
   Quelle non attive (e non in transizione) vengono anche nascoste a mouse e
   lettori di schermo, come farebbe il display:none di Bootstrap. */
#gateNewsCarousel .carousel-inner{ display:grid; }
#gateNewsCarousel .carousel-item{
  display:block; grid-area:1 / 1; float:none; margin-right:0;
}
#gateNewsCarousel .carousel-item:not(.active):not(.carousel-item-next):not(.carousel-item-prev){
  visibility:hidden;
}
#gateNewsCarousel .carousel-indicators{
  order:1; position:static; margin:10px 0 0; justify-content:flex-end;
}
#gateNewsCarousel .carousel-indicators [data-bs-target]{
  width:8px; height:8px; margin:0 3px; border:0; border-radius:50%;
  background-color:var(--lab);
}

/* ---------- Carosello news "In evidenza" (react-bootstrap) ---------- */
/* react-bootstrap scrive i pallini PRIMA delle slide: con flex li riportiamo sotto. */
#newsCarousel{ display:flex; flex-direction:column; }
#newsCarousel .carousel-inner{ order:0; }
#newsCarousel .carousel-indicators{ order:1; position:static; margin:1.5rem 0 0; }
#newsCarousel .carousel-indicators button{ background-color:var(--carosello-colore, var(--lab)); }
.carosello-farma{ --carosello-colore:var(--farma); }

/* Frecce scure e strette ai lati; le slide lasciano loro spazio */
#newsCarousel .carousel-control-prev,
#newsCarousel .carousel-control-next{ width:48px; }
#newsCarousel .carousel-control-prev-icon,
#newsCarousel .carousel-control-next-icon{ filter:invert(1) grayscale(1); }
#newsCarousel .carousel-item{ padding:0 56px; }

/* Contenuto della slide (components/SlideNews.tsx): una scheda nello stesso
   stile della modale del dettaglio (striscia colorata, immagine intera). */
.news-slide{
  --slide-colore:var(--lab);
  display:flex; align-items:stretch; gap:28px;
  padding:20px;
  background:#fff;
  border:1px solid var(--line);
  border-top:4px solid var(--slide-colore);
  border-radius:14px;
}
.news-slide-farma{ --slide-colore:var(--farma); }

/* Immagine intera (contain) su sfondo chiaro, come nella modale */
.news-slide-media{
  flex-shrink:0; width:300px; height:220px;
  display:flex; align-items:center; justify-content:center;
  padding:12px; border-radius:12px;
}
.news-slide-media img{ max-width:100%; max-height:100%; object-fit:contain; border-radius:8px; }
.news-slide-logo{ max-width:60%; opacity:.45; }
/* Il logo segnaposto resta piccolo anche dentro la scheda (la regola sopra è più specifica) */
.news-slide-media .news-slide-logo{ max-width:60%; }

.news-slide-corpo{
  min-width:0;
  display:flex; flex-direction:column; justify-content:center;
}
.news-slide-titolo{
  display:-webkit-box;
  -webkit-line-clamp:2;          /* al massimo 2 righe */
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.news-slide-testo{
  display:-webkit-box;
  -webkit-line-clamp:3;          /* al massimo 3 righe, poi "…" */
  -webkit-box-orient:vertical;
  overflow:hidden;
  white-space: pre-line;
}
.news-slide .btn-leggi{ margin-top:0; }

/* Segnale "PDF allegato" accanto a "Leggi tutto" (il link vero è nella modale) */
.news-slide-pdf{ display:inline-flex; align-items:center; gap:6px; font-size:.8125rem; }
.news-slide-pdf-icona{
  padding:1px 6px; border-radius:4px;
  color:#fff; font-size:.6875rem; font-weight:700; letter-spacing:.04em;
}

/* Mobile: immagine sopra, testo sotto; niente frecce (si scorre col dito) */
@media (max-width:768px){
  #newsCarousel .carousel-item{ padding:0; }
  #newsCarousel .carousel-control-prev,
  #newsCarousel .carousel-control-next{ display:none; }
  .news-slide{ flex-direction:column; gap:16px; padding:16px; }
  .news-slide-media{ width:100%; height:180px; }
}

/* ---------- News / featured block ---------- */
.news-block-title{ text-transform:uppercase; letter-spacing:.06em; font-size:.8125rem; font-weight:600; }
.section-featured{ background:var(--bg-tint); padding:96px var(--page-x); border-top:1px solid var(--line); }

/* ---------- "Divisione" showcase block (immagine + testo, home farma/lab) ---------- */
.division-row{ row-gap:48px; column-gap:72px; }
.offset-box{ position:absolute; top:-18px; left:-18px; width:100%; height:100%; border-radius:14px; }
.image-frame{ position:relative; height:360px; border-radius:12px; overflow:hidden; }

/* ---------- Color utilities (divisione + toni testo su sfondo scuro) ---------- */
.bg-ink{ background:var(--ink); }
.bg-tint{ background:var(--bg-tint); }
.bg-lab{ background:var(--lab); }
.bg-farma{ background:var(--farma); }
.bg-lab-soft{ background:var(--lab-soft); }
.bg-farma-soft{ background:var(--farma-soft); }
.bg-lab-blue-soft{ background:var(--lab-blue-soft); }
.bg-lab-amber-soft{ background:var(--lab-amber-soft); }
.bg-lab-plum-soft{ background:var(--lab-plum-soft); }
.bg-lab-sage-soft{ background:var(--lab-sage-soft); }

.text-lab{ color:var(--lab); }
.text-farma{ color:var(--farma); }
.text-lab-blue{ color:var(--lab-blue); }
.text-lab-amber{ color:var(--lab-amber); }
.text-lab-plum{ color:var(--lab-plum); }
.text-lab-sage{ color:var(--lab-sage); }
.text-on-dark-muted{ color:#B9C2BF; }
/* Toni chiari usati per eyebrow/testo secondario dentro le hero scure */
.text-lab-tint{ color:#EFC3D0; }
.text-lab-tint-soft{ color:#E3D2D7; }
.text-farma-tint{ color:#F0DAA5; }
.text-farma-tint-soft{ color:#EDE1CB; }

.eyebrow{ letter-spacing:.06em; }

/* ---------- Layout spacing utilities (valori fuori dalla scala di default Bootstrap) ---------- */
.px-page{ padding-left:var(--page-x); padding-right:var(--page-x); }
.p-64{ padding:64px var(--page-x); }
.py-16{ padding-top:16px; padding-bottom:16px; }
.py-20{ padding-top:20px; padding-bottom:20px; }
.py-24{ padding-top:24px; padding-bottom:24px; }
.py-48{ padding-top:48px; padding-bottom:48px; }
.py-80{ padding-top:80px; padding-bottom:80px; }
.py-96{ padding-top:96px; padding-bottom:96px; }
.pb-64{ padding-bottom:64px; }
.pb-96{ padding-bottom:96px; }
.main-offset{ margin-top:80px; } /* = altezza di .site-header (header fisso) */
.footer-legal{ padding:20px var(--page-x) 32px; }

.max-w-400{ max-width:400px; }
.max-w-560{ max-width:560px; }

/* ---------- Pagina Azienda ---------- */

/* Card dei punti di forza */
.value-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:12px;
  padding:28px;
  height:100%;
  transition:transform .2s ease, box-shadow .2s ease;
}
.value-card:hover{
  transform:translateY(-3px);
  box-shadow:0 10px 24px rgba(18,24,26,.06);
}
.value-card a {
  text-decoration: none;
}
.value-icon{
  width:48px;
  height:48px;
  border-radius:12px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-bottom:16px;
}

/* Elenco dei prodotti trattati, su due colonne (una su mobile) */
.product-list{
  list-style:none;
  padding:0;
  margin:0;
  columns:2;
  column-gap:48px;
}
.product-list li{
  break-inside:avoid;
  display:flex;
  align-items:baseline;
  gap:12px;
  padding:12px 0;
  border-bottom:1px solid var(--line);
}
.product-list li::before{
  content:"";
  flex-shrink:0;
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--product-list-colore, var(--lab)); /* di default il colore del Laboratorio */
  transform:translateY(-2px);
}
.product-list-farma{ --product-list-colore:var(--farma); }
/* Una sola colonna (per gli elenchi già affiancati a due a due) */
.product-list-una-colonna{ columns:1; }
/* Voce con sotto-voci: il titolo resta accanto al punto, l'elenco annidato va a capo e rientra */
.product-list li.con-sottovoci{ flex-wrap:wrap; }
.product-list .sottovoci{ flex-basis:100%; list-style:none; margin:4px 0 0; padding:0 0 0 18px; }
.product-list .sottovoci li{ padding:6px 0; border-bottom:0; }
.product-list .sottovoci li::before{ width:4px; height:4px; opacity:.6; }
@media (max-width:768px){
  .product-list{ columns:1; }
}
@media (prefers-reduced-motion:reduce){
  .value-card, .value-card:hover{ transition:none; transform:none; }
}

/* ---------- Bottone "Leggi tutto" (pillola nel colore della divisione) ---------- */
.btn-leggi{
  display:inline-flex; align-items:center; gap:6px;
  margin-top:8px; padding:4px 12px;
  border:0; border-radius:999px;
  font-size:.8125rem; font-weight:600; line-height:1.5;
  cursor:pointer;
  transition:filter .15s ease;
}
.btn-leggi:hover{ filter:brightness(.94); }
.btn-leggi:focus-visible{ outline:2px solid currentColor; outline-offset:2px; }
.btn-leggi-freccia{ transition:transform .15s ease; }
.btn-leggi:hover .btn-leggi-freccia{ transform:translateX(3px); }

/* ---------- Modale dettaglio news (components/ModaleNews.tsx) ---------- */
/* Striscia colorata in alto, nel colore della divisione */
.modale-news{ --modale-colore:var(--lab); }
.modale-news-farma{ --modale-colore:var(--farma); }
.modale-news .modal-content{
  border:0; border-top:4px solid var(--modale-colore);
  border-radius:14px; overflow:hidden;
}
.modale-news .modal-header{ padding:20px 24px; border-bottom:1px solid var(--line); }
.modale-news .modal-body{ padding:24px; }
.modale-news .modal-footer{ border-top:1px solid var(--line); }

/* Immagine: intera (contain, non ritagliata), su sfondo chiaro; cliccabile */
.modale-news-media{
  position:relative;
  display:flex; align-items:center; justify-content:center;
  padding:12px; border-radius:12px;
}
.modale-news-media img{
  display:block; max-width:100%; max-height:200px;
  object-fit:contain; border-radius:8px;
}
.modale-news-zoom{
  position:absolute; right:10px; bottom:10px;
  padding:3px 10px; border-radius:999px;
  background:rgba(18,24,26,.72); color:#fff; font-size:.75rem;
  opacity:0; transition:opacity .15s ease;
}
.modale-news-media:hover .modale-news-zoom,
.modale-news-media:focus-visible .modale-news-zoom{ opacity:1; }

/* Desktop: l'immagine resta ferma e visibile mentre si scorre il testo */
@media (min-width:992px){
  .modale-news-media{ position:sticky; top:0; }
  .modale-news-media img{ max-height:320px; }
}
@media (prefers-reduced-motion:reduce){
  .btn-leggi, .btn-leggi-freccia, .modale-news-zoom{ transition:none; }
}
/* pre-line: gli "a capo" scritti nel gestionale restano a capo anche qui */
.modale-news-testo{ white-space:pre-line; line-height:1.7; }

/* Riquadro del PDF allegato: tutto cliccabile */
.modale-news-allegato{
  display:flex; align-items:center; gap:14px;
  padding:14px 16px; border-radius:12px;
  text-decoration:none;
  transition:filter .15s ease;
}
.modale-news-allegato:hover{ filter:brightness(.97); }
.modale-news-allegato-icona{
  flex-shrink:0; width:44px; height:44px; border-radius:10px;
  display:inline-flex; align-items:center; justify-content:center;
  color:#fff; font-size:.75rem; font-weight:700; letter-spacing:.04em;
}

/* ==========================================================================
   Mobile
   I margini laterali sono in --page-x (tokens.css). Qui: navbar, barra in alto,
   hero, statistiche, citazione e spaziature verticali sotto i 768px.
   ========================================================================== */

/* Sotto i 992px la navbar è "collassata": l'altezza fissa di 96px taglierebbe il menu aperto */
@media (max-width:991.98px){
  .navbar-lab, .navbar-farma{ height:auto; min-height:72px; }
  .navbar-lab .navbar-collapse, .navbar-farma .navbar-collapse{ padding:12px 0 16px; }
}

@media (max-width:768px){
  /* Barra in alto: i contatti restano nel footer, qui basta il cambio divisione */
  .utility-bar{ height:auto; min-height:36px; font-size:.75rem; }

  /* Hero: meno aria sopra e un titolo che non occupi mezzo schermo */
  .hero-full{ padding-top:64px; padding-bottom:130px; }
  .hero-title{ font-size:2rem; line-height:1.2; }

  /* Statistiche: due per riga, senza i divisori verticali */
  .stat-card{ padding:20px 8px; }
  .stat-card > div:not(.stat-divider){ flex:0 0 50%; padding:8px 4px; }
  .stat-divider{ display:none; }

  /* Citazione: spazio sopra per la scheda delle statistiche, testo più piccolo */
  .section-quote{ padding-top:150px; padding-bottom:56px; }
  .quote-block p{ font-size:1.15rem; }

  /* Spaziature verticali ridotte */
  .py-96{ padding-top:56px; padding-bottom:56px; }
  .py-80{ padding-top:48px; padding-bottom:48px; }
  .py-48{ padding-top:32px; padding-bottom:32px; }
  .pb-96{ padding-bottom:56px; }
  .section-featured{ padding-top:56px; padding-bottom:56px; }
  .p-64{ padding-top:40px; padding-bottom:40px; }

  /* Immagine della sezione "Divisione": più bassa, e il riquadro colorato non esce dallo schermo */
  .image-frame{ height:240px; }
  .offset-box{ top:-10px; left:-10px; }
}

/* Pagina iniziale (scelta della divisione): su telefono i due pannelli sono impilati */
@media (max-width:767.98px){
  /* La scheda news sta sopra i pannelli, nel flusso della pagina, e non copre più il testo */
  .gate-news-card{ order:-1; margin:16px auto; }
  .gate-row{ min-height:0; }
  .gate-panel{ min-height:460px; }
  .gate-panel-content{ padding:1.5rem; }
  /* Sfumature pensate per lo split affiancato: impilati non servono */
  .gate-bg-lab, .gate-bg-farma{ -webkit-mask-image:none; mask-image:none; }
  .gate-center-fade{ display:none; }
}

/* Telefono: logo un po' più piccolo, per stare accanto alla scritta "DIVISIONE ..." e al pulsante del menu */
@media (max-width:768px){
  .logo-nav{ height:32px; }
  .logo-header{ height:34px; }
  /* Scritta "DIVISIONE ..." accanto al logo: più compatta, così il pulsante del menu resta sulla stessa riga */
  .navbar-lab .border-start, .navbar-farma .border-start{ font-size:.6875rem; padding-left:.5rem !important; }
}

/* Copertina di un PDF (cataloghi): proporzioni A4, ombra leggera */
.copertina-pdf{ width:150px; flex-shrink:0; height:auto; border:1px solid var(--line); border-radius:.375rem; box-shadow:0 6px 18px rgba(0,0,0,.18); }

/* ==========================================================================
   Pagina iniziale (StartLayout) SOLO TELEFONO E TABLET PICCOLO (fino a 767px): una schermata sola.
   Header basso, i due pannelli si dividono l'altezza disponibile (si vede subito che
   c'è da scegliere tra due divisioni), la news è una striscia sotto i pannelli e
   i contatti stanno nel footer. Da 768px in su valgono le regole di prima.
   ========================================================================== */
@media (max-width:767.98px){
  /* Header: solo il logo, più basso (il contenuto parte sotto: main-offset segue) */
  .site-header{ height:56px; padding:0 !important; display:flex; align-items:center; }
  .site-header .logo-header{ height:28px; }
  .main-offset{ margin-top:56px; }

  /* Il main occupa lo spazio tra header e footer; la riga dei pannelli lo riempie */
  .gate-main{ display:flex; flex-direction:column; }
  .gate-row{ flex:1; flex-direction:column; flex-wrap:nowrap; min-height:0; }

  /* Due pannelli di pari altezza, divisi da una linea bianca */
  .gate-row > .col-md-6{ flex:1 1 0; min-height:0; display:flex; }
  .gate-row > .col-md-6 + .col-md-6{ border-top:3px solid #fff; }
  .gate-panel{ flex:1; min-height:230px; }
  .gate-panel-content{ padding:1rem 1.25rem 1.1rem; }

  /* Testi più compatti: titolo, descrizione su tre righe al massimo, pulsante piccolo */
  .gate-panel-content h2{ font-size:1.5rem !important; margin-bottom:.35rem !important; }
  .gate-panel-content p{
    max-width:none; font-size:.9rem; line-height:1.35; margin-bottom:.75rem !important;
    display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
  }
  .gate-chips{ display:none !important; } /* le tipologie si vedono già dentro la divisione */
  .gate-panel-content .btn{ padding:.45rem 1rem; font-size:.9rem; }

  .gate-news-card{ order:3; } /* sotto i pannelli (colonna); la striscia è definita nel blocco fino a 991px */

  /* Footer: contatti cliccabili (nell'header su telefono non ci sono) */
  .gate-contatti{ font-size:.85rem; line-height:1.7; }
  .gate-contatti a{ color:inherit; }
  .site-footer-start small{ font-size:.7rem; line-height:1.4; }
}

/* ==========================================================================
   Pagina iniziale — striscia news (fino a 991px) e altezza legata allo schermo (da 768px)
   ========================================================================== */
@media (max-width:991.98px){
/* News: striscia a tutta larghezza sotto i pannelli, senza miniatura né testo (telefono e tablet) */

.gate-news-card{

  width:100%; margin:0 !important; border-radius:0 !important;

  box-shadow:0 -4px 14px rgba(0,0,0,.08) !important; padding:10px 16px !important; border-top-width:3px;

}

.gate-news-thumb, .gate-news-card .news-slide-media{ display:none; }

.gate-news-testo{ display:none; }

.gate-news-corpo{ flex:1; display:grid; grid-template-columns:minmax(0,1fr) auto; column-gap:12px; align-items:center; }

.gate-news-corpo > :nth-child(1), .gate-news-corpo > :nth-child(2){ grid-column:1; }

.gate-news-corpo > button{ grid-column:2; grid-row:1 / span 2; margin-top:0; }

.gate-news-titolo{ margin-bottom:0 !important; }

#gateNewsCarousel .carousel-indicators{ margin:6px 0 0; justify-content:center; }

}

/* Da 768px: il blocco dei pannelli riempie lo spazio tra header e footer, così il pulsante
   resta sempre visibile (prima l'altezza era fissa a 836px: sui portatili finiva sotto la piega) */
@media (min-width:768px){
  .gate-main{ display:flex; flex-direction:column; }
  .gate-row{ flex:1; min-height:560px; }
  .gate-row > .col-md-6{ display:flex; }
  .gate-panel{ flex:1; }
}

/* Tablet in verticale (768-991px): pannelli affiancati, news in striscia sotto (non copre più le foto) */
@media (min-width:768px) and (max-width:991.98px){
  .gate-row{ display:grid; grid-template-columns:1fr 1fr; grid-template-rows:1fr auto; }
  .gate-row > .col-md-6{ grid-row:1; width:auto; max-width:none; }
  .gate-news-card{ position:static; transform:none; grid-column:1 / -1; grid-row:2; }
  .gate-panel-content{ padding:2rem; }
  .gate-panel-content h2{ font-size:1.6rem !important; }
  /* Altezze riservate: i testi dei due pannelli partono alla stessa quota anche se più o meno lunghi */
  .gate-panel-content p{ font-size:.9rem; line-height:1.4; min-height:calc(1.4em * 3);
    display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
  .gate-chips{ min-height:4.3rem; align-content:flex-start; }
}