/* ===========================================================
   MGR Group — gvm-grid.css
   Sistema a griglia + reveal/parallax con le stesse classi del
   riferimento fornito dal cliente (container/row/gr-N@md/prefix-N@md,
   js-reveal, inner-img/js-parallax, card--marble, abstract-top...).
   Caricato SOLO sulla pagina Tecnologie (vedi functions.php),
   non tocca il resto del sito.
   =========================================================== */

.page-tecnologie .container{width:100%;max-width:none;margin:0;padding:0;box-sizing:border-box;}
.page-tecnologie .clear-fix::after{content:"";display:table;clear:both;}
.page-tecnologie .row{display:flex;flex-wrap:wrap;margin:0 -20px;}
.page-tecnologie .row.border-left-1_grey-lighter{border-left:1px solid var(--grey-light);}

/* Griglia 12 colonne: mobile-first (gr-N piena larghezza fino a @md) */
.page-tecnologie [class*="gr-"]{padding:0 20px;box-sizing:border-box;width:100%;}
.page-tecnologie .gr-1{width:8.3333%;} .page-tecnologie .gr-2{width:16.6667%;}
.page-tecnologie .gr-3{width:25%;} .page-tecnologie .gr-4{width:33.3333%;}
.page-tecnologie .gr-5{width:41.6667%;} .page-tecnologie .gr-6{width:50%;}
.page-tecnologie .gr-7{width:58.3333%;} .page-tecnologie .gr-8{width:66.6667%;}
.page-tecnologie .gr-9{width:75%;} .page-tecnologie .gr-10{width:83.3333%;}
.page-tecnologie .gr-11{width:91.6667%;} .page-tecnologie .gr-12{width:100%;}

@media(min-width:960px){
	.page-tecnologie .gr-1\@md{width:8.3333%;} .page-tecnologie .gr-2\@md{width:16.6667%;}
	.page-tecnologie .gr-3\@md{width:25%;} .page-tecnologie .gr-4\@md{width:33.3333%;}
	.page-tecnologie .gr-5\@md{width:41.6667%;} .page-tecnologie .gr-6\@md{width:50%;}
	.page-tecnologie .gr-7\@md{width:58.3333%;} .page-tecnologie .gr-8\@md{width:66.6667%;}
	.page-tecnologie .gr-9\@md{width:75%;} .page-tecnologie .gr-10\@md{width:83.3333%;}
	.page-tecnologie .gr-11\@md{width:91.6667%;} .page-tecnologie .gr-12\@md{width:100%;}
	.page-tecnologie .prefix-1\@md{margin-left:8.3333%;} .page-tecnologie .prefix-2\@md{margin-left:16.6667%;}
	.page-tecnologie .prefix-3\@md{margin-left:25%;}
	.page-tecnologie .display-none.display-block\@md{display:block;}
	.page-tecnologie .margin-top-0\@md{margin-top:0;}
	.page-tecnologie .margin-top-4\@md{margin-top:48px;}
	.page-tecnologie .padding-top-5\@md{padding-top:120px;}
	.page-tecnologie .padding-bottom-5\@md{padding-bottom:120px;}
	.page-tecnologie .padding-top-3\@md{padding-top:80px;}
	.page-tecnologie .padding-bottom-3\@md{padding-bottom:80px;}
}
@media(max-width:959px){
	.page-tecnologie .display-none{display:none;}
	.page-tecnologie .aspect-ratio-1-1-mobile{aspect-ratio:1/1 !important;}
}

.page-tecnologie .margin-top-1{margin-top:16px;} .page-tecnologie .margin-top-2{margin-top:32px;}
.page-tecnologie .margin-bottom-3{margin-bottom:40px;}
.page-tecnologie .padding-top-1{padding-top:40px;} .page-tecnologie .padding-bottom-1{padding-bottom:40px;}
.page-tecnologie .padding-top-2{padding-top:60px;}
.page-tecnologie .padding-top-5{padding-top:60px;}

/* Sezioni */
.page-tecnologie .section{position:relative;}
.page-tecnologie h5.text-uppercase{font-size:clamp(19px,2.2vw,26px);font-weight:500;line-height:1.4;letter-spacing:-.005em;color:var(--dark);}
.page-tecnologie .letter-spacing-3{letter-spacing:.03em;}
.page-tecnologie .letter-spacing-16{letter-spacing:.12em;}
.page-tecnologie .text-uppercase{text-transform:uppercase;}
.page-tecnologie .color-grey{color:var(--accent-grey);}
.page-tecnologie .color-white{color:#fff;}
.page-tecnologie .font-secondary{font-family:'Montserrat',Arial,sans-serif;}
.page-tecnologie .small{font-size:14.5px;line-height:1.7;}
.page-tecnologie .h3{font-size:clamp(30px,4.4vw,52px);font-weight:600;letter-spacing:-.01em;line-height:1.1;}
.page-tecnologie .line{background:var(--grey-mid);}
.page-tecnologie .line--horizontal{width:100%;height:1px;margin-top:12px;}
.page-tecnologie .line--vertical{width:1px;height:16px;display:inline-block;}

/* Reveal on scroll (clip-path / from-bottom).
   Stato di default = contenuto VISIBILE (nessuna dipendenza dal JS): lo stato
   "nascosto pre-animazione" viene applicato dal JS stesso via classe .js-armed
   solo dopo essersi confermato attivo. Così, se per qualsiasi motivo lo script
   non parte o non fa in tempo (es. dentro l'editor Elementor), il contenuto
   resta comunque visibile invece di restare bloccato a larghezza/opacità zero. */
.page-tecnologie .js-reveal[data-reveal="from-bottom"].js-armed{opacity:0;transform:translateY(36px);transition:opacity .8s ease,transform .8s ease;}
.page-tecnologie .js-reveal[data-reveal="from-bottom"].js-armed.in-view{opacity:1;transform:translateY(0);}
.page-tecnologie .js-reveal[data-reveal="clip-path"].js-armed{clip-path:polygon(0 0,0 0,0 100%,0 100%);transition:clip-path 1.1s cubic-bezier(.16,1,.3,1);}
.page-tecnologie .js-reveal[data-reveal="clip-path"].js-armed.in-view{clip-path:polygon(0 0,100% 0,100% 100%,0 100%);}

/* Immagini con parallax (inner-img / inner-img__el / js-parallax) */
.page-tecnologie .inner-img{position:relative;overflow:hidden;background:var(--grey-light);}
.page-tecnologie .inner-img__el{position:absolute;top:-12%;left:-6%;width:112%;height:124%;background-size:cover;background-position:center;will-change:transform;}
.page-tecnologie .aspect-ratio-4-3{aspect-ratio:4/3;}
.page-tecnologie .aspect-ratio-16-9{aspect-ratio:16/9;}
.page-tecnologie .aspect-ratio-9-12{aspect-ratio:9/12;}
.page-tecnologie .aspect-ratio-1-1{aspect-ratio:1/1;}

/* Hero abstract-top */
.page-tecnologie .abstract-top{position:relative;overflow:hidden;background:var(--dark);}
/* Azzera padding/margin che Elementor mette di default sul wrapper del widget Hero */
.page-tecnologie .elementor-widget-mgr-group-tecnologie-hero,
.page-tecnologie .elementor-widget-mgr-group-tecnologie-hero > .elementor-widget-container{padding:0 !important;margin:0 !important;}

.page-tecnologie .abstract-top.height-100vh{width:100%;height:100vh;height:100dvh;min-height:600px;}
@media(max-width:700px){
  /* Su mobile il testo è centrato (non ancorato in basso come le altre hero del
     sito): a schermo intero lascia troppo spazio vuoto sopra/sotto un titolo
     breve. Altezza ridotta, più proporzionata al contenuto. */
  .page-tecnologie .abstract-top.height-100vh{height:75vh;height:75dvh;min-height:480px;}
  /* Fix diretto e a prova di conflitto: il testo hero non dipende più dalla
     catena container(0) + row(-20px) + gr-N(+20px) — margine negativo azzerato
     e padding messo qui, una volta sola, sull'elemento giusto. */
  .page-tecnologie .abstract-top .row{margin-left:0;margin-right:0;}
  .page-tecnologie .abstract-top [class*="gr-"]{padding-left:0!important;padding-right:0!important;}
  .page-tecnologie .abstract-top__title,
  .page-tecnologie .abstract-top__excerpt{
    padding-left:20px!important;
    padding-right:20px!important;
  }
}
/* Hero: reveal dal basso verso l'alto (non da sinistra come il resto dei blocchi clip-path) */
.page-tecnologie .abstract-top.js-reveal[data-reveal="clip-path"].js-armed{clip-path:polygon(0 100%,100% 100%,100% 100%,0 100%);}
.page-tecnologie .abstract-top.js-reveal[data-reveal="clip-path"].js-armed.in-view{clip-path:polygon(0 0,100% 0,100% 100%,0 100%);}
.page-tecnologie .abstract-top::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.72);z-index:1;}
.page-tecnologie .abstract-top__thumbnail{position:absolute;inset:0;margin:0;}
.page-tecnologie .abstract-top__thumbnail img{width:100%;height:100%;object-fit:cover;display:block;}
.page-tecnologie .abstract-top__details{position:relative;z-index:2;height:100%;color:#fff;}
.page-tecnologie .centered-vertical.full-width{position:absolute;top:calc(50% + 58px);left:0;right:0;transform:translateY(-50%);}
.page-tecnologie .abstract-top__title{color:#fff;margin:0;}
.page-tecnologie .abstract-top__excerpt{color:rgba(255,255,255,.82);margin-top:18px;}

/* Card marble */
.page-tecnologie .card--marble{display:block;}
.page-tecnologie .card--marble a{display:block;color:inherit;}
.page-tecnologie .card--marble .media{position:relative;overflow:hidden;aspect-ratio:1/1;}
.page-tecnologie .card--marble .media__img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s ease;}
.page-tecnologie .card--marble:hover .media__img{transform:scale(1.06);}
.page-tecnologie .card__details{position:absolute;inset:0;display:flex;align-items:flex-end;padding:24px;background:linear-gradient(180deg,rgba(0,0,0,0) 55%,rgba(0,0,0,.55) 100%);}
.page-tecnologie .card__details__body h6{color:#fff;font-size:14px;font-weight:600;margin:0;}
.page-tecnologie .card__footer{display:flex;align-items:center;justify-content:space-between;padding:20px 4px;}
.page-tecnologie .card__title{color:var(--dark);font-weight:600;}
.page-tecnologie .card__discover{display:flex;align-items:center;gap:10px;color:var(--blue);}
.page-tecnologie .card__discover strong{font-weight:600;}
@media(max-width:700px){.page-tecnologie .gr-card--marble{width:100%;}.page-tecnologie .centered-vertical.full-width{top:calc(50% + 35px);}}

/* Form finale: allinea gli spazi laterali con la sezione container/prefix soprastante */
.page-tecnologie .mg-inquiry .mg-wrap{max-width:none;margin:0;padding:0 20px;}
.page-tecnologie .mg-inquiry .mg-offset{padding-left:0;}
.page-tecnologie .mg-inquiry-grid{margin-left:8.3333%;margin-right:8.3333%;}
@media(max-width:900px){
  .page-tecnologie .mg-inquiry-grid{margin-left:0;margin-right:0;}
}