/* ==========================================================
   GRUPPO BERTONI — componenti "su misura" usati nei pattern.
   I colori/font di base vivono in theme.json (così sono
   modificabili dall'editor); qui solo ciò che i blocchi
   nativi non possono fare: animazioni, layout speciali.
   ========================================================== */

/* Barra a strisce (richiamo cartellonistica di sicurezza) */
.gb-stripe-bar{ height:6px; width:100%; display:flex; }
.gb-stripe-bar span{ flex:1; }
.gb-stripe-bar span:nth-child(1){ background:#514F4F; }
.gb-stripe-bar span:nth-child(2){ background:#B80F0A; flex:0.5; }
.gb-stripe-bar span:nth-child(3){ background:#E0DFDB; }
.gb-stripe-bar span:nth-child(4){ background:#A6A6A6; flex:0.4; }
.gb-stripe-bar span:nth-child(5){ background:#B80F0A; flex:0.3; }
.gb-stripe-bar span:nth-child(6){ background:#514F4F; }

/* Eyebrow (etichetta piccola sopra i titoli) */
.gb-eyebrow{
  font-family:'IBM Plex Mono',monospace; font-size:12.5px; font-weight:500;
  letter-spacing:0.14em; text-transform:uppercase; color:#B80F0A;
  display:flex; align-items:center; gap:10px; margin-bottom:4px;
}
.gb-eyebrow::before{ content:""; width:22px; height:2px; background:#B80F0A; display:inline-block; flex:0 0 auto; }
.gb-eyebrow.gb-center{ justify-content:center; }
.gb-eyebrow.gb-center::before{ display:none; }
.gb-eyebrow.gb-on-dark{ color:#e7938f; }

/* Striscia di riferimenti normativi nell'hero */
.gb-code-strip{
  display:flex; gap:20px; flex-wrap:wrap; font-family:'IBM Plex Mono',monospace;
  font-size:12.5px; color:#514F4F; border-top:1px solid rgba(81,79,79,0.18); padding-top:20px; margin-top:8px;
}
.gb-code-strip span{ display:inline-flex; align-items:center; gap:7px; }
.gb-code-strip span::before{ content:""; width:5px; height:5px; background:#B80F0A; border-radius:50%; }

/* Numero di pilastro / etichetta tecnica */
.gb-eyebrow-num{
  font-family:'IBM Plex Mono',monospace; font-size:12.5px; color:#A6A6A6;
  letter-spacing:0.1em; display:block; margin-bottom:6px;
}

/* Tag piccolo (es. "D.Lgs. 81/08") accanto ai titoli di servizio */
.gb-tag{
  font-family:'IBM Plex Mono',monospace; font-weight:500; font-size:11px; color:#B80F0A;
  border:1px solid #B80F0A; padding:2px 7px; letter-spacing:0.06em; display:inline-block;
  vertical-align:middle; margin-left:8px;
}

/* Chip (Ingegneri / Architetti / Periti...) */
.gb-chip{
  font-family:'IBM Plex Mono',monospace; font-size:12.5px; letter-spacing:0.04em; color:#2B2A29;
  background:#FFFFFF; border:1px solid rgba(81,79,79,0.18); padding:9px 14px; display:inline-block;
}

/* Card pilastro: bordo superiore rosso + hover sollevato */
.gb-pillar-card{
  border:1px solid rgba(81,79,79,0.18); position:relative; background:#FFFFFF;
  transition:box-shadow .25s ease, transform .25s ease, border-color .25s ease;
}
.gb-pillar-card:hover{ box-shadow:0 12px 32px rgba(43,42,41,0.10); transform:translateY(-4px); border-color:transparent; }
.gb-pillar-card::before{ content:""; position:absolute; top:0; left:0; width:100%; height:3px; background:#B80F0A; }

/* Etichetta separatore fra gruppi di servizi */
.gb-pillar-tab-label{
  font-family:'IBM Plex Mono',monospace; font-size:12px; letter-spacing:0.12em; color:#A6A6A6;
  text-transform:uppercase; display:flex; align-items:center; gap:14px; width:100%;
}
.gb-pillar-tab-label::after{ content:""; flex:1; height:1px; background:rgba(81,79,79,0.18); }

/* Lista indice servizi con pallino */
.gb-idx-list li{ position:relative; padding-left:16px !important; }
.gb-idx-list li::before{
  content:""; position:absolute; left:0; top:0.6em; width:5px; height:5px; background:#A6A6A6; border-radius:50%;
}

/* =========================================================
   FIGURA DIGITALE ANIMATA (hero)
   Blocco "HTML personalizzato" — unico elemento non
   restilizzabile visivamente dall'editor.
   ========================================================= */
.gb-figure-stage{ position:relative; display:flex; align-items:center; justify-content:center; aspect-ratio:1/1; max-width:460px; margin:0 auto; cursor:pointer; }
.gb-figure-stage .gb-glow{ position:absolute; width:78%; height:78%; border-radius:50%; background:radial-gradient(circle, rgba(184,15,10,0.14) 0%, rgba(184,15,10,0) 70%); }
.gb-ring-outer, .gb-ring-inner{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); border-radius:50%; border:1px dashed rgba(81,79,79,0.35); }
.gb-ring-outer{ width:88%; height:88%; animation:gb-spin 42s linear infinite; }
.gb-ring-inner{ width:66%; height:66%; border-color:rgba(184,15,10,0.3); animation:gb-spin-rev 30s linear infinite; }
.gb-figure-stage.gb-active .gb-ring-outer{ animation-duration:10s; }
.gb-figure-stage.gb-active .gb-ring-inner{ animation-duration:7s; }
@keyframes gb-spin{ from{ transform:translate(-50%,-50%) rotate(0deg); } to{ transform:translate(-50%,-50%) rotate(360deg); } }
@keyframes gb-spin-rev{ from{ transform:translate(-50%,-50%) rotate(360deg); } to{ transform:translate(-50%,-50%) rotate(0deg); } }
.gb-figure-stage svg{ position:relative; z-index:2; width:74%; height:74%; animation:gb-float 4.5s ease-in-out infinite; }
@keyframes gb-float{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-7px); } }
.gb-node{ fill:#B80F0A; }
.gb-node.gb-alt{ fill:#514F4F; }
.gb-link-line{ stroke:rgba(81,79,79,0.55); stroke-width:1; }
.gb-pulse{ animation:gb-pulse 3.4s ease-in-out infinite; }
@keyframes gb-pulse{ 0%,100%{ opacity:1; } 50%{ opacity:0.35; } }
.gb-figure-stage.gb-active .gb-pulse{ animation-duration:1s; }
.gb-orbit-dot{ fill:#B80F0A; }
.gb-orbit-group{ animation:gb-spin 18s linear infinite; transform-origin:100px 100px; }
.gb-figure-stage.gb-active .gb-orbit-group{ animation-duration:5s; }
.gb-arm-left{ transform-origin:72px 80px; }
.gb-arm-right{ transform-origin:128px 80px; }
.gb-figure-stage.gb-active .gb-arm-left{ animation:gb-wave 1.1s ease-in-out infinite; }
.gb-figure-stage.gb-active .gb-arm-right{ animation:gb-wave-r 1.1s ease-in-out infinite; }
@keyframes gb-wave{ 0%,100%{ transform:rotate(0deg); } 50%{ transform:rotate(-14deg); } }
@keyframes gb-wave-r{ 0%,100%{ transform:rotate(0deg); } 50%{ transform:rotate(14deg); } }

/* Anelli concentrici (sezione Sostenibilità) */
.gb-rings-visual{ position:relative; aspect-ratio:1/1; max-width:380px; margin:0 auto; display:flex; align-items:center; justify-content:center; }
.gb-rings-visual svg{ width:100%; height:100%; }

@media (prefers-reduced-motion: reduce){
  .gb-ring-outer,.gb-ring-inner,.gb-orbit-group,.gb-pulse,.gb-figure-stage svg,.gb-arm-left,.gb-arm-right{ animation:none; }
}

/* =========================================================
   BANNER LOGHI SCORREVOLE (blocchi Immagine nativi dentro
   un Group con questa classe: il loop è puro CSS)
   ========================================================= */
.gb-marquee{ width:100%; overflow:hidden; -webkit-mask-image:linear-gradient(90deg, transparent, black 8%, black 92%, transparent); mask-image:linear-gradient(90deg, transparent, black 8%, black 92%, transparent); }
.gb-marquee .wp-block-group{ animation:gb-marquee-scroll 32s linear infinite; width:max-content !important; flex-wrap:nowrap !important; }
.gb-marquee:hover .wp-block-group{ animation-play-state:paused; }
@keyframes gb-marquee-scroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
.gb-marquee figure.wp-block-image{ flex:0 0 auto; width:150px; height:78px; display:flex; align-items:center; justify-content:center; margin:0; border:1px dashed rgba(81,79,79,0.18); padding:10px; }
.gb-marquee figure.wp-block-image img{ max-width:100%; max-height:100%; object-fit:contain; width:auto; height:auto; }
@media (prefers-reduced-motion: reduce){ .gb-marquee .wp-block-group{ animation:none; } }

/* =========================================================
   ZONA OPERATIVA — mappa stilizzata con pallini provincia
   ========================================================= */
.gb-map-visual{
  aspect-ratio:1/1; border:1px solid rgba(81,79,79,0.18); position:relative;
  background:
    linear-gradient(rgba(81,79,79,0.06) 1px, transparent 1px) 0 0/28px 28px,
    linear-gradient(90deg, rgba(81,79,79,0.06) 1px, transparent 1px) 0 0/28px 28px,
    #E0DFDB;
}
.gb-map-dot{ position:absolute; width:11px; height:11px; background:#B80F0A; border-radius:50%; box-shadow:0 0 0 6px rgba(184,15,10,0.15); }
.gb-map-dot span{ position:absolute; top:-24px; left:50%; transform:translateX(-50%); font-family:'IBM Plex Mono',monospace; font-size:10.5px; white-space:nowrap; color:#2B2A29; }

/* Griglia leggera di sfondo nell'hero */
.gb-hero-grid-bg{
  position:relative;
}
.gb-hero-grid-bg::before{
  content:""; position:absolute; inset:0; z-index:0;
  background-image:
    linear-gradient(rgba(81,79,79,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(81,79,79,0.05) 1px, transparent 1px);
  background-size:44px 44px;
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 70% 40%, black, transparent);
  mask-image:radial-gradient(ellipse 70% 60% at 70% 40%, black, transparent);
  pointer-events:none;
}
.gb-hero-grid-bg > .wp-block-group{ position:relative; z-index:1; }

/* Sfondo puntinato leggero riusabile su altre section (ambiente/team) */
.gb-dot-bg{ background-image:radial-gradient(rgba(81,79,79,0.14) 1px, transparent 1px); background-size:16px 16px; }

/* Utility: ombra leggera sul testo dei titoli display (stile logo brand) */
.gb-text-shadow{ text-shadow:2px 2px 0 rgba(184,15,10,0.12); }

/* Logo nel footer (sfondo scuro): lo rende bianco automaticamente */
.gb-footer-logo img{ filter:brightness(0) invert(1); }

/* Social Icons block: adattato ai colori brand su sfondo scuro */
.gb-social-dark .wp-social-link{ background:transparent !important; border:1px solid rgba(255,255,255,0.25) !important; }
.gb-social-dark .wp-social-link svg{ fill:#E0DFDB !important; }
.gb-social-dark .wp-social-link:hover{ border-color:#ff6b63 !important; }
.gb-social-dark .wp-social-link:hover svg{ fill:#ff6b63 !important; }